/*
 * Cart + Checkout — both use WooCommerce's classic shortcode
 * templates ([woocommerce_cart] / [woocommerce_checkout]), styled
 * entirely via their stable native class names. No template
 * overrides here deliberately — this keeps WooCommerce's own
 * order-review AJAX, payment-gateway rendering, and validation
 * completely untouched; only the presentation is custom.
 */

.woocommerce-cart .page-content__header,
.woocommerce-checkout .page-content__header {
	padding-top: var(--space-6);
	margin-bottom: var(--space-6);
}

/* The site-wide h1 size (--fs-4xl, ~62px) is sized for the homepage/
   category hero moments — too heavy for a utility page like Cart or
   Checkout that the shopper just needs to get through. Both share the
   same smaller size so the two pages feel like one consistent flow. */
.woocommerce-cart .page-content__title,
.woocommerce-checkout .page-content__title {
	font-size: var(--fs-2xl);
}

/* page.php wraps all Page content in .page-content__body, which caps
   width at 72ch (layout.css) — a sensible default for prose pages
   (About, policies) but wrong here: it was squeezing the cart table,
   checkout form and order-review sidebar into one narrow text-width
   column with a large empty gutter beside it. These pages need the
   full content width their own grid/table layouts already assume. */
.woocommerce-cart .page-content__body,
.woocommerce-checkout:not(.woocommerce-order-received) .page-content__body {
	max-width: none;
}

.woocommerce-order-received .page-content__body {
	max-width: 980px;
	margin-inline: auto;
}

/* ---- Cart table ---- */
table.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-8);
}

table.shop_table.cart thead th {
	text-align: left;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-ink-muted);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

table.shop_table.cart thead th.product-remove {
	width: 1%;
}

table.shop_table.cart thead th.product-thumbnail {
	width: 110px;
}

table.shop_table.cart td {
	padding: var(--space-5) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

table.shop_table.cart td.product-remove {
	padding-right: 0;
}

table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	color: var(--color-ink-muted) !important;
	background: var(--color-bg-alt);
	font-size: var(--fs-lg);
	line-height: 1;
	text-decoration: none !important;
}

table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--color-error-tint);
	color: var(--color-error) !important;
}

table.shop_table.cart td.product-thumbnail img {
	width: 90px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}

table.shop_table.cart td.product-name a {
	font-weight: var(--fw-medium);
	color: var(--color-ink);
}

table.shop_table.cart td.product-name .variation {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
}

table.shop_table.cart td.product-name .variation dt,
table.shop_table.cart td.product-name .variation dd {
	display: inline;
	margin: 0;
}

table.shop_table.cart td.product-name .variation dd p {
	display: inline;
}

table.shop_table.cart td.product-price,
table.shop_table.cart td.product-subtotal {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

table.shop_table.cart td.product-subtotal {
	font-weight: var(--fw-semibold);
}

table.shop_table.cart .backorder_notification {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-error);
}

/* ---- Cart layout: 2-column grid matching Checkout ----
   The continue-shopping link spans the full width up top; the items
   table + coupon sit in a left column, and Cart totals becomes a
   sticky right-hand sidebar — the same billing-form / order-summary
   split as the Checkout page, so the two pages read as one consistent
   flow instead of the totals box just being right-aligned below a
   full-width table. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 0 var(--space-8);
	align-items: start;
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .cart-continue-shopping {
	grid-column: 1 / -1;
	/* Grid items stretch to fill their cell by default. That's fine
	   for a block-level item, but .cart-continue-shopping is an
	   inline-flex link (icon + text) meant to size to its own content —
	   stretched to the full 2-column width, its SVG arrow (sized as a
	   percentage of its container) scaled up into a huge icon instead
	   of staying a small inline arrow. */
	justify-self: start;
}

.woocommerce-cart form.woocommerce-cart-form {
	grid-column: 1;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

/* ---- Cart actions row (coupon + update cart) ---- */
.cart-collaterals {
	display: grid;
	gap: var(--space-8);
}

tr.woocommerce-cart-form__cart-item + tr td {
	border: none;
}

.woocommerce-cart-form__contents + .actions,
.cart .coupon,
tr td.actions {
	padding-top: var(--space-2);
}

.cart td.actions,
tr td.actions {
	border-bottom: none;
}

/* WooCommerce puts .coupon (the code input + Apply button) and the
   Update cart button as separate siblings in this cell, not nested.
   .coupon defaulted to a block-level flex box, which took its own
   full line and dropped Update cart onto an orphaned line below it
   instead of sitting alongside. Note: this is deliberately NOT fixed
   by setting `display: flex` on the <td> itself — a <td> is part of
   the table layout algorithm, and overriding its display away from
   table-cell made the browser size it by shrink-to-fit content
   instead of the table's actual column width, collapsing the whole
   row down to ~230px and making everything wrap onto separate lines
   again, just one level up. Switching .coupon to inline-flex keeps
   the <td> as a normal (full-width) table-cell and simply lets
   .coupon flow inline, right next to the Update cart button, wrapping
   naturally at the cell's real width. */
.coupon {
	display: inline-flex;
	vertical-align: middle;
	gap: var(--space-2);
	align-items: center;
	flex-wrap: wrap;
}

button[name="update_cart"] {
	vertical-align: middle;
	margin-left: var(--space-3);
}

.coupon .input-text {
	max-width: 220px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	font-size: var(--fs-sm);
}

.coupon .input-text:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

.coupon button,
button[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.coupon button:hover,
button[name="update_cart"]:hover {
	background: var(--color-ink-solid);
	color: #fff;
}

.coupon button:disabled,
button[name="update_cart"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* cart.js already auto-submits the cart (debounced) whenever a
   quantity input changes — typed directly or via the +/- stepper
   buttons — by programmatically clicking this button behind the
   scenes; item removal is separately AJAX-native via WooCommerce's
   own script. So the button itself has no manual purpose for a
   shopper and is just hidden, not removed: cart.js's own
   `updateBtn.click()` still works perfectly well on a hidden button. */
button[name="update_cart"] {
	display: none;
}

.cart-continue-shopping {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-8);
	/* As a grid item (see .woocommerce-cart .cart-continue-shopping
	   above) this is blockified to `display: flex`, sized to its own
	   content via justify-self: start — but its "Continue Shopping"
	   text still wraps by default the moment that content-fit box is
	   even a little tighter than the full two-word phrase, breaking it
	   into "Continue" / "Shopping" on two lines. Force it onto one
	   line; the link is short enough that this never risks overflow. */
	white-space: nowrap;
}

.cart-continue-shopping svg {
	/* The global img/svg reset (base.css) only sets max-width:100% and
	   height:auto — this SVG has no width/height attribute, so with no
	   explicit size and flex-shrink now disabled (so it wouldn't be
	   squeezed by the "Continue Shopping" text's white-space: nowrap
	   above), it rendered at its default replaced-element size scaled
	   up against the flex row's available width instead of staying a
	   small inline arrow. Giving it an explicit fixed size is the
	   correct fix, not a shrink/grow workaround. */
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ---- Cart totals sidebar ----
   No more max-width/margin-left:auto — it now lives in its own grid
   column (see .woocommerce-cart .cart-collaterals above), so it should
   fill that column's width rather than being an independently-capped,
   right-aligned box. */
.cart_totals {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.cart_totals h2 {
	margin-bottom: var(--space-4);
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals table th,
.cart_totals table td {
	padding: var(--space-3) 0;
	text-align: left;
	font-size: var(--fs-sm);
	border-bottom: 1px solid var(--color-border);
}

.cart_totals table th {
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
	width: 40%;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: none;
	padding-top: var(--space-4);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

.cart_totals .woocommerce-shipping-methods {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cart_totals .shipping-calculator-form {
	margin-top: var(--space-3);
	font-size: var(--fs-sm);
}

.cart_totals .shipping-calculator-form .form-row {
	margin-bottom: var(--space-2);
}

.shipping-calculator-button {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

.wc-proceed-to-checkout {
	margin-top: var(--space-5);
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
	padding: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
	font-weight: var(--fw-semibold);
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--color-cta-hover-bg);
}

/* Cross-sells (rendered via our own content-product.php bridge, so
   the cards already match — just style the section wrapper). */
.cart-collaterals + .cross-sells,
.cross-sells {
	margin-top: var(--space-10);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.cross-sells > h2 {
	margin-bottom: var(--space-6);
}

.cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	list-style: none;
	padding: 0;
}

/* ---- Shared form styling (checkout billing/shipping + account forms) ----
   Moved to components.css (loaded sitewide) so My Account's forms get
   it too, not just Cart/Checkout — see the comment there. */

/* ---- "Have a coupon?" toggle + form (checkout) ----
   WooCommerce's own markup gives the coupon-code field and the Apply
   button the same .form-row-first/.form-row-last classes used for the
   billing First name/Last name split above — a float-based 48%/48%
   side-by-side pattern. That's fine when the parent also has a
   clearfix, but .checkout_coupon itself has none, so with only floated
   children it collapsed to 0 height: nothing reserved the form's own
   space, and the floated Apply-coupon button rendered on top of
   "Billing details" below it instead of pushing it down. Rebuilt as a
   plain flex row instead of patching the old float/clearfix pattern —
   same visual language as the cart page's .coupon. */
.woocommerce-form-coupon-toggle {
	margin-bottom: var(--space-4);
	font-size: var(--fs-sm);
}

.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: flex-start;
	margin-bottom: var(--space-6);
}

.checkout_coupon.form-row,
.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
}

.checkout_coupon .form-row-first {
	flex: 1 1 240px;
}

.checkout_coupon .input-text {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	font-size: var(--fs-sm);
}

.checkout_coupon .input-text:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

.checkout_coupon button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.checkout_coupon button[type="submit"]:hover {
	background: var(--color-ink-solid);
	color: #fff;
}

/* ---- Checkout layout ----
   form.checkout becomes a 2-column grid: #customer_details (billing +
   shipping) on the left spanning both rows, #order_review_heading +
   #order_review stacked on the right as a sticky order-summary sidebar —
   matching a standard checkout layout instead of the previous stacked
   flow where the order review rendered full-width below the whole form. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	/* #customer_details (below) spans both rows of this grid, and it's
	   much taller than #order_review_heading alone. Grid's default
	   behaviour when growing rows to fit a row-spanning item is to
	   distribute the extra height it needs across ALL spanned rows —
	   and that redistribution step still applies even when row 1 is
	   capped with the *keyword* `min-content`, because min-content/
	   max-content/auto all count as "intrinsic" sizing functions that
	   remain eligible to grow. (Confirmed live: with `min-content`, row
	   1's computed height was over 500px for a ~57px-tall heading, once
	   the cart had enough items to make #customer_details very tall.)
	   Only a genuinely *fixed* (definite-length) track size is exempt
	   from that redistribution, so row 1 is pinned to a fixed height
	   here — generous enough for the "Your order" heading's line-height
	   plus its margin at any normal desktop width — instead of a
	   content-based keyword. All the spanning item's extra height goes
	   to row 2 (auto), where #order_review needed the room anyway. */
	grid-template-rows: 80px auto;
	gap: 0 var(--space-8);
	align-items: start;
}

.woocommerce-checkout #customer_details {
	/* One unified column, not billing-left/shipping-right: with the
	   two side by side, the right side (just the "ship to a different
	   address?" toggle + a short notes box) ran out of content far
	   above the billing column, leaving a large awkward empty gap and
	   making the page read as 3 uneven columns instead of a clean 2
	   (form | order summary). Stacking keeps everything in one column
	   that flows naturally under Billing details. */
	display: block;
	grid-column: 1;
	grid-row: 1 / 3;
}

.woocommerce-shipping-fields,
.woocommerce-additional-fields {
	margin-top: var(--space-8);
}

#order_review_heading {
	grid-column: 2;
	grid-row: 1;
}

#order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
	margin-bottom: var(--space-4);
}

.woocommerce-shipping-fields h3 label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-4);
}

#ship-to-different-address {
	list-style: none;
}

.woocommerce-additional-fields {
	grid-column: 1 / -1;
}

#order_review_heading {
	margin-bottom: var(--space-4);
}

#order_review {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-5);
}

table.shop_table.woocommerce-checkout-review-order-table th,
table.shop_table.woocommerce-checkout-review-order-table td {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	font-size: var(--fs-sm);
}

table.shop_table.woocommerce-checkout-review-order-table .product-name {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	/* Cells in this table have 0 horizontal padding (see the th/td rule
	   above), so `justify-content: space-between` pushes the quantity
	   badge flush against the cell's right edge — with nothing to
	   separate it from the very next column (product-total), which
	   starts at that same x-position with its own 0 left-padding. The
	   two ended up visually glued together, e.g. "× 3₹2,397.00". This
	   padding recreates the gap between the two columns without
	   touching every other column's spacing. */
	padding-right: var(--space-4);
}

table.shop_table.woocommerce-checkout-review-order-table .product-name .product-quantity {
	color: var(--color-ink-muted);
}

table.shop_table.woocommerce-checkout-review-order-table tfoot th,
table.shop_table.woocommerce-checkout-review-order-table tfoot td {
	font-weight: var(--fw-medium);
}

table.shop_table.woocommerce-checkout-review-order-table .order-total th,
table.shop_table.woocommerce-checkout-review-order-table .order-total td {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	border-bottom: none;
}

/* ---- Payment methods ----
   WooCommerce's markup for each gateway is a flat sequence of siblings
   inside the <li> — the radio <input>, then <label>, then a
   .payment_box description div — not an input nested inside its label.
   Laid out with a 2-column grid on the <li> itself: the radio pins to
   column 1 (row-spanning both the label and description below it, so
   it stays aligned with the first line rather than centering against
   the whole block), and the label + description share column 2, so
   the description lines up under the title instead of under the radio.
   That replaces the previous plain flow, where the label's own
   `display: flex` blockified it onto a new line, stranding the radio
   above it on a line by itself. */
ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

ul.payment_methods li.wc_payment_method {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-3);
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

ul.payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

/* Subtle highlight on whichever gateway is currently selected — makes
   the active choice easy to spot at a glance instead of relying on the
   small radio dot alone. */
ul.payment_methods li.wc_payment_method:has(> input:checked) {
	background: var(--color-bg-alt);
}

ul.payment_methods li.wc_payment_method > input[type="radio"] {
	grid-column: 1;
	grid-row: 1 / 3;
	/* Optical alignment with the label text's cap-height, not its own
	   box's vertical center — a couple of px lower than dead-center. */
	margin-top: 4px;
	accent-color: var(--color-accent);
}

ul.payment_methods li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

/* Gateway logo (e.g. Razorpay's own "Pay by Razorpay" badge, a wide
   raster image with no width/height attribute). flex-basis: 100% always
   pushes it onto its own line under the gateway title, rather than
   leaving it to wrap only sometimes depending on how much of the title
   text plus logo happens to fit on one line at a given screen width —
   that in-between state (title text awkwardly squeezed beside a
   part-width logo) was what actually looked broken. One title line,
   one logo line, at every width, reads as a deliberate layout instead.
   The max-width still caps its size so it never looks oversized once
   on its own line, and the global img reset (base.css, max-width:100%)
   is what let it grow unboundedly in the first place. */
ul.payment_methods li.wc_payment_method > label img {
	flex-basis: 100%;
	max-width: 130px;
	height: auto;
	margin-top: var(--space-1);
}

ul.payment_methods .payment_box {
	grid-column: 2;
	grid-row: 2;
	padding-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
}

ul.payment_methods .payment_box p {
	margin: 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-5);
	font-size: var(--fs-sm);
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

#place_order {
	width: 100%;
	padding: 16px 24px;
	background: var(--color-cta-bg, #E53935);
	color: var(--color-cta-text, #FFFFFF);
	border: none;
	border-radius: var(--radius-full);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(229, 57, 53, 0.25);
	transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

#place_order:hover {
	background: var(--color-cta-hover-bg, #C62828);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(229, 57, 53, 0.35);
}

#place_order:active {
	transform: translateY(0);
}

#place_order:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

/* Fix jQuery BlockUI overlay on checkout and cart — removed dark black screen blackout, added modern animated loader */
.blockUI.blockOverlay {
	background: rgba(0, 0, 0, 0.12) !important;
	opacity: 1 !important;
	backdrop-filter: blur(1px) !important;
	-webkit-backdrop-filter: blur(1px) !important;
	border-radius: var(--radius-lg) !important;
	cursor: wait !important;
	transition: opacity 0.2s ease;
}

.blockUI.blockOverlay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--color-accent, #E53935);
	border-right-color: var(--color-accent, #E53935);
	border-radius: 50%;
	animation: sls-loader-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	box-shadow: 0 0 16px rgba(229, 57, 53, 0.35);
	z-index: 1005;
	pointer-events: none;
}

.cart_totals .blockUI.blockOverlay::after {
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-width: 2.5px;
}

[data-theme="light"] .blockUI.blockOverlay::after {
	border-color: rgba(0, 0, 0, 0.1);
	border-top-color: var(--color-accent, #E53935);
	border-right-color: var(--color-accent, #E53935);
}

@keyframes sls-loader-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.blockUI.blockMsg {
	border: none !important;
	background: transparent !important;
}

/* Container positioning for overlays */
form.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout {
	position: relative;
}

/* Subtle dimming during AJAX processing instead of blacking out the screen */
form.woocommerce-cart-form.processing,
.cart_totals.processing,
.woocommerce-checkout.processing {
	opacity: 0.75;
	transition: opacity 0.2s ease;
}


/* ---- Order received / Thank you page ---- */
.woocommerce-order-received .page-content__header {
	text-align: center;
	padding-top: var(--space-4);
	margin-bottom: var(--space-6);
}

.woocommerce-order-received .page-content__title {
	font-size: clamp(26px, 2.4vw, 36px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-2);
}

/* Success Confirmation Banner */
.woocommerce-thankyou-order-received {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16.5px;
	font-weight: 700;
	padding: 16px 24px;
	background: rgba(47, 125, 79, 0.12);
	border: 1px solid rgba(47, 125, 79, 0.35);
	border-radius: var(--radius-md);
	color: #68d391;
	margin: 0 0 var(--space-6);
	text-align: center;
	animation: sls-fade-in 0.3s ease;
}

.woocommerce-thankyou-order-received::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #4CAF6D;
	color: #17130F;
	font-weight: 900;
	font-size: 15px;
	flex-shrink: 0;
}

/* Order Overview Stat Cards */
.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
}

.woocommerce-order-overview li {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: var(--shadow-sm);
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.woocommerce-order-overview li:hover {
	border-color: var(--color-border-strong);
}

.woocommerce-order-overview li strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-ink);
	text-transform: none;
	letter-spacing: normal;
	word-break: break-word;
}

.woocommerce-order-overview li.total strong {
	color: var(--color-accent, #E53935);
	font-size: 18px;
}

/* Payment Method Note / Notice */
.woocommerce-order > p:not(.woocommerce-thankyou-order-received) {
	background: rgba(229, 57, 53, 0.08);
	border: 1px solid rgba(229, 57, 53, 0.22);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	color: var(--color-ink);
	line-height: 1.5;
	font-size: 14px;
	margin: 0 0 var(--space-8);
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce-order > p:not(.woocommerce-thankyou-order-received)::before {
	content: "ℹ";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(229, 57, 53, 0.2);
	color: var(--color-accent, #E53935);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Order Details Table & Card */
.woocommerce-order-details {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 36px);
	margin-bottom: var(--space-8);
	box-shadow: var(--shadow-sm);
}

.woocommerce-order-details__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-ink);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}

table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	font-size: 14.5px;
	color: var(--color-ink);
}

table.woocommerce-table--order-details thead th {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink-muted);
	padding-bottom: 12px;
}

table.woocommerce-table--order-details thead th:last-child,
table.woocommerce-table--order-details tbody td:last-child,
table.woocommerce-table--order-details tfoot td {
	text-align: right;
}

table.woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: 2px solid var(--color-border);
}

table.woocommerce-table--order-details td.woocommerce-table__product-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

table.woocommerce-table--order-details td.woocommerce-table__product-name a {
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--duration-fast) ease;
}

table.woocommerce-table--order-details td.woocommerce-table__product-name a:hover {
	color: var(--color-accent);
}

table.woocommerce-table--order-details .product-quantity {
	display: inline-block;
	padding: 2px 8px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--color-ink-muted);
}

table.woocommerce-table--order-details tfoot th {
	color: var(--color-ink-muted);
	font-weight: 500;
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none;
	padding-top: 20px;
	font-size: 18px;
	font-weight: 800;
	color: var(--color-ink);
}

table.woocommerce-table--order-details tfoot tr:last-child td {
	color: var(--color-accent, #E53935);
}

/* Customer Details (Billing & Shipping Addresses) */
.woocommerce-customer-details {
	margin-bottom: var(--space-8);
}

.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}

.woocommerce-column__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-ink);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-customer-details address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-ink-muted);
}

.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
	margin-top: 10px;
	display: block;
	color: var(--color-ink);
	font-weight: 500;
}

/* Post-Order Navigation Action Buttons */
.sls-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

.sls-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 32px;
	height: 50px;
	min-width: 200px;
	border-radius: var(--radius-full);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	box-sizing: border-box;
	transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.sls-order-actions .button span {
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
}

.sls-order-actions .button svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke-width: 2.2px;
	transition: transform var(--duration-fast) ease;
}

.sls-order-actions .button--primary {
	background: var(--color-cta-bg, #E53935);
	color: var(--color-cta-text, #FFFFFF);
	border: 1.5px solid transparent;
	box-shadow: 0 4px 16px rgba(229, 57, 53, 0.28);
}

.sls-order-actions .button--primary:hover {
	background: var(--color-cta-hover-bg, #C62828);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(229, 57, 53, 0.42);
}

.sls-order-actions .button--primary:hover svg {
	transform: translateX(4px);
}

.sls-order-actions .button--secondary {
	background: transparent;
	color: var(--color-ink);
	border: 1.5px solid var(--color-border-strong);
}

.sls-order-actions .button--secondary:hover {
	background: var(--color-surface);
	border-color: var(--color-ink);
	color: var(--color-ink);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

@keyframes sls-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	table.shop_table.cart thead {
		display: none;
	}

	table.shop_table.cart,
	table.shop_table.cart tbody,
	table.shop_table.cart tr {
		display: block;
		width: 100%;
	}

	/* Named areas instead of plain auto-placement so each part lands
	   exactly where it should read: the image on the left spanning the
	   full card height, the title then the price stacked beside it,
	   and quantity + remove sharing the row underneath — rather than
	   auto-placement's previous order (remove/title on row 1, quantity/
	   subtotal on row 2), which put the × next to the title instead of
	   down with the quantity stepper. */
	table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"thumb name  name"
			"thumb price price"
			"thumb qty   remove";
		gap: var(--space-2) var(--space-3);
		padding-block: var(--space-5);
		border-bottom: 1px solid var(--color-border);
	}

	table.shop_table.cart td {
		border-bottom: none;
		padding: 0;
	}

	table.shop_table.cart td.product-thumbnail {
		grid-area: thumb;
	}

	table.shop_table.cart td.product-name {
		grid-area: name;
	}

	table.shop_table.cart td.product-subtotal {
		grid-area: price;
	}

	table.shop_table.cart td.product-quantity {
		grid-area: qty;
	}

	table.shop_table.cart td.product-remove {
		grid-area: remove;
		justify-self: end;
		align-self: center;
	}

	table.shop_table.cart td.product-price {
		display: none;
	}

	.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart form.woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals {
		grid-column: 1;
	}

	.woocommerce-cart .cart-collaterals {
		position: static;
	}

	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		/* The desktop rule pins row 1 to a fixed 80px specifically so
		   #customer_details (spanning both rows there) can't inflate the
		   "Your order" heading's row — see the big comment on the desktop
		   rule above. Below this breakpoint #customer_details no longer
		   spans anything (grid-row: auto, right below), so that fixed
		   80px would instead just cap its own row height while its real
		   content (the whole billing + shipping form) is far taller,
		   overflowing downward into whatever sits below it. Rows need to
		   size to their own content again in this single-column layout. */
		grid-template-rows: auto;
	}

	.woocommerce-checkout #customer_details {
		grid-template-columns: 1fr;
		grid-column: 1;
		grid-row: auto;
		margin-bottom: var(--space-8);
	}

	/* Reset the desktop grid-row pins (order_review_heading: row 1,
	   order_review: row 2) back to auto — otherwise, now that
	   #customer_details is also auto-placed in this single column,
	   the grid auto-placement algorithm fills those two explicit rows
	   first and pushes #customer_details down to row 3, so the order
	   review would render ABOVE the billing/shipping form instead of
	   below it. With all three on grid-row: auto they fall back to
	   normal DOM/source order: billing form, then order review. */
	#order_review_heading,
	#order_review {
		grid-column: 1;
		grid-row: auto;
	}

	#order_review {
		position: static;
	}

	.cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Order Received Responsive: Tablet */
	.woocommerce-order-received .page-content__body {
		padding-inline: 0;
	}

	.woocommerce-order-overview {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 12px;
	}

	.woocommerce-columns--addresses {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.woocommerce-order-details {
		padding: var(--space-5);
	}
}

/* Phones only (see header.css's "standard mobile breakpoint" comment).
   Coupon code + Apply coupon + Update cart stay on one row here too —
   the table itself is already `display: block` below 900px (see the
   @media (max-width: 900px) block above), so td.actions is no longer
   part of the CSS table layout algorithm and can safely become a flex
   row without the width-collapse problem that same override caused at
   desktop widths (see the big comment on .coupon above). Everything is
   sized down (smaller padding/font, a shrinkable input) so all three
   controls fit one nowrap row even on a narrow phone. */
@media (max-width: 600px) {
	tr td.actions {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-2);
	}

	.coupon {
		/* Also overriding flex-wrap: the base rule (further up) sets
		   .coupon to flex-wrap: wrap. Once .coupon is itself a flex
		   item of td.actions here, its own display blockifies from
		   inline-flex to flex — but flex-wrap: wrap still applied, so
		   .coupon's own children (input + Apply button) were free to
		   wrap onto two lines inside it whenever the width split with
		   Update cart got tight, undoing the one-row layout. */
		display: flex;
		flex-wrap: nowrap;
		flex: 1 1 auto;
		min-width: 0;
		gap: var(--space-2);
	}

	.coupon .input-text {
		max-width: none;
		flex: 1 1 0%;
		min-width: 60px;
		padding: var(--space-2) var(--space-3);
	}

	.coupon button,
	button[name="update_cart"] {
		flex: 0 0 auto;
		padding: var(--space-2) var(--space-3);
		font-size: var(--fs-xs);
	}

	button[name="update_cart"] {
		margin-left: 0;
	}

	/* Order Received Responsive: Mobile */
	.woocommerce-order-received .page-content__title {
		font-size: 24px;
	}

	.woocommerce-thankyou-order-received {
		font-size: 14.5px;
		padding: 12px 14px;
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}

	.woocommerce-order-overview {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-bottom: var(--space-6);
	}

	.woocommerce-order-overview li {
		padding: 14px 12px;
	}

	.woocommerce-order-overview li strong {
		font-size: 14.5px;
	}

	.woocommerce-order-overview li.total strong {
		font-size: 16px;
	}

	.woocommerce-order-overview li:last-child:nth-child(odd),
	.woocommerce-order-overview li.method {
		grid-column: 1 / -1;
	}

	.woocommerce-order-details {
		padding: 18px 14px;
		border-radius: var(--radius-md);
		margin-bottom: var(--space-6);
	}

	.woocommerce-order-details__title {
		font-size: 18px;
		margin-bottom: 14px;
	}

	table.woocommerce-table--order-details th,
	table.woocommerce-table--order-details td {
		padding: 12px 0;
		font-size: 13.5px;
	}

	table.woocommerce-table--order-details .product-quantity {
		display: inline-block;
		margin-left: 4px;
		padding: 1px 6px;
		font-size: 11px;
	}

	table.woocommerce-table--order-details tfoot tr:last-child th,
	table.woocommerce-table--order-details tfoot tr:last-child td {
		font-size: 16px;
		padding-top: 14px;
	}

	.woocommerce-column--billing-address,
	.woocommerce-column--shipping-address {
		padding: 18px 14px;
		border-radius: var(--radius-md);
	}

	.woocommerce-column__title {
		font-size: 16px;
	}

	.sls-order-actions {
		flex-direction: column;
		width: 100%;
		gap: 12px;
		margin-top: var(--space-6);
	}

	.sls-order-actions .button {
		width: 100%;
		height: 48px;
		min-width: 0;
		padding: 0 20px;
		font-size: 13px;
	}
}