/* =====================================================================
   PlayX Shop — WooCommerce styling (dark + neon).
   Layered over WooCommerce's standard markup so it stays version-safe.
   Loaded only on WooCommerce pages (see inc/enqueue.php).
   ===================================================================== */

/* ---- Layout: full-width content container ---- */
.wc-content { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.woocommerce .container, .woocommerce-page .container { /* no-op guard */ }

/* ------------------------------------------------------------------
   Buttons (global WooCommerce .button)
   ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--surface-2); color: var(--text);
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
	border: 1px solid var(--border-2); border-radius: var(--r-pill);
	padding: 12px 22px; line-height: 1.1; text-decoration: none; text-shadow: none;
	transition: transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover { transform: translateY(-1px); border-color: var(--neon-blue); box-shadow: var(--glow-blue); background: var(--surface-2); color: var(--text); }

/* Primary / alt buttons → neon gradient */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.alt,
.woocommerce #place_order {
	background: var(--grad-primary); color: #fff; border: 0; box-shadow: var(--glow-magenta);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .button.alt:hover,
.woocommerce #place_order:hover { box-shadow: 0 0 30px -4px rgba(255,61,166,0.65); color: #fff; }

.woocommerce .button.added::after { content: ""; }

/* ------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea {
	background: var(--surface); color: var(--text);
	border: 1px solid var(--border-2); border-radius: var(--r-sm);
	padding: 12px 14px; font-family: var(--font-body); font-size: var(--fs-300);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,45,160,0.15); }
.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce .quantity label { color: var(--text-muted); font-weight: 600; }
.select2-dropdown { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.select2-results__option--highlighted { background: var(--surface-3) !important; color: var(--text) !important; }

/* Quantity input */
.woocommerce .quantity .qty {
	background: var(--surface); color: var(--text);
	border: 1px solid var(--border-2); border-radius: var(--r-sm);
	padding: 10px; width: 72px; text-align: center;
}

/* Notices are styled globally in main.css (they can appear on non-shop pages
   where this stylesheet isn't loaded). See "WOOCOMMERCE NOTICES (global)". */

/* ------------------------------------------------------------------
   Shop / category archive
   ------------------------------------------------------------------ */
.woocommerce-products-header__title,
.woocommerce-products-header .page-title,
.wc-content h1.page-title {
	font-family: var(--font-display); font-size: var(--fs-800); letter-spacing: -0.02em; margin-bottom: var(--sp-3);
}
.term-description, .woocommerce-products-header { color: var(--text-muted); }
.woocommerce .woocommerce-result-count { color: var(--text-dim); font-size: var(--fs-200); }
.woocommerce .woocommerce-ordering select { padding: 10px 14px; }

/* Product grid → our card grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--gap); margin: 0; align-items: stretch; list-style: none; padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; padding: 0;
	display: grid; min-width: 0;   /* grid = single child (card) stretches to fill width AND height */
}
.woocommerce ul.products li.product > .card { width: 100%; }

/* Inside the filtered shop layout: fixed CSS grid → every row aligns, first
   column is always flush-left (no leading gap), cards are equal width. */
.shop-main ul.products {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap); align-items: stretch; justify-content: start;
}
@media (max-width: 1180px) { .shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }
/* CRITICAL: WooCommerce core adds ul.products::before/::after (clearfix,
   display:table). In a CSS grid those become phantom grid items — ::before
   steals the first cell (empty leading gap) and ::after a trailing cell. Kill
   them so products start in cell 1 and fill correctly. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }

/* Pagination — minimal, editorial */
.woocommerce nav.woocommerce-pagination { margin-top: var(--sp-7); text-align: center; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: inline-flex; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
	color: var(--text-muted); min-width: 42px; height: 42px; line-height: 40px; padding: 0 10px;
	font-family: var(--font-display); font-weight: 600; transition: border-color var(--t), color var(--t), background var(--t);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--surface-2); color: var(--text); border-color: var(--border-2);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--surface-2); color: var(--text); border-color: var(--neon-blue);
	box-shadow: inset 0 0 0 1px var(--neon-blue);
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	color: var(--text-dim); font-size: var(--fs-200); margin-bottom: var(--sp-4);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--neon-blue); }

/* Sale flash badge */
.woocommerce span.onsale {
	background: var(--grad-primary); color: #fff; border-radius: var(--r-pill);
	font-family: var(--font-display); font-weight: 700; min-height: auto; min-width: auto;
	padding: 4px 12px; box-shadow: var(--glow-magenta); top: 12px; left: 12px; margin: 0;
}

/* ------------------------------------------------------------------
   Single product
   ------------------------------------------------------------------ */
.single-product div.product {
	display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	column-gap: var(--sp-8); row-gap: var(--sp-7); align-items: start;
}
/* CRITICAL: tabs / related / upsells are also children of div.product, so they
   must span BOTH columns (otherwise related products squish into one column). */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .related-slider,
.single-product div.product > .upsells,
.single-product div.product > .woocommerce-product-gallery__wrapper { grid-column: 1 / -1; }

/* Gallery — dark framed, rounded (works with placeholder + real images) */
.single-product div.product .woocommerce-product-gallery { width: 100% !important; margin: 0; position: relative; top: auto; align-self: start; }
.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product div.product .woocommerce-product-gallery__image { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--r-lg); display: block; }
.single-product div.product .woocommerce-product-gallery__image a { display: block; }
/* On-brand coloured placeholder (replaces WooCommerce's white box) */
.single-product .product-ph {
	/* width:100% is REQUIRED: without it, aspect-ratio derives width from height,
	   and in the mobile single-column (1fr) grid that blows the track out to
	   ~1442px (horizontal scroll). With width:100%, height follows width. */
	width: 100%; max-width: 100%;
	aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: var(--r-lg);
	background:
		radial-gradient(90% 90% at 50% 35%, color-mix(in srgb, var(--ph) 42%, transparent), transparent 72%),
		linear-gradient(150deg, color-mix(in srgb, var(--ph) 26%, var(--surface-2)), color-mix(in srgb, var(--ph) 10%, var(--surface)));
}
.single-product .product-ph span {
	font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 10vw, 7rem); line-height: 1;
	color: var(--ph); text-shadow: 0 0 40px color-mix(in srgb, var(--ph) 55%, transparent);
}
/* gallery thumbnails row */
.single-product .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: auto; }
.single-product .flex-control-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); opacity: .6; cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active, .single-product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--neon-blue); }

/* Summary column */
.single-product div.product .summary { margin: 0 !important; width: auto !important; float: none !important; display: flex; flex-direction: column; gap: var(--sp-3); }
.single-product .product_title {
	font-family: var(--font-display); font-size: var(--fs-800); letter-spacing: -0.02em; line-height: 1.08; margin: 0;
}
.single-product .woocommerce-product-rating { margin: 0; display: flex; align-items: center; gap: 10px; }
.single-product .woocommerce-product-rating .woocommerce-review-link { color: var(--text-dim); font-size: var(--fs-200); }
.single-product .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--neon-blue); }

/* Star rating — gold filled stars, dim empty stars (WC defaults are grey/white) */
.woocommerce .star-rating { color: var(--neon-yellow); margin: 0; line-height: 1; }
.woocommerce .star-rating::before { color: color-mix(in srgb, var(--text-dim) 55%, transparent) !important; opacity: 1; }
.woocommerce .star-rating span::before { color: var(--neon-yellow) !important; }

/* Single-product rating: clean inline row — ★★★★★ 5.0 · 1 review.
   WC's stars are font glyphs in a height:1em box whose vertical metrics differ
   from text, so every piece gets an explicit size + line-height:1 and the row
   flex-centres them onto one visual line. */
.single-product .playx-rating { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1; }
.single-product .playx-rating .star-rating {
	flex: none; font-size: 15px; height: 1em; line-height: 1; margin: 0;
	/* no letter-spacing: WC fixes .star-rating width in em + overflow:hidden, so
	   extra spacing pushes the 5th star past the edge and clips it. */
}
.single-product .playx-rating__avg {
	font-family: var(--font-display); font-weight: 700; color: var(--text);
	font-size: 15px; line-height: 1;
}
.single-product .playx-rating__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); flex: none; }
.single-product .playx-rating__count { color: var(--text-dim); font-size: 14px; line-height: 1; font-weight: 500; text-decoration: none; }
.single-product .playx-rating__count:hover { color: var(--neon-blue); }
.single-product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-700); margin: 0;
}
.woocommerce div.product p.price del { color: var(--text-dim); font-weight: 400; font-size: var(--fs-500); }
.woocommerce div.product p.price ins { color: var(--neon-magenta); text-decoration: none; }
.single-product .woocommerce-product-details__short-description { color: var(--text-muted); margin: 0; line-height: 1.7; }
.single-product .product_meta { color: var(--text-dim); font-size: var(--fs-200); border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-2); }
.single-product .product_meta a { color: var(--text-muted); }
.single-product .product_meta a:hover { color: var(--neon-blue); }

/* Variations (e.g. sizes/length) — the WC <table> is flattened to stacked rows:
   a small uppercase label sits above a row of pill "swatches" (built by app.js,
   which keeps the native <select> hidden as the source of truth). */
.woocommerce div.product form.variations_form .variations { border: 0; margin: 0 0 var(--sp-2); width: 100%; }
.woocommerce div.product form.variations_form .variations tbody { display: block; }
.woocommerce div.product form.variations_form .variations tr { display: block; }
.woocommerce div.product form.variations_form .variations tr + tr { margin-top: var(--sp-4); }
.woocommerce div.product .variations th.label,
.woocommerce div.product .variations td.label {
	display: block; padding: 0 0 10px; border: 0; text-align: left;
	color: var(--text); font-family: var(--font-display); font-weight: 700;
	font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.04em;
}
.woocommerce div.product .variations td.value { display: block; padding: 0; border: 0; }
/* Once swatches are injected the native control is hidden but stays in the DOM. */
.woocommerce div.product .variations td.value.has-pswatch select { display: none; }
/* Fallback skin for the native select while JS loads / if it ever stays visible. */
.woocommerce div.product .variations td.value select {
	min-width: 200px; height: 48px; padding: 0 40px 0 16px; cursor: pointer;
	color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
	font-family: var(--font-display); font-size: var(--fs-300); -webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9b9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.woocommerce div.product .variations td.value select:focus { outline: none; border-color: var(--neon-blue); }

/* Pill swatch buttons */
.pswatch { display: flex; flex-wrap: wrap; gap: 10px; }
.pswatch__opt {
	min-width: 52px; padding: 11px 20px; cursor: pointer; line-height: 1;
	background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill);
	color: var(--text-muted); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
	transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.pswatch__opt:hover { color: var(--text); border-color: var(--text-dim); transform: translateY(-1px); }
.pswatch__opt.is-active {
	color: #fff; border-color: transparent; background: var(--grad-primary); box-shadow: var(--glow-magenta);
}
.pswatch__opt:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; }
.pswatch__opt:disabled,
.pswatch__opt[aria-disabled="true"] {
	opacity: 0.4; cursor: not-allowed; text-decoration: line-through; transform: none; box-shadow: none;
}

.woocommerce div.product .single_variation .price { font-size: var(--fs-600); }
.woocommerce div.product .reset_variations {
	display: inline-block; margin-top: var(--sp-2); color: var(--text-dim); font-size: var(--fs-200);
	text-decoration: none; border-bottom: 1px solid currentColor;
}
.woocommerce div.product .reset_variations:hover { color: var(--neon-magenta); }

/* Buy box — quantity stepper + prominent add-to-cart CTA */
.woocommerce div.product form.cart { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: var(--sp-2) 0 0; }
/* Quantity as a pill stepper ([- n +], buttons injected by app.js) to match the side cart */
.woocommerce div.product form.cart .quantity {
	display: inline-flex; align-items: center; height: 52px; flex: none;
	border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); overflow: hidden;
}
.woocommerce div.product form.cart .quantity .qty-btn {
	width: 42px; height: 52px; border: 0; background: none; color: var(--text-muted);
	font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: color var(--t), background var(--t);
}
.woocommerce div.product form.cart .quantity .qty-btn:hover { color: var(--text); background: var(--surface-2); }
.woocommerce div.product form.cart .quantity .qty {
	height: 52px; width: 46px; padding: 0; margin: 0; border: 0; background: none; text-align: center;
	color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400);
	-moz-appearance: textfield; appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .quantity .qty:focus { outline: none; box-shadow: none; }
.woocommerce div.product form.cart .button {
	position: relative; flex: 1; min-width: 200px; padding: 0 28px; height: 52px; font-size: var(--fs-400);
	background: var(--grad-primary); color: #fff; border: 0; box-shadow: var(--glow-magenta);
}
.woocommerce div.product form.cart .button:hover { box-shadow: 0 0 34px -4px rgba(255,61,166,0.7); transform: translateY(-1px); }
/* Loading state: hide the label and show a spinner perfectly centred on the
   button. WooCommerce general otherwise injects a WC-font gear glyph absolutely
   pinned to the top-right corner (top:.618em; right:1em) -- we override it to a
   centred CSS ring so it sits in line with where the text was. */
.woocommerce div.product form.cart .button.loading {
	color: transparent !important; pointer-events: none; opacity: 1;
}
.woocommerce div.product form.cart .button.loading::after {
	content: "" !important; font-family: inherit !important;
	position: absolute; top: 50%; left: 50%; box-sizing: border-box;
	width: 22px; height: 22px; margin: -11px 0 0 -11px;
	border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%;
	animation: playx-spin 0.6s linear infinite;
}
/* After AJAX add the cart drawer opens, so suppress WooCommerce's "added" tick +
   the inline "View cart" link on the buy button (they looked tacked-on). */
.woocommerce div.product form.cart .single_add_to_cart_button.added::after { content: none !important; }
.woocommerce div.product .added_to_cart { display: none !important; }

/* Description moved into the summary (fills the right column) */
.single-product .product-summary-desc { color: var(--text-muted); line-height: 1.75; margin: var(--sp-2) 0; }
.single-product .product-summary-desc p { margin: 0 0 var(--sp-3); }
.single-product .product-summary-desc p:last-child { margin-bottom: 0; }
.single-product .product-summary-desc ul, .single-product .product-summary-desc ol { padding-left: 1.3em; margin: 0 0 var(--sp-3); }

/* Out-of-stock notice */
.single-product .product-oos {
	display: inline-flex; align-items: center; align-self: flex-start; gap: 8px;
	background: color-mix(in srgb, var(--neon-magenta) 12%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--neon-magenta) 40%, var(--border-2));
	color: var(--text); border-radius: var(--r-pill); padding: 8px 16px; margin: 0;
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-200);
}

/* Trust row (injected after add-to-cart via hook) */
.product-trust { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--border); }
.product-trust li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-200); font-weight: 500; }
.product-trust .icon { color: var(--neon-green); width: 18px; height: 18px; }

/* Tabs — pill selectors. All key props use !important to beat WooCommerce
   general's default tab skin (white active tab + rounded ::before/::after corners)
   which we keep loaded for the product gallery. */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--sp-7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex !important; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--sp-5) !important;
	padding: 0 0 var(--sp-4) !important; list-style: none;
	border: 0 !important; border-bottom: 1px solid var(--border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; content: none !important; }
/* the <li> is just a wrapper — the pill is the <a> */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; border: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 11px 22px !important; border-radius: var(--r-pill) !important;
	background: var(--surface) !important; border: 1px solid var(--border) !important;
	color: var(--text-muted) !important; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
	text-shadow: none; transition: color var(--t), background var(--t), border-color var(--t);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-2) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #fff !important; background: var(--grad-primary) !important; border-color: transparent !important;
	box-shadow: var(--glow-magenta);
}

/* Panel = a clean card with clear, even padding (forced so WooCommerce general
   can't flatten it) and a card radius (not pill). */
.woocommerce div.product .woocommerce-Tabs-panel {
	margin-top: 0 !important; padding: clamp(24px, 3vw, 36px) !important;
	background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
	color: var(--text-muted); line-height: 1.8;
}
.woocommerce div.product .woocommerce-Tabs-panel > h2 { display: none; } /* redundant with the tab label */
.woocommerce div.product .woocommerce-Tabs-panel p { margin: 0 0 var(--sp-3); }
.woocommerce div.product .woocommerce-Tabs-panel p:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-Tabs-panel ul, .woocommerce div.product .woocommerce-Tabs-panel ol { padding-left: 1.3em; margin: 0 0 var(--sp-3); }
.woocommerce div.product .woocommerce-Tabs-panel li { margin-bottom: 6px; }
.woocommerce div.product .woocommerce-Tabs-panel a { color: var(--neon-blue); }

/* Rich description content (authored in the editor: headings, lists, tables). */
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce div.product .woocommerce-Tabs-panel h3 {
	font-family: var(--font-display); color: var(--text); font-size: var(--fs-500);
	margin: var(--sp-5) 0 var(--sp-3); line-height: 1.25;
}
.woocommerce div.product .woocommerce-Tabs-panel h4,
.woocommerce div.product .woocommerce-Tabs-panel h5 {
	font-family: var(--font-display); color: var(--text); font-size: var(--fs-400);
	margin: var(--sp-4) 0 8px; line-height: 1.3;
}
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child,
.woocommerce div.product .woocommerce-Tabs-panel > h3:first-child,
.woocommerce div.product .woocommerce-Tabs-panel > *:first-child { margin-top: 0; }
.woocommerce div.product .woocommerce-Tabs-panel ul { list-style: disc; }
.woocommerce div.product .woocommerce-Tabs-panel ol { list-style: decimal; }
.woocommerce div.product .woocommerce-Tabs-panel strong, .woocommerce div.product .woocommerce-Tabs-panel b { color: var(--text); }
.woocommerce div.product .woocommerce-Tabs-panel hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.woocommerce div.product .woocommerce-Tabs-panel img { border-radius: var(--r-md); margin: var(--sp-3) 0; }
/* Generic tables in the description (e.g. a "Product Details" key/value table) */
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) {
	width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4);
	border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) td,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) th {
	padding: 12px 16px; border: 0; border-top: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.5;
}
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) tr:first-child td,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) tr:first-child th { border-top: 0; }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) td:first-child,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) th:first-child {
	width: 30%; min-width: 110px; color: var(--text); font-family: var(--font-display); font-weight: 600; background: var(--surface-2);
}
.woocommerce div.product .woocommerce-Tabs-panel table:not(.shop_attributes) p { margin: 0; }

/* FAQ accordion (built by app.js from a "Frequently Asked Questions" section).
   Smooth open via grid-template-rows 0fr -> 1fr. */
.faq { display: flex; flex-direction: column; gap: 10px; margin: var(--sp-2) 0 var(--sp-3); }
.faq__item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--t); }
.faq__item.is-open { border-color: var(--border-2); }
.faq__q {
	width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
	padding: 15px 18px; display: flex; align-items: center; gap: 14px; justify-content: space-between;
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); color: var(--text);
	transition: color var(--t);
}
.faq__q::after {
	content: ""; flex: none; width: 9px; height: 9px;
	border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
	transform: rotate(45deg); transition: transform var(--t-slow) var(--ease-out), border-color var(--t);
}
.faq__item.is-open .faq__q { color: var(--neon-magenta); }
.faq__item.is-open .faq__q::after { transform: rotate(-135deg); border-color: var(--neon-magenta); }
.faq__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.faq__item.is-open .faq__a-wrap { grid-template-rows: 1fr; }
.faq__a { overflow: hidden; min-height: 0; padding: 0 18px; color: var(--text-muted); line-height: 1.75; }
.faq__item.is-open .faq__a { padding-bottom: 16px; }
.faq__a > *:first-child { margin-top: 0; }
.faq__a p:last-child { margin-bottom: 0; }
/* Additional information — clean key/value table (overrides WC general's dotted
   borders, italic values + striping). Label column is a tinted header band. */
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes {
	width: 100%; border-collapse: collapse; border: 1px solid var(--border);
	border-radius: var(--r-md); overflow: hidden; margin: 0; background: var(--surface);
}
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes tr { border: 0; }
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes td {
	padding: 14px 20px; border: 0; border-top: 1px solid var(--border);
	text-align: left; vertical-align: top; line-height: 1.6;
}
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes tr:first-child th,
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes tr:first-child td { border-top: 0; }
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th {
	width: 32%; background: var(--surface-2); color: var(--text);
	font-family: var(--font-display); font-weight: 600; white-space: nowrap;
}
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes td {
	color: var(--text-muted); font-style: normal; background: transparent;
}
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes tr:nth-child(even) td { background: transparent; }
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes td p { margin: 0; padding: 0; }

/* Up-sells (if used) reuse the grid + card automatically */
.woocommerce .upsells > h2 { font-family: var(--font-display); font-size: var(--fs-700); margin-top: var(--sp-8); }

/* ------------------------------------------------------------------
   Related products — horizontal slider ("You may also like")
   ------------------------------------------------------------------ */
.related-slider { margin-top: var(--sp-8); }
.related-slider__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.related-slider__head h2 { font-family: var(--font-display); font-size: var(--fs-700); margin: 0; }
.related-slider__nav { display: flex; gap: 8px; }
.rs-btn {
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-2);
	background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
	transition: color var(--t), border-color var(--t), background var(--t);
}
.rs-btn:hover { color: var(--text); border-color: var(--neon-magenta); background: var(--surface-2); }
.rs-btn .icon { width: 20px; height: 20px; }
.related-slider__track {
	display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	/* room so the hover lift + glow isn't clipped (overflow-x forces y to clip too)
	   and the first/last card edges aren't cut; scroll-padding keeps snap aligned. */
	padding: 18px 8px; scroll-padding-left: 8px;
}
.related-slider__track::-webkit-scrollbar { display: none; }
/* Cards sized as an exact fraction of the viewport so a WHOLE number always fits
   (4/3/2 per view) — no half-cropped card at the scroll start or end. */
.related-slider__item { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); scroll-snap-align: start; display: flex; }
.related-slider__item > .card { width: 100%; }
@media (max-width: 1100px) { .related-slider__item { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 760px)  { .related-slider__item { flex-basis: calc((100% - var(--gap)) / 2); } }

/* ------------------------------------------------------------------
   Product gallery (zoom + lightbox + thumbnails) — dark styling
   ------------------------------------------------------------------ */
.single-product div.product .woocommerce-product-gallery { position: relative; }
.single-product div.product .woocommerce-product-gallery__trigger {
	position: absolute; top: 12px; right: 12px; z-index: 9; width: 40px; height: 40px;
	background: rgba(11,11,18,0.7); border: 1px solid var(--border-2); border-radius: 50%;
	display: grid; place-items: center; text-indent: 0; backdrop-filter: blur(4px);
}
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--r-lg); }
/* Thumbnail navigation (multiple images) */
.single-product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: 72px; margin: 0; }
.single-product .flex-control-thumbs img {
	border-radius: var(--r-sm); border: 1px solid var(--border); cursor: pointer; opacity: 0.6;
	transition: opacity var(--t), border-color var(--t);
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--neon-magenta); }

/* ------------------------------------------------------------------
   Reviews (the form box that was unstyled)
   ------------------------------------------------------------------ */
.woocommerce #reviews { color: var(--text-muted); }
.woocommerce #reviews #comments > h2 { font-family: var(--font-display); color: var(--text); font-size: var(--fs-500); margin: 0 0 var(--sp-4); }
/* "No reviews yet" — plain muted line, not a bordered notice box */
.woocommerce #reviews .woocommerce-noreviews {
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 0 var(--sp-4); color: var(--text-muted);
}
.woocommerce #reviews #comments ol.commentlist { margin: 0 0 var(--sp-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.woocommerce #reviews #comments ol.commentlist li .comment_container {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); display: flex; gap: 14px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); margin: 0; float: none; padding: 0; flex: none; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; padding: 0; flex: 1; min-width: 0; }
/* Review content: stars on their own line, then author/date meta, then text */
.woocommerce #reviews #comments .comment-text .star-rating { float: none !important; margin: 0 0 8px !important; }
.woocommerce #reviews #comments .comment-text p.meta { color: var(--text-dim); font-size: var(--fs-200); margin: 0 0 8px; }
.woocommerce #reviews #comments .comment-text .woocommerce-review__author { color: var(--text); font-family: var(--font-display); font-weight: 600; font-style: normal; }
.woocommerce #reviews #comments .comment-text .woocommerce-review__dash { color: var(--text-dim); }
.woocommerce #reviews #comments .comment-text .description { color: var(--text-muted); line-height: 1.7; }
.woocommerce #reviews #comments .comment-text .description p:last-child { margin-bottom: 0; }
/* Review form sits inside the panel card, so keep it flat (no card-in-card) */
.woocommerce #review_form_wrapper {
	background: none; border: 0; box-shadow: none; padding: var(--sp-4) 0 0; margin-top: var(--sp-4); border-top: 1px solid var(--border);
}
.woocommerce #reviews #respond { margin: 0; }
.woocommerce #review_form #respond p { margin: 0 0 var(--sp-4); }
.woocommerce #reviews #respond .comment-reply-title { font-family: var(--font-display); font-size: var(--fs-500); color: var(--text); display: block; margin-bottom: var(--sp-3); }
.woocommerce #reviews label { color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 6px; }
.woocommerce #reviews input[type="text"], .woocommerce #reviews input[type="email"], .woocommerce #reviews textarea {
	width: 100%; background: var(--surface-1); color: var(--text); border: 1px solid var(--border-2);
	border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--font-body); font-size: var(--fs-300);
}
.woocommerce #reviews textarea:focus, .woocommerce #reviews input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,45,160,0.15); }
.woocommerce #reviews p.stars a { color: var(--neon-yellow); }
.woocommerce #reviews .comment-form-rating label { display: inline-block; margin-right: 10px; }

/* ------------------------------------------------------------------
   Cart + checkout columns (replacing WooCommerce's removed float layout)
   ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; width: 100%; }
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; }
.woocommerce-cart .woocommerce-cart-form { width: 100%; overflow-x: auto; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: auto !important; float: none !important; min-width: 0; }
/* WC general floats .cart_totals right at width:48% INSIDE the collaterals,
   which shoved it over the items table — kill it hard. */
.woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: 100% !important; }
.woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; }
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
@media (min-width: 900px) {
	/* Explicit rows: without them auto-placement dropped #order_review into the
	   row BELOW the (tall) customer details, leaving the right column empty. */
	.woocommerce-checkout form.checkout {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		grid-template-rows: auto 1fr; column-gap: var(--sp-6); row-gap: 0; align-items: start;
	}
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; }
	/* validation NoticeGroup must not become a phantom grid cell */
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { display: none; }
}
@media (max-width: 880px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Cart page
   ------------------------------------------------------------------ */
.woocommerce table.shop_table {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	border-collapse: separate; overflow: hidden;
}
.woocommerce table.shop_table th { font-family: var(--font-display); color: var(--text); background: var(--surface-2); }
.woocommerce table.shop_table td { border-top: 1px solid var(--border); color: var(--text-muted); }
.woocommerce table.shop_table td a { color: var(--text); }
.woocommerce a.remove { color: var(--text-dim) !important; border-radius: 50%; }
.woocommerce a.remove:hover { color: var(--neon-magenta) !important; background: var(--surface-2) !important; }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart-collaterals .cart_totals > h2 { font-family: var(--font-display); }
.woocommerce .cart_totals, .woocommerce .cart-collaterals .cart_totals {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* ------------------------------------------------------------------
   Order received / thank-you (woocommerce/checkout/thankyou.php)
   ------------------------------------------------------------------ */
.orderx { max-width: 820px; margin: 0 auto; padding: clamp(8px, 3vw, 24px) 0; }
.orderx-hero { text-align: center; margin-bottom: var(--sp-6); }
.orderx__badge {
	display: inline-grid; place-items: center; width: 72px; height: 72px; margin: 0 auto var(--sp-3);
	border-radius: 50%; color: #fff; background: var(--grad-primary); box-shadow: var(--glow-magenta);
}
.orderx__badge--fail { background: color-mix(in srgb, var(--neon-magenta) 22%, var(--surface-2)); color: var(--neon-magenta); box-shadow: none; }
.orderx-hero__eyebrow { color: var(--neon-green); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; }
.orderx-hero__title { font-family: var(--font-display); font-size: var(--fs-800); line-height: 1.05; margin: 0 0 10px; }
.orderx-hero__lead { color: var(--text-muted); line-height: 1.7; margin: 0 auto; max-width: 50ch; }

.orderx-meta {
	list-style: none; margin: 0 0 var(--sp-5); padding: var(--sp-4);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4);
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--lit-edge);
}
.orderx-meta li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.orderx-meta__label { color: var(--text-dim); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.05em; }
.orderx-meta__value { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); word-break: break-word; }

/* Order + customer details tables */
.orderx-details .woocommerce-order-details__title,
.orderx-details .woocommerce-column__title { font-family: var(--font-display); font-size: var(--fs-500); margin: var(--sp-5) 0 var(--sp-3); }
.orderx-details table.woocommerce-table,
.orderx-details table.shop_table {
	width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.orderx-details table.shop_table th, .orderx-details table.shop_table td {
	padding: 13px 16px; border: 0; border-top: 1px solid var(--border); text-align: left; color: var(--text-muted);
}
.orderx-details table.shop_table thead th { border-top: 0; background: var(--surface-2); color: var(--text-dim); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.05em; }
.orderx-details table.shop_table td.product-total, .orderx-details table.shop_table th { white-space: nowrap; }
.orderx-details table.shop_table a { color: var(--text); text-decoration: none; }
.orderx-details table.shop_table a:hover { color: var(--neon-blue); }
.orderx-details tfoot th, .orderx-details tfoot td { color: var(--text); font-family: var(--font-display); }
.orderx-details tfoot tr:last-child th, .orderx-details tfoot tr:last-child td { font-size: var(--fs-500); font-weight: 700; }
.orderx-details .woocommerce-customer-details address {
	border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); color: var(--text-muted); font-style: normal; line-height: 1.7;
}
.orderx-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--sp-6); }
@media (max-width: 600px) {
	.orderx-hero__title { font-size: var(--fs-700); }
	.orderx-details table.shop_table th, .orderx-details table.shop_table td { padding: 11px 12px; }
}

/* ------------------------------------------------------------------
   Checkout (classic shortcode — the block is swapped out in PHP)
   ------------------------------------------------------------------ */
/* Page chrome: same treatment as the cart */
.woocommerce-checkout main.page { padding-top: var(--sp-5); }
.woocommerce-checkout .page-head { display: none; }
.woocommerce-checkout .page-body.rich-text { color: inherit; }
.woocommerce-checkout .page-body.rich-text a { color: inherit; text-decoration: none; transition: color var(--t); }
.woocommerce-checkout .page-body.rich-text a:hover { color: var(--neon-blue); }
.checkoutx-banner { margin-bottom: var(--sp-6); }

.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-family: var(--font-display); color: var(--text); font-size: var(--fs-500); margin: 0 0 var(--sp-4); }

/* Customer details: each column is a card section */
.woocommerce-checkout #customer_details > div {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-5); box-shadow: var(--lit-edge);
}
/* First/Last name side by side, everything else full row */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px;
}
.woocommerce-checkout .form-row { margin: 0 0 12px; padding: 0; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .notes { grid-column: 1 / -1; }
.woocommerce-checkout .form-row label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: var(--fs-200); font-weight: 500; }
/* Force every checkout field dark — the order-notes textarea (and some plugin-
   rendered fields) were slipping through to the browser-default white. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout textarea#order_comments {
	background: var(--surface) !important; color: var(--text) !important;
	border: 1px solid var(--border-2) !important; border-radius: var(--r-sm) !important;
	width: 100%; box-shadow: none;
}
.woocommerce-checkout .form-row textarea { min-height: 110px; resize: vertical; }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus { border-color: var(--neon-magenta) !important; box-shadow: 0 0 0 3px rgba(255, 45, 160, 0.15); }
.woocommerce-checkout .form-row .required { color: var(--neon-magenta); text-decoration: none; }
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select { border-color: var(--neon-magenta) !important; }
.woocommerce-checkout .woocommerce-validated input.input-text { border-color: var(--border-2); }
/* country/state selects + select2 to match inputs */
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	width: 100%; height: 48px; padding: 0 14px; color: var(--text);
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 46px; padding: 0; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.select2-dropdown { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--surface); color: var(--text); }
.select2-search--dropdown .select2-search__field { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); }
/* ship-to-different + terms checkboxes */
.woocommerce-checkout #ship-to-different-address { font-size: var(--fs-400); }
.woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text); }
.woocommerce-checkout input[type="checkbox"], .woocommerce-checkout input[type="radio"] { accent-color: var(--neon-magenta); width: 16px; height: 16px; }

/* Order review: sticky card on the right */
.woocommerce-checkout form.checkout #order_review {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-5); box-shadow: var(--lit-edge); position: sticky; top: 96px;
}
.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2; margin: 0; padding: 0 0 var(--sp-3);
}
.woocommerce-checkout #order_review table.shop_table { background: none; border: 0; border-radius: 0; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	background: none !important; padding: 11px 0; border: 0; border-top: 1px solid var(--border);
	color: var(--text-muted); font-size: var(--fs-300); text-align: left;
}
.woocommerce-checkout #order_review table.shop_table thead th { border-top: 0; color: var(--text-dim); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; }
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th + td { text-align: right; }
.woocommerce-checkout #order_review .product-name { color: var(--text); }
.woocommerce-checkout #order_review .product-quantity { color: var(--text-dim); }
.woocommerce-checkout-review-order-table tfoot th { font-family: var(--font-display); color: var(--text); }
.woocommerce-checkout-review-order-table tfoot td { color: var(--text); }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: var(--fs-500); font-family: var(--font-display); font-weight: 700; padding-top: var(--sp-3); }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--text); }

/* Payment methods */
.woocommerce-checkout #payment { background: none !important; border: 0; border-radius: 0; margin-top: var(--sp-4); }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
	padding: 13px 15px; line-height: 1.5;
}
/* "No payment methods available" is informational UI — keep it inline (the
   global notice-hider was leaving an empty pill here). */
.woocommerce-checkout #payment .woocommerce-info {
	display: block !important; background: none !important; border: 0 !important;
	padding: 0 !important; margin: 0 !important; color: var(--text-muted); font-size: var(--fs-300);
}
.woocommerce-checkout #payment .woocommerce-info::before { display: none !important; content: none !important; }
.woocommerce-checkout #payment ul.payment_methods li.woocommerce-info,
.woocommerce-checkout #payment ul.payment_methods li.woocommerce-notice { background: var(--surface-2); border: 1px solid var(--border-2); padding: 13px 15px !important; }
.woocommerce-checkout #payment ul.payment_methods li label { display: inline; margin: 0 0 0 4px; color: var(--text); font-weight: 600; font-size: var(--fs-300); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--surface) !important; color: var(--text-muted); border-radius: var(--r-sm, 8px);
	margin: 10px 0 0; padding: 12px 14px; font-size: var(--fs-200);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: var(--sp-4) 0 0; color: var(--text-dim); font-size: var(--fs-200); }
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 var(--sp-3); }
.woocommerce-checkout #payment .place-order { padding: 0; margin-top: var(--sp-3); }
.woocommerce-checkout #place_order { width: 100%; padding: 17px 24px; font-size: var(--fs-400); }

/* Coupon + login toggles (kept inline; they are UI, not alerts) */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	display: flex !important; align-items: center; gap: 8px;
	background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 var(--sp-4) !important;
	color: var(--text-muted); font-size: var(--fs-300);
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; content: none !important; }
.woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-form-login-toggle .showlogin { color: var(--text) !important; font-weight: 600; }
.woocommerce-form-coupon-toggle .showcoupon:hover,
.woocommerce-form-login-toggle .showlogin:hover { color: var(--neon-blue) !important; }
.woocommerce-checkout form.checkout_coupon, .woocommerce-checkout form.woocommerce-form-login {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-4); margin: 0 0 var(--sp-5); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.woocommerce-checkout form.checkout_coupon .form-row { margin: 0; flex: 1; min-width: 180px; }
.woocommerce-checkout form.checkout_coupon button {
	height: 48px; padding: 0 22px; cursor: pointer; border-radius: var(--r-pill); white-space: nowrap;
	background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
	font-family: var(--font-display); font-weight: 600;
}
.woocommerce-checkout form.checkout_coupon button:hover { border-color: var(--text-dim); }

@media (max-width: 899px) {
	.woocommerce-checkout form.checkout #order_review { position: static; }
}
@media (max-width: 600px) {
	.woocommerce-checkout #customer_details > div { padding: var(--sp-4); }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   My Account
   ------------------------------------------------------------------ */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none; width: auto;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-3); box-shadow: var(--lit-edge);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block; padding: 11px 14px; border-radius: var(--r-md); color: var(--text-muted);
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--surface-2); color: var(--text); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--neon-magenta);
}
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; color: var(--text-muted); }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--neon-blue); }

/* ==================================================================
   Shop / category banner
   ================================================================== */
/* Default (no category image): clean editorial header — type on the page, a
   single hairline rule. Restrained, not a glowing gradient box. */
.shop-banner {
	position: relative;
	padding-bottom: var(--sp-5);
	margin-bottom: var(--sp-6);
	border-bottom: 1px solid var(--border);
}
.shop-banner__inner { position: relative; z-index: 1; max-width: 720px; }
.shop-banner .woocommerce-breadcrumb { margin: 0 0 var(--sp-3); }
.shop-banner__title {
	font-family: var(--font-display); font-size: var(--fs-900); line-height: 1.04;
	letter-spacing: -0.025em; margin: 0;
}
.shop-banner__desc { color: var(--text-muted); margin-top: var(--sp-3); max-width: 64ch; font-size: var(--fs-400); }
.shop-banner__desc p:last-child { margin-bottom: 0; }

/* Category image variant: a proper rounded hero with a bottom-up scrim. */
.shop-banner--image {
	overflow: hidden; isolation: isolate; border: 0;
	border-radius: var(--r-xl); padding: clamp(28px, 5vw, 52px);
	min-height: 260px; display: flex; align-items: flex-end;
}
.shop-banner--image::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--banner); background-size: cover; background-position: center;
	transform: scale(1.02);
}
.shop-banner--image::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(8,8,12,0.95) 0%, rgba(8,8,12,0.55) 45%, rgba(8,8,12,0.2) 100%);
}
.shop-banner--image .shop-banner__title { font-size: var(--fs-900); text-shadow: 0 2px 24px rgba(0,0,0,0.5); }

/* ==================================================================
   Shop layout: filter sidebar + product grid
   ================================================================== */
.shop-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }

.shop-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	flex-wrap: wrap; margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
.shop-toolbar .woocommerce-result-count { margin: 0; }
.shop-toolbar .woocommerce-ordering { margin: 0; }

/* --- Sidebar --- */
.shop-filters {
	position: sticky; top: calc(var(--header-h, 72px) + 16px);
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
	padding: var(--sp-4); box-shadow: var(--lit-edge);
}
.shop-filters__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.shop-filters__head { display: flex; align-items: baseline; justify-content: space-between; }
.shop-filters__head h2 { font-family: var(--font-display); font-size: var(--fs-500); margin: 0; }
.shop-filters__clear { font-size: var(--fs-200); color: var(--neon-magenta); }
.shop-filters__clear:hover { text-decoration: underline; }
.shop-filters__close { display: none; }

.filter-group { border: 0; padding: 0; margin: 0; }
.filter-group + .filter-group { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.filter-group legend {
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-100);
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
	padding: 0; margin-bottom: 12px; width: 100%;
}

/* Category list — flat, minimal, clean rows (own namespace: .fcat*, so it can't
   inherit the homepage .cat-row card/box styling). */
.filter-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* CRITICAL: a class rule beats the UA [hidden]{display:none}; restore it. */
.fcat-sub[hidden] { display: none !important; }

.fcat-row {
	display: flex; align-items: center; gap: 0;
	border-radius: var(--r-md); transition: background var(--t);
}
.fcat-row:hover { background: var(--surface-1); }
.fcat.is-current > .fcat-row { background: var(--surface-2); }

.fcat-row > a {
	flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
	padding: 9px 6px 9px 12px;
	background: none; border: 0; box-shadow: none;
	color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-300); font-weight: 500;
}
.fcat-row > a:hover { color: var(--text); }
.fcat.is-current > .fcat-row > a { color: var(--text); font-weight: 600; }
.fcat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcat-count {
	flex: none; color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums;
	background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 8px; min-width: 26px; text-align: center;
}
.fcat-row:hover .fcat-count, .fcat.is-current .fcat-count { color: var(--text-muted); }

/* Expand/collapse chevron */
.fcat-toggle {
	flex: none; width: 34px; align-self: stretch; border: 0; background: none; cursor: pointer;
	color: var(--text-dim); display: grid; place-items: center; border-radius: var(--r-md);
}
.fcat-toggle:hover { color: var(--text); }
.fcat-toggle .icon { transition: transform var(--t) var(--ease-out); }
.fcat-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* Subcategories — indented under a thin guide rule */
.fcat-sub { list-style: none; margin: 2px 0 4px 12px; padding-left: 12px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.fcat-sub .fcat-row > a { font-size: var(--fs-200); padding: 7px 6px 7px 12px; color: var(--text-dim); font-weight: 500; }
.fcat-sub .fcat-row > a:hover { color: var(--text); }

.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price input { width: 100%; min-width: 0; padding: 9px 10px; }
.filter-price__sep { color: var(--text-dim); flex: none; }
.filter-price__go {
	flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); cursor: pointer;
	background: var(--surface-3, var(--surface-2)); color: var(--text);
	display: grid; place-items: center; transition: background var(--t), color var(--t);
}
.filter-price__go:hover { background: var(--grad-primary); color: #fff; }

/* Mobile-only "Show results" (closes the drawer; filters already applied live) */
.shop-filters__done { display: none; }

.filter-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.filter-checks label, .filter-sale {
	display: flex; align-items: center; gap: 9px; cursor: pointer;
	padding: 5px 6px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-300);
}
.filter-checks label:hover, .filter-sale:hover { background: var(--surface-2); color: var(--text); }
.filter-checks input[type="checkbox"], .filter-sale input[type="checkbox"] {
	width: 17px; height: 17px; accent-color: var(--neon-magenta); flex: none;
}
.filter-checks label span { flex: 1; }
.filter-checks label em { color: var(--text-dim); font-style: normal; font-size: var(--fs-100); font-variant-numeric: tabular-nums; }

.shop-filters__apply { width: 100%; }

.shop-empty { padding: var(--sp-6) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

/* --- Mobile filter toggle (hidden on desktop) --- */
.shop-filter-toggle {
	display: none; align-items: center; gap: 8px;
	background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2);
	border-radius: var(--r-pill); padding: 10px 18px; font-family: var(--font-display); font-weight: 600;
	cursor: pointer;
}
.shop-filter-toggle .icon { width: 18px; height: 18px; }
.shop-filters-scrim {
	position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.6);
	opacity: 0; pointer-events: none; transition: opacity var(--t);
}

/* --- Active filter chips (removable) --- */
.shop-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.shop-chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill);
	padding: 6px 9px 6px 14px; font-size: var(--fs-200); font-weight: 600; color: var(--text);
	transition: border-color var(--t), color var(--t);
}
.shop-chip .icon { width: 14px; height: 14px; color: var(--text-dim); transition: color var(--t); }
.shop-chip:hover { border-color: var(--neon-magenta); }
.shop-chip:hover .icon { color: var(--neon-magenta); }
.shop-chip--clear { padding: 6px 14px; background: transparent; color: var(--text-muted); }
.shop-chip--clear:hover { color: var(--text); border-color: var(--border-2); }

/* --- No results / empty shop state --- */
.shop-empty { display: flex; justify-content: center; }
.shop-noresults { text-align: center; padding: clamp(36px, 7vw, 80px) 20px; max-width: 560px; margin: 0 auto; }
.shop-noresults__icon {
	display: inline-grid; place-items: center; width: 76px; height: 76px; margin: 0 auto var(--sp-4);
	border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--neon-magenta);
	box-shadow: 0 0 30px -8px rgba(255, 61, 166, 0.5);
}
.shop-noresults__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: 1.2; margin: 0 0 10px; word-break: break-word; }
.shop-noresults__text { color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
.shop-noresults__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.shop-noresults__cats { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.shop-noresults__catlabel { display: block; color: var(--text-dim); font-size: var(--fs-200); margin-bottom: 12px; }

/* --- AJAX loading state --- */
.shop-main.is-loading { position: relative; opacity: 0.5; pointer-events: none; transition: opacity var(--t); }
.shop-main.is-loading::after {
	content: ""; position: absolute; top: 140px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
	border: 3px solid var(--border-2); border-top-color: var(--neon-magenta); border-radius: 50%;
	animation: playx-spin 0.7s linear infinite;
}
@keyframes playx-spin { to { transform: rotate(360deg); } }

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width: 980px) {
	.shop-layout { grid-template-columns: 1fr; gap: 0; }
	.shop-filter-toggle { display: inline-flex; margin-bottom: var(--sp-4); }

	/* Sidebar becomes a slide-in drawer. */
	.shop-filters {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: min(86vw, 340px);
		border-radius: 0; border: 0; border-right: 1px solid var(--border);
		overflow-y: auto; transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out);
	}
	.filters-open .shop-filters { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.5); }
	.filters-open .shop-filters-scrim { opacity: 1; pointer-events: auto; }
	.shop-filters__close {
		display: inline-flex; align-items: center; justify-content: center;
		position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
		background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer;
	}
	.shop-filters__head { padding-right: 44px; }

	/* "Show results" pinned at the bottom of the drawer */
	.shop-filters__done {
		display: block; position: sticky; bottom: 0; width: 100%;
		margin-top: var(--sp-2); padding: 14px 18px; border: 0; cursor: pointer;
		background: var(--grad-primary); color: #fff; border-radius: var(--r-pill);
		font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
		box-shadow: var(--glow-magenta);
	}
}

@media (max-width: 880px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.single-product div.product { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--sp-5); }
	.single-product div.product .woocommerce-product-gallery { position: static; }
	.woocommerce div.product form.cart .button { min-width: 0; }
}
@media (max-width: 600px) {
	.woocommerce ul.products, .woocommerce-page ul.products,
	.shop-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.shop-banner__title { font-size: var(--fs-800); }

	/* Buy box: stepper sits on its own row, full-width CTA below it for a big
	   easy tap target on phones. */
	.woocommerce div.product form.cart { gap: 12px; }
	.woocommerce div.product form.cart .quantity { width: 100%; justify-content: space-between; }
	.woocommerce div.product form.cart .quantity .qty { flex: 1; width: auto; }
	.woocommerce div.product form.cart .button { flex: 1 0 100%; width: 100%; min-width: 0; }

	/* Tighter tab pills + panel padding so nothing overflows the viewport. */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 9px 16px !important; }

	/* Variation dropdowns fill the row instead of forcing a fixed 180px width. */
	.woocommerce div.product .variations td.value select { min-width: 0; width: 100%; }

	/* Additional-information table: tighter padding, let labels wrap. */
	.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th,
	.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes td { padding: 12px 14px; }
	.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th { white-space: normal; width: 38%; }
}

/* ==================================================================
   Cart page (WooCommerce Blocks) — the cart is the React block, not the
   classic shortcode, so it needs its own dark skin.
   ================================================================== */
.wc-block-cart .wc-block-cart-items,
.wc-block-cart table.wc-block-cart-items { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.wc-block-cart .wc-block-cart-items th { background: var(--surface-2); color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 16px; border: 0; }
.wc-block-cart .wc-block-cart-items td { border: 0; border-top: 1px solid var(--border); padding: 18px 16px; vertical-align: top; }
.wc-block-cart .wc-block-cart-item__image img { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.wc-block-cart .wc-block-components-product-name { color: var(--text) !important; font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.wc-block-cart .wc-block-components-product-name:hover { color: var(--neon-blue) !important; }
.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-cart-item__prices,
.wc-block-cart .wc-block-cart-item__total { color: var(--text); font-family: var(--font-display); font-weight: 700; }
.wc-block-cart .wc-block-components-product-metadata__description { color: var(--text-dim); font-size: var(--fs-200); line-height: 1.5; }
.wc-block-cart .wc-block-cart-item__remove-link { color: var(--text-dim); font-size: var(--fs-200); text-decoration: none; border-bottom: 1px solid transparent; }
.wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--neon-magenta); }

/* Quantity selector -> same pill stepper as the rest of the theme */
.wc-block-cart .wc-block-components-quantity-selector {
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); overflow: hidden;
}
.wc-block-cart .wc-block-components-quantity-selector::after { display: none !important; border: 0 !important; }
.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	background: none; border: 0; color: var(--text); font-family: var(--font-display); font-weight: 600;
}
.wc-block-cart .wc-block-components-quantity-selector button { color: var(--text-muted); }
.wc-block-cart .wc-block-components-quantity-selector button:hover { color: var(--text); }

/* Sidebar (Cart totals) -> card */
.wc-block-cart .wc-block-cart__sidebar {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4);
}
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart .wc-block-components-totals-item__label { color: var(--text); font-family: var(--font-display); }
.wc-block-cart .wc-block-components-totals-wrapper { border-color: var(--border) !important; padding-left: 0; padding-right: 0; }
.wc-block-cart .wc-block-components-totals-item,
.wc-block-cart .wc-block-components-totals-item__value,
.wc-block-cart .wc-block-components-totals-footer-item { color: var(--text); }
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); }
/* Coupon accordion + input */
.wc-block-cart .wc-block-components-panel__button { color: var(--text-muted); font-family: var(--font-display); }
.wc-block-cart .wc-block-components-panel__button:hover { color: var(--text); }
.wc-block-cart .wc-block-components-text-input input {
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md); color: var(--text);
}
.wc-block-cart .wc-block-components-text-input input:focus { border-color: var(--neon-blue); box-shadow: none; }
.wc-block-cart .wc-block-components-text-input label { color: var(--text-dim); }
/* Apply (coupon) secondary button */
.wc-block-cart .wc-block-components-totals-coupon__button {
	background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--r-pill);
}
/* Proceed to checkout -> brand gradient pill (kills the underlined-link look) */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-container a.wc-block-components-button {
	background: var(--grad-primary) !important; color: #fff !important; border: 0 !important;
	border-radius: var(--r-pill) !important; box-shadow: var(--glow-magenta);
	font-family: var(--font-display); font-weight: 600; text-decoration: none !important; padding: 15px 24px;
}
.wc-block-cart .wc-block-cart__submit-container a.wc-block-components-button:hover { box-shadow: 0 0 34px -4px rgba(255,61,166,0.7); }
.wc-block-cart .wc-block-components-button__text { text-decoration: none !important; }
/* Cross-sells heading inside the block cart */
.wc-block-cart .cross-sells h2 { font-family: var(--font-display); }

/* ==================================================================
   Cart page (classic shortcode — the block is swapped out in PHP)
   ================================================================== */
.woocommerce-cart h1 { font-family: var(--font-display); }
.woocommerce-cart table.shop_table { width: 100%; table-layout: auto; }
.woocommerce-cart table.shop_table th { padding: 14px 16px; font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.woocommerce-cart table.shop_table td { padding: 16px; vertical-align: middle; }
/* Give the NAME column all spare width so it never wraps word-per-line, and
   drop the redundant unit-price column (subtotal says it all). */
.woocommerce-cart table.shop_table td.product-name { width: 99%; min-width: 160px; }
.woocommerce-cart table.shop_table .product-price { display: none; }
.woocommerce-cart table.shop_table td.product-quantity, .woocommerce-cart table.shop_table td.product-subtotal { white-space: nowrap; }
.woocommerce-cart table.shop_table td.product-remove { padding-right: 0; }
.woocommerce-cart td.product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); display: block; }
.woocommerce-cart td.product-name a { color: var(--text); font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.woocommerce-cart td.product-name a:hover { color: var(--neon-blue); }
.woocommerce-cart td.product-name .variation { color: var(--text-dim); font-size: var(--fs-200); margin: 4px 0 0; }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { color: var(--text); font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
/* Quantity -> same pill stepper (buttons injected by app.js) */
.woocommerce-cart td.product-quantity .quantity {
	display: inline-flex; align-items: center; height: 42px;
	border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden;
}
.woocommerce-cart td.product-quantity .qty-btn {
	width: 34px; height: 42px; border: 0; background: none; color: var(--text-muted);
	font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.woocommerce-cart td.product-quantity .qty-btn:hover { color: var(--text); }
.woocommerce-cart td.product-quantity input.qty {
	height: 42px; width: 38px; padding: 0; border: 0; background: none; text-align: center;
	color: var(--text); font-family: var(--font-display); font-weight: 600;
	-moz-appearance: textfield; appearance: textfield;
}
.woocommerce-cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart td.product-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart td.product-quantity input.qty:focus { outline: none; box-shadow: none; }
/* Coupon row + actions (qty changes auto-update the cart, so hide the button) */
.woocommerce-cart td.actions { padding: 16px; }
.woocommerce-cart td.actions .coupon { display: flex; gap: 10px; float: none; }
.woocommerce-cart td.actions .coupon label { display: none; }
.woocommerce-cart td.actions .coupon input#coupon_code {
	width: 200px; height: 44px; padding: 0 16px; font-size: var(--fs-300);
	background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); color: var(--text);
}
.woocommerce-cart td.actions .coupon input#coupon_code:focus { outline: none; border-color: var(--neon-blue); }
.woocommerce-cart td.actions .coupon button {
	height: 44px; padding: 0 22px; cursor: pointer; border-radius: var(--r-pill);
	background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
	font-family: var(--font-display); font-weight: 600;
}
.woocommerce-cart td.actions .coupon button:hover { border-color: var(--text-dim); }
.woocommerce-cart td.actions > .button[name="update_cart"] { display: none; }
/* Totals card */
.woocommerce-cart .cart_totals h2 { font-size: var(--fs-500); margin: 0 0 var(--sp-3); }
.woocommerce-cart .cart_totals table.shop_table { border: 0; background: none; table-layout: auto; }
/* !important: the generic shop_table th skin (surface-2 box + uppercase) was
   bleeding into the totals rows and boxing SUBTOTAL/TOTAL. */
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: none !important; padding: 12px 0 !important; border: 0; border-top: 1px solid var(--border);
	color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: var(--fs-300); width: auto;
}
.woocommerce-cart .cart_totals table.shop_table th { font-family: var(--font-display); text-align: left; padding-right: 14px !important; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
/* "Shipping & taxes calculated at checkout" hint row (hook-injected) */
.woocommerce-cart .cart_totals table.shop_table .cartx-shipnote td {
	text-align: left; color: var(--text-dim) !important; font-size: var(--fs-100) !important;
	border-top: 0; padding: 0 0 10px !important;
}
.woocommerce-cart .cart_totals tr:first-child th, .woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); }
.woocommerce-cart .wc-proceed-to-checkout { padding: var(--sp-4) 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block; text-align: center; padding: 15px 24px; border-radius: var(--r-pill);
	background: var(--grad-primary); color: #fff; border: 0; box-shadow: var(--glow-magenta);
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); text-decoration: none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { box-shadow: 0 0 34px -4px rgba(255,61,166,0.7); }
/* --- Custom cart item cards (woocommerce/cart/cart.php override) --- */
/* The generic page template wraps content in .rich-text (max-width:72ch for
   prose) — the cart/checkout need the full container. */
.woocommerce-cart .page-body.rich-text, .woocommerce-checkout .page-body.rich-text { max-width: none; }
/* Full-page cart: wider container, our own header (the generic page H1 hides),
   roomier 2-col grid with a 400px sticky summary. */
/* Same boxed container as the rest of the site (var(--maxw)). */
.woocommerce-cart .page-head { display: none; }
.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-7); }
/* This rule lives after the earlier @media(max-width:880px) collapse, so it would
   re-impose the 400px column on phones (overflow). Restate the mobile collapse +
   let an empty cart span the full width. */
@media (max-width: 980px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; gap: var(--sp-5); } }
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop { grid-column: 1 / -1; }
/* The cart reuses the real .shop-banner component for its header. The generic
   page wrapper (.page padding + .rich-text prose colors/underlines) distorts
   it, so neutralise those within the cart. */
.woocommerce-cart main.page { padding-top: var(--sp-5); }
.woocommerce-cart .page-body.rich-text { color: inherit; }
.woocommerce-cart .page-body.rich-text a { color: inherit; text-decoration: none; transition: color var(--t); }
/* the reset above outranks the per-link hover rules, so restate hover here:
   every cart text link (title, Remove, Continue shopping, breadcrumb) goes blue */
.woocommerce-cart .page-body.rich-text a:not(.button):not(.checkout-button):hover { color: var(--neon-blue); }
.woocommerce-cart .page-body.rich-text a.checkout-button, .woocommerce-cart .page-body.rich-text a.checkout-button:hover { color: #fff; }
.woocommerce-cart .page-body.rich-text .cartx-item__remove { color: var(--text-dim); }
.woocommerce-cart .page-body.rich-text .cartx-continue { color: var(--text-muted); }
.woocommerce-cart .shop-banner { grid-column: 1 / -1; margin-bottom: 0; }
.woocommerce-cart .shop-banner__title { color: var(--text); }
/* AJAX busy state while the cart re-renders */
.woocommerce-cart div.woocommerce.cart-busy { opacity: 0.55; pointer-events: none; transition: opacity var(--t); }

/* Items: ONE elevated card, rows divided by hairlines (not stacked boxes). */
.cartx { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--lit-edge); overflow: hidden; }
.cartx-item { display: flex; align-items: center; gap: 24px; padding: 24px 28px; transition: background var(--t); }
.cartx-item + .cartx-item { border-top: 1px solid var(--border); }
.cartx-item:hover { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.cartx-item__thumb img {
	width: 104px; height: 104px; object-fit: cover; display: block;
	border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2);
}
.cartx-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cartx-item__name, .cartx-item__name a { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); text-decoration: none; }
.cartx-item__name a:hover { color: var(--neon-blue); }
.cartx-item__name dl.variation { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 4px 0 0; color: var(--text-dim); font-size: var(--fs-200); font-family: var(--font-body); font-weight: 400; }
.cartx-item__name dl.variation dt, .cartx-item__name dl.variation dd { margin: 0; font-weight: 400; }
.cartx-item__name dl.variation dd p { margin: 0; display: inline; }
.cartx-item__unit { color: var(--text-dim); font-size: var(--fs-200); }
.cartx-item__each { opacity: 0.8; margin-left: 2px; }
.cartx-item__remove { color: var(--text-dim); font-size: var(--fs-200); text-decoration: none; width: max-content; border-bottom: 1px solid transparent; }
.cartx-item__remove:hover { color: var(--neon-magenta); }
.cartx-item__controls { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* EXACT same pill stepper as the product-page buy box (values copied 1:1). */
.cartx .quantity {
	display: inline-flex; align-items: center; height: 52px; flex: none;
	border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); overflow: hidden;
}
.cartx .qty-btn {
	width: 42px; height: 52px; border: 0; background: none; color: var(--text-muted);
	font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
	transition: color var(--t), background var(--t);
}
.cartx .qty-btn:hover { color: var(--text); background: var(--surface-2); }
.cartx input.qty {
	height: 52px; width: 46px; padding: 0; text-align: center;
	/* !important: the global form-input skin (surface box + border + radius)
	   was drawing a box around the number inside the pill. */
	border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important;
	color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400);
	-moz-appearance: textfield; appearance: textfield;
}
.cartx input.qty::-webkit-outer-spin-button, .cartx input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cartx input.qty:focus { outline: none; box-shadow: none; }
.cartx-item__total { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); }
/* Footer row inside the card: coupon + continue shopping (Update is hidden,
   qty changes auto-submit) */
.cartx-actions { display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
.cartx-actions .coupon { display: flex; gap: 10px; flex: 1; max-width: 430px; }
.cartx-actions .coupon input#coupon_code {
	flex: 1; height: 44px; padding: 0 16px; font-size: var(--fs-300); min-width: 0;
	background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); color: var(--text);
}
.cartx-actions .coupon input#coupon_code:focus { outline: none; border-color: var(--neon-blue); }
.cartx-actions .coupon button {
	height: 44px; padding: 0 22px; cursor: pointer; border-radius: var(--r-pill); white-space: nowrap;
	background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
	font-family: var(--font-display); font-weight: 600;
}
.cartx-actions .coupon button:hover { border-color: var(--text-dim); }
.cartx-update { display: none !important; }
.cartx-continue { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); text-decoration: none; }
.cartx-continue:hover { color: var(--neon-blue); }
.cartx-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--sp-3) 0 0; color: var(--text-dim); font-size: var(--fs-100); }
/* Sticky order summary */
.woocommerce-cart .cart-collaterals { position: sticky; top: 96px; }
.woocommerce-cart .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals { padding: var(--sp-5); box-shadow: var(--lit-edge); }
.woocommerce-cart .cart_totals h2 { font-size: var(--fs-600); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { padding-top: var(--sp-3) !important; font-size: var(--fs-600); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 17px 24px; font-size: var(--fs-400); }
@media (max-width: 700px) {
	.cartx-item { flex-wrap: wrap; gap: 16px; padding: 18px; }
	.cartx-item__thumb img { width: 72px; height: 72px; }
	.cartx-item__name, .cartx-item__name a { font-size: var(--fs-400); }
	.cartx-item__controls { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
	.cartx-actions { flex-wrap: wrap; padding: 16px 18px; }
	.cartx-actions .coupon { max-width: none; flex-basis: 100%; }
	.cartx-continue { margin: 4px auto 0 0; }
	.cartx-head__title { font-size: var(--fs-700); }
}

/* Empty cart */
.cart-empty.woocommerce-info { border: 1px dashed var(--border-2) !important; background: var(--surface) !important; }
.woocommerce-cart .return-to-shop a.button { background: var(--grad-primary); color: #fff; border-radius: var(--r-pill); padding: 13px 26px; }
/* Mobile: stacked rows (WC adds data-title labels) */
@media (max-width: 760px) {
	.woocommerce-cart table.shop_table thead { display: none; }
	.woocommerce-cart table.shop_table tr { display: block; padding: 6px 0; border-top: 1px solid var(--border); }
	.woocommerce-cart table.shop_table td { display: flex; align-items: center; justify-content: space-between; border: 0; padding: 8px 14px; }
	.woocommerce-cart table.shop_table td::before { content: attr(data-title); color: var(--text-dim); font-size: var(--fs-200); }
	.woocommerce-cart table.shop_table td.product-thumbnail::before, .woocommerce-cart td.actions::before { content: none; }
	.woocommerce-cart td.actions .coupon { width: 100%; }
	.woocommerce-cart td.actions .coupon input#coupon_code { flex: 1; width: auto; }
}