/* ===== Warehouse (green) clone — PDP v3 (exact spec) ===== */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");
:root{--wh-accent:#0aa25a;--wh-accent-d:#08894c;--wh-dark:#123d24;--wh-stock:#4caf50;--wh-sale:#ee0000;--wh-bg:#f3f5f6;--wh-card:#fff;--wh-line:#e1e3e4;--wh-muted:#677279;--wh-ink:#1e2d2a;--wh-header:#123d24;}

/* ===== One typeface everywhere (Warehouse is 100% Barlow; Shoptimizer ships Inter and declares it
   across 27 separate rules, several class-level, so a plain `body` override loses the cascade).
   Audited every page type for glyph fonts first: only `dashicons` (admin bar) exists — the star
   rating here is SVG-driven, not WooCommerce's legacy `star` font — so nothing else needs re-asserting. */
html body,html body *{font-family:"Barlow",sans-serif!important;}
#wpadminbar,#wpadminbar *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;}
.dashicons,.dashicons-before::before,[class^="dashicons-"]::before,[class*=" dashicons-"]::before,
#wpadminbar .ab-icon::before,#wpadminbar .ab-item::before{font-family:dashicons!important;}

/* ===== Site container width (Warehouse = 1480px, centered) =====
   The theme generates .col-full{max-width} from its "Content container width" Customizer setting via
   an inline Kirki <style> block, but WP Rocket's Remove-Unused-CSS strips it, leaving the container
   undersized AND left-aligned. Set it directly so header, nav, and content all share the same
   1480px centered container. Ancestors forced full-width so the centering isn't capped short. */
html body div.hfeed.site,html body .site-content,html body .shoptimizer-archive,html body #primary,html body .content-area{width:100%!important;max-width:none!important;float:none!important;box-sizing:border-box;}
html body .col-full{max-width:1480px!important;margin-left:auto!important;margin-right:auto!important;width:auto!important;}
.single-product,.single-product #content,.single-product.woocommerce,.single-product #primary{background:var(--wh-bg);}
/* kill the full-width->2-col flash: hide product until JS builds .wh-row (revealed by body.wh-restructured; JS also reveals on failure) */
.single-product div.product{opacity:0;transition:opacity .12s ease;}
.single-product.wh-restructured div.product{opacity:1;}
.single-product,.single-product body,.single-product .product_title,.single-product h1,.single-product h2,.single-product h3,.single-product .button,.single-product .price{font-family:"Barlow",-apple-system,sans-serif;}
/* two-column row built by JS */
.wh-row{max-width:1480px;margin:6px auto 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;padding:0;}
/* PDP breadcrumb head (Warehouse: "Home > All products > ...") + kill excess top gap */
.wh-pdp-head{max-width:1480px;margin:0 auto;padding:14px 0 6px;}
.wh-pdp-head .woocommerce-breadcrumb{font-family:"Barlow",sans-serif;font-size:14px;color:var(--wh-muted);margin:0;}
.wh-pdp-head .woocommerce-breadcrumb a{color:var(--wh-muted);}
.wh-pdp-head .woocommerce-breadcrumb a:hover{color:var(--wh-accent);}
.single-product .site-content .col-full,.single-product #primary{padding-top:0!important;}
.single-product .site-main > .woocommerce-products-header,.single-product .archive-header{display:none!important;}
.wh-left{display:flex;flex-direction:column;gap:20px;min-width:0;}
.wh-right{position:sticky;top:16px;align-self:start;}
.wh-left > .images,.wh-left > .woocommerce-tabs,.wh-left > .wh-card,.wh-right > .summary,.single-product div.product .related.products{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:3px;padding:24px;box-shadow:0 1px 2px rgba(30,45,42,.05);margin:0;}
/* Warehouse: description/tabs + trust cards stack in the LEFT column (under gallery); only related goes full-width below */
.single-product div.product .related.products{max-width:1480px;margin:26px auto 0;padding:24px 24px 32px;}
/* buy box */
.wh-right .summary .product_title{color:var(--wh-dark)!important;font-size:24px;font-weight:700;line-height:1.3;margin:0 0 10px;}
/* price: regular dark-green, SALE red (Warehouse), old price struck gray */
.wh-right .summary .price,.wh-right .summary .cgkit-as-variation-price,.wh-right .summary .price .amount{color:var(--wh-dark)!important;font-size:24px;font-weight:700;}
.wh-right .summary .price ins,.wh-right .summary .price ins .amount,.wh-right .summary .cgkit-as-variation-price ins,.wh-right .summary .cgkit-as-variation-price ins .amount{color:var(--wh-sale)!important;text-decoration:none;font-weight:700;}
.wh-right .summary .price del,.wh-right .summary .price del .amount,.wh-right .summary .cgkit-as-variation-price del,.wh-right .summary .cgkit-as-variation-price del .amount{color:#9ba1a5!important;font-weight:400;font-size:16px;text-decoration:line-through;}
/* The summary is a flex column; CommerceKit fixes order: title=1, afterpay=3, cart=4, inventory=5,
   widget=6 (higher specificity, can't override). Our own els default to order:50 (dumped at bottom).
   Put them all at order:2 (between title and afterpay) — they tie-break by DOM order
   (save > sku > share > price > stock) = Warehouse sequence, above the buttons. */
.wh-right .summary > .wh-save-badge,.wh-right .summary > .wh-meta-line,.wh-right .summary > .wh-rating-row,.wh-right .summary > .wh-rating,.wh-right .summary > .wh-share,.wh-right .summary > .wh-price,.wh-right .summary > .stock{order:2!important;}
/* PDP: rating (left) + social icons (right) on ONE row, with a divider below (Warehouse) */
.wh-right .summary > .wh-rating-row{display:flex!important;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 14px;padding:0 0 16px;border-bottom:1px solid var(--wh-line);}
.wh-right .summary .wh-rating{margin:0;display:flex;align-items:center;}
.wh-right .summary .wh-rating .star-rating{font-size:14px;color:#f0a500;}
.wh-right .summary .wh-rating .woocommerce-review-link{font-family:"Barlow",sans-serif;font-size:13px;color:var(--wh-muted);margin-left:8px;}
/* remove the description text WooCommerce renders inside star-rating; keep just stars */
.wh-right .summary .wh-rating .star-rating span{position:absolute;}
/* Product-card badge stack (New / Our Selection / Sale — stacked top-left, Warehouse colors) */
/* Warehouse card labels: one stack hugging the image's top-left corner. The containing block here is
   .woocommerce-image__wrapper (the image box), NOT the <li> — whose padding differs per template
   (20px on shop, 10px on home) — so top/left:0 means "flush to the image" on every grid.
   Chips shrink to fit, landing at ~half the image width, like Warehouse. */
/* width:100% so the chips' min-width:50% has the IMAGE width as its basis — an auto-width abspos
   parent would make that percentage resolve against the chip's own shrink-to-fit width. */
.wh-label-list{position:absolute;top:0;left:0;width:100%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;}
/* min-width:50% = "长度和图比一半一半". Warehouse's chips shrink to fit and happen to land at ~0.52
   because its cards are narrower (193px image); on our 6-col 246px images shrink-to-fit is only 0.36. */
.wh-label{display:inline-block;box-sizing:border-box;min-width:50%;font-family:"Barlow",sans-serif;font-size:14px;font-weight:600;line-height:14px;color:#fff;border-radius:0 3px 3px 0;padding:4px 10px;white-space:nowrap;}
.wh-label--sale{background:var(--wh-sale);}
.wh-label--new{background:var(--wh-accent);}
.wh-label--selection{background:#0774d7;}
/* belt & braces: the theme's loop sale flash is unhooked in PHP, but CommerceKit can re-add one */
ul.products li.product > .onsale,ul.products li.product span.onsale{display:none!important;}
ul.products li.product{position:relative;}
/* hide CommerceKit's own price wrapper (kept display:none by cgkit JS) + the in-summary onsale; we render our own */
.wh-right .summary .cgkit-as-variation-price,.wh-right .summary > span.onsale{display:none!important;}
/* our own price line: "Price: $x (struck)  $y (red)" */
.wh-right .summary .wh-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:6px 0 4px;font-size:24px;font-weight:700;color:var(--wh-sale);}
.wh-right .summary .wh-price::before{content:"Price:";color:var(--wh-dark);font-size:16px;font-weight:600;flex:0 0 78px;align-self:center;}
.wh-right .summary .wh-price .amount{font-size:24px;}
.wh-right .summary .wh-price ins,.wh-right .summary .wh-price ins .amount,.wh-right .summary .wh-price ins bdi{color:var(--wh-sale)!important;text-decoration:none;font-weight:700;}
.wh-right .summary .wh-price del,.wh-right .summary .wh-price del .amount,.wh-right .summary .wh-price del bdi{color:#9ba1a5!important;font-weight:400;font-size:16px;text-decoration:line-through;}
/* single (non-sale/non-range) price stays dark — direct-child amount only, so it never overrides ins/del */
.wh-right .summary .wh-price > .amount,.wh-right .summary .wh-price > .amount bdi{color:var(--wh-sale);}
/* Hide CommerceKit's PDP trust widget (Fast Delivery / Guaranteed Safe Checkout broken-image block) — Warehouse doesn't have it in the buy box */
.wh-right .summary > .product-widget,.wh-right .summary .product-widget{display:none!important;}
/* Save $X red badge under title */
.wh-right .summary .wh-save-badge{display:inline-block;align-self:flex-start;width:auto;background:var(--wh-sale);color:#fff;border-radius:3px;font-size:13px;font-weight:700;padding:3px 10px;margin:0 0 12px;line-height:1.5;}
.wh-right .summary p.stock,.wh-right .summary .stock{display:flex!important;align-items:center;gap:8px;font-weight:600;margin:2px 0 0;}
.wh-right .summary p.stock::before,.wh-right .summary .stock::before{content:none!important;}
.wh-right .summary .stock .wh-stock-label{order:-2;flex:0 0 78px;color:var(--wh-dark);font-size:16px;font-weight:600;font-family:"Barlow",sans-serif;}
.wh-right .summary p.stock.in-stock::after,.wh-right .summary .stock.in-stock::after{content:""!important;width:9px!important;height:9px!important;border-radius:50%!important;background:var(--wh-stock)!important;order:-1;flex:0 0 9px;}
.single-product form.cart .quantity,.wh-right .summary .quantity{display:flex!important;align-items:center;width:100%!important;float:none!important;margin:0 0 14px 0!important;}
.wh-right .summary .quantity::before{content:"Quantity:";color:var(--wh-dark);font-size:16px;font-weight:600;flex:0 0 78px;margin-right:0;}
/* meta line: brand | sku */
.wh-meta-line{display:flex;align-items:center;gap:8px;font-family:"Barlow",sans-serif;font-size:13px;color:var(--wh-muted);margin:0 0 10px;}
.wh-meta-line .wh-brand{color:var(--wh-accent);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
/* SKU is the supplier's raw product id — never shown to buyers (theme prints its own .sku_wrapper) */
.single-product .product_meta .sku_wrapper,.single-product .summary .sku_wrapper,.wh-right .summary .sku_wrapper{display:none!important;}
/* social share (round gray) */
.wh-share{display:flex;gap:8px;margin:0 0 0 auto;padding:0;border:0;flex:0 0 auto;}
.wh-share a{width:34px;height:34px;border-radius:50%;background:#eef1f2;color:#9aa2a7;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.wh-share a svg{width:16px;height:16px;}
.wh-share a:hover{background:var(--wh-accent);color:#fff;}
/* Add to cart | Buy it now SIDE BY SIDE in a JS-wrapped .wh-btn-row. qty own row above. */
.single-product form.cart .wh-btn-row{display:flex;gap:12px;width:100%;margin-top:4px;}
.single-product form.cart .wh-btn-row > *{flex:1 1 0;margin:0!important;}
.woocommerce.single-product button.single_add_to_cart_button.button.alt,.woocommerce.single-product .single_add_to_cart_button,.single-product form.cart button.single_add_to_cart_button{background:var(--wh-accent)!important;color:#fff!important;border-radius:2px!important;font-weight:600;text-transform:none;line-height:48px;padding:0 20px;height:auto;}
.woocommerce.single-product button.single_add_to_cart_button.button.alt:hover,.single-product form.cart button.single_add_to_cart_button:hover{background:var(--wh-accent-d)!important;}
.fkwcs_buy_now_button,.cgkit-buy-now,.wc-stripe-buy-now,.wc_ppcp_button{background:var(--wh-dark)!important;color:#fff!important;border-radius:2px!important;line-height:48px!important;}
/* inventory bar (4px green) */
.cgkit-inventory-bar,.commercekit-inventory .cgkit-bar{height:4px!important;border-radius:3px!important;background:var(--wh-line)!important;margin:16px 0 10px!important;}
.cgkit-inventory-bar>span,.commercekit-inventory .cgkit-bar>span{background:var(--wh-stock)!important;}
.stock.in-stock{color:var(--wh-stock);font-weight:600;}
/* headings/links */
/* One spec for every PDP section/card heading, matching "You may also like". */
.single-product h2,.wh-card h2,.woocommerce-tabs h2,.related.products>h2{color:var(--wh-dark);font-size:22px;font-weight:700;font-family:"Barlow",sans-serif;letter-spacing:-.02em;line-height:1.25;margin:0 0 16px;}
.related.products>h2{text-align:left;}
.single-product a{color:var(--wh-accent);}
.single-product .summary .quantity .qty{border-radius:2px;}
/* trust cards */
.wh-card .wh-pay-icons{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.wh-card .wh-pay-icons img:not(.wh-pay-strip){height:26px;}
.wh-card ul{margin:8px 0 0 18px;}.wh-card ul li{margin:7px 0;color:var(--wh-muted);line-height:1.6;}
.wh-card p{color:var(--wh-muted);}
/* Recently viewed row */
.wh-recently-viewed{max-width:1480px;margin:24px auto;padding:0 24px;}
.wh-recently-viewed .wh-sec-title{margin:0 0 16px;font-size:22px;}
.wh-recently-viewed ul.products{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:20px!important;}
/* related grid cards */
.related.products ul.products li.product .price{color:var(--wh-accent);font-weight:700;}
.related.products ul.products li.product img{border-radius:4px;}
@media(max-width:990px){.wh-row{grid-template-columns:1fr;}.wh-right{position:static;}}
/* fix: Shoptimizer .summary/.images have default float+width — override inside wh cols */
.wh-left > .images,.wh-left .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important;max-width:none!important;}
.wh-right > .summary{width:100%!important;float:none!important;margin:0!important;max-width:none!important;}
.wh-right .summary .product_title{word-break:normal!important;overflow-wrap:anywhere;hyphens:none;}
.single-product div.product{display:block!important;}
/* native WooCommerce tabs — click to switch (Description | Additional info | Reviews), Warehouse style */
.woocommerce-tabs ul.tabs.wc-tabs{display:flex!important;flex-wrap:wrap;gap:4px;list-style:none;margin:0 0 20px;padding:0 0 0;border-bottom:1px solid var(--wh-line);}
.woocommerce-tabs ul.tabs.wc-tabs::before,.woocommerce-tabs ul.tabs.wc-tabs li::before,.woocommerce-tabs ul.tabs.wc-tabs li::after{display:none!important;}
.woocommerce-tabs ul.tabs.wc-tabs li{margin:0;padding:0;background:transparent!important;border:0!important;border-radius:0;}
.woocommerce-tabs ul.tabs.wc-tabs li a{font-family:"Barlow",sans-serif;font-weight:600;font-size:15px;color:var(--wh-muted)!important;padding:12px 18px;display:block;border-bottom:2px solid transparent;}
.woocommerce-tabs ul.tabs.wc-tabs li.active a,.woocommerce-tabs ul.tabs.wc-tabs li a:hover{color:var(--wh-dark)!important;border-bottom-color:var(--wh-accent);}
/* hide CommerceKit's duplicate sticky tab-link bar only */
.commercekit-atc-tab-links,.commercekit-atc-sticky-tabs .commercekit-atc-tab-links{display:none!important;}
/* footer: keep native but ensure readable */
/* hide page title on the homepage */
body.home .entry-title,body.page-id-1675211 .entry-title,body.home .entry-header,body.home .woocommerce-breadcrumb{display:none!important;}
body.home .site-content .col-full{padding-top:0!important;}
/* social icons in green topbar - white */
.wh-social a svg{vertical-align:middle;}
/* Sale badge Warehouse red */
.onsale,span.onsale{background:var(--wh-sale)!important;color:#fff!important;border-radius:3px!important;}
/* nuclear: hide front-page H1 title */
.home.page .entry-header,.home.page h1.entry-title,.home .site-content article.page > .entry-header,.home .hentry > header.entry-header{display:none!important;visibility:hidden!important;height:0!important;margin:0!important;padding:0!important;}
/* CommerceKit gallery (horizontal layout = thumbnail strip below main, native swiper — no flex hacks) */
.cg-thumb-swiper .swiper-slide{border:1px solid var(--wh-line);border-radius:4px;overflow:hidden;cursor:pointer;}
.cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active{border-color:var(--wh-accent);}
/* Warehouse-style IMAGE swatches (real per-variation thumbnail via data-gimg_id, see warehouse-clone.js) */
.wh-right .summary .cgkit-swatch.wh-imgswatch{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;background-size:cover!important;background-position:center!important;border:2px solid var(--wh-line)!important;border-radius:4px!important;color:transparent!important;font-size:0!important;overflow:hidden;}
.wh-right .summary .cgkit-swatch.wh-imgswatch span{display:none!important;}
.wh-right .summary .cgkit-swatch.wh-imgswatch.cgkit-selected,.wh-right .summary .cgkit-swatch.wh-imgswatch:hover{border-color:var(--wh-accent)!important;}
.wh-right .summary .cgkit-swatch.wh-imgswatch.cgkit-disabled{opacity:.4;}
/* ===== Warehouse shop/category banner + breadcrumb + toolbar (full width, above sidebar+grid) ===== */
/* The banner is a GRID ITEM in column 2 now — the old max-width/auto-margins/24px side padding were
   for the previous full-width layout and pushed the image 24px inside its column, so it no longer
   lined up with the product card below it or with the sidebar's row. Let the grid size it. */
.wh-shop-banner{margin:0;padding:0;}
.wh-shop-banner img{width:100%;height:220px;object-fit:cover;border-radius:6px;display:block;}
.wh-shop-head{max-width:1480px;margin:0 auto;padding:18px 24px 0;}
.wh-shop-head .woocommerce-breadcrumb{font-family:"Barlow",sans-serif;font-size:13px;color:var(--wh-muted);margin:0 0 8px;}
.wh-shop-head .woocommerce-breadcrumb a{color:var(--wh-muted);}
.wh-shop-title{font-family:"Barlow",sans-serif;font-weight:700;color:var(--wh-dark);font-size:28px;margin:0 0 6px;}
.wh-shop-toolbar{max-width:1480px;margin:0 auto 18px;padding:0 24px 14px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--wh-line);flex-wrap:wrap;font-family:"Barlow",sans-serif;}
.wh-toolbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.wh-perpage,.wh-orderby{display:flex;align-items:center;gap:8px;margin:0;}
.wh-perpage label,.wh-orderby label{color:var(--wh-muted);font-size:14px;}
.wh-perpage select,.wh-orderby select{font-family:"Barlow",sans-serif;font-size:14px;color:var(--wh-dark);border:1px solid var(--wh-line);border-radius:2px;padding:8px 30px 8px 12px;background-color:#fff;height:auto;cursor:pointer;}
.wh-view-toggle{display:flex;gap:4px;}
.wh-view-toggle button{width:34px;height:34px;border:1px solid var(--wh-line);border-radius:2px;background:#fff;color:var(--wh-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.wh-view-toggle button svg{width:16px;height:16px;}
.wh-view-toggle button.active{background:var(--wh-dark);border-color:var(--wh-dark);color:#fff;}
/* list-view layout (JS toggles body.wh-list-view) — html-prefixed to outrank the 4-col rule below regardless of source order */
html body.wh-list-view .wh-shop-archive ul.products,html body.wh-list-view.wh-shop-archive ul.products{grid-template-columns:1fr!important;}
body.wh-list-view ul.products li.product{display:flex!important;align-items:center;gap:20px;padding:14px;text-align:left!important;}
body.wh-list-view ul.products li.product a.woocommerce-LoopProduct-link{display:flex;align-items:center;gap:20px;width:100%;}
body.wh-list-view ul.products li.product img{width:120px!important;height:120px!important;flex:0 0 120px;object-fit:cover;}
/* ===== Warehouse shop — NATIVE left sidebar (Customizer) ===== */
/* sidebar widgets as white cards */
.wh-shop-archive .widget-area .widget{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:4px;padding:18px;margin-bottom:18px;}
.wh-shop-archive .widget-area .widget-title,.wh-shop-archive .widget-area .widgettitle{font-family:"Barlow",sans-serif;font-size:15px;font-weight:700;color:var(--wh-dark);margin:0 0 12px;text-transform:none;letter-spacing:0;}
.wh-shop-archive .widget-area a{color:var(--wh-muted);}
.wh-shop-archive .widget-area a:hover{color:var(--wh-accent);}
.wh-shop-archive .widget-area li{font-size:13px;color:var(--wh-muted);}
.wh-shop-archive .widget_price_filter .price_slider_amount .button,.wh-shop-archive .widget-area .button{background:var(--wh-accent)!important;border-radius:2px;}
.wh-shop-archive .widget_price_filter .ui-slider-range,.wh-shop-archive .widget_price_filter .ui-slider .ui-slider-handle{background:var(--wh-accent)!important;}
/* Warehouse shop toolbar (renders in .shoptimizer-sorting): result count left + Sort right */
.wh-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--wh-line);flex-wrap:wrap;font-family:"Barlow",sans-serif;width:100%;}
.wh-shop-toolbar .wh-count{color:var(--wh-muted);font-size:14px;}
.wh-shop-toolbar .wh-orderby{display:flex;align-items:center;gap:8px;margin:0;}
.wh-shop-toolbar .wh-orderby label{color:var(--wh-muted);font-size:14px;}
.wh-shop-toolbar .wh-orderby select{font-family:"Barlow",sans-serif;font-size:14px;color:var(--wh-dark);border:1px solid var(--wh-line);border-radius:2px;padding:8px 30px 8px 12px;background-color:#fff;height:auto;cursor:pointer;}
/* hide Shoptimizer's own result-count/ordering (we render our own toolbar) */
.wh-shop-archive .shoptimizer-sorting .woocommerce-result-count,.wh-shop-archive .shoptimizer-sorting .woocommerce-ordering{display:none!important;}
/* 4-col product grid (beat Shoptimizer's cached 6-col dynamic CSS with high specificity) + green pagination */
html body.wh-shop-archive .site-content ul.products,html body.wh-shop-archive ul.products.columns-4,html body.wh-shop-archive ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important;}
.wh-shop-archive .woocommerce-pagination .page-numbers{border-radius:2px;font-family:"Barlow",sans-serif;}
.wh-shop-archive .woocommerce-pagination .page-numbers.current,.wh-shop-archive .woocommerce-pagination a.page-numbers:hover{background:var(--wh-accent)!important;color:#fff!important;border-color:var(--wh-accent)!important;}
@media(max-width:1100px){.wh-shop-archive ul.products{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:700px){.wh-shop-archive ul.products{grid-template-columns:repeat(2,1fr)!important;}}
/* Buy it now (Warehouse: dark, below add-to-cart) */
.wh-buy-now{background:var(--wh-dark)!important;color:#fff!important;border-radius:2px!important;line-height:48px;font-weight:600;border:0;padding:0 20px;}
.wh-buy-now:hover{background:#0d2e1a!important;}
@media(max-width:480px){.single-product form.cart .wh-btn-row{flex-direction:column;}}
/* Payment & Security card detail */
.wh-payment-security .wh-ps-label{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--wh-muted);margin:14px 0 8px;}
.wh-payment-security .wh-safe{display:flex;align-items:center;gap:12px;color:var(--wh-dark);}
.wh-payment-security .wh-safe svg{width:34px;height:40px;stroke:var(--wh-accent);}
.wh-payment-security .wh-safe b{display:block;font-size:15px;font-weight:700;color:var(--wh-dark);}
.wh-payment-security .wh-safe span{font-size:12px;color:var(--wh-accent);font-weight:600;letter-spacing:.05em;}
/* ===== Mini-cart slide-out drawer (Shoptimizer native) — Warehouse green ===== */
.shoptimizer-mini-cart-wrap,.widget_shopping_cart,.shoptimizer-cart-inner{font-family:"Barlow",sans-serif;}
/* Shoptimizer positions this absolute/top-left and shrink-wrapped, as plain text over the drawer.
   Do NOT give it a background — it becomes a floating box on top of the first cart row. */
.cart-drawer-heading,.shoptimizer-mini-cart-wrap .cart-drawer-heading{background:none!important;color:var(--wh-ink)!important;font-family:"Barlow",sans-serif;font-weight:700;letter-spacing:.02em;font-size:17px;}
.cart-drawer-heading *{color:var(--wh-ink)!important;}
.shoptimizer-mini-cart-wrap{--wh-drawer:1;}
.widget_shopping_cart .woocommerce-mini-cart__total .amount,.widget_shopping_cart .amount,.shoptimizer-mini-cart-wrap .amount{color:var(--wh-accent)!important;font-weight:700;}
.widget_shopping_cart .woocommerce-mini-cart__total,.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__total{border-top:1px solid var(--wh-line);font-family:"Barlow",sans-serif;}
.widget_shopping_cart a.button,.shoptimizer-mini-cart-wrap a.button,.widget_shopping_cart .buttons a{border-radius:2px!important;line-height:44px!important;padding:0 20px!important;font-weight:600!important;text-transform:none!important;font-family:"Barlow",sans-serif;}
.widget_shopping_cart a.button:not(.checkout),.widget_shopping_cart .buttons a.wc-forward:not(.checkout){background:#fff!important;color:var(--wh-dark)!important;border:2px solid var(--wh-dark)!important;}
.widget_shopping_cart a.checkout,.widget_shopping_cart .buttons a.checkout{background:var(--wh-accent)!important;color:#fff!important;border:0!important;}
.widget_shopping_cart a.checkout:hover{background:var(--wh-accent-d)!important;}
.widget_shopping_cart a.remove,.widget_shopping_cart a.remove_from_cart_button{color:var(--wh-muted)!important;}
.woocommerce-mini-cart__empty-message{color:var(--wh-muted);font-family:"Barlow",sans-serif;}
/* header cart count bubble green */
.site-header-cart .cart-contents .count,.shoptimizer-cart .count,.cart-contents-count{background:var(--wh-accent)!important;color:#fff!important;}
/* shop product cards Warehouse polish */
ul.products li.product{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:4px;transition:box-shadow .2s,transform .2s;}
ul.products li.product:hover{box-shadow:0 6px 18px rgba(30,45,42,.1);}
ul.products li.product .price{color:var(--wh-dark);font-weight:700;}
/* Warehouse card stock line + swatch polish */
.wh-loop-stock{display:flex;align-items:center;gap:7px;font-family:"Barlow",sans-serif;font-size:12.5px;font-weight:600;color:var(--wh-stock);margin:6px 0 2px;}
.wh-loop-stock .wh-dot{width:8px;height:8px;border-radius:50%;background:var(--wh-stock);flex:0 0 8px;}
.wh-loop-stock.wh-oos{color:#9aa2a7;}.wh-loop-stock.wh-oos .wh-dot{background:#c2c8cc;}
/* CommerceKit PLP swatches: constrain to one clean clipped row (Warehouse-style) */
ul.products li.product .cgkit-swatch-form{margin:8px 0 2px;}
ul.products li.product .cgkit-swatch-title,ul.products li.product .cgkit-attribute-swatches-wrap legend,ul.products li.product .cgkit-as-wrap-plp .cgkit-sr-only{display:none!important;}
ul.products li.product .cgkit-attribute-swatches-wrap{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;overflow:hidden!important;max-width:100%;max-height:26px;border:0!important;padding:0!important;margin:0!important;}
ul.products li.product .cgkit-attribute-swatches-wrap > *{flex:0 0 auto;min-width:0;}
ul.products li.product .cgkit-swatch,ul.products li.product .cgkit-attribute-swatches-wrap label{width:22px;height:22px;min-width:22px;border-radius:50%;border:1px solid var(--wh-line);overflow:hidden;font-size:0!important;line-height:22px;}
ul.products li.product .cgkit-swatch.cgkit-selected,ul.products li.product .cgkit-swatch:hover{outline:2px solid var(--wh-accent);outline-offset:1px;}
ul.products li.product .woocommerce-loop-product__title,ul.products li.product h2{font-family:"Barlow",sans-serif;font-weight:600;color:var(--wh-dark);}
/* New! badge green (Warehouse) */
.commercekit-badge.commercekit-badge-new,span.commercekit-badge-new,.cgkit-badge-new{background:var(--wh-accent)!important;}
/* ===== Warehouse header-5 (native: Logo / Search / Cart row + nav row below) ===== */
/* native search bar (in the logo row) — green accent */
.main-header .site-search .woocommerce-product-search,.site-search .woocommerce-product-search{display:flex!important;align-items:stretch;border:2px solid var(--wh-accent)!important;border-radius:3px!important;overflow:hidden;background:#fff!important;max-width:none;box-shadow:none!important;}
/* search fills the header space between logo and account cluster (kills the empty middle gap) */
.main-header .site-search{margin-right:28px;}
.main-header .site-search .woocommerce-product-search input[type=search],.site-search .search-field{flex:1 1 auto;min-width:0!important;border:0!important;outline:0;padding:0 66px 0 18px!important;height:46px!important;font-family:"Barlow",sans-serif;font-size:15px;background:transparent!important;box-shadow:none!important;}
/* Draw the green magnifier block as the form's ::after — CommerceKit's AJAX input wins the
   z-stack against the real <button>, but generated content of the (positioned) form paints
   above the input. pointer-events:none so clicks still reach the real submit button behind it. */
.main-header .site-search .woocommerce-product-search::after,.site-search .woocommerce-product-search::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;z-index:6;pointer-events:none;background-color:var(--wh-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:20px;}
/* button pinned absolutely to the form's right edge, above CommerceKit's overflowing AJAX input */
.main-header .site-search .woocommerce-product-search button,.site-search .woocommerce-product-search button[type=submit]{position:absolute!important;right:0;top:0;bottom:0;width:56px;height:auto!important;z-index:5;display:flex!important;align-items:center;justify-content:center;border:0!important;background:var(--wh-accent)!important;color:#fff!important;cursor:pointer;border-radius:0!important;font-size:0;padding:0!important;}
.main-header .site-search .woocommerce-product-search button::before{content:"";display:inline-block;width:20px;height:20px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
/* "All categories" dropdown injected at the left of the search box (Warehouse) */
.site-search .woocommerce-product-search .wh-cat-select{flex:0 0 auto;order:-1;border:0!important;border-right:1px solid var(--wh-line)!important;background:#fff;padding:0 34px 0 16px;height:46px;font-family:"Barlow",sans-serif;font-size:14px;color:var(--wh-muted);cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;max-width:172px;border-radius:0!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677279' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;}
/* only ONE search in the whole header — kill the theme's nav/sticky-nav search (it reappears at narrow widths / on sticky scroll and reads as a duplicate) */
.col-full-nav .site-search,.shoptimizer-primary-navigation .site-search,.col-full-nav .widget_product_search{display:none!important;}
/* nav row below (Warehouse: white bar, gray text) */
.header-5 .col-full-nav,.col-full-nav{background:#fff!important;border-top:1px solid var(--wh-line);border-bottom:1px solid var(--wh-line);}
.col-full-nav .main-navigation ul.menu > li > a,.col-full-nav .menu > li > a,.col-full-nav .main-navigation a{color:var(--wh-muted)!important;font-family:"Barlow",sans-serif;font-weight:600;text-transform:none;}
.col-full-nav .main-navigation ul.menu > li > a:hover,.col-full-nav .menu > li.current-menu-item > a,.col-full-nav .main-navigation a:hover{color:var(--wh-accent)!important;}
/* header-5 cart amount color */
.main-header .site-header-cart .amount,.main-header .cart-contents .amount{color:var(--wh-dark)!important;}
/* My Account link (injected, before cart) — Warehouse header element */
/* Track Order + My Account share one group pushed to the right. The `margin-left:auto` must live on
   the FIRST of the pair only — put it on both and the free space splits between them, pulling them apart. */
.main-header .wh-track{display:flex;align-items:center;gap:8px;margin:0 24px 0 auto;color:var(--wh-dark);font-family:"Barlow",sans-serif;font-weight:600;font-size:14px;text-decoration:none;flex:0 0 auto;order:3;}
.main-header .wh-track svg{width:22px;height:22px;stroke:var(--wh-dark);}
.main-header .wh-account{display:flex;align-items:center;gap:8px;margin:0 24px 0 0;color:var(--wh-dark);font-family:"Barlow",sans-serif;font-weight:600;font-size:14px;text-decoration:none;flex:0 0 auto;order:3;}
.main-header .site-header-cart{order:4;}
.main-header .site-search{order:2;}
.main-header .site-branding{order:1;}
.main-header .wh-account svg{width:22px;height:22px;stroke:var(--wh-dark);}
.main-header .wh-account:hover{color:var(--wh-accent);}
.main-header .wh-account:hover svg{stroke:var(--wh-accent);}
/* ===== Header: full-bleed backgrounds (no side gaps), compact, reordered top bar ===== */
/* full-bleed green top bar — the green wrapper has .col-full so my own max-width:1480 caps it;
   uncap it with higher specificity so the green spans edge-to-edge (content stays centered by the inner .col-full) */
html body .topbar-wrapper.col-full{max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;background:var(--wh-header)!important;}
.top-bar{background:transparent!important;}
/* Warehouse paints the announcement bar and the logo/search row the SAME dark colour so they read as
   one solid block, with the white nav bar beneath. Mirror that with our dark green. */
.site-header{background:var(--wh-header)!important;border-bottom:0!important;}
/* Warehouse logo row is 94px tall: 22 + 50 (search) + 22. */
.main-header{padding-top:22px!important;padding-bottom:22px!important;}
/* everything in the dark row goes white */
.main-header .site-branding a,.main-header .site-title a,.main-header .beta a,.main-header .site-title{color:#fff!important;}
.main-header .wh-account,.main-header .wh-account:visited,
.main-header .wh-track,.main-header .wh-track:visited{color:#fff!important;}
.main-header .wh-account svg,.main-header .wh-track svg{stroke:#fff!important;}
.main-header .wh-account:hover,.main-header .wh-account:hover span,
.main-header .wh-track:hover,.main-header .wh-track:hover span{color:rgba(255,255,255,.72)!important;}
.main-header .wh-account:hover svg,.main-header .wh-track:hover svg{stroke:rgba(255,255,255,.72)!important;}
.main-header .site-header-cart .amount,.main-header .cart-contents .amount,
.main-header .site-header-cart a,.main-header .cart-contents{color:#fff!important;}
.main-header .site-header-cart svg,.main-header .cart-contents svg{stroke:#fff!important;}
/* the cart button sat in a white pill designed for a white header */
.main-header .site-header-cart,.main-header .site-header-cart .cart-contents{background:transparent!important;border-color:rgba(255,255,255,.28)!important;}
/* the 2px green outline is invisible on dark green — Warehouse's search box is a plain white field */
.main-header .site-search .woocommerce-product-search{border-color:#fff!important;}
.top-bar,.topbar-wrapper{min-height:0!important;}
/* top bar order: promo TEXT left, SOCIAL right (just left of Subscribe) */
.top-bar .col-full{display:flex!important;align-items:center;}
.top-bar-center{order:1;margin-right:auto!important;text-align:left!important;flex:0 1 auto!important;}
.top-bar-left{order:2;flex:0 0 auto!important;margin:0!important;}
/* Subscribe & Save button (injected, far right) */
.wh-subscribe{order:3;display:inline-flex;align-items:center;gap:8px;margin-left:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff!important;font-family:"Barlow",sans-serif;font-weight:600;font-size:13px;line-height:1.4;padding:4px 14px;border-radius:3px;text-decoration:none;white-space:nowrap;}
.wh-subscribe:hover{background:#fff;color:var(--wh-accent)!important;border-color:#fff;}
.wh-subscribe svg{width:16px;height:16px;flex:0 0 16px;}
.main-header .site-header-cart{margin-left:0!important;}
@media(max-width:860px){.main-header .wh-account span,.main-header .wh-track span{display:none;}}
/* ===== (legacy) search band — no longer injected, kept harmless ===== */
.wh-searchbar-row{background:#fff;border-bottom:1px solid var(--wh-line);padding:16px 0;}
.wh-searchbar{display:flex;align-items:stretch;max-width:720px;margin:0 auto;padding:0;border:2px solid var(--wh-accent);border-radius:3px;overflow:hidden;background:#fff;height:46px;}
.wh-searchbar input[type=search]{flex:1 1 auto;border:0;outline:0;padding:0 18px;font-family:"Barlow",sans-serif;font-size:15px;color:var(--wh-ink);background:transparent;min-width:0;}
.wh-searchbar button{flex:0 0 auto;width:56px;border:0;background:var(--wh-accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.wh-searchbar button:hover{background:var(--wh-accent-d);}
.wh-searchbar button svg{width:20px;height:20px;}
@media(max-width:600px){.wh-searchbar{margin-left:16px;margin-right:16px;}}
/* ===== Homepage Warehouse modules ===== */
.wh-home-hero{min-height:420px!important;display:flex;align-items:center;justify-content:center;margin-top:0;position:relative;background:url("https://lushyard.com.au/wp-content/uploads/2026/07/lushyard-hero-clean.jpg") center/cover no-repeat!important;}
.wh-home-hero .wp-block-cover__background{opacity:.68!important;}
.wh-home-hero .wp-block-cover__inner-container{max-width:740px;padding:0 20px;}
.wh-home-hero h1{font-family:"Barlow",sans-serif;font-weight:700;font-size:44px;line-height:1.1;color:#fff!important;margin:0 0 14px;}
.wh-home-hero p{font-size:18px;color:rgba(255,255,255,.92)!important;margin:0 0 26px;}
.wh-home-hero .wh-hero-btn .wp-block-button__link{background:#fff;color:var(--wh-dark);font-family:"Barlow",sans-serif;font-weight:700;border-radius:2px;padding:15px 36px;}
.wh-home-hero .wh-hero-btn .wp-block-button__link:hover{background:#eafff3;}
.wh-sec-title{font-family:"Barlow",sans-serif;font-weight:700;color:var(--wh-dark);font-size:26px;margin:46px 0 22px;}
.wh-promos{gap:24px!important;margin:38px auto!important;}
.wh-promo-card{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:6px;padding:30px 32px;height:100%;}
.wh-promo-card h3{font-family:"Barlow",sans-serif;font-weight:700;color:var(--wh-dark);font-size:20px;margin:0 0 10px;}
.wh-promo-card p{color:var(--wh-muted);font-size:15px;line-height:1.6;margin:0;}
/* homepage product grids = 4-col rich cards like the shop */
body.home ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important;display:grid!important;float:none!important;width:auto!important;}
body.home ul.products li.product{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:4px;width:auto!important;margin:0!important;float:none!important;}
body.home ul.products li.product .woocommerce-loop-product__title,body.home ul.products li.product h2{font-family:"Barlow",sans-serif;font-weight:600;color:var(--wh-dark);font-size:15px;}
@media(max-width:1000px){body.home ul.products{grid-template-columns:repeat(2,1fr)!important;}.wh-promos{flex-direction:column;}}
/* ===== Warehouse trust bar (site-wide, above footer) ===== */
.wh-trust-bar{background:var(--wh-bg);border-top:1px solid var(--wh-line);}
.wh-trust-inner{max-width:1480px;margin:0 auto;padding:26px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.wh-trust-item{display:flex;gap:12px;align-items:flex-start;font-family:"Barlow",sans-serif;}
.wh-trust-item svg{flex:0 0 30px;width:30px;height:30px;stroke:var(--wh-accent);fill:none;stroke-width:1.6;}
.wh-trust-item b{display:block;color:var(--wh-dark);font-size:14px;font-weight:700;margin-bottom:2px;}
.wh-trust-item span{color:var(--wh-muted);font-size:12.5px;line-height:1.45;}
@media(max-width:900px){.wh-trust-inner{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media(max-width:520px){.wh-trust-inner{grid-template-columns:1fr;}}
/* ===== Homepage Warehouse polish ===== */
body.home,.home .site-content{font-family:"Barlow",-apple-system,sans-serif;}
.home .wc-block-grid__product-title,.home ul.products li.product h2,.home ul.products li.product .woocommerce-loop-product__title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-weight:600;font-size:15px;}
.home ul.products li.product .price,.home .wc-block-grid__product-price{color:var(--wh-dark)!important;font-weight:700;font-family:"Barlow",sans-serif;}
.home h2,.home .wp-block-heading{font-family:"Barlow",sans-serif;color:var(--wh-dark);font-weight:700;}
.wh-hero{position:relative;background:linear-gradient(120deg,#0e3d22,#0aa25a);color:#fff;border-radius:6px;padding:64px 48px;margin:8px 0 34px;overflow:hidden;}
.wh-hero h1{color:#fff;font-family:"Barlow",sans-serif;font-weight:700;font-size:40px;line-height:1.12;margin:0 0 14px;max-width:620px;}
.wh-hero p{color:rgba(255,255,255,.92);font-size:17px;max-width:540px;margin:0 0 24px;}
.wh-hero .wh-hero-btn{display:inline-block;background:#fff;color:var(--wh-dark);font-weight:700;font-family:"Barlow",sans-serif;line-height:48px;padding:0 34px;border-radius:2px;text-decoration:none;}
.wh-hero .wh-hero-btn:hover{background:#eafff3;}
/* section titles Warehouse style */
.home section.wc-block-grid > h2,.home .wp-block-woocommerce-featured-category{margin-bottom:14px;}
/* buttons on home */
.home .wp-block-button__link,.home .button{background:var(--wh-accent);border-radius:2px;font-family:"Barlow",sans-serif;font-weight:600;}

/* ============================================================
   HOMEPAGE — Warehouse clone (garden), section-for-section
   ============================================================ */
.wh-sec{max-width:1480px;margin:0 auto 46px;padding:0 24px;}
.wh-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 18px;}
.wh-sec-title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:24px;font-weight:700;margin:0;}
.wh-sec-link{color:var(--wh-accent);font-weight:600;font-size:14px;text-decoration:none;}
.wh-sec-link:hover{text-decoration:underline;}
/* buttons */
.wh-btn{display:inline-block;padding:0 30px;line-height:46px;border-radius:2px;font-family:"Barlow",sans-serif;font-weight:700;font-size:15px;text-decoration:none;text-align:center;cursor:pointer;border:0;}
.wh-btn--accent{background:var(--wh-accent);color:#fff!important;}
.wh-btn--accent:hover{background:#08894d;}
.wh-btn--white{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14);}
.wh-btn--white:hover{box-shadow:0 3px 8px rgba(0,0,0,.2);}
.wh-btn--ghost{background:#fff;color:var(--wh-dark)!important;}
/* hero — Warehouse's slideshow is FULL-BLEED (measured 1547 = viewport width, NOT the 1480 container)
   and 430 tall with square corners. Ours was boxed inside .content-area (1463) — that's the "太小".
   Break out with left:50%/translateX(-50%)/100vw, then clip the 100vw-vs-scrollbar overspill on
   .site-content with `overflow-x:clip`. NOT `hidden`: that makes it a scroll container and would kill
   the sticky buy-box and the sticky nav. */
.site-content{overflow-x:clip;}
.wh-hero{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;margin:0 0 44px;border-radius:0;overflow:hidden;background-size:cover;background-position:center;min-height:430px;display:flex;align-items:center;justify-content:center;}
.wh-hero__inner{text-align:center;padding:40px 20px;max-width:730px;}
.wh-hero__title{color:#fff!important;font-family:"Barlow",sans-serif;font-size:40px;font-weight:600;line-height:1.15;margin:0 0 14px;}
.wh-hero__sub{color:rgba(255,255,255,.93)!important;font-size:17px;line-height:1.55;margin:0 0 26px;}
.wh-hero__dots{display:flex;gap:9px;justify-content:center;margin-top:28px;}
.wh-hero__dots span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);display:inline-block;}
.wh-hero__dots span.is-active{background:#fff;}
/* 3 colour promo blocks */
.wh-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.wh-promo{position:relative;min-height:290px;padding:28px 30px;border-radius:3px;overflow:hidden;display:flex;}
.wh-promo__body{position:relative;z-index:2;max-width:80%;}
.wh-promo__title{color:#fff;font-family:"Barlow",sans-serif;font-size:22px;font-weight:700;margin:0 0 10px;}
.wh-promo__text{color:rgba(255,255,255,.94);font-size:14.5px;line-height:1.5;margin:0 0 20px;}
.wh-promo__icon{position:absolute;right:-8px;bottom:-8px;width:150px;height:150px;color:rgba(255,255,255,.26);z-index:1;}
.wh-promo__icon svg{width:100%;height:100%;}
.wh-promo--green{background:#0f7a43;}
.wh-promo--terra{background:#c2622f;}
.wh-promo--blue{background:#2b7fb0;}
.wh-promo--green .wh-btn--white{color:#0f7a43!important;}
.wh-promo--terra .wh-btn--white{color:#c2622f!important;}
.wh-promo--blue .wh-btn--white{color:#2b7fb0!important;}
/* 2 offer cards */
.wh-offers{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.wh-offer{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--wh-line);border-radius:4px;padding:26px 30px;}
.wh-offer__icon{flex:0 0 44px;width:44px;height:44px;color:var(--wh-accent);}
.wh-offer__icon svg{width:100%;height:100%;}
.wh-offer__title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:17px;font-weight:700;margin:0 0 6px;}
.wh-offer p{color:var(--wh-muted);font-size:14px;line-height:1.55;margin:0;}
/* mosaic dark cards */
.wh-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.wh-mosaic__card{position:relative;min-height:230px;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;background-image:linear-gradient(rgba(10,30,18,.58),rgba(10,30,18,.72)),var(--wh-mosaic-img);background-size:cover;background-position:center;transition:transform .25s ease;}
.wh-mosaic__card:hover{transform:translateY(-3px);}
.wh-mosaic__body{padding:26px 28px;}
.wh-mosaic__title{color:#fff;font-family:"Barlow",sans-serif;font-size:20px;font-weight:700;margin:0 0 8px;}
.wh-mosaic__text{color:rgba(255,255,255,.9);font-size:14px;line-height:1.5;margin:0 0 16px;}
/* about */
.wh-about{text-align:center;max-width:820px;}
.wh-about__title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:24px;font-weight:700;margin:0 0 16px;}
.wh-about__text{color:var(--wh-muted);font-size:16px;line-height:1.7;margin:0;}
/* newsletter */
.wh-newsletter{text-align:center;background:#fff;border:1px solid var(--wh-line);border-radius:4px;padding:44px 24px;}
.wh-newsletter__title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:24px;font-weight:700;margin:0 0 10px;}
.wh-newsletter__text{color:var(--wh-muted);font-size:15px;margin:0 0 24px;}
.wh-newsletter__form{display:flex;gap:12px;justify-content:center;max-width:520px;margin:0 auto;}
.wh-newsletter__form input{flex:1;min-width:0;height:46px;padding:0 16px;border:1px solid var(--wh-line);border-radius:2px;font-size:15px;background:#fff;}
.wh-newsletter__form input:focus{outline:none;border-color:var(--wh-accent);}
/* quick links */
.wh-quicklinks .wh-sec-title{margin:0 0 16px;}
.wh-quicklinks__row{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--wh-line);border-radius:4px;overflow:hidden;background:#fff;}
.wh-quicklink{padding:16px 12px;text-align:center;color:var(--wh-dark);font-weight:600;font-size:14px;text-decoration:none;border-right:1px solid var(--wh-line);}
.wh-quicklink:last-child{border-right:0;}
.wh-quicklink:hover{background:var(--wh-bg);color:var(--wh-accent);}
/* home product grids: constrain + match card look */
body.home .woocommerce > .woocommerce.columns-4,body.home .woocommerce.columns-4{max-width:1480px;margin:0 auto 46px;padding:0 24px;}
body.home ul.products{margin:0 auto;}
@media(max-width:900px){.wh-promos,.wh-mosaic{grid-template-columns:1fr;}.wh-offers{grid-template-columns:1fr;}.wh-quicklinks__row{grid-template-columns:repeat(2,1fr);}.wh-quicklink{border-bottom:1px solid var(--wh-line);}.wh-hero__title{font-size:30px;}}

/* ============================================================
   6-column product grid — homepage + shop/category archives
   (PDP "related" grid deliberately excluded)
   ============================================================ */
body.home .woocommerce ul.products,
.woocommerce.archive ul.products,.post-type-archive-product ul.products,.tax-product_cat ul.products,body.woocommerce-page.archive ul.products{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:22px!important;margin:0 auto 40px!important;width:auto!important;}
body.home .woocommerce ul.products li.product,
.woocommerce.archive ul.products li.product,.post-type-archive-product ul.products li.product,.tax-product_cat ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;}
@media(max-width:1280px){body.home .woocommerce ul.products,.woocommerce.archive ul.products,.tax-product_cat ul.products,.post-type-archive-product ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media(max-width:820px){body.home .woocommerce ul.products,.woocommerce.archive ul.products,.tax-product_cat ul.products,.post-type-archive-product ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:560px){body.home .woocommerce ul.products,.woocommerce.archive ul.products,.tax-product_cat ul.products,.post-type-archive-product ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
/* (card title size/colour is set once in the "unified product card" block at the end of this file) */

/* shop/category 6-col: beat Shoptimizer's own .columns-6 grid rule with higher specificity */
html body.woocommerce.archive ul.products.columns-6,
html body.tax-product_cat ul.products.columns-6,
html body.woocommerce-shop ul.products.columns-6{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:22px!important;}
@media(max-width:1280px){html body.woocommerce.archive ul.products.columns-6,html body.tax-product_cat ul.products.columns-6,html body.woocommerce-shop ul.products.columns-6{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media(max-width:820px){html body.woocommerce.archive ul.products.columns-6,html body.tax-product_cat ul.products.columns-6,html body.woocommerce-shop ul.products.columns-6{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:560px){html body.woocommerce.archive ul.products.columns-6,html body.tax-product_cat ul.products.columns-6,html body.woocommerce-shop ul.products.columns-6{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}

/* ============================================================
   PDP module widths + afterpay stability + Recently viewed
   ============================================================ */
/* The element my restructure JS moves is .related-wrapper (28px padding, 1366px) — NOT .related.products.
   Align it to the same 1480 track as .wh-row so related/recently-viewed line up with the gallery. */
.single-product .related-wrapper{max-width:1480px!important;width:auto!important;margin:26px auto 0!important;padding:0!important;background:transparent!important;border:0!important;}
.single-product .related-wrapper > .related.products{max-width:none!important;width:auto!important;margin:0!important;}

/* Afterpay / Klarna (Stripe Payment Method Messaging, .fkwcs_paylater_messaging).
   Its iframe mounts at 9px then grows once Stripe loads, which shoved everything below it.
   Reserve a fixed slot so it is ALWAYS visible and can never reflow the buy box.
   Warehouse styles its installment block on --payment-terms-background-color:#f3f5f6. */
.wh-right .summary .fkwcs_paylater_messaging{order:3!important;box-sizing:border-box;min-height:58px;display:flex;align-items:center;width:100%;margin:12px 0 4px;padding:8px 12px;background:var(--wh-bg);border:1px solid var(--wh-line);border-radius:3px;overflow:hidden;contain:layout;}
.wh-right .summary .fkwcs_paylater_messaging .__PrivateStripeElement,.wh-right .summary .fkwcs_paylater_messaging iframe{width:100%!important;min-height:38px;}

/* Recently viewed (Warehouse has a full-width "Recently viewed" section under the recommendations) */
.wh-recently-viewed{max-width:1480px;margin:26px auto 0;padding:24px 24px 32px;background:var(--wh-card);border:1px solid var(--wh-line);border-radius:3px;box-shadow:0 1px 2px rgba(30,45,42,.05);}
.wh-recently-viewed h2{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:22px;font-weight:700;margin:0 0 16px;text-align:left;}
.wh-rv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;}
.wh-rv-card{display:block;text-decoration:none;color:inherit;}
.wh-rv-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid var(--wh-line);border-radius:3px;}
.wh-rv-title{display:block;margin:10px 0 4px;font-family:"Barlow",sans-serif;font-size:13px;line-height:1.4;color:var(--wh-ink);}
.wh-rv-card:hover .wh-rv-title{color:var(--wh-accent);}
.wh-rv-price{font-family:"Barlow",sans-serif;font-size:14px;font-weight:700;color:var(--wh-dark);}
@media(max-width:1280px){.wh-rv-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:820px){.wh-rv-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:560px){.wh-rv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Shoptimizer pins .related-wrapper to its 1366px container width (+14px radius, 28px pad) with
   !important; out-specify it so related/recently-viewed align to the same 1480 track as .wh-row. */
html body.single-product div.product > .related-wrapper{max-width:1480px!important;width:auto!important;margin:26px auto 0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
/* fkwcs sets min-height:36px on the messaging box; reserve the settled height so the Stripe iframe
   growing from 9px -> ~48px can never push the buy box around (zero CLS, always visible). */
html body .wh-right .summary .fkwcs_paylater_messaging{min-height:56px!important;}

/* Breadcrumb must sit on the PAGE background (Warehouse: transparent over #f3f5f6),
   but Shoptimizer paints the PDP .col-full white — clear it and normalise the page bg. */
html body.single-product .site-content{background:var(--wh-bg)!important;}
html body.single-product .site-content .col-full{background:transparent!important;}
html body.single-product{background:var(--wh-bg)!important;}

/* Afterpay/Klarna: was order:3, i.e. ABOVE the cart form that holds the variation swatches, so its
   "See plans" popup / height changes disturbed variation selection. Park it at the bottom of the
   buy box (after cart=4 and CommerceKit inventory=5) where it can't affect the selectors. */
html body .wh-right .summary .fkwcs_paylater_messaging{order:6!important;margin:16px 0 0!important;}

/* Selecting a variation used to shove the Add-to-cart button down ~97px: WooCommerce reveals
   .single_variation (a duplicate price + availability) inside the cart form. The "Price:" line now
   live-updates from found_variation, so hide the duplicate price and reserve the block's height
   -> choosing a variation no longer repositions the swatches or the buttons. */
.wh-right .summary .woocommerce-variation-price{display:none!important;}
.wh-right .summary .woocommerce-variation.single_variation{min-height:0!important;}
.wh-right .summary .woocommerce-variation-availability{display:none!important;}
.wh-right .summary .woocommerce-variation-availability{margin:0;}
.wh-right .summary .woocommerce-variation-availability p.stock{margin:0;font-size:14px;}

/* ---- Afterpay/Klarna slot directly under the Price line (fixed height => zero movement) ---- */
.wh-right .summary > .wh-ap-slot{order:2!important;display:block;width:100%;min-height:70px;margin:8px 0 6px;}
.wh-right .summary .wh-ap-slot > .fkwcs_paylater_messaging{order:0!important;margin:0!important;width:100%;min-height:62px!important;box-sizing:border-box;align-items:center;padding:11px 12px;background:var(--wh-bg);border:1px solid var(--wh-line);border-radius:3px;overflow:hidden;contain:layout;}
.wh-right .summary .wh-ap-slot > .fkwcs_paylater_messaging iframe,.wh-right .summary .wh-ap-slot > .fkwcs_paylater_messaging .__PrivateStripeElement{width:100%!important;min-height:40px;}

/* Duplicate star rating at the bottom of the buy box: Shoptimizer/CommerceKit still print
   woocommerce_template_single_rating at their own priority (our remove_action(...,10) misses it),
   so a 2nd .woocommerce-product-rating lands at order:50. Keep only the copy we placed inside
   .wh-rating-row (that one is a DESCENDANT, so the direct-child selector won't touch it). */
.wh-right .summary > .woocommerce-product-rating{display:none!important;}

/* CommerceKit "This item is selling fast! / Only N items left in stock" bar under the buttons */
.wh-right .summary .commercekit-inventory{display:none!important;}

/* placeholder shown in the reserved afterpay slot until a variation is picked (no blank gap) */
.wh-right .summary > .wh-ap-slot{position:relative;}
.wh-right .summary > .wh-ap-slot.wh-ap-empty::before{content:"Select an option to see Afterpay & Klarna payment plans";position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;padding:0 13px;background:var(--wh-bg);border:1px solid var(--wh-line);border-radius:3px;color:var(--wh-muted);font-family:"Barlow",sans-serif;font-size:13px;line-height:1.4;}
/* stock placeholder hint ("Stock: Select an option") */
.wh-right .summary .stock .wh-stock-hint{color:var(--wh-muted);font-weight:400;font-size:14px;}

/* Active product tab drew TWO green underlines: the <a>'s border-bottom (2px) plus an absolutely
   positioned a::after (3px, bottom:5px). Keep the border-bottom, drop the pseudo-element. */
.woocommerce-tabs ul.tabs li a::after,.woocommerce-tabs ul.tabs li.active a::after{content:none!important;display:none!important;}

/* "You may also like" heading: match "Recently viewed" exactly (Barlow, --wh-dark, 22px/700, left).
   The theme renders it centered, Inter, 25.6px, #444 with a stray padding-top:48px, and gives the
   card no side padding so the heading hugged the card edge (214px vs 238px). */
html body.single-product .related-wrapper .related.products{padding:24px 24px 32px!important;}
html body.single-product .related-wrapper .related.products > h2{color:var(--wh-dark)!important;font-family:"Barlow",sans-serif!important;font-size:22px!important;font-weight:700!important;text-align:left!important;margin:0 0 16px!important;padding:0!important;}

/* Payment methods: single strip (same asset as the yanxuan footer), hosted in the child theme */
.wh-payment-security .wh-pay-icons{display:block;margin:6px 0 14px;}
.wh-payment-security .wh-pay-strip{display:block;width:100%;max-width:500px;height:auto;border-radius:2px;}

/* ===== Mobile: gallery must be followed by the BUY BOX, not the description =====
   .wh-left stacks gallery+tabs+trust, so collapsing the 2-col grid put description before the
   buy box. display:contents dissolves the two column wrappers so their children become direct
   flex items of .wh-row and can be ordered: gallery > summary > description > trust cards. */
@media(max-width:990px){
  .wh-row{display:flex!important;flex-direction:column;gap:20px;}
  .wh-left,.wh-right{display:contents!important;}
  .wh-left > .images{order:1;}
  .wh-right > .summary{order:2;}
  .wh-left > .woocommerce-tabs{order:3;}
  .wh-left > .wh-card{order:4;}
}

/* Sticky buy box slid under the fixed 32px WP admin bar, clipping the product title.
   (Visitors have no admin bar, so keep the base 16px offset for them.) */
body.admin-bar .wh-right{top:78px!important;}

/* No-reviews state: fill the left half of the rating row instead of leaving it blank */
.wh-right .summary .wh-no-reviews{display:flex;align-items:center;}
.wh-right .summary .wh-no-reviews .wh-write-review{font-family:"Barlow",sans-serif;font-size:13px;color:var(--wh-muted);text-decoration:none;}
.wh-right .summary .wh-no-reviews .wh-write-review:hover{color:var(--wh-accent);text-decoration:underline;}

/* "You may also like" — infinite auto-scrolling loop (CSS keyframe on a duplicated track).
   Uniform margin-right (not gap) so translating exactly -50% seams perfectly. */
.wh-marquee{overflow:hidden;position:relative;}
.wh-marquee ul.products.wh-marquee-track{display:flex!important;grid-template-columns:none!important;width:max-content!important;gap:0!important;margin:0!important;padding:0!important;list-style:none;animation-name:wh-marquee;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform;}
.wh-marquee ul.products.wh-marquee-track > li.product{flex:0 0 230px;width:230px!important;margin:0 22px 0 0!important;}
.wh-marquee:hover ul.products.wh-marquee-track,.wh-marquee:focus-within ul.products.wh-marquee-track{animation-play-state:paused;}
@keyframes wh-marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(calc(var(--wh-shift, 50%) * -1),0,0);}}
@media(prefers-reduced-motion:reduce){.wh-marquee ul.products.wh-marquee-track{animation:none;}.wh-marquee{overflow-x:auto;}}

/* The marquee track ties on specificity with a later `ul.products{width:100%!important}` rule, so it
   was clamped to the container width (no overflow to scroll) and had no animation-duration.
   Out-specify with html body + set a default duration (JS overrides it per item count). */
html body.single-product .wh-marquee ul.products.wh-marquee-track{width:max-content!important;max-width:none!important;gap:0!important;column-gap:0!important;animation-duration:42s;}

/* ===== Sticky offset: scrolling UP pins .col-full-nav at top:0 (height 62, z-index 10).
   top:48px still slid the card/title under it. 62 + 16px breathing room = 78. ===== */
html body .wh-right{top:78px!important;}

/* ===== Buy box: tighten the vertical rhythm (was 751px; Warehouse's info card is far denser) ===== */
html body .wh-right > .summary{padding:20px 24px 22px!important;}
html body .wh-right .summary .product_title{font-size:22px!important;line-height:1.28!important;margin:0 0 6px!important;}
html body .wh-right .summary .wh-meta-line{margin:0 0 6px!important;}
html body .wh-right .summary > .wh-rating-row{margin:2px 0 10px!important;padding:0 0 10px!important;}
html body .wh-right .summary .wh-share a{width:30px;height:30px;}
html body .wh-right .summary .wh-price{margin:2px 0!important;}
html body .wh-right .summary > .wh-ap-slot{min-height:58px!important;margin:6px 0 4px!important;}
html body .wh-right .summary .wh-ap-slot > .fkwcs_paylater_messaging{min-height:52px!important;padding:8px 12px!important;}
html body .wh-right .summary .wh-ap-slot.wh-ap-empty::before{font-size:12.5px;}
html body .wh-right .summary p.stock,html body .wh-right .summary > .stock{padding-top:8px!important;margin:0!important;}
html body .wh-right .summary form.cart{margin:10px 0 0!important;}
/* attribute rows: the swatch cell reserved 97px for a 44px swatch */
html body .wh-right .summary table.variations{margin:0!important;}
html body .wh-right .summary table.variations th.label{padding:0!important;}
html body .wh-right .summary table.variations td.value{padding:2px 0 8px!important;}
html body .wh-right .summary .cgkit-swatch{margin:0 8px 6px 0!important;}
html body .wh-right .summary .reset_variations{margin:0!important;}
/* delivery pill, quantity, buttons */
html body .wh-right .summary .a2w-delivery-time-container{margin:2px 0 10px!important;}
html body .wh-right .summary .quantity{margin:0 0 10px!important;}
html body .wh-right .summary .single_add_to_cart_button,
html body .wh-right .summary .wh-buy-now{height:50px!important;line-height:50px!important;padding:0 24px!important;min-height:0!important;}

/* ===== Shop / category: restore the left filter column, Warehouse-style =====
   My global `#primary,.content-area{width:100%!important;float:none!important}` (needed for the 1480
   container) killed the float the theme's left sidebar relies on, so .secondary-wrapper fell BELOW
   the products. Warehouse (measured on /collections/headphones): the filter card's top is level with
   the banner image's top — i.e. a 2-column grid from the very top:
       [ filter ] | [ banner / header / toolbar / products ]
   so lay the archive out explicitly instead of relying on floats. */
body.wh-shop-archive .shoptimizer-archive > .col-full{display:grid;grid-template-columns:288px minmax(0,1fr);column-gap:30px;align-items:start;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .secondary-wrapper{grid-column:1;grid-row:1 / span 4;width:auto!important;max-width:none!important;margin:0!important;float:none!important;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner{grid-column:2;grid-row:1;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-head{grid-column:2;grid-row:2;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-toolbar{grid-column:2;grid-row:3;max-width:none!important;margin:0 0 18px!important;padding:0 0 14px!important;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .content-area{grid-column:2;grid-row:4;width:auto!important;max-width:none!important;margin:0!important;float:none!important;}
body.wh-shop-archive .secondary-wrapper .widget-area{float:none!important;width:auto!important;}
/* the sidebar now takes 318px, so tighten the 6-col product gap a little */
html body.woocommerce.archive ul.products.columns-6,html body.tax-product_cat ul.products.columns-6,html body.woocommerce-shop ul.products.columns-6{gap:16px!important;}
@media(max-width:990px){
  body.wh-shop-archive .shoptimizer-archive > .col-full{grid-template-columns:1fr;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner,
  body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-head,
  body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-toolbar{grid-column:1;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .secondary-wrapper{grid-column:1;grid-row:4;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .content-area{grid-column:1;grid-row:5;}
}

/* Gallery: .cg-main-swiper lands on a HALF-pixel x (left 309.5) because the centered container sits
   on a .5 offset. The next slide starts exactly at its right edge, so a 1px antialiased seam of the
   following image bleeds through `overflow:hidden`. Clip 1px off the right edge. */
.single-product .wh-left .images .cg-main-swiper{clip-path:inset(0 1px 0 0);}

/* `margin:0 auto` on a grid item disables `justify-self:stretch`, so the banner/head shrank to
   fit-content (378px) instead of filling column 2, and the banner's top margin pushed it 24px
   below the filter. Kill the auto side-margins + the top margin so filter top == banner top. */
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner,
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-head{max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner{margin-top:0!important;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .secondary-wrapper{margin-top:0!important;}

/* ===== Cart: white card ended above its content ("背景错位") =====
   .shoptimizer-cart-wrapper holds two FLOATED children (form.woocommerce-cart-form float:left and
   .cart-collaterals float:right) but has no clearfix and no BFC (::after content:none, overflow:visible),
   so it collapses to height 0. The white card is .entry-content, which then ends at 161px while the
   floats run on to 1227px. flow-root contains the floats without changing their positions. */
body.woocommerce-cart .shoptimizer-cart-wrapper{display:flow-root;}

/* ============================================================
   Archive = Warehouse /collections/speakers
   breadcrumb (full width) / [Collections + Filters] | [banner, then ONE card: title+toolbar+grid]
   ============================================================ */
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-crumbs{grid-column:1/-1;grid-row:1;margin:0 0 14px;}
body.wh-shop-archive .wh-shop-crumbs .woocommerce-breadcrumb{font-family:"Barlow",sans-serif;font-size:14px;color:var(--wh-muted);margin:0;}
body.wh-shop-archive .wh-shop-crumbs .woocommerce-breadcrumb a{color:var(--wh-muted);}
body.wh-shop-archive .wh-shop-crumbs .woocommerce-breadcrumb a:hover{color:var(--wh-accent);}
/* rows shift now that head/toolbar left .col-full */
body.wh-shop-archive .shoptimizer-archive > .col-full > .secondary-wrapper{grid-column:1;grid-row:2 / span 2;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner{grid-column:2;grid-row:2;}
body.wh-shop-archive .shoptimizer-archive > .col-full > .content-area{grid-column:2;grid-row:3;}

/* right column = ONE white card (Warehouse: 1082px, 1px #e1e3e4) holding title + toolbar + grid */
body.wh-shop-archive .content-area{background:var(--wh-card)!important;border:1px solid var(--wh-line);border-radius:3px;overflow:hidden;}
body.wh-shop-archive .wh-shop-title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:29px;font-weight:500;line-height:1.2;margin:0;padding:22px 30px 0;}
body.wh-shop-archive .wh-shop-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:none!important;width:auto!important;min-height:58px;margin:12px 0 0!important;padding:0 30px!important;border:0!important;box-shadow:inset 0 -1px 0 var(--wh-line);}

/* 4 columns of butting cells with hairline separators (Warehouse), not free-floating cards */
html body.woocommerce.archive ul.products.columns-6,
html body.tax-product_cat ul.products.columns-6,
html body.woocommerce-shop ul.products.columns-6{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:0!important;}
body.wh-shop-archive ul.products li.product{background:var(--wh-card)!important;border:0!important;border-radius:0!important;margin:0!important;padding:20px!important;box-shadow:inset -1px 0 0 0 var(--wh-line),inset 0 -1px 0 0 var(--wh-line)!important;}

/* sidebar "Collections" category tree */
body.wh-shop-archive .widget-area .wh-collections{background:var(--wh-card);border:1px solid var(--wh-line);border-radius:3px;padding:20px 22px;margin:0 0 20px;}
body.wh-shop-archive .wh-collections .widget-title{color:var(--wh-dark);font-family:"Barlow",sans-serif;font-size:21px;font-weight:600;margin:0 0 10px;}
.wh-cat-list{list-style:none;margin:0;padding:0;}
.wh-cat-children{list-style:none;margin:0 0 4px;padding-left:14px;display:none;}
.wh-cat-item.is-open > .wh-cat-children{display:block;}
.wh-cat-row{display:flex;align-items:center;gap:6px;padding:5px 0;font-family:"Barlow",sans-serif;font-size:14px;line-height:1.4;}
.wh-cat-row a{color:var(--wh-ink);text-decoration:none;}
.wh-cat-row a:hover{color:var(--wh-accent);}
.wh-cat-count{color:var(--wh-muted);font-size:13px;}
.wh-cat-item.is-active > .wh-cat-row a,.wh-cat-item.is-active > .wh-cat-row .wh-cat-count{color:var(--wh-accent);font-weight:600;}
.wh-cat-toggle{margin-left:auto;background:none;border:0;padding:2px;cursor:pointer;color:var(--wh-muted);display:flex;align-items:center;}
.wh-cat-toggle svg{width:14px;height:14px;transition:transform .18s ease;}
.wh-cat-item.is-open > .wh-cat-row .wh-cat-toggle svg{transform:rotate(180deg);}

@media(max-width:990px){
  body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-crumbs{grid-column:1;grid-row:1;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .wh-shop-banner{grid-column:1;grid-row:2;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .secondary-wrapper{grid-column:1;grid-row:3;}
  body.wh-shop-archive .shoptimizer-archive > .col-full > .content-area{grid-column:1;grid-row:4;}
}

/* we render our own .wh-shop-title inside the products card — hide the theme's duplicate */
body.wh-shop-archive .woocommerce-products-header{display:none!important;}
/* Shoptimizer prints h1.woocommerce-products-header__title as a DIRECT child of .site-main,
   outside the <header class="woocommerce-products-header"> we already hid — kill it too. */
body.wh-shop-archive h1.woocommerce-products-header__title{display:none!important;}
/* keep the toolbar labels on one line */
body.wh-shop-archive .wh-shop-toolbar label{white-space:nowrap;}

/* ===== "Estimate shipping" card — measured off Warehouse's shipping block =====
   heading 22px/500 | three fields on ONE row (222/222/155, 12px gap), 48px tall, 1px #d4d6d8,
   radius 2px, labels 16px/600 | Estimate button on its own row, left-aligned (123x48). */
.wh-card.wh-ship-est h2{font-size:22px!important;font-weight:700!important;color:var(--wh-dark)!important;margin:0 0 16px!important;}
.wh-ship-est .wh-ship-fields{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.wh-ship-est .wh-ship-field{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:6px;margin:0;}
.wh-ship-est .wh-ship-field--zip{flex:0 1 155px;}
.wh-ship-est .wh-ship-field label{font-family:"Barlow",sans-serif;font-size:16px;font-weight:600;color:var(--wh-dark);}
.wh-ship-est select,.wh-ship-est input[type=text]{height:48px;padding:0 12px;border:1px solid #d4d6d8;border-radius:2px;background:#fff;font-family:"Barlow",sans-serif;font-size:15px;color:var(--wh-ink);width:100%;box-sizing:border-box;}
.wh-ship-est select:focus,.wh-ship-est input[type=text]:focus{outline:none;border-color:var(--wh-accent);}
.wh-ship-est .wh-ship-go{display:inline-block;height:48px;line-height:48px;padding:0 24px;margin:14px 0 0;border-radius:2px;font-size:16px;}
.wh-ship-est .wh-ship-result{margin-top:18px;font-family:"Barlow",sans-serif;font-size:15px;color:var(--wh-ink);}
.wh-ship-est .wh-ship-result.is-loading,.wh-ship-est .wh-ship-result.is-error{color:var(--wh-muted);font-size:14px;}
.wh-ship-est .wh-ship-note{margin:0 0 8px;color:var(--wh-muted);font-size:13px;}
.wh-ship-est .wh-ship-rates{list-style:none;margin:0;padding:0;border-top:1px solid var(--wh-line);}
.wh-ship-est .wh-ship-rates li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--wh-line);}
.wh-ship-est .wh-ship-rates b{color:var(--wh-dark);font-weight:700;}
/* per-variation breakdown: only rendered when the variations do NOT all ship for the same price */
.wh-ship-est .wh-ship-table{width:100%;border-collapse:collapse;margin:0;}
.wh-ship-est .wh-ship-table th,.wh-ship-est .wh-ship-table td{text-align:left;padding:11px 0;border-bottom:1px solid var(--wh-line);font-size:14px;vertical-align:top;}
.wh-ship-est .wh-ship-table thead th{border-top:1px solid var(--wh-line);color:var(--wh-muted);font-weight:600;font-size:13px;}
.wh-ship-est .wh-ship-table th:last-child,.wh-ship-est .wh-ship-table td:last-child{text-align:right;white-space:nowrap;}
.wh-ship-est .wh-ship-table td:last-child{color:var(--wh-dark);font-weight:700;}
.wh-ship-est .wh-ship-table .wh-ship-method{display:block;color:var(--wh-muted);font-weight:400;font-size:12px;}
@media(max-width:640px){.wh-ship-est .wh-ship-field,.wh-ship-est .wh-ship-field--zip{flex:1 1 100%;}}
/* product images whose files 404 -> neutral placeholder instead of sprawling alt text */
img.wh-img-missing{object-fit:contain;background:#f5f6f7;}

/* ===== Site-wide fix: WooCommerce wrappers hold FLOATED children but have no clearfix/BFC =====
   (`::after` content:none, overflow:visible) so they collapse to ~0 and the white .entry-content
   card ends above its own content — the "背景错位" seen on cart, my-account and checkout.
   `flow-root` establishes a BFC that contains the floats WITHOUT moving them (unlike overflow:hidden,
   which would clip dropdowns/tooltips).
     cart      -> .shoptimizer-cart-wrapper  (form.woocommerce-cart-form + .cart-collaterals)
     my-account-> div.woocommerce (nav + content) and, logged out, .u-columns/.col2-set (col-1/col-2)
     checkout  -> form.checkout (#customer_details + #order_review) */
body.woocommerce-page .entry-content,
body.woocommerce-page div.woocommerce,
.woocommerce .col2-set,
.woocommerce .u-columns,
.woocommerce form.checkout,
.woocommerce-MyAccount-content,
.shoptimizer-cart-wrapper{display:flow-root;}

/* ===== "Our collections" carousel (Warehouse: item 238 wide w/ 14px side padding -> 210px circle,
   grey disc, centred label under it, round overlay arrows, horizontal scroll) ===== */
.wh-collections{margin-top:8px;}
.wh-coll-viewport{position:relative;}
.wh-coll-track{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;-ms-overflow-style:none;scrollbar-width:none;}
.wh-coll-track::-webkit-scrollbar{display:none;}
.wh-coll-item{flex:0 0 238px;padding:0 14px;scroll-snap-align:start;}
.wh-coll-item a{display:block;text-decoration:none;text-align:center;}
.wh-coll-circle{display:block;width:210px;height:210px;border-radius:50%;overflow:hidden;background:#e8eaec;}
.wh-coll-circle img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;}
.wh-coll-item a:hover .wh-coll-circle img{transform:scale(1.05);}
.wh-coll-name{display:block;margin-top:14px;font-family:"Barlow",sans-serif;font-size:16px;font-weight:600;color:var(--wh-dark);line-height:1.3;}
.wh-coll-item a:hover .wh-coll-name{color:var(--wh-accent);}
.wh-coll-arrow{position:absolute;top:105px;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--wh-dark);box-shadow:0 2px 10px rgba(30,45,42,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.wh-coll-arrow svg{width:20px;height:20px;}
.wh-coll-arrow[hidden]{display:none;}
.wh-coll-arrow--prev{left:-6px;}
.wh-coll-arrow--prev svg{transform:rotate(180deg);}
.wh-coll-arrow--next{right:-6px;}
.wh-coll-arrow:hover{background:var(--wh-accent);color:#fff;}
@media(max-width:700px){.wh-coll-item{flex:0 0 168px;padding:0 10px;}.wh-coll-circle{width:148px;height:148px;}.wh-coll-arrow{top:74px;}}

/* ===== Unified product card: one title font, one price treatment, Save chip after the price =====
   Everything below is the "You may also like" card look (Barlow 600, #15171a), applied to the shop
   grid, category grids, home grids, the related carousel and Recently viewed. These win by being last
   in the file; the !important entries exist only to beat the theme's own !important loop rules. */
/* 13.5px is the MEASURED "You may also like" size. It comes from a Customizer rule with FOUR classes
   (.woocommerce ul.products li.product .woocommerce-loop-product__title), which a 3-class selector
   loses to even with !important — so match that specificity and win on source order. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
.wc-block-grid__product-title,
.wh-rv-title{font-family:"Barlow",sans-serif!important;font-size:13.5px!important;font-weight:600!important;line-height:1.45!important;color:#15171a!important;}

/* Prices: current price red, was-price grey + struck. Covers CommerceKit's .cgkit-as-variation-price,
   which is what actually renders the price inside a card (not .price). */
ul.products li.product .price,
ul.products li.product .cgkit-as-variation-price,
.related.products ul.products li.product .price,
.home ul.products li.product .price,
.wc-block-grid__product-price,
.wh-rv-price{font-family:"Barlow",sans-serif!important;font-size:15px!important;font-weight:700!important;color:var(--wh-sale)!important;}

ul.products li.product .price ins,ul.products li.product .price ins .amount,ul.products li.product .price ins bdi,
ul.products li.product .cgkit-as-variation-price ins,ul.products li.product .cgkit-as-variation-price ins .amount,
ul.products li.product .price > .amount,ul.products li.product .price > .amount bdi,
ul.products li.product .cgkit-as-variation-price > .amount{color:var(--wh-sale)!important;text-decoration:none!important;font-weight:700!important;}

ul.products li.product .price del,ul.products li.product .price del .amount,ul.products li.product .price del bdi,
ul.products li.product .cgkit-as-variation-price del,ul.products li.product .cgkit-as-variation-price del .amount{color:#9ba1a5!important;font-weight:400!important;font-size:13px!important;text-decoration:line-through!important;}

/* Price + Save chip live in ONE non-wrapping flex row (PHP emits .wh-price-row), so they can never
   fall onto separate lines however narrow the card gets. The card header is a container so the row
   can scale its own type down when the card — not the viewport — is tight. */
ul.products li.product .woocommerce-card__header,.wh-rv-card{container-type:inline-size;}

.wh-price-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;margin:0;}
.wh-price-row > .price,
.wh-price-row > .cgkit-as-variation-price,
.wh-price-row > .wh-rv-price{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0!important;}
.wh-save-chip{flex:0 0 auto;display:inline-block;background:var(--wh-sale);color:#fff;font-family:"Barlow",sans-serif;font-size:12px;font-weight:700;line-height:1.5;padding:1px 7px;border-radius:3px;white-space:nowrap;}

/* "可以稍微缩放一点字体如果放不开" — shrink against the CARD's width, not the viewport.
   These must out-specify the unified `ul.products li.product .price{font-size:15px!important}` rule
   above (3 classes); a bare `.wh-price-row > .price` (2 classes) loses even with !important. */
@container (max-width: 235px){
  ul.products li.product .wh-price-row > .price,ul.products li.product .wh-price-row > .cgkit-as-variation-price,
  ul.products li.product .wh-price-row .amount,.wh-price-row > .wh-rv-price,.wh-rv-price-row .wh-rv-price{font-size:14px!important;}
  .wh-save-chip{font-size:11px;padding:1px 6px;}
  .wh-price-row{gap:6px;}
}
@container (max-width: 205px){
  ul.products li.product .wh-price-row > .price,ul.products li.product .wh-price-row > .cgkit-as-variation-price,
  ul.products li.product .wh-price-row .amount,.wh-price-row > .wh-rv-price,.wh-rv-price-row .wh-rv-price{font-size:13px!important;}
  ul.products li.product .wh-price-row del,ul.products li.product .wh-price-row del .amount{font-size:11px!important;}
  .wh-save-chip{font-size:10px;padding:1px 5px;}
  .wh-price-row{gap:5px;}
}
@container (max-width: 175px){
  ul.products li.product .wh-price-row > .price,ul.products li.product .wh-price-row > .cgkit-as-variation-price,
  ul.products li.product .wh-price-row .amount,.wh-price-row > .wh-rv-price,.wh-rv-price-row .wh-rv-price{font-size:12px!important;}
  ul.products li.product .wh-price-row del,ul.products li.product .wh-price-row del .amount{font-size:10px!important;}
  .wh-save-chip{font-size:9px;padding:0 4px;}
}
/* Recently viewed uses the same row */
.wh-rv-price-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}

/* After a variation is picked, JS swaps in variation.price_html, which wraps the price in <span class="price">.
   That drags in the Customizer's `.single-product .summary .price ins{color:#111!important}` — identical
   specificity to ours (3 classes) and later in the cascade, so it won and the chosen price rendered black.
   `html body` adds two type selectors, which breaks the tie in our favour without another !important war. */
html body .wh-right .summary .wh-price ins,
html body .wh-right .summary .wh-price ins .amount,
html body .wh-right .summary .wh-price ins bdi,
html body .wh-right .summary .wh-price .price ins,
html body .wh-right .summary .wh-price .price ins .amount,
html body .wh-right .summary .wh-price .price ins bdi,
html body .wh-right .summary .wh-price > .amount,
html body .wh-right .summary .wh-price > .amount bdi{color:var(--wh-sale)!important;text-decoration:none!important;font-weight:700!important;font-size:24px!important;}

html body .wh-right .summary .wh-price del,
html body .wh-right .summary .wh-price del .amount,
html body .wh-right .summary .wh-price del bdi,
html body .wh-right .summary .wh-price .price del,
html body .wh-right .summary .wh-price .price del .amount,
html body .wh-right .summary .wh-price .price del bdi{color:#9ba1a5!important;font-weight:400!important;font-size:16px!important;text-decoration:line-through!important;}

/* the injected wrapper must not re-introduce its own font-size/colour */
html body .wh-right .summary .wh-price .price{color:var(--wh-sale)!important;font-size:24px!important;font-weight:700!important;}