/* =============================================================
 * Minimog Child — Mini cart (fly-cart drawer)
 *
 * A cart drawer has one job: get the shopper to checkout. So the
 * money and the checkout button are a fixed floor that is always
 * on screen, and everything else scrolls behind them.
 *
 * What this changes, in order of how much it was costing:
 *
 *   1. The footer could be pushed below the fold. Note / Shipping /
 *      Coupon were three full-height icon buttons stacked above the
 *      totals, so on a short viewport with two items in the cart the
 *      checkout button was off screen. They are one quiet row of
 *      text chips now, and the footer is pinned.
 *   2. The thumbnail was 112px in a 450px panel — a quarter of the
 *      drawer was photograph and barely two rows fit before
 *      scrolling. 64px shows the same product just as recognisably.
 *   3. "Remove" was an underlined text link beside the quantity
 *      stepper, giving a destructive action the same weight as the
 *      main control. It is a quiet icon now, and it comes forward
 *      on hover and on keyboard focus.
 *   4. Nothing used the brand palette, so the drawer read as a
 *      different site than the header it opens from. Checkout is
 *      brand green, matching every other primary action.
 *
 * Scoped under .popup-fly-cart so none of it leaks to the main cart
 * page, which has its own layout and much more room to work with.
 * ============================================================= */

.popup-fly-cart {
	--bsp-mc-pad: 22px;
	--bsp-mc-radius: 10px;
	--bsp-mc-ease: cubic-bezier(.2, .75, .5, 1);
}

/* A touch wider than the parent's 450px. The extra room goes to the
 * product name, which is what wraps to three lines otherwise. */
.popup-fly-cart > .inner {
	width: 476px;
}

/* -------------------------------------------------------------
 * Shell — header / scrolling body / pinned footer
 * ----------------------------------------------------------- */
/* The parent lets the body grow and the footer ride below it, which
 * is what allowed checkout to be pushed off screen. min-height:0 is
 * the part that actually matters: without it a flex child refuses to
 * shrink past its content and the body never scrolls. */
.popup-fly-cart .fly-cart-content {
	height: 100%;
	min-height: 0;
}

.popup-fly-cart .fly-cart-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 var(--bsp-mc-pad);
}

.popup-fly-cart .fly-cart-header {
	flex: 0 0 auto;
	padding: 22px var(--bsp-mc-pad) 18px;
	border-bottom: 1px solid var(--bsp-line, #E6E6ED);
}

.popup-fly-cart .fly-cart-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bsp-ink, #1A1A2E);
}

/* The close control sits on the header rule rather than floating
 * over the first product row. */
.popup-fly-cart .btn-close-fly-cart {
	top: 14px;
	right: 12px;
	height: 36px;
	width: 36px;
	border-radius: 8px;
	font-size: 19px;
	color: var(--bsp-muted, #6B7280);
	transition:
		background-color .2s var(--bsp-mc-ease),
		color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .btn-close-fly-cart:hover,
.popup-fly-cart .btn-close-fly-cart:focus-visible {
	background-color: #F4F1F8;
	color: var(--bsp-ink, #1A1A2E);
}

/* -------------------------------------------------------------
 * Product rows
 * ----------------------------------------------------------- */
.popup-fly-cart .cart_list.product_list_widget li {
	position: relative;
	align-items: flex-start;
	min-height: 0;
	padding: 16px 0;
}

/* A rule between rows rather than a 22px gap: it separates the items
 * in half the vertical space, so more of the cart is visible at once.
 * The parent sets that margin with !important, so this has to match. */
.popup-fly-cart .cart_list.product_list_widget li + li {
	margin-top: 0 !important;
	border-top: 1px solid var(--bsp-line, #E6E6ED);
}

.popup-fly-cart .cart_list.product_list_widget .product-thumbnail {
	width: 64px;
	margin-right: 14px;
	border-radius: 8px;
	border-color: var(--bsp-line, #E6E6ED);
	background-color: #FAFAFC;
}

.popup-fly-cart .cart_list.product_list_widget .product-info {
	/* Lets the name truncate instead of forcing the row wider than
	 * the drawer. */
	min-width: 0;
	/* Room for the remove button pinned to the top right. */
	padding-right: 30px;
}

.popup-fly-cart .cart_list.product_list_widget .product-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 3px;
}

/* The theme underlines links inside the cart list. On a product name
 * that wraps to two lines that reads as a block of underlined text
 * rather than as a title. */
.popup-fly-cart .cart_list.product_list_widget .product-name a {
	color: var(--bsp-ink, #1A1A2E);
	text-decoration: none;
	transition: color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .cart_list.product_list_widget .product-name a:hover,
.popup-fly-cart .cart_list.product_list_widget .product-name a:focus-visible {
	color: var(--bsp-purple, #8022DB);
	text-decoration: none;
}

/* Unit price is reference information while scanning the cart — the
 * line total in the footer is the number that matters — so it stays
 * quiet and lets the product name lead. */
.popup-fly-cart .cart_list.product_list_widget .product-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--bsp-muted, #6B7280);
	line-height: 1.4;
}

/* The theme colours every .amount from its own heading colour, set
 * site-wide from the customizer — that is where the blue came from.
 * It is a plain `.price, .amount { color: ... }` rule, but it loads
 * after this file, so the brand colour has to be forced. Same
 * pattern, and same reason, as the product-card prices in
 * product-carousel-03.css. */
.popup-fly-cart .cart_list.product_list_widget .product-price .amount {
	color: var(--bsp-purple, #8022DB) !important;
	font-size: inherit;
	font-weight: inherit;
}

.popup-fly-cart .cart_list.product_list_widget .product-quantity-wrap {
	align-items: center;
	margin-top: 10px;
}

/* -------------------------------------------------------------
 * Quantity stepper
 *
 * IMPORTANT: the parent does NOT lay this out as a flex row. The
 * two buttons are `position: absolute` and pinned to the left and
 * right edges of the wrapper, each `--size` square, and they draw
 * their own - and + as Font Awesome glyphs in a ::before (the
 * button text itself is font-size: 0). The input sits underneath
 * at width: 100%, padded clear of the buttons by its own width.
 *
 * So this only resizes that model — it must not convert it to flex
 * or reorder the children. Doing that detaches the absolute buttons
 * from their edges and collapses the whole control to a sliver,
 * which is exactly what it looked like before this rule.
 *
 * --size drives both the button squares and the input height, so
 * setting it is most of the work; --icon-size scales the glyphs.
 * ----------------------------------------------------------- */
.popup-fly-cart .cart_list.product_list_widget div.quantity {
	--size: 30px;
	--icon-size: 11px;
	position: relative;
	width: 92px;
	margin: 0;
	border: 1px solid var(--bsp-line, #E6E6ED);
	border-radius: 8px;
	overflow: hidden;
	background-color: #FFF;
	transition: border-color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .cart_list.product_list_widget div.quantity:focus-within {
	border-color: var(--bsp-purple, #8022DB);
}

/* The parent gives the input a grey fill and its own border, which
 * would show as a box inside the pill drawn above. */
.popup-fly-cart .cart_list.product_list_widget div.quantity input.qty {
	width: 100%;
	min-height: var(--size);
	height: var(--size);
	padding: 0 var(--size);
	background-color: transparent;
	border: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E);
}

/* The buttons stay absolute — only their footprint changes. */
.popup-fly-cart .cart_list.product_list_widget div.quantity button {
	width: var(--size);
	height: var(--size);
	min-width: 0;
	max-width: none;
	border-radius: 0;
}

.popup-fly-cart .cart_list.product_list_widget div.quantity button::before {
	color: var(--bsp-muted, #6B7280);
}

.popup-fly-cart .cart_list.product_list_widget div.quantity button:hover::before {
	color: var(--bsp-purple, #8022DB);
}

.popup-fly-cart .cart_list.product_list_widget div.quantity select {
	min-height: 32px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E);
	border: 0;
	background-color: transparent;
}

/* -------------------------------------------------------------
 * Remove
 *
 * Destructive, and never the thing a shopper came to the drawer to
 * do — so it is a quiet glyph in the corner rather than an
 * underlined link competing with the stepper. It still reaches full
 * contrast on hover and on keyboard focus, and it keeps a 28px hit
 * target rather than shrinking to the size of the glyph.
 * ----------------------------------------------------------- */
.popup-fly-cart .cart_list.product_list_widget .remove {
	position: absolute;
	top: 14px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 7px;
	/* The template prints the word "Remove"; the glyph replaces it. */
	font-size: 0;
	text-decoration: none;
	color: var(--bsp-muted, #6B7280);
	transition:
		background-color .2s var(--bsp-mc-ease),
		color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .cart_list.product_list_widget .remove::before {
	content: '×';
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
}

.popup-fly-cart .cart_list.product_list_widget .remove:hover,
.popup-fly-cart .cart_list.product_list_widget .remove:focus-visible {
	background-color: #FDF2F2;
	color: #C0392B;
	text-decoration: none;
}

.popup-fly-cart .cart_list.product_list_widget .remove:focus-visible {
	outline: 2px solid #C0392B;
	outline-offset: 1px;
}

/* -------------------------------------------------------------
 * Footer — pinned
 * ----------------------------------------------------------- */
.popup-fly-cart .fly-cart-footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 16px var(--bsp-mc-pad) 20px;
	background: #FFF;
	border-top: 1px solid var(--bsp-line, #E6E6ED);
	/* The parent's grey blur read as a dropped panel. A short shadow
	 * upward just separates the floor from the scrolling list. */
	box-shadow: 0 -6px 16px -12px rgba(22, 18, 31, .3);
}

/* ---- Note / Shipping / Coupon ----
 *
 * Secondary by definition: a shopper opens these occasionally, and
 * never before deciding to check out. As stacked icon buttons they
 * took the vertical space the checkout button needed, so they are a
 * single row of small text chips above the totals.
 */
.popup-fly-cart .cart-footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px !important;
}

.popup-fly-cart .cart-footer-actions > a {
	flex: 0 0 auto;
	flex-flow: row;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--bsp-line, #E6E6ED);
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bsp-muted, #6B7280);
	text-decoration: none;
	transition:
		border-color .2s var(--bsp-mc-ease),
		color .2s var(--bsp-mc-ease),
		background-color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .cart-footer-actions > a:hover,
.popup-fly-cart .cart-footer-actions > a:focus-visible {
	border-color: var(--bsp-purple, #8022DB);
	background-color: #F7F3FD;
	color: var(--bsp-purple, #8022DB);
}

.popup-fly-cart .cart-footer-actions > a .icon {
	display: flex;
	align-items: center;
	min-height: 0;
}

.popup-fly-cart .cart-footer-actions > a svg {
	width: 13px;
	height: 13px;
}

/* The parent draws a divider before every chip but the first, which
 * made sense for equal-width columns and not for chips. */
.popup-fly-cart .cart-footer-actions > a + a::before {
	display: none;
}

/* ---- Totals ---- */
.popup-fly-cart .cart-totals-table {
	margin: 0 0 14px;
}

.popup-fly-cart .cart-totals-table tfoot tr,
.popup-fly-cart .cart-totals-row {
	min-height: 26px;
	font-size: 14px;
	color: var(--bsp-muted, #6B7280);
}

.popup-fly-cart .cart-totals-table tfoot th,
.popup-fly-cart .cart-totals-label {
	font-weight: 500;
	color: inherit;
}

/* Subtotal and shipping are reference figures on the way to the
 * total, so they stay ink — purple is saved for the two places it
 * means something: the per-item price and the order total. */
.popup-fly-cart .cart-totals-table tfoot td .amount,
.popup-fly-cart .cart-totals-value .amount {
	font-size: 14px;
	font-weight: 600;
	color: var(--bsp-ink, #1A1A2E) !important;
}

/* ---- Shipping method choices ----
 *
 * These sit in the totals block as a radio list. The price inside
 * each label is picked up by the same theme-wide .amount colour as
 * everything else, so it needs the same correction — but it stays
 * ink, not purple: it is a cost being compared, not the figure the
 * shopper is deciding on.
 */
.popup-fly-cart .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.popup-fly-cart .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.popup-fly-cart .woocommerce-shipping-methods li:last-child {
	margin-bottom: 0;
}

.popup-fly-cart .woocommerce-shipping-methods label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bsp-muted, #6B7280);
	cursor: pointer;
}

.popup-fly-cart .woocommerce-shipping-methods .amount {
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E) !important;
}

.popup-fly-cart .woocommerce-shipping-methods input[type='radio'] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--bsp-purple, #8022DB);
}

/* The order total is the number the shopper is actually deciding on,
 * so it gets the size and the rule above it. */
.popup-fly-cart .cart-totals-table tfoot tr.order-total {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--bsp-line, #E6E6ED);
	min-height: 0;
}

.popup-fly-cart .cart-totals-table tfoot tr.order-total th {
	font-size: 15px;
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E);
}

.popup-fly-cart .cart-totals-table tfoot tr.order-total td .amount {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--bsp-purple, #8022DB) !important;
}

/* ---- Buttons ---- */
.popup-fly-cart .fly-cart-footer .buttons {
	margin: 0;
}

/* Brand green, like every other primary action on the site. The
 * parent left this to a theme default, which is why the drawer read
 * as belonging to a different site than the header. */
.popup-fly-cart .fly-cart-footer .button.checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--bsp-mc-radius);
	background-color: var(--bsp-green, #036133);
	color: #FFF;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	transition:
		background-color .25s var(--bsp-mc-ease),
		transform .25s var(--bsp-mc-ease),
		box-shadow .25s var(--bsp-mc-ease);
}

.popup-fly-cart .fly-cart-footer .button.checkout:hover,
.popup-fly-cart .fly-cart-footer .button.checkout:focus-visible {
	background-color: var(--bsp-green-dark, #024A27);
	color: #FFF;
	transform: translateY(-1px);
	box-shadow: 0 12px 22px -14px rgba(3, 97, 51, .8);
}

/* "View cart" is the alternative, not a second call to action, so it
 * reads as a link rather than a second button. */
.popup-fly-cart .fly-cart-footer .view-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bsp-muted, #6B7280);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s var(--bsp-mc-ease);
}

.popup-fly-cart .fly-cart-footer .view-cart:hover,
.popup-fly-cart .fly-cart-footer .view-cart:focus-visible {
	background: none;
	color: var(--bsp-ink, #1A1A2E);
}

/* -------------------------------------------------------------
 * Empty state
 *
 * An empty cart is an invitation to act, so the shop link is the
 * one solid thing on it. The parent's 240px illustration crowded
 * that out of a 476px drawer.
 * ----------------------------------------------------------- */
.popup-fly-cart .empty-cart-icon {
	width: 150px;
	margin-bottom: 4px;
}

.popup-fly-cart .empty-cart-heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E);
}

.popup-fly-cart .return-to-shop .button {
	border-radius: var(--bsp-mc-radius);
	background-color: var(--bsp-green, #036133);
	color: #FFF;
}

/* -------------------------------------------------------------
 * Add-on modals (note / shipping / coupon)
 * ----------------------------------------------------------- */
.popup-fly-cart .fly-cart-modal-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--bsp-ink, #1A1A2E);
}

.popup-fly-cart .fly-cart-addon-modal textarea,
.popup-fly-cart .fly-cart-addon-modal input[type='text'] {
	border-radius: 8px;
	border-color: var(--bsp-line, #E6E6ED);
}

.popup-fly-cart .fly-cart-addon-modal textarea:focus,
.popup-fly-cart .fly-cart-addon-modal input[type='text']:focus {
	border-color: var(--bsp-green, #036133);
}

.popup-fly-cart .fly-cart-modal-actions .button {
	border-radius: var(--bsp-mc-radius);
	background-color: var(--bsp-green, #036133);
	color: #FFF;
}

/* -------------------------------------------------------------
 * Narrow screens
 * ----------------------------------------------------------- */
@media (max-width: 575px) {
	.popup-fly-cart {
		--bsp-mc-pad: 16px;
	}

	/* Near full width, but keeping a strip of the page visible so the
	 * drawer still reads as a panel over the shop rather than as a
	 * new page the shopper has navigated to. */
	.popup-fly-cart > .inner {
		width: 100%;
		max-width: calc(100% - 36px);
	}

	.popup-fly-cart .cart_list.product_list_widget .product-thumbnail {
		width: 56px;
		margin-right: 12px;
	}

	.popup-fly-cart .fly-cart-footer .button.checkout {
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.popup-fly-cart .fly-cart-footer .button.checkout {
		transition: none !important;
	}

	.popup-fly-cart .fly-cart-footer .button.checkout:hover,
	.popup-fly-cart .fly-cart-footer .button.checkout:focus-visible {
		transform: none !important;
	}
}