/* ==================================================================
   14 - CART & CHECKOUT
   Loads after 13-responsive.css, because these layouts must beat the
   generic table and form rules defined there.

   Architecture: one shared shell, .wo-shop-page, used by both pages.
   It owns the container width and the two-column grid, so neither
   page depends on a WooCommerce wrapper for its layout - that
   dependency is what made the columns collapse to a narrow strip.

   Items are cards, not table rows. A six-column table cannot fit a
   phone, and the responsive-table workarounds are fragile; a card
   stacks by itself.
   ================================================================== */


/* ==================================================================
   A. SHARED SHELL
   ================================================================== */

/* The shell owns the page width, because the WooCommerce wrappers it
   sits inside are neutralised below. Without a width here the grid
   has nothing to divide, so both columns shrink-wrap their content
   and the whole page bunches against the left edge. */
.wo-shop-page {
	width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2)));
	margin-inline: auto;
	padding-inline: var(--wo-gutter);
	padding-bottom: var(--wo-section-y);
	color: var(--wo-text-muted);
}

/* Neutralise every wrapper WooCommerce and the theme put in the way.
   Without this the grid inherits a width from an ancestor and the
   aside is squeezed to a few hundred pixels. */
/* Scoped to .wo-main on purpose. These selectors used to be written
   body-first (.woocommerce-cart .wo-container), which also matched
   the two .wo-container elements inside the site footer and stripped
   their gutter and max-width. The footer is outside .wo-main, so
   scoping here leaves it on the site-wide rules untouched. */
.woocommerce-cart .wo-main .woocommerce,
.woocommerce-checkout .wo-main .woocommerce,
.woocommerce-cart .wo-main .wo-woo-wrap,
.woocommerce-checkout .wo-main .wo-woo-wrap,
.woocommerce-cart .wo-main .wo-container,
.woocommerce-checkout .wo-main .wo-container {
	width: 100%;
	max-width: none;
	float: none;
}

.wo-shop-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	width: 100%;
}

.wo-shop-page__main,
.wo-shop-page__aside {
	min-width: 0;   /* lets grid children shrink instead of overflowing */
	width: 100%;
}

.wo-shop-page__aside {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
}

@media (min-width: 992px) {

	.wo-shop-page__grid {
		grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
		gap: clamp(1.75rem, 3vw, 2.75rem);
	}

	.wo-shop-page__aside {
		position: sticky;
		top: var(--wo-header-offset);
	}
}


/* ==================================================================
   B. CART ITEMS
   ================================================================== */

.wo-cart-items {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-2);
	margin-bottom: var(--wo-space-6);
}

/* Two tracks: a fixed thumbnail and everything else. The body track
   is minmax(0, 1fr) so a long product name shrinks and wraps instead
   of widening the row. */
.wo-cart-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.75rem, 1.6vw, 1rem);
	align-items: center;

	padding: clamp(0.75rem, 1.5vw, 1rem);

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);

	transition: border-color var(--wo-transition);
}

.wo-cart-item:hover {
	border-color: var(--wo-primary-line);
}

/* align-self keeps the thumbnail pinned to the top of the row rather
   than floating in the middle when the body grows to two lines. */
.wo-cart-item__media {
	/* Capped at 76px: the body column is ~72px tall (name + actions),
	   so a larger thumbnail would set the row height on its own and
	   reintroduce dead space beside the text. */
	width: clamp(64px, 6vw, 76px);
	align-self: start;
}

.wo-cart-item__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--wo-radius-sm);
	border: 1px solid var(--wo-line);
}

.wo-cart-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-2);
	min-width: 0;
}

.wo-cart-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wo-space-1) var(--wo-space-3);
}

/* flex-basis must stay auto. It was 12rem, and because the head
   switches to flex-direction: column on phones, that 12rem was read
   as a *height* basis - which is what padded every cart row out to
   ~340px. min-width: 0 lets the name wrap inside the grid track. */
.wo-cart-item__name {
	flex: 1 1 auto;
	min-width: 0;
}

.wo-cart-item__name a {
	font-family: var(--wo-font-display);
	font-size: clamp(0.9375rem, 0.35vw + 0.86rem, 1.0625rem);
	font-weight: var(--wo-weight-semibold);
	line-height: 1.3;
	color: var(--wo-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wo-cart-item__name a:hover {
	color: var(--wo-primary-hover);
}

/* Variation and meta data Woo prints under the name. */
.wo-cart-item__name .variation,
.wo-cart-item__name dl {
	margin: var(--wo-space-1) 0 0;
	font-size: var(--wo-text-xs);
	line-height: 1.4;
	color: var(--wo-text-dim);
}

.wo-cart-item__name .variation dt,
.wo-cart-item__name dl dt {
	display: inline;
	margin: 0 0.35em 0 0;
	font-weight: var(--wo-weight-medium);
}

.wo-cart-item__name .variation dd,
.wo-cart-item__name dl dd {
	display: inline;
	margin: 0 var(--wo-space-2) 0 0;
}

.wo-cart-item__name .variation p,
.wo-cart-item__name dl p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.wo-cart-item__name .backorder_notification {
	margin: var(--wo-space-1) 0 0;
	font-size: var(--wo-text-xs);
	color: var(--wo-gold);
}

.wo-cart-item__price {
	flex: 0 0 auto;
	font-size: clamp(0.9375rem, 0.35vw + 0.86rem, 1.0625rem);
	font-weight: var(--wo-weight-bold);
	line-height: 1.3;
	color: var(--wo-gold);
	white-space: nowrap;
}

/* Sale strike-through Woo prints inside the subtotal. */
.wo-cart-item__price del {
	display: inline-block;
	margin-right: var(--wo-space-1);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
}

.wo-cart-item__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

.wo-cart-item__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-2) var(--wo-space-3);
}

/* A compact stepper for the cart. The 46px product-page size is more
   control than a cart row needs and was the tallest thing in it. */
.wo-cart-item__actions .wo-qty {
	height: 36px;
	padding: 0;
}

.wo-cart-item__actions .wo-qty__btn {
	width: 30px;
	height: 34px;
	min-height: 0;
	font-size: var(--wo-text-base);
}

/* The generic input[type='number'] rule in 06-forms.css loads after
   05-buttons.css and was overriding the stepper input with 48px
   min-height and 20px side padding. On a 42px-wide box that left ~2px
   of content width, so the quantity itself was clipped out of sight.
   Reset here, scoped to the cart row only. */
.wo-cart-item__actions .wo-qty__input,
.wo-cart-item__actions input[type='number'].wo-qty__input {
	width: 40px;
	height: 34px;
	min-height: 0;
	padding: 0;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	line-height: 1;
	text-align: center;
	color: var(--wo-text);

	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.wo-cart-item__actions input[type='number'].wo-qty__input:focus,
.wo-cart-item__actions input[type='number'].wo-qty__input:focus-visible {
	background: transparent;
	border: none;
	outline: none;
	box-shadow: var(--wo-ring);
	border-radius: var(--wo-radius-sm);
}

.wo-cart-item__remove {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding: 0;
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
}

.wo-cart-item__remove:hover {
	color: var(--wo-error);
	background: none;
}

.wo-cart-item__single {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
}


/* ==================================================================
   C. COUPON
   ================================================================== */

.wo-cart-coupon {
	padding: var(--wo-space-5);
	margin-bottom: var(--wo-space-5);

	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed var(--wo-line-strong);
	border-radius: var(--wo-radius-md);
}

.wo-cart-coupon__label {
	display: block;
	margin-bottom: var(--wo-space-3);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.wo-cart-coupon__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-2);
}

.wo-cart-coupon__row .wo-input {
	flex: 1 1 11rem;
	min-width: 0;
}

.wo-cart-coupon__row .wo-btn {
	flex: 0 0 auto;
}

.wo-cart-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3);
	align-items: center;
}


/* ==================================================================
   D. SUMMARY CARD
   Shared by the cart totals and the checkout order review.
   ================================================================== */

.wo-summary {
	padding: clamp(1.25rem, 3vw, 1.75rem);

	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	box-shadow:
		0 18px 44px rgba(6, 3, 20, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.wo-summary__title {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	margin: 0 0 var(--wo-space-5);
	padding: 0;
	border: none;
}

.wo-summary__rows {
	display: flex;
	flex-direction: column;
}

.wo-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wo-space-4);

	padding-block: var(--wo-space-3);
	border-bottom: 1px solid var(--wo-line-faint);
}

.wo-summary__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wo-text-base);
	color: var(--wo-text-muted);
}

.wo-summary__label small {
	display: block;
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}

.wo-summary__value {
	flex: 0 0 auto;
	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	text-align: right;
}

.wo-summary__value--muted {
	font-weight: var(--wo-weight-normal);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
}

.wo-summary__row--total {
	border-bottom: none;
	border-top: 1px solid var(--wo-line);
	margin-top: var(--wo-space-2);
	padding-top: var(--wo-space-4);
}

.wo-summary__row--total .wo-summary__label {
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.wo-summary__row--total .wo-summary__value,
.wo-summary__row--total .amount {
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}

/* Shipping rows Woo prints itself. */
.wo-summary .woocommerce-shipping-totals,
.wo-summary tr.shipping {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wo-space-4);
	padding-block: var(--wo-space-3);
	border-bottom: 1px solid var(--wo-line-faint);
}

.wo-summary ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: var(--wo-text-sm);
}

.wo-summary ul#shipping_method li {
	margin-bottom: var(--wo-space-2);
}

.wo-summary .woocommerce-shipping-destination {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}

.wo-summary__action {
	margin-top: var(--wo-space-5);
}

.wo-summary__continue {
	display: block;
	margin-top: var(--wo-space-4);
	text-align: center;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-summary__continue:hover {
	color: var(--wo-text-muted);
}


/* ==================================================================
   E. CHECKOUT ORDER REVIEW
   Woo prints this as a table; it is flattened into rows here so it
   can never overflow the aside.
   ================================================================== */

.wo-summary--checkout #order_review,
.woocommerce-checkout-review-order {
	min-width: 0;
}

.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	border: none;
	border-collapse: collapse;
	margin: 0;
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
	display: block;
	width: 100%;
}

.woocommerce-checkout-review-order-table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wo-space-4);
	padding-block: var(--wo-space-3);
	border-bottom: 1px solid var(--wo-line-faint);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	display: block;
	padding: 0 !important;
	border: none !important;
	background: transparent;
	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-muted);
	text-align: left;
}

.woocommerce-checkout-review-order-table td {
	flex: 0 0 auto;
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table th {
	flex: 1 1 auto;
	min-width: 0;
}

/* Line items keep their quantity inline with the name.
   These rows are the one place Woo emits *two* <td> cells rather than
   th + td, so the label cell was inheriting flex: 0 0 auto and
   white-space: nowrap from the rule above and could neither shrink
   nor wrap - it pushed the price straight through the card border.
   The name cell is made the flexible one; only the price stays
   nowrap. */
.woocommerce-checkout-review-order-table td.product-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text);
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.4;
}

/* The price cell must NOT shrink. It holds a nowrap .amount, so a
   shrinkable cell simply lets that span spill over the card edge -
   the width has to come off the name instead, which wraps. */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table td.product-subtotal {
	flex: 0 0 auto;
	max-width: 100%;
	text-align: right;
	white-space: nowrap;
}

/* Shipping is the one cell that may shrink, because everything in it
   (the radio list and its labels) is allowed to wrap. */
.woocommerce-checkout-review-order-table td[data-title='Shipping'],
.woocommerce-checkout-review-order-table tr.shipping td,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--wo-text-dim);
	font-weight: var(--wo-weight-normal);
}

.woocommerce-checkout-review-order-table tfoot .order-total {
	border-bottom: none;
	border-top: 1px solid var(--wo-line);
	margin-top: var(--wo-space-2);
	padding-top: var(--wo-space-4);
}

.woocommerce-checkout-review-order-table tfoot .order-total th {
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total .amount {
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}


/* ==================================================================
   F. PAYMENT
   The payment method list (Razorpay / Cash on Delivery) is lightened
   here, on purpose, separately from the dark theme everywhere else on
   this page. Razorpay's own icon asset is drawn in colours meant for
   a light background - the previous near-black container
   (rgba(255,255,255,0.04) with an even darker rgba(0,0,0,0.22) inset
   for the description) is exactly why it read as barely visible.
   Everything below exists to make that container light while keeping
   every other part of Checkout - the fields above, the order summary
   beside it - on the original dark glass.
   ================================================================== */

.woocommerce-checkout #payment {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: var(--wo-space-5) 0 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wo-space-5);
	padding: 0;
	border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: block;
	padding: var(--wo-space-4);
	margin-bottom: var(--wo-space-3);

	/* Explicit fallback text colour at this level too - the base rule
	   in 10-woocommerce.css sets color: var(--wo-text) (light) here,
	   and anything printed directly inside the <li> rather than
	   inside .label or .payment_box would otherwise inherit that and
	   stay invisible on the new light background. */
	color: #1A1330;

	/* Light glass, not solid white - the blur keeps it feeling like
	   part of the same theme rather than a plain flat card. */
	background: rgba(250, 249, 255, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);

	border: 1px solid rgba(20, 14, 42, 0.08);
	border-radius: var(--wo-radius-md);
	box-shadow: 0 1px 2px rgba(20, 14, 42, 0.06);

	transition: border-color var(--wo-transition), background var(--wo-transition);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: var(--wo-primary);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-3);
	margin: 0;
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);

	/* Dark, on-brand text (the theme's own deep background colour)
	   rather than plain black - reads clearly on the light panel
	   while still feeling like WaxOrbit rather than a generic form. */
	color: #1A1330;
	cursor: pointer;
}

/* The empty radio circle is styled globally as a faint light fill on
   a light border (assets/css/06-forms.css), which is correct on a
   dark page and disappears on this light one. Overridden here, and
   only here, so no other radio/checkbox on the site is affected. */
.woocommerce-checkout #payment ul.payment_methods li input[type='radio'] {
	background: rgba(20, 14, 42, 0.03);
	border: 1px solid rgba(20, 14, 42, 0.32);
}

.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:hover {
	border-color: var(--wo-primary);
}

.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:checked {
	background: var(--wo-primary);
	border-color: var(--wo-primary);
}

.woocommerce-checkout #payment div.payment_box {
	position: static;
	padding: var(--wo-space-5);
	margin: var(--wo-space-4) 0 0;

	font-size: var(--wo-text-sm);
	line-height: 1.65;

	/* A visibly separate panel, not just a faint tint of the same
	   colour as the row it sits in - a border plus a slightly
	   stronger inset is what actually reads as "a distinct box"
	   rather than a smudge. */
	color: rgba(26, 19, 48, 0.78);
	background: rgba(20, 14, 42, 0.055);
	border: 1px solid rgba(20, 14, 42, 0.09);
	border-radius: var(--wo-radius-sm);
}

.woocommerce-checkout #payment div.payment_box p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Razorpay's own gateway icon/logo image, and any other icon a
   payment method prints inline. No filter or recolour - the point is
   that it is now sitting on the light background it was designed
   for. Sized up slightly from 24px - the label is already a flex
   row with align-items: center, so a taller icon stays vertically
   centred against the "UPI, Cards, NetBanking" text rather than
   needing separate alignment rules. */
.woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 30px;
	width: auto;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-privacy-policy-text {
	font-size: var(--wo-text-xs);
	line-height: 1.6;
	color: var(--wo-text-dim);
	margin-bottom: var(--wo-space-4);
}

.woocommerce-privacy-policy-text p {
	font-size: inherit;
	color: inherit;
}

/* Primary actions - gold, matching Buy Now. */
.woocommerce .checkout-button,
.woocommerce #payment #place_order,
.wo-summary__action .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);

	color: var(--wo-text-on-gold);
	background: var(--wo-grad-gold);
	border: none;
	border-radius: var(--wo-radius-pill);
	box-shadow: var(--wo-glow-gold);
	text-decoration: none;

	transition: background var(--wo-transition), box-shadow var(--wo-transition);
}

.woocommerce .checkout-button:hover,
.woocommerce #payment #place_order:hover {
	color: var(--wo-text-on-gold);
	background: linear-gradient(135deg, #FFDE7A 0%, var(--wo-gold-hover) 100%);
	box-shadow: 0 10px 32px rgba(245, 197, 66, 0.48);
}


/* ==================================================================
   G. CHECKOUT FIELDS
   ================================================================== */

.wo-checkout-section {
	margin-bottom: var(--wo-space-10);
}

.wo-checkout-section:empty {
	display: none;
	margin: 0;
}

.woocommerce-checkout h3,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-2xl);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	margin: 0 0 var(--wo-space-5);
	padding-bottom: var(--wo-space-4);
	border-bottom: 1px solid var(--wo-line);
}

/* Two-up field rows that collapse on their own. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0 var(--wo-space-4);
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--wo-space-5);
}

.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes {
	grid-column: 1 / -1;
}

.woocommerce form .form-row label {
	margin-bottom: var(--wo-space-2);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text);
}

/* Coupon toggle at the top of checkout. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	margin-bottom: var(--wo-space-6);
}

.woocommerce-form-coupon,
.woocommerce-form-login {
	padding: var(--wo-space-5);
	margin-bottom: var(--wo-space-8);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
}


/* ==================================================================
   H. TRUST PANEL
   ================================================================== */

.wo-trust-panel {
	padding: clamp(1.125rem, 3vw, 1.5rem);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
}

.wo-trust-panel__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wo-space-3);
	padding-block: var(--wo-space-3);
}

.wo-trust-panel__item + .wo-trust-panel__item {
	border-top: 1px solid var(--wo-line-faint);
}

.wo-trust-panel__item svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--wo-gold);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wo-trust-panel__title {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	line-height: 1.35;
	margin: 0;
}

.wo-trust-panel__text {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	line-height: 1.45;
	margin: 2px 0 0;
}


/* ==================================================================
   I. PHONES
   ================================================================== */

@media (max-width: 599.98px) {

	.wo-cart-item {
		padding: var(--wo-space-3);
		gap: var(--wo-space-3);
	}

	/* Deliberately NOT flex-direction: column. Stacking the head made
	   .wo-cart-item__name's flex-basis resolve against the block axis,
	   which is what inflated every row. The name and price stay on one
	   line and wrap on their own when there is no room. */
	.wo-cart-item__head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wo-space-1) var(--wo-space-2);
	}

	.wo-cart-item__name {
		flex: 1 1 60%;
	}

	.wo-cart-item__actions {
		gap: var(--wo-space-2) var(--wo-space-3);
		justify-content: flex-start;
	}

	.wo-cart-coupon__row {
		flex-direction: column;
	}

	.wo-cart-coupon__row .wo-input,
	.wo-cart-coupon__row .wo-btn {
		width: 100%;
		flex: 1 1 auto;
	}

	/* Summary padding is set in section R, which loads after this. */
}


/* ==================================================================
   J. PAGE HEADING
   The Cart and Checkout titles are printed by page.php, outside
   .wo-shop-page, so they need the same container width or they hug
   the far left while the content below is centred.
   ================================================================== */

.woocommerce-cart .wo-main .wo-page-head,
.woocommerce-checkout .wo-main .wo-page-head {
	width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2)));
	margin-inline: auto;
	padding-inline: var(--wo-gutter);
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-4));
	padding-bottom: var(--wo-space-6);
}

.woocommerce-cart .wo-main .wo-page-head__title,
.woocommerce-checkout .wo-main .wo-page-head__title {
	margin-bottom: 0;
}

/* The page template's own wrapper must not add a second gutter on
   top of the two above. */
.woocommerce-cart .wo-main .wo-page,
.woocommerce-checkout .wo-main .wo-page {
	padding-bottom: 0;
}

/* ==================================================================
   K. CENTRING - LAST RESORT
   Every ancestor between .wo-main and the shell is forced to full
   width. One of them is constraining the page, and rather than guess
   which, all of them are reset.
   ================================================================== */

.woocommerce-cart .wo-main,
.woocommerce-checkout .wo-main,
.woocommerce-cart .wo-main .wo-page,
.woocommerce-checkout .wo-main .wo-page,
.woocommerce-cart .wo-main .wo-page > *,
.woocommerce-checkout .wo-main .wo-page > *,
.woocommerce-cart .wo-main article,
.woocommerce-checkout .wo-main article,
.woocommerce-cart .wo-main .entry-content,
.woocommerce-checkout .wo-main .entry-content,
.woocommerce-cart .wo-main .wo-page__content,
.woocommerce-checkout .wo-main .wo-page__content,
.woocommerce-cart .wo-main .woocommerce,
.woocommerce-checkout .wo-main .woocommerce,
.woocommerce-cart .wo-main .wo-woo-wrap,
.woocommerce-checkout .wo-main .wo-woo-wrap,
.woocommerce-cart .wo-main .wo-container,
.woocommerce-checkout .wo-main .wo-container,
.woocommerce-cart .wo-main .wo-container--wide,
.woocommerce-checkout .wo-main .wo-container--wide {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	float: none !important;
}

/* With the ancestors neutral, the shell centres itself. */
.woocommerce-cart .wo-main .wo-shop-page,
.woocommerce-checkout .wo-main .wo-shop-page,
.woocommerce-cart .wo-main .wo-page-head,
.woocommerce-checkout .wo-main .wo-page-head {
	width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2))) !important;
	margin-inline: auto !important;
	padding-inline: var(--wo-gutter) !important;
}

/* ==================================================================
   L. ORDER SUMMARY - INTERNAL BREATHING ROOM
   The card had padding, but several children could escape it: the
   review-order line items (fixed in E), the shipping radio list and
   the payment block all sat flush against the border. Everything
   inside the card is constrained to the padding box here.
   ================================================================== */

.woocommerce-cart .wo-summary,
.woocommerce-checkout .wo-summary {
	/* Guards the padding box against any wide descendant. */
	overflow-wrap: anywhere;
}

.woocommerce-cart .wo-summary > *,
.woocommerce-checkout .wo-summary > * {
	min-width: 0;
	max-width: 100%;
}

/* Roomier internal padding. The card is the most important surface
   on either page and was reading as cramped at 20-28px; this lands
   between 24px on a phone and 36px on a desktop.

   Body-scoped: .wo-summary is only rendered by cart-totals.php and
   form-checkout.php, but scoping makes that guarantee explicit
   rather than relying on the class staying unused elsewhere. */
.woocommerce-cart .wo-summary,
.woocommerce-checkout .wo-summary {
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.woocommerce-cart .wo-summary__title,
.woocommerce-checkout .wo-summary__title {
	margin: 0 0 var(--wo-space-5);
	padding-bottom: var(--wo-space-5);
	border-bottom: 1px solid var(--wo-line-faint);
}

/* The first row sits directly under the title rule, so it does not
   need a second helping of top padding. */
.woocommerce-cart .wo-summary__rows > .wo-summary__row:first-child,
.woocommerce-checkout .wo-summary__rows > .wo-summary__row:first-child {
	padding-top: 0;
}

/* The last divider before the total would otherwise double up with
   the total's own top border. */
.woocommerce-cart .wo-summary__rows > .wo-summary__row:last-child,
.woocommerce-checkout .wo-summary__rows > .wo-summary__row:last-child {
	border-bottom: none;
}

/* Long labels wrap instead of pushing the value out of the card. */
.woocommerce-cart .wo-summary__label,
.woocommerce-checkout .wo-summary__label {
	overflow-wrap: anywhere;
}

/* Rigid, like the checkout price cell: the label shrinks and wraps,
   the figure keeps its intrinsic width. A percentage cap here would
   clip a long total instead of moving the label. */
.woocommerce-cart .wo-summary__value,
.woocommerce-checkout .wo-summary__value {
	flex: 0 0 auto;
	max-width: 100%;
}

.woocommerce-cart .wo-summary__label,
.woocommerce-checkout .wo-summary__label {
	flex: 1 1 auto;
	min-width: 0;
}

.wo-summary__value .amount,
.wo-summary__row--total .amount {
	white-space: nowrap;
}

/* Woo's shipping list inside the summary. */
.wo-summary ul#shipping_method,
.woocommerce-checkout-review-order-table ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	text-align: right;
	font-size: var(--wo-text-sm);
}

.wo-summary ul#shipping_method li,
.woocommerce-checkout-review-order-table ul#shipping_method li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--wo-space-2);
	margin-bottom: var(--wo-space-2);
	white-space: normal;
	overflow-wrap: anywhere;
}

.wo-summary ul#shipping_method li:last-child,
.woocommerce-checkout-review-order-table ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.wo-summary ul#shipping_method label,
.woocommerce-checkout-review-order-table ul#shipping_method label {
	margin: 0;
	font-weight: var(--wo-weight-normal);
	text-align: right;
}

/* The review-order table and the payment block are direct children
   of the card; keep them inside the padding box. */
.wo-summary--checkout .woocommerce-checkout-review-order,
.wo-summary--checkout #order_review,
.wo-summary--checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* First and last rows of the review table align with the card's own
   padding rather than adding to it. */
.woocommerce-checkout-review-order-table tbody tr:first-child {
	padding-top: 0;
}

.woocommerce-checkout-review-order-table tbody tr:last-child {
	border-bottom: none;
}

/* Payment sits below the totals inside the same card - give it a
   rule and space rather than letting it butt against the total. */
.wo-summary--checkout #payment,
.woocommerce-checkout .wo-summary--checkout #payment {
	margin-top: var(--wo-space-5);
	padding: var(--wo-space-5) 0 0;
	border-top: 1px solid var(--wo-line-faint);
	background: transparent;
	min-width: 0;
}

.wo-summary--checkout #payment ul.payment_methods {
	margin: 0 0 var(--wo-space-4);
	padding: 0;
	min-width: 0;
}

.wo-summary--checkout #payment ul.payment_methods li {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wo-summary--checkout #payment ul.payment_methods li label {
	display: inline-flex;
	flex-wrap: wrap;
	white-space: normal;
}

.wo-summary--checkout #payment .place-order {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wo-summary--checkout #payment .form-row.place-order {
	margin-bottom: 0;
}


/* ==================================================================
   M. FOOTER ON CART & CHECKOUT
   The footer is shared with the rest of the site and its design is
   not changed here. The only job of this block is to make sure the
   page-level width resets above cannot reach it, and that nothing in
   it can push past the viewport at any width.

   The resets in A, J and K are now scoped to .wo-main, so the footer
   already keeps the site-wide rules. These declarations restate the
   container contract explicitly so that a future page-level reset -
   or a plugin adding a body-class rule - cannot strip the gutter
   again.
   ================================================================== */

.woocommerce-cart .wo-footer,
.woocommerce-checkout .wo-footer {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	/* clip, not hidden: hidden on a non-scroll container would create
	   a scroll port and break the sticky aside above it. */
	overflow-x: clip;
}

/* Exactly the .wo-container contract from 04-grid.css, restated. */
.woocommerce-cart .wo-footer .wo-container,
.woocommerce-checkout .wo-footer .wo-container {
	width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2))) !important;
	max-width: 100% !important;
	margin-inline: auto !important;
	padding-inline: var(--wo-gutter) !important;
	float: none !important;
}

/* Grid children must be allowed to shrink, or a long link or an
   unbroken word sets a minimum wider than the screen. */
.woocommerce-cart .wo-footer .wo-grid--footer,
.woocommerce-checkout .wo-footer .wo-grid--footer {
	width: 100%;
	min-width: 0;
}

/* min-width only. An earlier revision of this block also set
   max-width: 100% here, which outranked .wo-footer__brand's own
   320px cap from the 1200px breakpoint and let the brand column
   stretch to the full grid track - a visible difference from every
   other page. Allowing the track to shrink is all that is needed;
   the cap is left to the footer's own stylesheet. */
.woocommerce-cart .wo-footer .wo-grid--footer > *,
.woocommerce-checkout .wo-footer .wo-grid--footer > *,
.woocommerce-cart .wo-footer .wo-footer__col,
.woocommerce-checkout .wo-footer .wo-footer__col,
.woocommerce-cart .wo-footer .wo-footer__panel,
.woocommerce-checkout .wo-footer .wo-footer__panel {
	min-width: 0;
}

.woocommerce-cart .wo-footer .wo-footer__about,
.woocommerce-checkout .wo-footer .wo-footer__about,
.woocommerce-cart .wo-footer .wo-footer__copy,
.woocommerce-checkout .wo-footer .wo-footer__copy,
.woocommerce-cart .wo-footer .wo-footer__list a,
.woocommerce-checkout .wo-footer .wo-footer__list a {
	overflow-wrap: break-word;
}

.woocommerce-cart .wo-footer .wo-footer__bottom-inner,
.woocommerce-checkout .wo-footer .wo-footer__bottom-inner {
	width: 100%;
	min-width: 0;
}

/* The particle overlay is absolutely positioned and can extend past
   the column on phones; it is decorative, so it is clipped rather
   than allowed to widen the document. */
@media (max-width: 599.98px) {

	.woocommerce-cart .wo-footer .wo-footer__col,
	.woocommerce-checkout .wo-footer .wo-footer__col {
		overflow-x: clip;
	}
}


/* ==================================================================
   N. PAGE-LEVEL OVERFLOW GUARD
   Belt and braces for the two pages: no descendant of the shell may
   set a minimum wider than its column.
   ================================================================== */

.wo-shop-page,
.wo-shop-page__grid,
.wo-shop-page__main,
.wo-shop-page__aside {
	max-width: 100%;
	min-width: 0;
}

.wo-shop-page img,
.wo-shop-page table,
.wo-shop-page input,
.wo-shop-page select,
.wo-shop-page textarea {
	max-width: 100%;
}


/* ==================================================================
   O. WOOCOMMERCE NOTICES
   inc/enqueue.php keeps the 'woocommerce-general' stylesheet on cart
   and checkout, and that file draws an icon into every notice with

       .woocommerce .woocommerce-info::before {
           font-family: WooCommerce;  content: "\e015";
           position: absolute; left: 1.5em;
       }

   The glyph comes from Woo's own icon font. When that font is not
   available the browser paints a missing-glyph box instead, which is
   the unknown square that appears next to "Your cart is currently
   empty". Core also reserves 3.5em of left padding for it, and the
   theme overrides the padding but not the pseudo-element - so the box
   ends up sitting on top of the first character.

   The icon is removed outright rather than replaced.
   ================================================================== */

.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .wo-notice::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .wo-notice::before {
	content: none !important;
	display: none !important;
}

/* Compact, centred, and no longer full-bleed. The notice is printed
   outside .wo-shop-page, so the width resets in section K left it
   spanning the whole viewport. width: fit-content shrinks it to its
   text; the max-width keeps a long message inside the page grid. */
.woocommerce-cart .wo-main .woocommerce-info,
.woocommerce-cart .wo-main .woocommerce-message,
.woocommerce-cart .wo-main .woocommerce-error,
.woocommerce-checkout .wo-main .woocommerce-info,
.woocommerce-checkout .wo-main .woocommerce-message,
.woocommerce-checkout .wo-main .woocommerce-error {
	box-sizing: border-box;
	width: fit-content;
	max-width: min(
		100%,
		calc(var(--wo-container) + (var(--wo-gutter) * 2)),
		640px
	);
	margin: 0 auto var(--wo-space-6);

	/* Core sets 1em 2em 1em 3.5em; the left inset existed only to
	   clear the icon that is now gone. */
	padding: var(--wo-space-4) var(--wo-space-6) !important;

	font-size: var(--wo-text-sm);
	line-height: 1.5;
	text-align: left;
	overflow-wrap: anywhere;
}

/* The notices sit inside the flattened page wrappers, so they need
   the page gutter themselves or they touch the screen edge on a
   narrow phone. */
.woocommerce-cart .wo-main .woocommerce-notices-wrapper,
.woocommerce-checkout .wo-main .woocommerce-notices-wrapper {
	width: 100%;
	padding-inline: var(--wo-gutter);
}

@media (max-width: 599.98px) {

	.woocommerce-cart .wo-main .woocommerce-info,
	.woocommerce-cart .wo-main .woocommerce-message,
	.woocommerce-cart .wo-main .woocommerce-error,
	.woocommerce-checkout .wo-main .woocommerce-info,
	.woocommerce-checkout .wo-main .woocommerce-message,
	.woocommerce-checkout .wo-main .woocommerce-error {
		/* fit-content plus a gutter would leave the box hugging one
		   edge on a small screen; full width reads better there. */
		width: auto;
		margin-inline: var(--wo-gutter);
		padding: var(--wo-space-3) var(--wo-space-4) !important;
	}
}

/* Woo's "Undo?" link inside the removed-item message. */
.woocommerce-cart .wo-main .woocommerce-message .restore-item,
.woocommerce-cart .wo-main .woocommerce-message a {
	margin-left: var(--wo-space-2);
	font-weight: var(--wo-weight-semibold);
}


/* ==================================================================
   P. BUTTONS INSIDE THE ENTRY CONTENT
   The cart shortcode renders inside .wo-page__content.wo-entry-content,
   and 03-typography.css styles every link in that region:

       .wo-entry-content a { color: var(--wo-primary-hover);
                             text-decoration: underline; }

   That selector is more specific than .wo-btn, so every button-shaped
   link on these two pages was drawn with purple text on a purple fill
   and an underline through it. That - not the fill - is why the empty
   cart's "Shop Fragrances" button looked washed out.
   ================================================================== */

.woocommerce-cart .wo-entry-content .wo-btn,
.woocommerce-checkout .wo-entry-content .wo-btn {
	color: var(--btn-color);
	text-decoration: none;
}

.woocommerce-cart .wo-entry-content .wo-btn:hover,
.woocommerce-checkout .wo-entry-content .wo-btn:hover {
	color: var(--btn-color);
	text-decoration: none;
}

/* The empty-cart call to action is the only button on its page, so it
   carries the same weight as the hero button on the home page:
   54px tall, 17px label, a light top edge for definition, and a
   deeper glow. */
.woocommerce-cart .wo-cart-empty .wo-btn--primary {
	--btn-color: var(--wo-text-on-primary);

	padding: 1rem var(--wo-space-10);
	min-height: 54px;
	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: 0.01em;

	color: var(--wo-text-on-primary);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		0 8px 30px rgba(124, 92, 255, 0.50),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
	text-decoration: none;
}

.woocommerce-cart .wo-cart-empty .wo-btn--primary:hover {
	color: var(--wo-text-on-primary);
	background: linear-gradient(135deg, var(--wo-primary-hover) 0%, var(--wo-primary) 100%);
	border-color: rgba(255, 255, 255, 0.34);
	box-shadow:
		0 12px 36px rgba(124, 92, 255, 0.60),
		inset 0 1px 0 rgba(255, 255, 255, 0.34);
	transform: translateY(-2px);
}

.woocommerce-cart .wo-cart-empty .wo-btn--primary:active {
	transform: translateY(0);
}

.woocommerce-cart .wo-cart-empty .wo-btn--primary:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring), 0 8px 30px rgba(124, 92, 255, 0.50);
}

.woocommerce-cart .wo-cart-empty .wo-btn-row {
	margin-top: var(--wo-space-8);
}


/* ==================================================================
   Q. UPDATE CART BUTTON
   Hidden only once the auto-update script has confirmed it is running
   by adding .wo-cart-autoupdate to the form. If the script fails or
   JavaScript is off, the class is never added and the button stays,
   so the cart can always be updated by hand.
   ================================================================== */

.woocommerce-cart-form.wo-cart-autoupdate .wo-cart-form__actions [name='update_cart'],
.woocommerce-cart-form.wo-cart-autoupdate button[name='update_cart'],
.woocommerce-cart-form.wo-cart-autoupdate input[name='update_cart'] {
	display: none;
}

/* With the button gone the row holds only the nonce, so it should not
   keep reserving space. Hidden inputs are still submitted. */
.woocommerce-cart-form.wo-cart-autoupdate .wo-cart-form__actions {
	gap: 0;
	margin: 0;
}

/* Quiet feedback while the cart is being recalculated. */
.woocommerce-cart-form.is-updating {
	position: relative;
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--wo-duration-fast) var(--wo-ease);
}

@media (prefers-reduced-motion: reduce) {

	.woocommerce-cart-form.is-updating {
		transition: none;
	}
}


/* ==================================================================
   R. ORDER SUMMARY - VERTICAL RHYTHM
   Section L stopped content escaping the card. This one is about the
   space between the things inside it: the heading, each line item,
   the totals, and the payment block were all sharing the same tight
   rhythm and read as one dense mass.
   ================================================================== */

/* Line items and totals get the same row height as the cart summary
   so the two pages feel like one design. */
.woocommerce-checkout-review-order-table tr {
	padding-block: var(--wo-space-4);
	gap: var(--wo-space-5);
}

/* Breathing room where the item list ends and the totals begin. */
.woocommerce-checkout-review-order-table tfoot {
	display: block;
	margin-top: var(--wo-space-2);
}

.woocommerce-checkout-review-order-table tfoot .order-total {
	margin-top: var(--wo-space-3);
	padding-top: var(--wo-space-5);
	padding-bottom: var(--wo-space-2);
}

/* Shipping rows carry a radio list, so they need more room than a
   single-line total. */
.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals {
	align-items: flex-start;
	padding-block: var(--wo-space-4);
}

.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th {
	padding-top: 2px;
}

/* Payment: more separation from the total above it, and room around
   the method list, the policy text and the place-order button. */
.wo-summary--checkout #payment,
.woocommerce-checkout .wo-summary--checkout #payment {
	margin-top: var(--wo-space-6);
	padding-top: var(--wo-space-6);
}

.wo-summary--checkout #payment ul.payment_methods {
	margin-bottom: var(--wo-space-5);
}

.wo-summary--checkout #payment ul.payment_methods li {
	padding: var(--wo-space-4) var(--wo-space-4);
	margin-bottom: var(--wo-space-3);
}

.wo-summary--checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0;
}

.wo-summary--checkout #payment div.payment_box {
	margin-top: var(--wo-space-3);
	padding: var(--wo-space-4);
}

.wo-summary--checkout .woocommerce-privacy-policy-text {
	margin-block: var(--wo-space-4) var(--wo-space-5);
}

.wo-summary--checkout #payment #place_order {
	margin-top: var(--wo-space-2);
}

/* Roomier rows. Kept as a scoped override so the base rule in
   section D stays exactly as it shipped. */
.woocommerce-cart .wo-summary__row,
.woocommerce-checkout .wo-summary__row {
	padding-block: var(--wo-space-4);
}

/* The cart's own summary keeps pace with the checkout one. */
.woocommerce-cart .wo-summary__action,
.woocommerce-checkout .wo-summary__action {
	margin-top: var(--wo-space-6);
}

.woocommerce-cart .wo-summary__continue,
.woocommerce-checkout .wo-summary__continue {
	margin-top: var(--wo-space-5);
}

/* Phones: the card keeps a real inset rather than collapsing to the
   old flat 20px. */
@media (max-width: 599.98px) {

	/* Matches the clamp floor above rather than undercutting it. */
	.woocommerce-cart .wo-summary,
	.woocommerce-checkout .wo-summary {
		padding: var(--wo-space-6);
	}

	.woocommerce-checkout-review-order-table tr {
		gap: var(--wo-space-4);
		padding-block: var(--wo-space-3);
	}
}


/* ==================================================================
   S. NOTICE APPEARANCE
   WooCommerce ships its notice colours both as .woocommerce-info
   (0,1,0) and as .woocommerce .woocommerce-info (0,2,0). The first
   ties with the theme's own rule and is decided by load order; the
   second wins outright. Which one applies therefore depends on the
   WooCommerce version and on whether the notice happens to be printed
   inside a .woocommerce wrapper - so a notice can come out either
   WaxOrbit-dark or WooCommerce-light on the same site.

   These declarations settle it: on cart and checkout the notice is
   always the theme's dark glass surface with a single accent edge.
   ================================================================== */

.woocommerce-cart .wo-main .woocommerce-info,
.woocommerce-cart .wo-main .woocommerce-message,
.woocommerce-cart .wo-main .woocommerce-error,
.woocommerce-checkout .wo-main .woocommerce-info,
.woocommerce-checkout .wo-main .woocommerce-message,
.woocommerce-checkout .wo-main .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);

	color: var(--wo-text);
	background-color: var(--wo-surface);
	background-image: none;

	border: 1px solid var(--wo-line);
	border-top-width: 1px;
	border-left-width: 3px;
	border-radius: var(--wo-radius);

	box-shadow: 0 10px 30px rgba(6, 3, 20, 0.28);
}

.woocommerce-cart .wo-main .woocommerce-message,
.woocommerce-checkout .wo-main .woocommerce-message {
	border-top-color: var(--wo-line);
	border-left-color: var(--wo-success);
	background-color: rgba(74, 222, 128, 0.08);
}

.woocommerce-cart .wo-main .woocommerce-info,
.woocommerce-checkout .wo-main .woocommerce-info {
	border-top-color: var(--wo-line);
	border-left-color: var(--wo-gold);
	background-color: var(--wo-gold-soft);
}

.woocommerce-cart .wo-main .woocommerce-error,
.woocommerce-checkout .wo-main .woocommerce-error {
	border-top-color: var(--wo-line);
	border-left-color: var(--wo-error);
	background-color: rgba(255, 107, 107, 0.08);
	flex-direction: column;
	align-items: flex-start;
}

/* Woo prints errors as a <ul>; the bullets and indent are core's. */
.woocommerce-cart .wo-main .woocommerce-error li,
.woocommerce-checkout .wo-main .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wo-text);
}


/* ==================================================================
   T. ORDER SUMMARY - LINE ITEM INSET
   The card padding sets the distance to the border; this sets the
   distance between the columns inside a row, which is what makes a
   line item read as cramped even when the card itself is padded.
   ================================================================== */

.woocommerce-checkout-review-order-table td.product-name {
	padding-right: var(--wo-space-2) !important;
}

.woocommerce-checkout-review-order-table tr,
.woocommerce-cart .wo-summary__row,
.woocommerce-checkout .wo-summary__row {
	gap: var(--wo-space-6);
}

/* The quantity marker gets its own breathing space from the name. */
.woocommerce-checkout-review-order-table .product-quantity {
	margin-left: var(--wo-space-2);
	white-space: nowrap;
}


/* ==================================================================
   U. ORDER NOTES / ADDITIONAL INFORMATION
   The textarea was rendering as a plain white box. The shared field
   rule in 06-forms.css does cover `textarea`, but WooCommerce ships
   its own `.woocommerce form .form-row textarea` at a higher
   specificity, and on top of that a bare <textarea> falls back to the
   UA stylesheet's white canvas wherever neither rule reaches it
   (Woo renders #order_comments without the .input-text class in some
   versions). It is restated here at a specificity nothing else on the
   page beats.
   ================================================================== */

.woocommerce-checkout .wo-checkout-section textarea,
.woocommerce-checkout .woocommerce-additional-fields textarea,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout textarea#order_comments,
.woocommerce-checkout textarea.input-text {
	display: block;
	width: 100%;
	min-height: 132px;
	padding: var(--wo-space-4) var(--wo-space-5);

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-base);
	line-height: 1.6;
	color: var(--wo-text);

	/* Same glass recipe as every other field on the page. */
	background: rgba(255, 255, 255, 0.05);
	background-image: none;
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

	resize: vertical;
	-webkit-appearance: none;
	appearance: none;

	transition:
		border-color var(--wo-transition),
		background var(--wo-transition),
		box-shadow var(--wo-transition);
}

.woocommerce-checkout .wo-checkout-section textarea::placeholder,
.woocommerce-checkout form .form-row textarea::placeholder,
.woocommerce-checkout textarea#order_comments::placeholder {
	color: var(--wo-text-dim);
	opacity: 1;
}

.woocommerce-checkout .wo-checkout-section textarea:hover,
.woocommerce-checkout form .form-row textarea:hover,
.woocommerce-checkout textarea#order_comments:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--wo-line-strong);
}

.woocommerce-checkout .wo-checkout-section textarea:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout textarea#order_comments:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wo-primary);
	box-shadow: var(--wo-ring);
}

/* The section heading and its label share the page's type scale. */
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-2xl);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	margin: 0 0 var(--wo-space-5);
	padding-bottom: var(--wo-space-4);
	border-bottom: 1px solid var(--wo-line);
}

.woocommerce-checkout .woocommerce-additional-fields .form-row label,
.woocommerce-checkout #order_comments_field > label {
	display: block;
	margin-bottom: var(--wo-space-2);
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	letter-spacing: 0.01em;
	color: var(--wo-text);
}

.woocommerce-checkout .woocommerce-additional-fields {
	margin-bottom: var(--wo-space-8);
}


/* ==================================================================
   V. BROWSER AUTOFILL
   Chrome, Edge and Safari paint their own opaque background on an
   autofilled field and it cannot be overridden with background-color
   - the UA style wins. The accepted workaround is an inset box-shadow
   thick enough to cover the field, plus -webkit-text-fill-color for
   the text, which likewise overrides the UA's colour.

   The very long background-color transition keeps the yellow flash
   from appearing at all: the animation never reaches its end state.
   ================================================================== */

.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus,
.woocommerce-checkout input:-webkit-autofill:active,
.woocommerce-checkout textarea:-webkit-autofill,
.woocommerce-checkout textarea:-webkit-autofill:hover,
.woocommerce-checkout textarea:-webkit-autofill:focus,
.woocommerce-checkout select:-webkit-autofill,
.woocommerce-checkout select:-webkit-autofill:hover,
.woocommerce-checkout select:-webkit-autofill:focus,
.woocommerce-cart input:-webkit-autofill,
.woocommerce-cart input:-webkit-autofill:hover,
.woocommerce-cart input:-webkit-autofill:focus {
	/* 100px of inset shadow repaints the whole field in the theme
	   surface colour. It must be opaque - a translucent value lets
	   the UA's white show through. */
	-webkit-box-shadow: 0 0 0 100px #241A4D inset !important;
	box-shadow: 0 0 0 100px #241A4D inset !important;

	-webkit-text-fill-color: var(--wo-text) !important;
	caret-color: var(--wo-text);
	border: 1px solid var(--wo-line) !important;
	border-radius: var(--wo-radius-md);

	transition: background-color 100000s ease-in-out 0s !important;
}

.woocommerce-checkout input:-webkit-autofill:focus,
.woocommerce-checkout textarea:-webkit-autofill:focus,
.woocommerce-checkout select:-webkit-autofill:focus {
	border-color: var(--wo-primary) !important;
}

/* Firefox uses its own mechanism and does honour a normal colour. */
.woocommerce-checkout input:autofill,
.woocommerce-checkout textarea:autofill {
	background: rgba(255, 255, 255, 0.05);
	color: var(--wo-text);
}

/* Woo's select boxes keep the dark canvas when the OS list opens. */
.woocommerce-checkout select option {
	color: #FFFFFF;
	background-color: #241A4D;
}


/* ==================================================================
   W. FIND MORE FRAGRANCES
   Recommendation strip under the cart items. Reuses .wo-grid--products
   and the shared product card, so the cards are identical to the shop
   and home grids and inherit their breakpoints (2 -> 3 at 768px ->
   4 at 1200px, from 13-responsive.css).

   The count is capped at 3 here, so the fourth track that opens at
   1200px would otherwise leave a hole; the grid is pinned to 3 from
   768px up instead.
   ================================================================== */

.wo-cart-reco {
	margin-top: var(--wo-space-12, 3rem);
	padding-top: var(--wo-section-y-sm, 2.5rem);
	border-top: 1px solid var(--wo-line-faint);
}

.wo-cart-reco__head {
	margin-bottom: var(--wo-space-6);
}

.wo-cart-reco__title {
	margin: 0 0 var(--wo-space-2);
	font-family: var(--wo-font-display);
	font-size: clamp(1.375rem, 1.2vw + 1.1rem, 1.875rem);
	font-weight: var(--wo-weight-semibold);
	line-height: 1.2;
	color: var(--wo-text);
}

.wo-cart-reco__text {
	margin: 0;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
}

.wo-cart-reco__grid {
	width: 100%;
	min-width: 0;
}

.wo-cart-reco__grid > * {
	min-width: 0;
}

/* Three cards, three tracks. */
@media (min-width: 768px) {

	.wo-cart-reco__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.woocommerce-cart .wo-cart-reco__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Phones: two across is too tight for a card with a price and a
   button, so the strip scrolls the same way the shop filters do. */
@media (max-width: 599.98px) {

	.wo-cart-reco {
		margin-top: var(--wo-space-8);
		padding-top: var(--wo-space-8);
	}

	.wo-cart-reco__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wo-space-3);
	}
}


/* ==================================================================
   X. ORDER SUMMARY - THE NESTED TABLE BOX
   Root cause of "content is touching the border".

   The review order table carries BOTH of Woo's classes:

       <table class="shop_table woocommerce-checkout-review-order-table">

   and 10-woocommerce.css styles the first one:

       .woocommerce table.shop_table {          <- (0,2,1)
           border: 1px solid var(--wo-line);
           border-radius: var(--wo-radius-lg);
           background: rgba(255,255,255,0.03);
           overflow: hidden;
           margin-bottom: var(--wo-space-8);
       }

   Section E resets the table with
   .woocommerce-checkout-review-order-table (0,1,0), which loses. So
   the table was drawing a SECOND rounded, bordered, tinted box inside
   the summary card, and because the table has no padding of its own
   every row sat 1px from that inner border. Measured at 21 widths:
   the rows were 2px from the card's padding edge, i.e. flush against
   a border the design never asked for.

   Its overflow:hidden was also silently clipping anything that did
   escape, which is exactly the "just hide it" behaviour to avoid -
   it is set back to visible here so the audit can see real overflow
   rather than a cropped picture of it.

   Specificity is raised past .woocommerce table.shop_table rather
   than reaching for !important, so a plugin can still override it.
   ================================================================== */

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table,
.woocommerce-checkout .wo-summary--checkout table.shop_table {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;

	/* No second box. The summary card is the only container. */
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;

	/* Not hidden: real overflow must stay visible so it can be seen
	   and fixed, not cropped. */
	overflow: visible;

	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
}

/* Section headers Woo prints in the table head. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: none;
	border: 0;
}

/* Rows: flex, full width, allowed to grow taller but never wider.
   The card grows vertically with them because nothing here sets a
   height and the card is a normal block. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wo-space-5);

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 0;
	padding-block: var(--wo-space-4);

	background: none;
	border: 0;
	border-bottom: 1px solid var(--wo-line-faint);
}

/* Cells: the label side is the only flexible one, and it is the only
   one allowed to wrap. The figure keeps its intrinsic width so a
   nowrap amount can never be squeezed past the edge. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;

	margin: 0;
	padding: 0;
	border: 0;
	background: none;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-normal);
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--wo-text-muted);

	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
	display: block;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;

	margin: 0;
	padding: 0;
	border: 0;
	background: none;

	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	text-align: right;
	white-space: nowrap;
}

/* Line items: the product name is a <td>, not a <th>, so it needs the
   flexible treatment explicitly or it inherits the rigid nowrap rule
   above and pushes the price out. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-name {
	flex: 1 1 auto;
	min-width: 0;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-normal);
	line-height: 1.45;
	color: var(--wo-text);
	text-align: left;

	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* The amount itself must not be wider than the cell it sits in. A
   very large total on a 320px screen is the case that breaks: the
   figure is allowed to wrap at its separators rather than run over. */
.woocommerce-checkout .wo-summary--checkout .amount,
.woocommerce-checkout .wo-summary--checkout .woocommerce-Price-amount {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Variation / meta Woo prints under a line item. */
.woocommerce-checkout .wo-summary--checkout td.product-name dl.variation,
.woocommerce-checkout .wo-summary--checkout td.product-name .variation {
	margin: var(--wo-space-1) 0 0;
	padding: 0;
	font-size: var(--wo-text-xs);
	line-height: 1.4;
	color: var(--wo-text-dim);
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout td.product-name dl.variation dt {
	display: inline;
	margin: 0 0.35em 0 0;
	font-weight: var(--wo-weight-medium);
}

.woocommerce-checkout .wo-summary--checkout td.product-name dl.variation dd {
	display: inline;
	margin: 0 var(--wo-space-2) 0 0;
}

.woocommerce-checkout .wo-summary--checkout td.product-name dl.variation p {
	display: inline;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* Coupon rows carry a [Remove] link inside the label. */
.woocommerce-checkout .wo-summary--checkout tr.cart-discount th,
.woocommerce-checkout .wo-summary--checkout tr.fee th,
.woocommerce-checkout .wo-summary--checkout tr.tax-rate th {
	font-size: var(--wo-text-sm);
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout tr.cart-discount td,
.woocommerce-checkout .wo-summary--checkout tr.cart-discount .amount {
	color: var(--wo-success);
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: var(--wo-space-2);
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	white-space: nowrap;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-remove-coupon:hover {
	color: var(--wo-error);
}

.woocommerce-checkout .wo-summary--checkout th small {
	display: block;
	margin-top: 2px;
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	overflow-wrap: anywhere;
}

/* Shipping is the one row that stacks: a list of methods cannot sit
   beside its label in a 280px column without one of them overflowing.

   The selectors below must carry the SAME prefix as the generic tr /
   th / td rules above, plus the class, or they lose. The generic row
   rule is (0,4,1); `.wo-summary--checkout tr.shipping` is only
   (0,3,1), so an earlier attempt at this left flex-wrap: nowrap in
   force and the two full-width cells overflowed the row by 395px.

   flex is 0 0 100% rather than 1 1 100% for the same reason the wrap
   matters: with shrink enabled both cells re-fit onto one line and
   the method list drops back into a ~130px gutter. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: var(--wo-space-2);
	column-gap: 0;
}

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom: var(--wo-space-1);
	font-size: var(--wo-text-base);
	color: var(--wo-text-muted);
}

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.shipping td,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.shipping td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	flex: 0 0 100%;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

/* Totals row. */
.woocommerce-checkout .wo-summary--checkout tfoot tr.order-total {
	margin-top: var(--wo-space-2);
	padding-top: var(--wo-space-5);
	padding-bottom: 0;

	border-bottom: 0;
	border-top: 1px solid var(--wo-line);
}

.woocommerce-checkout .wo-summary--checkout tfoot tr.order-total th {
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.woocommerce-checkout .wo-summary--checkout tfoot tr.order-total td,
.woocommerce-checkout .wo-summary--checkout tfoot tr.order-total .amount {
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}

/* First and last rows align with the card's own padding instead of
   doubling it. */
.woocommerce-checkout .wo-summary--checkout tbody tr:first-child {
	padding-top: 0;
}

.woocommerce-checkout .wo-summary--checkout tfoot tr:last-child {
	border-bottom: 0;
}

/* The card is a plain block: it has no height, so it grows with its
   content however many lines Woo adds. Stated explicitly because a
   sticky aside with a fixed max-height would reintroduce clipping. */
.woocommerce-checkout .wo-summary--checkout,
.woocommerce-checkout .wo-summary--checkout #order_review,
.woocommerce-checkout .wo-summary--checkout .woocommerce-checkout-review-order {
	height: auto;
	max-height: none;
	overflow: visible;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	background-color: transparent;
	border: 0;
}

/* ...except the card itself, which keeps its own surface. */
.woocommerce-checkout .wo-summary--checkout {
	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
}


/* ==================================================================
   Y. SHIPPING METHOD LIST
   Restores the method list to the left column now that the shipping
   row stacks. Section L had styled this list for the old side-by-side
   layout - right-aligned, wrapping, justified to the end - which left
   the radio stranded on its own line above its label once the row
   became full width.

   Selectors carry .wo-summary--checkout so they outrank section L's
   .wo-summary version at equal ID count.
   ================================================================== */

.woocommerce-checkout .wo-summary--checkout ul#shipping_method,
.woocommerce-checkout .wo-summary--checkout ul.woocommerce-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-3);

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;
	list-style: none;

	text-align: left;
	font-size: var(--wo-text-sm);
}

.woocommerce-checkout .wo-summary--checkout ul#shipping_method li,
.woocommerce-checkout .wo-summary--checkout ul.woocommerce-shipping-methods li {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--wo-space-3);

	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;

	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* The radio is a fixed square that must never shrink, or it turns
   into a sliver next to a long courier name. */
.woocommerce-checkout .wo-summary--checkout ul#shipping_method li input[type='radio'],
.woocommerce-checkout .wo-summary--checkout ul.woocommerce-shipping-methods li input[type='radio'] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 0;
	margin: 3px 0 0;
	padding: 0;
}

/* The label takes the rest and is the part that wraps. */
.woocommerce-checkout .wo-summary--checkout ul#shipping_method li label,
.woocommerce-checkout .wo-summary--checkout ul.woocommerce-shipping-methods li label {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;

	margin: 0;
	padding: 0;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-normal);
	line-height: 1.45;
	color: var(--wo-text-muted);

	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout ul#shipping_method li label .amount {
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	white-space: nowrap;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-shipping-destination,
.woocommerce-checkout .wo-summary--checkout .shipping-calculator-button,
.woocommerce-checkout .wo-summary--checkout .woocommerce-shipping-calculator {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: var(--wo-space-3) 0 0;

	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	line-height: 1.5;
	color: var(--wo-text-dim);

	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-shipping-destination strong {
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text-muted);
}


/* ==================================================================
   Y. ORDER SUMMARY - FINAL CONTAINMENT MODEL
   Section X rebuilt the review table as flex rows. This section
   closes the last way content could still leave the card and brings
   the checkout summary onto exactly the same row model as the cart
   summary, which is what it should have used from the start.

   The remaining hole in X was `flex-wrap: nowrap` on the row. The
   label can shrink to nothing and the figure keeps its intrinsic
   width, so the pair fits *as long as the figure itself is narrower
   than the card*. A large enough total - or a narrow enough card -
   breaks that assumption and the figure has nowhere to go but out.
   Wrapping gives it somewhere: it drops onto its own line and the
   card grows taller, which is the behaviour asked for.

   Nothing here uses overflow:hidden. Containment comes from sizing.
   ================================================================== */

/* ---- The chain of ancestors, each allowed to shrink ----
   A single missing min-width:0 anywhere in this chain lets a wide
   descendant push the whole card past the grid column, so the chain
   is stated end to end rather than relying on defaults. */

.woocommerce-checkout .wo-shop-page,
.woocommerce-checkout .wo-shop-page__grid,
.woocommerce-checkout .wo-shop-page__aside,
.woocommerce-checkout .wo-summary--checkout,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #order_review {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* The aside track must be able to fall below its preferred width on
   a narrow desktop rather than forcing the grid wider. */
@media (min-width: 992px) {

	.woocommerce-checkout .wo-shop-page__grid {
		grid-template-columns: minmax(0, 1.7fr) minmax(min(340px, 100%), 1fr);
	}
}

/* ---- Rows wrap as a last resort ---- */

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr {
	flex-wrap: wrap;
	align-items: baseline;

	/* Column gap keeps label and figure apart on one line; the row
	   gap only applies once they have actually wrapped. */
	gap: var(--wo-space-2) var(--wo-space-5);
}

/* When the figure does wrap it stays on the right, matching the
   unwrapped state instead of jumping to the left margin. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
	margin-left: auto;
	text-align: right;
}

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-name {
	margin-left: 0;
	text-align: left;
}

/* ---- Amounts: a three-stage fallback ----
   1. label and figure share one line  (the normal case)
   2. the figure wraps onto its own line   (narrow card)
   3. the figure itself breaks             (last resort)

   Stage 3 needs white-space to be normal. With nowrap the
   overflow-wrap below is simply ignored, which is why a large figure
   was still escaping: measured at a 180px card, a 117px-wide total
   sat in a 101px cell and there was no legal break point.

   overflow-wrap: anywhere only breaks a token when it would
   otherwise overflow, so an ordinary figure on an ordinary card is
   never split - verified at every real breakpoint below. */
.woocommerce-checkout .wo-summary--checkout .amount,
.woocommerce-checkout .wo-summary--checkout bdi {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Stage 2 requires the cell to be able to give up width once it has
   a line of its own. flex-basis stays auto so max-content is still
   the preferred size; only the shrink factor changes. */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
}

/* The quantity marker is part of the product name and may wrap with
   it rather than holding the line open. */
.woocommerce-checkout .wo-summary--checkout .product-quantity {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ---- Coupon, fee, tax and discount rows ----
   Woo adds these dynamically, so they were never part of the
   original static markup this file was written against. */

.woocommerce-checkout .wo-summary--checkout tr.cart-discount th,
.woocommerce-checkout .wo-summary--checkout tr.fee th,
.woocommerce-checkout .wo-summary--checkout tr.tax-rate th,
.woocommerce-checkout .wo-summary--checkout tr.tax-total th {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.woocommerce-checkout .wo-summary--checkout tr.cart-discount td,
.woocommerce-checkout .wo-summary--checkout tr.cart-discount .amount {
	color: var(--wo-success);
}

/* The coupon cell holds two things - the figure and a [Remove] link -
   so it is a wrapping flex row of its own. Measured at a forced card
   width of 220px, an inline-block nowrap link overflowed by 35px and
   by 67px at 150px; as a flex child it drops onto its own line
   instead. */
.woocommerce-checkout .wo-summary--checkout tr.cart-discount td {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--wo-space-1) var(--wo-space-2);

	min-width: 0;
	max-width: 100%;
	white-space: normal;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-remove-coupon {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: 0;

	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	text-decoration: underline;
	text-underline-offset: 0.2em;

	/* Not nowrap: at a very narrow card this is what escaped. */
	white-space: normal;
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-remove-coupon:hover {
	color: var(--wo-error);
}

/* ---- Shipping cell ----
   Holds a radio list, a destination line and a calculator toggle,
   all of which are block-level and must wrap inside the cell. */

.woocommerce-checkout .wo-summary--checkout tr.shipping td,
.woocommerce-checkout .wo-summary--checkout tr.woocommerce-shipping-totals td {
	flex: 1 1 100%;
	min-width: 0;
	margin-left: 0;
	white-space: normal;
	text-align: right;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-shipping-destination {
	margin: var(--wo-space-2) 0 0;
	font-size: var(--wo-text-xs);
	line-height: 1.5;
	color: var(--wo-text-dim);
	text-align: right;
	overflow-wrap: anywhere;
}

.woocommerce-checkout .wo-summary--checkout .woocommerce-shipping-calculator {
	margin: var(--wo-space-2) 0 0;
	text-align: right;
}

.woocommerce-checkout .wo-summary--checkout .shipping-calculator-button {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-muted);
}

.woocommerce-checkout .wo-summary--checkout .shipping-calculator-form {
	margin-top: var(--wo-space-3);
	text-align: left;
}

.woocommerce-checkout .wo-summary--checkout .shipping-calculator-form .form-row {
	margin-bottom: var(--wo-space-3);
}

/* ---- Total row: same weight as the cart summary's total ---- */

.woocommerce-checkout .wo-summary--checkout tr.order-total {
	border-bottom: none;
	padding-bottom: 0;
}

.woocommerce-checkout .wo-summary--checkout tr.order-total th {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

.woocommerce-checkout .wo-summary--checkout tr.order-total td,
.woocommerce-checkout .wo-summary--checkout tr.order-total .amount {
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}

/* Woo prints a small tax note under the total on some setups. */
.woocommerce-checkout .wo-summary--checkout .includes_tax,
.woocommerce-checkout .wo-summary--checkout small {
	display: block;
	margin-top: var(--wo-space-1);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	white-space: normal;
}

/* ---- Narrow cards ----
   Below 400px of card width the label/figure pair rarely fits on one
   line, so the row is stacked deliberately rather than left to wrap
   raggedly. Uses a container query where supported and falls back to
   a viewport query where not. */

.woocommerce-checkout .wo-summary--checkout {
	container-type: inline-size;
	container-name: wo-summary;
}

/* The threshold is 200px of *inline-size*, i.e. the card's content
   box, not its border box. An earlier value of 340px was measured
   against the border box by mistake and matched a perfectly roomy
   340px-wide card at the 992px breakpoint, stacking every row in the
   summary when all ten of them had space to sit inline.

   At 200px the wrap behaviour in sections Y and Z has already done
   the work, so this is only a tidier presentation of a case that is
   contained either way. */
@container wo-summary (max-width: 200px) {

	.woocommerce-checkout-review-order-table tbody tr,
	.woocommerce-checkout-review-order-table tfoot tr {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wo-space-1);
	}

	.woocommerce-checkout-review-order-table td {
		margin-left: 0;
		text-align: right;
	}
}


/* ==================================================================
   Z. WRAP THRESHOLD
   Enabling flex-wrap in section Y made the figure drop to its own
   line far too readily: with flex-basis:auto the label's base size is
   its max-content width, so a long product name alone was enough to
   push the price off line one even on a 437px card with room to
   spare.

   Giving the label a zero basis and an explicit minimum makes the
   wrap threshold meaningful: line one holds while
   (label minimum + figure) fits, and only genuinely breaks after
   that. min() keeps the minimum itself from becoming an overflow
   source on a very narrow card.
   ================================================================== */

.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-name {
	flex: 1 1 0;
	min-width: min(7rem, 100%);
}

/* The shipping cell already claims a full line of its own, so its
   label should not reserve space beside it. */
.woocommerce-checkout .wo-summary--checkout tr.shipping th,
.woocommerce-checkout .wo-summary--checkout tr.woocommerce-shipping-totals th {
	flex: 1 1 100%;
	min-width: 0;
}

/* The total's label is one short word, so holding 7rem open for it
   pushed a large figure onto a second line on the 340px card at the
   992px breakpoint. It only needs its own width. */
.woocommerce-checkout .wo-summary--checkout tr.order-total th,
.woocommerce-checkout .wo-summary--checkout tr.cart-subtotal th {
	flex: 0 1 auto;
	min-width: 0;
}