/* ==========================================================================
   GPDStore — Phase 4: category archive + cart page dark reskin
   --------------------------------------------------------------------------
   Overlay (handle: gpd-archive) loaded after category.css / cart.css.
   Category cards take the design's .gs-pcard treatment; the cart page takes
   the dark panel language (items as dark cards, teal info strip, lime
   conversion moments). Geometry/layout from the droix sheets is preserved.
   Design sources: …handoff/project/theme.css (.gs-pcard / .gs-catgrid /
   .gs-pager / .gs-fchip), cart.jsx side-cart/checkout language for totals.
   ========================================================================== */

/* ── archive canvas (gpd-theme §9 already darkens headers; cards here) ───── */

body.tax-product_cat #content.site-content,
body.tax-product_tag #content.site-content,
body.post-type-archive-product #content.site-content {
    background: var(--bg-2);
    color: var(--fg-1);
}

/* product cards → .gs-pcard */
body.tax-product_cat li.product,
body.tax-product_tag li.product,
body.post-type-archive-product li.product,
body.single-product .cross-sells li.product {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease);
}
body.tax-product_cat li.product:hover,
body.tax-product_tag li.product:hover,
body.post-type-archive-product li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.18);
}

/* image well */
body.tax-product_cat li.product .woocommerce-image__wrapper,
body.tax-product_tag li.product .woocommerce-image__wrapper,
body.post-type-archive-product li.product .woocommerce-image__wrapper {
    background:
        radial-gradient(120% 120% at 50% 18%, rgba(35, 221, 190, 0.10), transparent 55%),
        linear-gradient(180deg, #10161a, #0b0f12);
}

/* title / brand / price */
body.tax-product_cat li.product .woocommerce-loop-product__title,
body.tax-product_tag li.product .woocommerce-loop-product__title,
body.post-type-archive-product li.product .woocommerce-loop-product__title,
body.tax-product_cat li.product .woocommerce-loop-product__title a,
body.tax-product_tag li.product .woocommerce-loop-product__title a,
body.post-type-archive-product li.product .woocommerce-loop-product__title a {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.4px;
}
li.product .gpd-card-price-starting-at,
li.product .gpd-card-price-values,
li.product .price,
li.product .price .woocommerce-Price-amount {
    color: var(--lime-500);
    font-weight: 800;
}
li.product .gpd-card-price-prefix { color: var(--fg-secondary); font-weight: 500; }
li.product .price del,
li.product .price del .woocommerce-Price-amount,
li.product .gpd-card-price-del { color: var(--fg-tertiary); font-weight: 400; }

/* add-to-cart / select-options button → .gs-atc (quiet glass, lime hover) */
li.product .button,
li.product .add_to_cart_button,
li.product .product_type_variable {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    font-weight: 700;
    border-radius: var(--r-md);
    border: 0;
    transition: background var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}
li.product .button:hover,
li.product .add_to_cart_button:hover,
li.product .product_type_variable:hover {
    background: var(--lime-500);
    color: #0A0D0F;
    box-shadow: var(--shadow-glow);
    transform: none;
}

/* wishlist + sale flag + review badge on cards */
li.product .commercekit-wishlist a,
li.product .commercekit-save-wishlist {
    background: rgba(10, 13, 15, 0.7);
    color: #fff;
    border: 1px solid var(--line-1);
}
li.product .onsale,
li.product .sale-item.product-label {
    background: var(--orange-500);
    color: #1A0C04;
    font-weight: 800;
    border-radius: var(--r-full);
}
li.product .drvws-product-minimal,
li.product .drvws-product-minimal-content { color: var(--fg-secondary); }
/* #5: Revix rating widget ships inline colours tuned for a light theme — the
   score renders near-black (invisible on dark) and the count uses an Amazon
   teal link colour. Re-map to the GPD dark palette; filled stars stay orange,
   empty star fills go muted instead of white. */
li.product .drvws-rating-line__value { color: #fff !important; }
li.product .drvws-rating-line__count { color: var(--fg-tertiary) !important; }
li.product .drvws-star-az--full path { fill: var(--star-500); stroke: var(--star-500); }
li.product .drvws-star-az--empty path { fill: rgba(255, 255, 255, .18); stroke: rgba(255, 255, 255, .22); }
li.product .drvws-star-az--partial linearGradient stop:last-child { stop-color: rgba(255, 255, 255, .18); }
li.product .drvws-stars,
li.product .drvws-stars-az { color: var(--star-500); }

/* stock pills on cards (same family as PDP) */
li.product .stock,
li.product .gpd-flag {
    color: var(--lime-500);
    background: rgba(211, 255, 95, 0.10);
    border: 1px solid rgba(211, 255, 95, 0.25);
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
}
li.product .stock.available-on-backorder { color: var(--teal-500); background: rgba(35,221,190,.10); border-color: rgba(35,221,190,.25); }
li.product .stock.out-of-stock { color: var(--fg-secondary); background: var(--surface-glass); border-color: var(--line-1); }

/* archive chips / sort / toolbar */
body.tax-product_cat .shoptimizer-sorting,
body.post-type-archive-product .shoptimizer-sorting { color: var(--fg-secondary); }
body.tax-product_cat .shoptimizer-sorting select,
body.post-type-archive-product .shoptimizer-sorting select {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    color: #fff;
    border-radius: var(--r-md);
}

/* SEO description panel under the grid */
body.tax-product_cat .archive.seo-info-acf,
body.post-type-archive-product .archive.seo-info-acf {
    background: var(--surface-glass-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    color: var(--fg-secondary);
}
body.tax-product_cat .archive.seo-info-acf h2,
body.tax-product_cat .archive.seo-info-acf h3,
body.tax-product_cat .archive.seo-info-acf strong { color: var(--fg-0); }

/* ══════════════════════════════════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════════════════════════════════ */

body.woocommerce-cart #content.site-content {
    background: var(--bg-2);
    color: var(--fg-1);
}
body.woocommerce-cart #content.site-content h1,
body.woocommerce-cart #content.site-content h2 { color: var(--fg-0); }

/* line-item cards */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form .cart_item,
body.woocommerce-cart .m-cart .cart_item {
    background: var(--surface-elev);
    border-color: var(--line-1);
    color: var(--fg-1);
    border-radius: var(--r-lg);
}
body.woocommerce-cart .cart_item .product-name,
body.woocommerce-cart .cart_item .product-name a { color: #fff; font-weight: 700; }
body.woocommerce-cart .cart_item .product-thumbnail img {
    background: #0c1014;
    border-radius: var(--r-md);
    /* cart.css applies mix-blend-mode:multiply (a light-theme trick) which turns
       the product to black on the dark tile — the "image not shown" report. */
    mix-blend-mode: normal;
}
/* dark tile behind the product image (cart.css sets the light --bg-2) */
body.woocommerce-cart .cart_item .product-thumbnail {
    background: var(--surface-glass) !important;
    border-color: var(--line-1) !important;
}
/* trash/remove control — cart.css sizes it 24px at a deep selector; the design
   is smaller. Match that depth so the icon + box shrink. */
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .product-remove a,
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .product-remove a:before {
    width: 18px;
    height: 18px;
}
body.woocommerce-cart .cart_item .product-price,
body.woocommerce-cart .cart_item .product-subtotal,
body.woocommerce-cart .cart_item .product-price .amount,
body.woocommerce-cart .cart_item .product-subtotal .amount,
body.woocommerce-cart .cart_item bdi {
    color: var(--lime-500) !important;
    -webkit-text-fill-color: var(--lime-500); /* droix price fill trick */
    font-weight: 800;
}
body.woocommerce-cart .cart_item del,
body.woocommerce-cart .cart_item del bdi {
    color: var(--fg-tertiary) !important;
    -webkit-text-fill-color: var(--fg-tertiary);
    font-weight: 400;
}
body.woocommerce-cart .cart_item .remove,
body.woocommerce-cart .cart_item .remove-item {
    color: var(--fg-secondary);
}
body.woocommerce-cart .cart_item .remove:hover { color: var(--orange-500); }

/* qty steppers */
body.woocommerce-cart .quantity,
body.woocommerce-cart .quantity input.qty {
    background: var(--surface-glass);
    border-color: var(--line-1);
    color: #fff;
    border-radius: var(--r-md);
}
body.woocommerce-cart .quantity .plus,
body.woocommerce-cart .quantity .minus {
    background: transparent;
    border-color: var(--line-1);
    color: var(--fg-1);
}
/* cart-page custom stepper: cart.css styles it white with grey glyphs at a far
   higher specificity than the rule above, so it stayed a white pill. Match that
   selector depth to apply the dark GPD treatment. */
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
}
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity .qty {
    color: #fff;
}
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity .quantity-nav .quantity-up::before,
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity .quantity-nav .quantity-down::before {
    background: var(--fg-secondary);
}
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity .quantity-nav .quantity-up:hover::before,
body.woocommerce-cart .woocommerce-cart-form .shop_table .woocommerce-cart-form__cart-item .quantity .quantity-nav .quantity-down:hover::before {
    background: var(--lime-500);
}
/* "You're saving $X" savings strip + "Click here" coupon link → teal (was green) */
body.woocommerce-cart .gpd-ship--cart.is-savings .gpd-ship__msg,
body.woocommerce-cart .gpd-ship--cart.is-savings .gpd-ship__msg svg,
body.woocommerce-cart .gpd-ship--cart.is-savings .gpd-ship__msg strong,
body.woocommerce-cart .have-coupon a {
    color: var(--teal-500) !important;
}

/* free-shipping progress strip → teal informational */
body.woocommerce-cart .gpd-ship-strip,
body.woocommerce-cart .free-shipping-progress,
body.woocommerce-cart .wt {
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    border-radius: var(--r-lg);
    color: var(--fg-1);
}
body.woocommerce-cart .gpd-ship-strip b,
body.woocommerce-cart .free-shipping-progress b { color: var(--acc); }
body.woocommerce-cart .free-shipping-progress .bar,
body.woocommerce-cart .gpd-ship-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--r-full);
}
body.woocommerce-cart .free-shipping-progress .bar > *,
body.woocommerce-cart .gpd-ship-bar > * { background: var(--acc); }

/* coupon row */
body.woocommerce-cart .coupon input {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    color: #fff;
    border-radius: var(--r-md);
}
body.woocommerce-cart a { color: var(--acc); }

/* order summary panel */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals .woocommerce-cart-summary,
body.woocommerce-cart .cart-collaterals .cart-summary-totals,
body.woocommerce-cart .your-order {
    background: var(--surface-elev);
    border-color: var(--line-1);
    color: var(--fg-1);
    border-radius: var(--r-xl);
}
body.woocommerce-cart .cart-collaterals .order-summary,
body.woocommerce-cart .cart-collaterals .coupons-order-summary {
    background: var(--surface-glass);
    border-radius: var(--r-md);
    color: var(--fg-1);
}
body.woocommerce-cart .cart-collaterals .product-total-label,
body.woocommerce-cart .cart-collaterals .shipping-label { color: var(--fg-secondary); }
body.woocommerce-cart .cart-collaterals .product-total-value,
body.woocommerce-cart .cart-collaterals .shipping-value { color: var(--fg-1); }
body.woocommerce-cart .cart-collaterals .order-total,
body.woocommerce-cart .cart-collaterals .order-total .amount,
body.woocommerce-cart .cart-collaterals .order-total bdi {
    color: var(--lime-500) !important;
    -webkit-text-fill-color: var(--lime-500);
    font-weight: 800;
}

/* checkout CTA → conversion lime */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .cart-collaterals .proceed-to-checkout a {
    background: var(--lime-500) !important;
    color: #0A0D0F !important;
    font-weight: 800;
    border-radius: var(--r-md);
    transition: box-shadow var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease-out);
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .cart-collaterals .proceed-to-checkout a:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
/* lock icon: parent masks it white (.cart-collaterals .checkout-button:before)
   — icons on lime buttons are black in the GPD design */
body.woocommerce-cart .cart-collaterals .checkout-button::before {
    background-color: currentColor;
}

/* express checkout area divider text */
body.woocommerce-cart .express-checkout-label,
body.woocommerce-cart .or-express-checkout { color: var(--fg-tertiary); }

/* cross-sells heading */
body.woocommerce-cart .cross-sells h2 { color: var(--fg-0); }

/* ==========================================================================
   Round 2 — specificity parity with category.css row-card rules
   (droix list rows ≈ design .fl-row: stage | info | buy column)
   ========================================================================== */

body.archive .shoptimizer-archive { background-color: var(--bg-2); }
body.archive .shoptimizer-archive .archive-header {
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--line-2);
}

/* row cards (.fl-row treatment) */
body.archive .site-main ul.products li.product {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    box-shadow: none;
    transition: border-color 0.18s, transform 0.18s;
}
body.archive .site-main ul.products li.product:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: var(--surface-glass);
    box-shadow: none;
}
/* carousel variants */
body.archive .site-main ul.products .owl-item li.product {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    box-shadow: none;
}

/* product image stage */
body.archive .site-main ul.products li.product .woocommerce-image__wrapper,
body.archive .site-main ul.products li.product .shoptimizer-plp-image-wrapper {
    background: radial-gradient(120% 120% at 50% 30%, #1d232b, #0c1014 78%);
    border-radius: var(--r-lg);
}

/* name / brand / desc */
body.archive .site-main ul.products li.product .woocommerce-loop-product__title,
body.archive .site-main ul.products li.product .woocommerce-loop-product__title a {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.3px;
}
body.archive .site-main ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--lime-500); }
body.archive .site-main ul.products li.product p,
body.archive .site-main ul.products li.product .product-short-description {
    color: var(--fg-secondary);
}
/* spec list ticks → teal */
body.archive .site-main ul.products li.product ul li { color: var(--fg-secondary); }
body.archive .site-main ul.products li.product ul li::before,
body.archive .site-main ul.products li.product ul li svg { color: var(--teal-500); }

/* buy column */
body.archive .site-main .cart-right-block {
    border-left: 1px solid var(--line-2);
    background: transparent;
}
body.archive .site-main .cart-right-block .price,
body.archive .site-main .cart-right-block .price .amount,
body.archive .site-main .cart-right-block bdi {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-weight: 800;
}
body.archive .site-main .cart-right-block del,
body.archive .site-main .cart-right-block del bdi {
    color: var(--fg-tertiary) !important;
    -webkit-text-fill-color: var(--fg-tertiary);
    font-weight: 400;
}
body.archive .site-main .gpd-card-price-starting-at .gpd-card-price-prefix { color: var(--fg-tertiary); }
/* stock note in the buy column → teal dot style */
body.archive .site-main .cart-right-block .stock { color: var(--teal-500); background: transparent; border: 0; }
body.archive .site-main .cart-right-block .stock.out-of-stock { color: var(--fg-secondary); }
/* select-options / add-to-cart in the row → primary lime */
body.archive .site-main .cart-right-block .button,
body.archive .site-main .cart-right-block .add_to_cart_button,
body.archive .site-main ul.products li.product .button {
    background: var(--lime-500);
    color: #0A0D0F;
    border: 0;
    border-radius: var(--r-md);
    font-weight: 800;
}
body.archive .site-main .cart-right-block .button:hover,
body.archive .site-main ul.products li.product .button:hover {
    background: var(--lime-500);
    color: #0A0D0F;
    box-shadow: var(--shadow-glow);
}
/* compare/wishlist tool buttons in the row (droix lime-bordered white chips) */
body.archive .site-main .cart-right-block .buttons-block a,
body.archive .site-main .cart-right-block .compare-label {
    background: transparent;
    border: 1px solid var(--line-1);
    color: var(--fg-secondary);
    border-radius: var(--r-md);
}
body.archive .site-main .cart-right-block .buttons-block a:hover { color: #fff; border-color: rgba(255,255,255,.25); }

/* ==========================================================================
   Filter rail (design theme.css .gs-filters/.gs-fgroup/.gs-check/.gs-fswatch,
   category.jsx FiltersSidebar): sticky 248px left rail, borderless groups
   divided by --line-2, 18px lime checkboxes, colour dots, min–max price
   inputs, bottom "Clear all filters". Overrides the droix light panels from
   category.css.
   ========================================================================== */
@media (min-width: 993px) {
    body.archive .content-area {
        width: calc(100% - 278px); /* 248px rail + 30px gap; also outguns the
                                      Kirki inline .content-area{width:76%} */
        max-width: none;
    }
    body.archive #secondary {
        width: 248px;
        padding-right: 0;
    }
    body.archive #secondary .gpd-filter-rail {
        position: sticky;
        top: 84px;
    }
}

/* groups: transparent, hairline divider, no cards */
body.archive .widget_product_categories > * + * { margin-top: 0; }
body.archive .widget_product_categories .filters-block,
body.archive #secondary .filters-block {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    box-shadow: none;
    color: var(--fg-1);
    padding: 14px 2px 16px;
}
body.archive #secondary *.filters-title {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 0 13px;
}
body.archive #secondary *.filters-title:hover { color: var(--lime-500); }
body.archive #secondary *.filters-title:after,
body.archive #secondary .filters-block.show *.filters-title:after {
    background-image: none;
    background: currentColor;
    opacity: .5;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    width: 13px;
    height: 13px;
}
body.archive #secondary .filters-block:not(.show) *.filters-title:after { transform: rotate(180deg); }
body.archive #secondary .filters-block .filters-content,
body.archive #secondary .filters-block.block-overlay .filters-content { padding: 0; }
body.archive #secondary .filters-container,
body.archive #secondary .active-filters .filters-container {
    background: transparent !important; /* category.css paints these #FCFCFC/#FFF panels */
    padding: 0 !important;
    border-radius: 0;
}
body.archive #secondary .filters-block ul.filters-list { margin: 0; }
body.archive #secondary .filters-block.price-filter.show *.filters-title { padding-bottom: 13px; }
body.archive .price-filter hr { display: none; }

/* checkbox rows (.gs-check): 18px rounded box, lime checked state */
body.archive #secondary .filters-list label::before { content: none; }
body.archive #secondary .filters-list label {
    display: flex;
    align-items: center;
    width: 100%;            /* #7: stretch the row so .name (flex:1) + .term-count
                              (margin-left:auto) push the count to the rail's right
                              edge (label was shrinking to its content width) */
    padding: 7px 0;
    gap: 10px;
    font-size: 13.5px;
    color: var(--fg-1);
}
body.archive #secondary .filters-list li { display: block; width: 100%; }
body.archive #secondary .filters-list label .box {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 5px;
    border: 1.5px solid var(--line-1);
    background: var(--surface-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
body.archive #secondary .filters-list label .box svg { width: 12px; height: 12px; }
body.archive #secondary .filters-list label.checked .box,
body.archive #secondary .filters-list label:hover .box { border-color: var(--teal-500); }
body.archive #secondary .filters-list label.checked .box {
    /* #8: active filter uses the secondary/tile teal, not primary lime */
    background: var(--teal-500);
    color: #06160F;
}
body.archive #secondary .filters-list label .name { flex: 1 1 auto; min-width: 0; }
body.archive #secondary .filters-list .term-count {
    position: static;
    margin-left: auto;
    background: transparent;
    color: var(--fg-tertiary);
    font-size: 12px;
    padding: 0;
    min-width: 0;
}
body.archive #secondary .filters-block ul li + li { border: 0; }

/* price inputs (.gs-price-range) */
body.archive #secondary .gpd-price-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
body.archive #secondary .gpd-price-range .sep { color: var(--fg-tertiary); }
body.archive #secondary .gpd-price-range input {
    width: 100%;
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    color: #fff;
    font-size: 13px;
    outline: none;
}
/* placeholder brightened (fg-secondary, not fg-tertiary) to match the reference price text;
   focus ring teal to match the rail's teal interactive accents */
body.archive #secondary .gpd-price-range input::placeholder { color: var(--fg-secondary); }
body.archive #secondary .gpd-price-range input:focus { border-color: var(--teal-500); }

/* colour swatches (.gs-fswatch) */
body.archive #secondary .gpd-swatchrow {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 2px;
}
/* width:auto + reset the generic .filters-list li border/padding — it was only
   stripped from `li + li`, so the FIRST swatch kept a 16px-taller box and sat
   misaligned above the row. */
body.archive #secondary .gpd-swatchrow li {
    width: auto;
    border: 0;
    padding: 0;
    margin: 0;
}
/* size the swatch label to the dot so the row aligns evenly — the generic
   .filters-list label rule (flex/width:100%/gap:10px) was adding phantom width. */
body.archive #secondary .gpd-swatchrow label.gpd-fswatch {
    display: block;
    width: 26px;
    height: 26px;
    padding: 0;
    gap: 0;
    margin: 0;
    line-height: 0;
}
body.archive #secondary .gpd-fswatch .dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--line-1);
    display: block;
    transition: border-color var(--dur-fast) var(--ease);
}
/* selected/hover swatch ring teal (matches the teal checkbox + reference image) */
body.archive #secondary .gpd-fswatch.checked .dot,
body.archive #secondary .gpd-fswatch:hover .dot { border-color: var(--lime-500); }

/* bottom "Clear all filters" (design .gs-btn-secondary block) */
body.archive #secondary .gpd-clear-filters {
    width: 100%;
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 0;
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
/* hover matches the reference .gs-btn-secondary:hover (lift + lighter fill) */
body.archive #secondary .gpd-clear-filters:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); }

/* active-filter chips, dark */
body.archive #secondary .active-filters .remove-filter {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-full);
    color: var(--fg-1);
}
body.archive #secondary .active-filters .remove-filter-icon svg { stroke: var(--fg-secondary); }
body.archive #secondary .active-filters .btn-green.remove-all-filters {
    background: transparent;
    border: 1px solid var(--line-1);
    color: var(--fg-secondary);
}
body.archive #secondary .active-filters .btn-green.remove-all-filters:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
}

/* mobile drawer (≤992px): category.css paints the off-canvas panel #FAFAFA —
   dark parity for the drawer shell, header and close icon */
@media screen and (max-width: 992px) {
    body.archive .secondary-wrapper #secondary {
        background: var(--bg-1);
        border-right: 1px solid var(--line-1);
    }
    body.archive #secondary .filters-header { background: var(--bg-1); }
    body.archive #secondary .filters-header h3 { color: #fff; }
    body.archive.filter-open .filters.close-drawer svg { stroke: var(--fg-secondary); }
    body.archive.filter-open .filters.close-drawer:hover svg { stroke: var(--lime-500); }
}
body.archive .custom-pagination {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    box-shadow: none;
    color: var(--fg-secondary);
}

/* ==========================================================================
   Round 3 — cart: redefine cart.css's scoped droix token block with GPD dark
   values. cart.css consumes these vars throughout, so this single override
   recolors most of the page; the literal #fff panels below get explicit
   parity rules. (Same strategy as the planned checkout token swap.)
   ========================================================================== */

body.woocommerce-cart {
    /* Brand → conversion lime; purple price accent → lime */
    --gpd-green: var(--lime-500);
    --gpd-green-dark: var(--lime-600);
    --gpd-green-tint: rgba(211, 255, 95, 0.10);
    --gpd-purple: var(--lime-500);
    /* Text → dark-theme ladder */
    --fg-1: #FFFFFF;
    --fg-2: #D4D4D4;
    --fg-3: #99A1AF;
    --fg-4: #99A1AF;
    --fg-5: #6B7478;
    /* Surfaces & strokes */
    --bg-2: #13131A;
    --stroke-1: rgba(255, 255, 255, 0.10);
    --stroke-2: rgba(255, 255, 255, 0.06);
    --stroke-3: rgba(255, 255, 255, 0.14);
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-cta: 0 0 0 1px rgba(211, 255, 95, 0.45), 0 10px 30px rgba(211, 255, 95, 0.22);
    /* Type → Inter only */
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    /* Semantic: danger → design orange */
    --gpd-danger: #FF6B35;
    --gpd-danger-wash: rgba(255, 107, 53, 0.10);
    --gpd-success: var(--teal-500);
}

/* literal #fff panels in cart.css → dark surfaces */
body.woocommerce-cart .woocommerce-cart-form .shop_table,
body.woocommerce-cart .gpd-addons-card--cart,
body.woocommerce-cart .gpd-addon-card {
    background: var(--surface-elev);
}
body.woocommerce-cart .quantity,
body.woocommerce-cart .coupon input {
    background: var(--surface-glass);
}
/* the order-summary panel + items list (white at cart.css:605/919) */
body.woocommerce-cart .cart-collaterals .woocommerce-cart-summary,
body.woocommerce-cart .your-order,
body.woocommerce-cart .cart-summary-totals {
    background: var(--surface-elev);
}
/* free-shipping strip (.gpd-ship--cart) — teal informational */
body.woocommerce-cart .gpd-ship--cart {
    background: var(--acc-soft);
    border-color: var(--acc-line);
}
body.woocommerce-cart .gpd-ship--cart .gpd-ship__msg strong { color: var(--acc); }
body.woocommerce-cart .gpd-ship--cart .gpd-ship__bar,
body.woocommerce-cart .gpd-ship--cart progress { background: rgba(255,255,255,.08); }
body.woocommerce-cart .gpd-ship--cart .gpd-ship__bar > *,
body.woocommerce-cart .gpd-ship--cart progress::-webkit-progress-value { background: var(--acc); }

/* page heading + coupon hint readable on dark */
body.woocommerce-cart h1,
body.woocommerce-cart .page-title { color: var(--fg-0); }

/* qty stepper digits + buttons on dark */
body.woocommerce-cart .quantity input.qty,
body.woocommerce-cart .quantity .plus,
body.woocommerce-cart .quantity .minus {
    color: #fff;
    background: transparent;
    border-color: transparent;
}

/* ==========================================================================
   Round 4 — fl-row 1:1 parity (2026-06-12)
   --------------------------------------------------------------------------
   Geometry + component pass against the flow-site row reference:
   design_handoff_gpdstore/flow.css (.fl-row/.fl-tp/.fl-bnpl/.fl-seo),
   theme.css (.gs-cat-hero/.gs-select/.gs-pager/.gs-flag),
   theme-pdp.css (.gs-accord). Scoped to body.archive .site-main where the
   card template is shared (mega menu, AJAX re-render).
   ========================================================================== */

/* ── category hero panel (.gs-cat-hero, PHP: droix_category_hero) ────────── */
body.archive .gpd-cat-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(140deg, rgba(35, 221, 190, 0.10), rgba(254, 90, 240, 0.08));
    border: 1px solid var(--line-1);
    border-radius: var(--r-2xl);
    padding: 30px 32px;
    overflow: hidden;
    position: relative;
    margin: 8px 0 16px;
}
body.archive .gpd-cat-hero-copy { min-width: 0; }
body.archive .gpd-cat-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-500); /* "SHOP · N MODELS" eyebrow uses the teal accent (was lime) */
}
body.archive .gpd-cat-hero h1.woocommerce-products-header__title {
    margin: 10px 0 8px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    line-height: 1.04;
}
body.archive .gpd-cat-hero .gpd-cat-desc {
    margin: 0;
    font-size: 14.5px;
    color: var(--fg-secondary);
    max-width: 560px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.archive .gpd-cat-hero .gpd-cat-desc p { margin: 0 0 8px; font-size: inherit; color: inherit; }
body.archive .gpd-cat-hero .gpd-cat-desc strong { color: var(--fg-1); }
body.archive .gpd-cat-hero img.gpd-cat-hero-img {
    width: 300px;
    height: auto;
    flex: 0 0 auto;
    align-self: center;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
    border: 0;
    border-radius: 0;
}
/* the old in-header description is suppressed in PHP for cat/tag — collapse
   the now-empty shoptimizer header box */
body.tax-product_cat header.woocommerce-products-header,
body.tax-product_tag header.woocommerce-products-header {
    display: none;
}

/* Trustpilot strip under the hero (.fl-tp) */
body.archive .gpd-cat-tp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    background: var(--surface-glass);
    padding: 12px 26px;
    margin: 0 0 10px;
}

/* ── toolbar: count left · sort right (.gs-cat-toolbar / .gs-select) ─────── */
body.archive .custom-sorting-wrapper {
    display: flex;
    width: 100%;            /* #1: fill the content column so space-between pushes
                              the sort control to the right edge (was shrinking to
                              ~250px on desktop and hugging the left) */
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px !important;
}
body.archive .gpd-toolbar-count,
body.archive .gpd-toolbar-count .woocommerce-result-count {
    font-size: 13.5px;
    color: var(--fg-secondary);
    margin: 0;
}
body.archive .gpd-toolbar-count .gpd-count-products b { color: #fff; font-weight: 700; }
body.archive .gpd-toolbar-count .gpd-active-names { color: var(--lime-500); }
body.archive .custom-sorting-wrapper .sort-block { margin-left: auto; }
body.archive .custom-sorting-wrapper .sort-text { color: var(--fg-tertiary); font-size: 13px; margin-right: 6px; }
body.archive .custom-sorting-wrapper .sort-button {
    background: var(--surface-glass);
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md);
    padding: 10px 14px;
    min-height: 0;
    min-width: 164px;
    font-size: 13.5px !important;
    font-weight: 600;
    color: #fff !important;
}
body.archive .custom-sorting-wrapper .sort-button:hover { border-color: rgba(255,255,255,.25) !important; box-shadow: none; }
body.archive .custom-sorting-wrapper .sort-button.active { border-radius: var(--r-md) var(--r-md) 0 0; }
body.archive .custom-sorting-wrapper svg { fill: none; stroke: var(--fg-tertiary); }
body.archive .sorting-dropdown {
    background: rgba(16, 20, 26, 0.98);
    border: 1px solid var(--line-1);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-lg);
    margin-left: 0;
    left: auto;
    right: 0;
    width: 200px;
}
body.archive .sorting-dropdown li { color: var(--fg-1); font-size: 13px; }
body.archive .sorting-dropdown li:hover,
body.archive .sorting-dropdown li.active { background: rgba(255, 255, 255, 0.06); color: #fff; }
/* the mobile filter toggle is dead UI while no filter sidebar is configured */
body.archive .custom-sorting-wrapper .mobile-filter.gpd-no-sidebar { display: none !important; }

/* mobile/tablet filter toggle → GPD pill (design #77/#78). Hidden ≥993 (the
   filter rail is inline); shown ≤992 as a compact dark "All filters" pill with
   an active-count badge, instead of the bare full-width Shoptimizer button. */
@media (max-width: 992px) {
    body.archive .custom-sorting-wrapper .mobile-filter.shoptimizer-mobile-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        padding: 10px 16px;
        background: var(--surface-glass);
        border: 1px solid var(--line-1);
        border-radius: var(--r-md);
        color: #fff;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }
    body.archive .custom-sorting-wrapper .mobile-filter.shoptimizer-mobile-toggle:hover {
        border-color: rgba(255, 255, 255, .25);
    }
    body.archive .custom-sorting-wrapper .mobile-filter.shoptimizer-mobile-toggle > span:first-child {
        display: inline-flex;
        align-items: center;
    }
    body.archive .custom-sorting-wrapper .mobile-filter.shoptimizer-mobile-toggle svg {
        width: 18px;
        height: 18px;
        stroke: var(--fg-secondary);
        fill: none;
    }
    body.archive .custom-sorting-wrapper .mobile-filter .gpd-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--r-full);
        background: var(--lime-500);
        color: #16190B;
        font-size: 12px;
        font-weight: 700;
    }
    body.archive .custom-sorting-wrapper .mobile-filter .gpd-filter-count[hidden] { display: none; }
}

/* ── Shop by Series rail (subcategory cards, design handoff #75–78) ───────────
   Overrides the light Shoptimizer owl/subcat styling in category.css. gpd-archive
   loads after category.css, but several light rules use the high-specificity
   `ul.products.owl-carousel …` prefix, so the owl/image overrides below repeat
   the `.gpd-series-rail.owl-carousel` chain to win deterministically. */
/* The rail sits inside Shoptimizer's flex `.shoptimizer-sorting` wrapper, which
   also holds the sort toolbar on a single nowrap row. Allow that row to wrap so
   the rail can take the full column on its own line (toolbar drops below it). */
body.archive .shoptimizer-sorting { flex-wrap: wrap; }
body.archive .gpd-series {
    position: relative;
    margin: 8px 0 40px;
    /* Without this the rail (a flex item) grows to its content width — e.g.
       ~2280px for the shop page's 10 cards — and overflows the column. Pin it to
       the full column width and allow it to shrink (min-width:0) so the owl stage
       clips to the column and the prev/next nav scrolls through every card. */
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* keep the owl viewport itself bounded to the column so cards beyond it are
   clipped (and reachable via the nav) instead of bleeding past the page edge */
body.archive .gpd-series .gpd-series-rail.owl-carousel,
body.archive .gpd-series .owl-stage-outer { width: 100%; max-width: 100%; }
body.archive .gpd-series-head {
    margin-bottom: 18px;
    padding-right: 110px; /* clear the nav chips */
}
body.archive .gpd-series-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-500);
    margin-bottom: 6px;
}
body.archive .gpd-series-title {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

/* card geometry */
body.archive .gpd-series .gpd-series-rail.owl-carousel { margin: 0; }
body.archive .gpd-series .gpd-series-card { width: 212px; margin: 0; }
body.archive .gpd-series .gpd-series-card > a {
    position: relative;
    display: block;
    height: 248px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line-1);
    background:
        radial-gradient(120% 80% at 50% 16%, rgba(255, 255, 255, 0.05), transparent 60%),
        var(--bg-1);
    text-decoration: none;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
body.archive .gpd-series .gpd-series-card > a:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}
body.archive .gpd-series .gpd-series-card__media {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
/* beat category.css `…owl-carousel li.product-category img { height:100px }` */
body.archive .gpd-series .gpd-series-rail.owl-carousel li.product-category .gpd-series-card__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}
body.archive .gpd-series .gpd-series-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    min-height: 30%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(7, 9, 12, 0.78) 30%, transparent);
}
body.archive .gpd-series .gpd-series-card__title {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}
body.archive .gpd-series .gpd-series-card__count {
    display: block;
    margin-top: 3px;
    color: var(--fg-tertiary);
    font-size: 12.5px;
}
body.archive .gpd-series .gpd-series-card__arrow {
    flex: 0 0 auto;
    color: var(--fg-secondary);
    transition: color 0.18s, transform 0.18s;
}
body.archive .gpd-series .gpd-series-card__arrow svg { width: 22px; height: 22px; display: block; }
body.archive .gpd-series .gpd-series-card > a:hover .gpd-series-card__arrow { color: #fff; transform: translateX(3px); }

/* first card = lime active highlight */
body.archive .gpd-series .gpd-series-card.is-active > a { border-color: var(--lime-500); }
body.archive .gpd-series .gpd-series-card.is-active .gpd-series-card__arrow { color: var(--lime-500); }

/* nav chips top-right — beat category.css owl-nav (ul.products.owl-carousel .owl-nav) */
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav {
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0;
    font-size: inherit;
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-prev,
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--line-1);
    background: var(--surface-glass);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s, background 0.18s, opacity 0.18s;
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-prev:hover,
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-next:hover {
    border-color: rgba(255, 255, 255, 0.28);
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button span {
    width: 20px;
    height: 20px;
    color: transparent;
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-prev span::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.09 19.92L8.57 13.4c-.77-.77-.77-2.03 0-2.8l6.52-6.52' stroke='%23E7EAF0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-next span::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.91 19.92l6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08' stroke='%23E7EAF0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-prev.disabled,
body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav button.owl-next.disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 600px) {
    body.archive .gpd-series-head { padding-right: 0; }
    body.archive .gpd-series .gpd-series-card { width: 168px; }
    body.archive .gpd-series .gpd-series-card > a { height: 210px; }
    body.archive .gpd-series ul.products.owl-carousel.gpd-series-rail .owl-nav { display: none; }
}

/* ── badge pill on the stage (.gs-flag) ──────────────────────────────────── */
body.archive .site-main ul.products li.product .gpd-loop-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-full);
    padding: 5px 12px;
    line-height: 1.2;
}
body.archive .site-main ul.products li.product .gpd-loop-flag--lime { background: var(--lime-500); color: #16190B; }
body.archive .site-main ul.products li.product .gpd-loop-flag--teal { background: var(--teal-500); color: #06160F; }
body.archive .site-main ul.products li.product .gpd-loop-flag--orange { background: var(--orange-500); color: #1A0C04; }
/* one badge only — suppress the theme sale flash on archive rows */
body.archive .site-main ul.products li.product .product-label.sale-item,
body.archive .site-main ul.products li.product .onsale { display: none !important; }

/* ── row card geometry (desktop ≥1201): grid 240px · 1fr · auto ──────────── */
@media (min-width: 1201px) {
    body.archive .site-main ul.products li.product {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr) auto;
        gap: 0;
        align-items: stretch;
        padding: 0;
        min-height: 196px;
        margin-bottom: 14px;
        overflow: hidden;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper {
        width: auto;
        height: 100%;
        min-height: 196px;
        grid-column: 1;
        grid-row: 1;
    }
    body.archive .site-main ul.products li.product .woocommerce-card__header {
        width: auto;
        grid-column: 2;
        grid-row: 1;
        padding: 18px 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: center;
        min-width: 0;
    }
    body.archive .site-main .cart-right-block {
        width: auto;
        grid-column: 3;
        grid-row: 1;
        min-width: 196px;
        max-width: 240px;
        margin-top: 0;
        padding: 18px 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
}

/* stage fills its cell at every width — grid items must not size to the
   slider's intrinsic width (flex track of min-width:100% items) */
body.archive .site-main ul.products li.product .woocommerce-image__wrapper {
    min-width: 0;
    overflow: hidden;
}
body.archive .site-main ul.products li.product .woocommerce-image__wrapper > a {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.archive .site-main ul.products li.product .woocommerce-image__wrapper > a:hover { border: 0; }
body.archive .site-main ul.products li.product .custom-product-slider {
    height: 100%;
    width: 100%;
}
body.archive .site-main ul.products li.product .slider-container { height: 100%; }
/* keep the slider's own flex/min-width sizing; just fill the cell height */
body.archive .site-main ul.products li.product .slider-item {
    height: 100%;
    display: flex;
}
body.archive .site-main ul.products li.product .slider-item img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    margin: auto;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
}
/* ≤1200: the list-row image cell is a fixed grid track (tablet 190px, mobile
   128px). The slider chain (.slider-item{min-width:100%}) otherwise sizes to the
   image's intrinsic width (~215px) and bleeds past the track — clipped by the
   wrapper's overflow:hidden, so the product looks oversized/cropped (the "image
   keeps getting bigger" report). Pin the chain to the track and contain the
   image so the whole product shows, fitted to the cell. Desktop (≥1201) keeps
   its inset 84% treatment above. */
@media (max-width: 1200px) {
    /* CommerceKit wraps the image in nested flex containers
       (.shoptimizer-plp-carousel-container > .shoptimizer-plp-image-wrapper >
       .custom-product-slider). Each is a flex item with the default
       min-width:auto, so none shrinks below its content and the whole chain
       keeps the image's intrinsic width (~288px), overflowing the fixed cell
       (tablet 190px / mobile 128px) — clipped by overflow:hidden, so the
       product looks oversized/cropped (the "image keeps getting bigger"
       report). min-width:0 across the link subtree lets the chain collapse to
       the cell; the image then fits with object-fit:contain. */
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .shoptimizer-plp-carousel-container,
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .shoptimizer-plp-image-wrapper,
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .custom-product-slider,
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .slider-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
        overflow: hidden;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .slider-item {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 100%;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .slider-item img,
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper > a img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        filter: none;
    }
}
/* reference rows have no slider dots */
body.archive .site-main ul.products li.product .pagination-container { display: none !important; }

/* ── mid column type ─────────────────────────────────────────────────────── */
body.archive .site-main ul.products li.product .woocommerce-card__header,
body.archive .site-main ul.products li.product .woocommerce-card__header * {
    text-align: left;
}
/* category-card category eyebrow: teal (was --fg-tertiary grey) to match the
   home card + PDP eyebrows — teal is the design's informational accent. */
body.archive .site-main ul.products li.product .gpd-card-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-500);
    display: block;
}
body.archive .site-main ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
body.archive .site-main ul.products li.product .drvws-product-minimal {
    justify-content: flex-start;
}
body.archive .site-main ul.products li.product .drvws-product-minimal,
body.archive .site-main ul.products li.product .drvws-product-minimal-content,
body.archive .site-main ul.products li.product .drvws-product-minimal b {
    color: var(--fg-secondary);
    font-size: 12.5px;
}
body.archive .site-main ul.products .woocommerce-product-details__short-description { margin-top: 6px; }
body.archive .site-main ul.products .woocommerce-product-details__short-description ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
}
body.archive .site-main ul.products .woocommerce-product-details__short-description li {
    display: block;
    position: relative;
    padding-left: 21px;
    font-size: 12.5px;
    color: var(--fg-secondary);
    line-height: 1.45;
    text-align: left;
    margin: 0 !important;
}
body.archive .site-main ul.products .woocommerce-product-details__short-description li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background: var(--teal-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* mock rows carry 4 spec ticks — keep rows at reference height */
body.archive .site-main ul.products .woocommerce-product-details__short-description li:nth-child(n+5) { display: none; }

/* ── buy column (.fl-row .buy) ────────────────────────────────────────────── */
/* price + stock stack (stock on its own line under the price) */
body.archive .site-main .cart-right-block .price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
}
/* "Starting at" prefix → uppercase label above the price */
body.archive .site-main .cart-right-block .gpd-card-price-starting-at { display: flex; flex-direction: column; gap: 2px; }
body.archive .site-main .cart-right-block .gpd-card-price-starting-at .gpd-card-price-prefix {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
/* #6: sale price + struck regular on one baseline-aligned row with a gap so long
   EUR amounts (e.g. 1.705,79 €) don't collide; the tax suffix drops to its own
   line below. */
body.archive .site-main .cart-right-block .gpd-card-price-values {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 2px;
}
body.archive .site-main .cart-right-block .gpd-card-price-values .woocommerce-price-suffix { flex: 0 0 100%; }
body.archive .site-main .cart-right-block .price-block .price .sale-price,
body.archive .site-main .cart-right-block .gpd-card-price-values .sale-price {
    font-size: 20px;        /* #6: down from 24px so EUR prices fit the buy column */
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
body.archive .site-main .cart-right-block .price p.gpd-card-price-del,
body.archive .site-main .cart-right-block .price p.gpd-card-price-del del { font-size: 13px; margin: 0; }
body.archive .site-main .cart-right-block .price .woocommerce-price-suffix {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--fg-tertiary);
}
/* stock → teal text + dot (replaces the pill in row context) */
body.archive .site-main .cart-right-block .stock,
body.archive .site-main .cart-right-block .price-block .stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--teal-500);
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    margin: 4px 0 8px;
    margin-left: 0;
}
body.archive .site-main .cart-right-block .stock::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
body.archive .site-main .cart-right-block .stock#pre-order,
body.archive .site-main .cart-right-block .price-block .stock#pre-order,
body.archive .site-main .cart-right-block .stock#on-back-order,
body.archive .site-main .cart-right-block .price-block .stock#on-back-order { color: #FFB258; }
body.archive .site-main .cart-right-block .stock#out-of-stock,
body.archive .site-main .cart-right-block .price-block .stock#out-of-stock { color: var(--fg-secondary); }

/* tools row: Wishlist + Compare as equal 32px ghost chips (.fl-row .tools) */
body.archive .site-main .cart-right-block .gpd-card-tools {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
body.archive .site-main .cart-right-block .gpd-card-tools > * {
    flex: 1 1 0;
    min-width: 0;
}
/* #2: custom Wishlist chip (a.gpd-wishlist-chip) — matches the Compare chip.
   Reuses CommerceKit's save trigger but is fully styled here. */
body.archive .site-main .cart-right-block .gpd-card-tools a.gpd-wishlist-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-1);
    background: none;
    color: var(--fg-secondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    margin: 0;
}
body.archive .site-main .cart-right-block .gpd-card-tools a.gpd-wishlist-chip:hover { color: #fff; border-color: rgba(255,255,255,.25); }
body.archive .site-main .cart-right-block .gpd-card-tools a.gpd-wishlist-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* saved state: CommerceKit toggles the parent .commercekit-wishlist class on its
   own elements only, so reflect the saved heart via a lime fill on click-through */
body.archive .site-main .cart-right-block .gpd-card-tools a.gpd-wishlist-chip.incheck svg path { fill: var(--lime-500); stroke: var(--lime-500); }
/* compare chip inside the tools row */
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container {
    position: static !important;
    text-align: center;
    height: 32px;
}
/* Scope the chip box to the OUTER button span only (> span). The descendant
   `span` form also matched the inner .comparelabel, which then rendered as its
   own nested bordered pill once the icon was injected. */
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-1);
    background: none;
    color: var(--fg-secondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    box-shadow: none;
}
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container > span:hover { color: #fff; border-color: rgba(255,255,255,.25); }
/* defeat category.css `.compare-wishlist-container span svg{opacity:0;width:40px!important}`
   (it hides the real svg for the light icon-only drawer); on the card we show the
   injected glyph at chip size. */
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container > span svg { width: 14px !important; height: 14px !important; opacity: 1 !important; flex: 0 0 auto; }
/* inner label: plain text. category.css styles every `.compare-wishlist-container
   span` as a 40x40 bordered box with a dark ::after glyph; neutralise that on the
   label so only the injected icon + "Compare" text show. */
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container .comparelabel {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    opacity: 1;
    line-height: normal;
    font-size: 11px;
    color: inherit;
}
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container > span:after,
body.archive .site-main .cart-right-block .gpd-card-tools .compare-wishlist-container .comparelabel:after { display: none !important; }

/* CTA buttons — lime block (rules above) + sizing per .gs-btn */
body.archive .site-main .cart-right-block .buttons-block { margin-top: 0; }
/* parent theme absolutely positions loop ATC as a hover-reveal bar — keep it
   in flow inside the buy column */
body.archive .site-main .cart-right-block .buttons-block .button.add_to_cart_button {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
}
body.archive .site-main .cart-right-block .buttons-block .button,
body.archive .site-main .cart-right-block .buttons-block a.btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    background: var(--lime-500);
    color: #0A0D0F;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 800;
    border: 0;
}
body.archive .site-main .cart-right-block .buttons-block a.btn-green svg path { stroke: #0A0D0F; }
body.archive .site-main .cart-right-block .buttons-block a.btn-green:hover,
body.archive .site-main .cart-right-block .buttons-block .button:hover { box-shadow: var(--shadow-glow); }

/* ── inline BNPL band after row 3 (.fl-bnpl) ─────────────────────────────── */
body.archive .site-main ul.products li.gpd-loop-banner {
    display: flex !important;
    align-items: center;
    gap: 26px;
    background: linear-gradient(115deg, rgba(211, 255, 95, 0.10), rgba(35, 221, 190, 0.07) 55%, rgba(254, 90, 240, 0.07)) !important;
    border: 1px solid var(--line-1);
    border-radius: var(--r-2xl);
    padding: 26px 30px;
    min-height: 0;
    margin-bottom: 14px;
    overflow: hidden;
    cursor: default;
}
body.archive .site-main ul.products li.gpd-loop-banner:hover { border-color: rgba(211, 255, 95, 0.4); transform: none; }
body.archive .gpd-loop-banner .ic {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: rgba(211, 255, 95, 0.12);
    color: var(--lime-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
body.archive .gpd-loop-banner .ic svg { width: 26px; height: 26px; stroke: currentColor; }
body.archive .gpd-loop-banner .copy { min-width: 0; }
body.archive .gpd-loop-banner .eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lime-500);
    margin-bottom: 5px;
}
body.archive .gpd-loop-banner h3 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
}
body.archive .gpd-loop-banner p { margin: 0; font-size: 13.5px; color: var(--fg-secondary); line-height: 1.5; }
body.archive .gpd-loop-banner .logos { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* provider pill sizing (.dx-bnpl-badge) + the dark modal (.gpd-bnpl-modal) now
   live in the shared assets/css/gpd-bnpl.css so the home band reuses them. */
body.archive .gpd-loop-banner .gpd-bnpl-from { color: #fff; font-weight: 600; }
body.archive .gpd-loop-banner .gpd-bnpl-from strong { color: var(--lime-500); }
body.archive .gpd-loop-banner .cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--lime-500);
    color: #0A0D0F;
    border: 0;
    border-radius: var(--r-full);
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
body.archive .gpd-loop-banner .cta:hover { background: var(--lime-600); }
body.archive .gpd-loop-banner .cta svg { width: 15px; height: 15px; }

/* ── pagination (.gs-pager) ──────────────────────────────────────────────── */
body.archive .custom-pagination {
    /* legacy category.css hides this with display:none; gpd-archive.css loads
       after it (depends on 'category'), so re-show the GPD-styled pager. */
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 42px;
}
body.archive .custom-pagination .pagination-info { display: none; }
body.archive .custom-pagination .woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    margin: 0;
}
body.archive .custom-pagination .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
body.archive .custom-pagination .woocommerce-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    padding: 0 10px;
}
body.archive .custom-pagination .woocommerce-pagination .page-numbers.current {
    background: var(--lime-500);
    color: #0A0D0F;
    border-color: var(--lime-500);
}
body.archive .custom-pagination .woocommerce-pagination .page-numbers:hover:not(.current) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── FAQ accordion (.gs-accord) + SEO text (.fl-seo) ─────────────────────── */
body.archive.tax-product_cat .gpd-tools-faq { margin: 44px 0 0; }
body.archive.tax-product_cat .gpd-tools-faq h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 16px;
}
body.archive.tax-product_cat .gpd-tools-faq ul.gpd-tools-faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-glass-2);
}
body.archive.tax-product_cat .gpd-tools-faq ul li {
    margin: 0;
    border-bottom: 1px solid var(--line-2);
}
body.archive.tax-product_cat .gpd-tools-faq ul li:last-child { border-bottom: 0; }
body.archive.tax-product_cat .gpd-tools-faq > ul > li > h3,
body.archive.tax-product_cat .gpd-tools-faq ul li h3.gpd-tools-faq-question {
    padding: 17px 48px 17px 18px;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    position: relative;
    cursor: pointer;
}
body.archive.tax-product_cat .gpd-tools-faq > ul > li > h3:hover,
body.archive.tax-product_cat .gpd-tools-faq > ul > li > h3.open {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}
body.archive.tax-product_cat .gpd-tools-faq ul li h3::after {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--fg-secondary);
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform 0.2s;
}
body.archive.tax-product_cat .gpd-tools-faq > ul > li > h3.open::after {
    transform: translateY(-50%) rotate(180deg);
    background: #fff;
}
/* one CSS-driven reveal path for BOTH FAQ sources (droix_tools inline-hidden,
   ACF visible-by-default) */
body.archive .gpd-tools-faq .gpd-tools-faq-answer { display: none !important; }
body.archive .gpd-tools-faq .gpd-tools-faq-question.open + .gpd-tools-faq-answer { display: block !important; }
body.archive .gpd-tools-faq .gpd-tools-faq-answer {
    padding: 0 18px 17px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
}
body.archive .gpd-tools-faq .gpd-tools-faq-answer p { font-size: inherit; color: inherit; margin: 0 0 10px; }

/* SEO text block → .fl-seo (border-top, plain copy — replaces glass panel) */
body.tax-product_cat .archive.seo-info-acf,
body.post-type-archive-product .archive.seo-info-acf {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
body.archive .gpd-tools-seo-description-wrapper {
    border-top: 1px solid var(--line-1);
    padding: 34px 0 8px;
    margin-top: 34px;
    color: var(--fg-secondary);
}
body.archive.tax-product_cat .gpd-tools-seo-description-wrapper h2,
body.archive.tax-product_cat .gpd-tools-seo-description-wrapper h3,
body.archive.tax-product_cat .gpd-tools-seo-description-wrapper .faq_title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
    margin: 0 0 14px;
}
body.archive.tax-product_cat .gpd-tools-seo-description-short,
body.archive.tax-product_cat .gpd-tools-seo-description-full {
    font-size: 13.5px;
    line-height: 1.7;
    max-width: 88ch;
}
body.archive.tax-product_cat .gpd-tools-seo-description-wrapper strong { color: var(--fg-1); }
body.archive.tax-product_cat .gpd-tools-seo-description-read-more {
    color: var(--acc);
    font-size: 13.5px;
    font-weight: 600;
}
body.archive.tax-product_cat .gpd-tools-seo-description-read-more:hover { color: #fff; }

/* ── responsive: tablet rows (.fl-row.tab, 768–1200) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1200px) {
    /* The cards are full-width horizontal rows (image · details · price), like
       desktop. CommerceKit's `.columns-3` turns the outer list into a 2-up grid
       at this width, squeezing each row to ~380px so the details (1fr) column
       collapsed to 0 and the title wrapped one letter per line. Force a single
       column so each row spans the content width and the 3-track card fits. */
    body.archive .site-main ul.products {
        display: grid;
        grid-template-columns: 1fr;
    }
    body.archive .site-main ul.products li.product {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr) auto;
        gap: 0;
        align-items: stretch;
        padding: 0;
        min-height: 196px;
        margin-bottom: 14px;
        overflow: hidden;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper {
        width: auto;
        height: 100%;
        min-height: 196px;
        grid-column: 1;
        grid-row: 1;
    }
    body.archive .slider-item { height: 100%; }
    body.archive .site-main ul.products li.product .woocommerce-card__header {
        width: auto;
        grid-column: 2;
        grid-row: 1;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: center;
        min-width: 0;
    }
    body.archive .site-main ul.products .woocommerce-product-details__short-description ul { grid-template-columns: 1fr; }
    body.archive .site-main .cart-right-block {
        width: auto;
        grid-column: 3;
        grid-row: 1;
        min-width: 172px;
        max-width: 220px;
        margin-top: 0;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        border-left: 1px solid var(--line-2);
    }
    body.archive .site-main .cart-right-block .compare-wishlist-container { position: static; }
    body.archive .gpd-cat-hero img.gpd-cat-hero-img { width: 220px; }
}

/* ── responsive: mobile rows (.fl-row.mob, ≤767) ─────────────────────────── */
@media (max-width: 767px) {
    body.archive .site-main ul.products li.product {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0;
        padding: 0;
        min-height: 128px;
        margin-bottom: 12px;
        overflow: hidden;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper {
        /* width:auto let the height-scaled image grow to ~174px and bleed out of
           the 128px column over the title text. Pin to the column + clip. */
        width: 128px;
        height: 100%;
        min-height: 128px;
        grid-column: 1;
        grid-row: 1 / span 2;
        overflow: hidden;
    }
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper img,
    body.archive .site-main ul.products li.product .woocommerce-image__wrapper .slider-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    body.archive .slider-item { height: 100%; }
    body.archive .site-main ul.products li.product .woocommerce-card__header {
        width: auto;
        grid-column: 2;
        grid-row: 1;
        padding: 12px 14px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        min-width: 0;
    }
    body.archive .site-main ul.products li.product .woocommerce-loop-product__title {
        font-size: 14.5px;
        text-align: left;
    }
    /* keep mobile rows compact: spec ticks stay hidden (parent rule above) */
    body.archive .site-main ul.products .woocommerce-product-details__short-description { display: none; }
    /* buy block becomes the pricebar under the mid column */
    body.archive .site-main .cart-right-block {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        margin: 0;
        padding: 6px 14px 12px;
        border-left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    body.archive .site-main .cart-right-block .price-block { min-height: 0; margin: 0; flex: 1; min-width: 0; }
    body.archive .site-main .cart-right-block .price-block .price .sale-price,
    body.archive .site-main .cart-right-block .gpd-card-price-values .sale-price { font-size: 17px; }
    body.archive .site-main .cart-right-block .gpd-card-price-starting-at .gpd-card-price-prefix,
    body.archive .site-main .cart-right-block .price .woocommerce-price-suffix,
    body.archive .site-main .cart-right-block .stock,
    body.archive .site-main .cart-right-block .gpd-card-tools,
    body.archive .site-main .cart-right-block .free-protector { display: none !important; }
    /* icon-only round CTA right-aligned */
    body.archive .site-main .cart-right-block .buttons-block { margin: 0; flex: 0 0 auto; }
    body.archive .site-main .cart-right-block .buttons-block .button,
    body.archive .site-main .cart-right-block .buttons-block a.btn-green {
        width: 40px;
        min-height: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        gap: 0;
    }
    body.archive .site-main .cart-right-block .buttons-block a.btn-green svg { width: 18px; height: 18px; }
    body.archive .site-main .cart-right-block .buttons-block .button.add_to_cart_button::after {
        content: '';
        width: 18px;
        height: 18px;
        background: #0A0D0F;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 18px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 18px no-repeat;
    }
    /* hero stacks */
    body.archive .gpd-cat-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 8px;
    }
    body.archive .gpd-cat-hero h1.woocommerce-products-header__title { font-size: 26px; margin: 8px 0; }
    body.archive .gpd-cat-hero .gpd-cat-desc { font-size: 13px; }
    body.archive .gpd-cat-hero img.gpd-cat-hero-img {
        width: 220px;
        margin: 6px auto -4px;
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
    }
    /* BNPL band stacks */
    body.archive .site-main ul.products li.gpd-loop-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }
    body.archive .gpd-loop-banner .logos { margin-left: 0; }
    body.archive .gpd-loop-banner .cta { align-self: stretch; justify-content: center; }
}

/* ==========================================================================
   Cart parity additions — design sync vs the dedicated /cart/ spec (gcp-/dxc-).
   Heading, coupon-applied banner, "Order summary" + sales-tax row, trust
   strip, and free-gift badge. Values lifted from the design CSS (gcp.css /
   dxc.css); lime = conversion/saving, teal = info, fg-tertiary = struck.
   ========================================================================== */

/* page heading: "Your cart · N items" + Continue shopping */
body.woocommerce-cart .gpd-cart-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 8px 0 22px;
}
body.woocommerce-cart .gpd-cart-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--fg-0);
    line-height: 1.15;
}
body.woocommerce-cart .gpd-cart-title .gpd-cart-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-secondary);
    margin-left: 6px;
}
body.woocommerce-cart .gpd-cart-continue {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lime-500);
    text-decoration: none;
}
body.woocommerce-cart .gpd-cart-continue:hover { text-decoration: underline; color: var(--lime-500); }
body.woocommerce-cart .gpd-cart-continue svg { width: 16px; height: 16px; }

/* coupon-applied banner (top of cart) */
body.woocommerce-cart .gpd-cart-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    margin: 0 0 16px;
    border-radius: var(--r-xl);
    font-size: 14px;
    color: var(--fg-1);
    background: rgba(211, 255, 95, 0.10);
    border: 1px solid rgba(211, 255, 95, 0.22);
}
body.woocommerce-cart .gpd-cart-banner svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--lime-500); }
body.woocommerce-cart .gpd-cart-banner strong { color: var(--lime-500); font-weight: 800; }
body.woocommerce-cart .gpd-cart-banner .amount,
body.woocommerce-cart .gpd-cart-banner bdi { color: var(--lime-500); }

/* order summary header count + sales-tax row */
body.woocommerce-cart .your-order-title { align-items: baseline; }
body.woocommerce-cart .order-summary-count { font-size: 13px; font-weight: 600; color: var(--fg-secondary); }
body.woocommerce-cart .order-summary--tax .shipping-label,
body.woocommerce-cart .order-summary--tax .gpd-muted { color: var(--fg-secondary); }
body.woocommerce-cart .order-summary--tax .gpd-muted { font-size: 13px; }
body.woocommerce-cart .cart-collaterals .shipping-value .gpd-free { color: var(--lime-500); font-weight: 700; }

/* trust strip under the express wallets */
body.woocommerce-cart .gpd-cart-trust {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 2px;
    border-top: 1px solid var(--line-2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
}
body.woocommerce-cart .gpd-cart-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--fg-secondary);
}
body.woocommerce-cart .gpd-cart-trust svg { width: 14px; height: 14px; color: var(--teal-500); }

/* free-gift badge + FREE / struck price on line items */
body.woocommerce-cart .gpd-gift-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    height: 20px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(211, 255, 95, 0.10);
    color: var(--lime-500);
}
body.woocommerce-cart .gpd-gift-badge svg { width: 13px; height: 13px; }
body.woocommerce-cart .product-price .gpd-price-free { color: var(--lime-500); font-weight: 800; }
body.woocommerce-cart .product-price .gpd-was {
    font-size: 12px;
    color: var(--fg-tertiary);
    text-decoration: line-through;
    margin-left: 6px;
}

@media (max-width: 768px) {
    body.woocommerce-cart .gpd-cart-title { font-size: 24px; }
    body.woocommerce-cart .gpd-cart-head { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
    body.woocommerce-cart .gpd-cart-continue { margin-left: 0; width: 100%; }
}