/* ==========================================================================
   GPDStore — Phase 3: product-page dark reskin (Product Page v2 design)
   --------------------------------------------------------------------------
   Overlay loaded AFTER single-product.css (handle: gpd-pdp). Geometry, grid
   tracks and JS-coupled measurements stay in single-product.css untouched —
   this file re-skins surfaces, borders, type and accent colours to the GPD
   dark design with the approved scheme baked in gpd-tokens.css:
     informational accent  --acc  = teal
     selected option       --sel  = teal (+ --sel-bg tint)
     conversion (price/CTA)        = lime  (--lime-500)

   Design sources:
     …handoff/project/theme-pdp.css       (.gs-pdp / .gs-gal / .gs-bb / .gs-cfg)
     …handoff/project/theme-pdp-alt.css   (final recolor overrides)
     …handoff/project/Stock Status Styles.html (pill family)
   ========================================================================== */

/* ── canvas ──────────────────────────────────────────────────────────────── */

body.single-product .shoptimizer-archive,
body.single-product #content.site-content {
    background: var(--bg-2);
    color: var(--fg-1);
}
body.single-product .product-details-wrapper {
    background: transparent;
}

/* top utility bar: full-bleed background on PDP too — single-product.css
   clamps .topbar-wrapper to --gpd-pdp-site-width with !important, which
   leaves body-bg stripes beside the band (design .fl-util spans the
   viewport; only the inner .col-full stays in the container) */
@media (min-width: 1025px) {
    body.single-product .col-full.topbar-wrapper {
        max-width: none !important;
        padding: 0 !important;
    }
}

/* breadcrumbs on dark (design .gs-crumb: 13px, fg-tertiary, separators at
   50% opacity, current page fg-1 — sits straight on the page background;
   the droix base paints .archive-header white, kill that band) */
body.single-product .archive-header {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
}
body.single-product .rank-math-breadcrumb,
body.single-product .rank-math-breadcrumb p,
body.single-product .rank-math-breadcrumb a,
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb a {
    color: var(--fg-tertiary);
    font-size: 13px;
}
body.single-product .rank-math-breadcrumb a:hover,
body.single-product .woocommerce-breadcrumb a:hover {
    color: var(--fg-1);
}
body.single-product .rank-math-breadcrumb .last {
    color: var(--fg-1);
    font-weight: 400;
}
body.single-product .rank-math-breadcrumb .separator::after {
    background-color: var(--fg-tertiary);
    opacity: .5;
}
/* style.css draws its own ::before glyph on the separator — one chevron only */
body.single-product .rank-math-breadcrumb .separator::before {
    content: none;
}
/* first crumb: the droix hexagon logo (content:url svg in style.css) becomes
   the design's house glyph + visible "Home" label */
body.single-product .rank-math-breadcrumb p {
    gap: 8px;
}
body.single-product .rank-math-breadcrumb p a:first-of-type {
    font-size: 13px;
    visibility: visible;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.single-product .rank-math-breadcrumb p a:first-of-type::before {
    content: "";
    display: inline-block !important;
    width: 14px;
    height: 14px;
    visibility: visible;
    background: currentColor;
    -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='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%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='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── title block (.gs-pt-*) ──────────────────────────────────────────────── */

body.single-product h1.product_title {
    color: var(--fg-0);
    font-weight: 800;
    letter-spacing: -0.9px;
}
/* rating row: stars use the review-plugin orange, counts/Q&A the plugin blue */
body.single-product .gpd-revix-product-badge,
body.single-product .revix-badge,
body.single-product .revix-stars {
    color: var(--star-500);
}
body.single-product .gpd-revix-product-badge a,
body.single-product .revix-badge a,
body.single-product .revix-summary-link {
    color: var(--fg-secondary);
}
body.single-product .gpd-revix-product-badge a:hover { color: #fff; }

/* live-viewers row → teal informational accent. Pulsing dot (design + droix
   parity): teal halo + blinking core, recoloured from the droix magenta
   keyframes (single-product.css:4642 gpd-watch-halo uses magenta). */
@keyframes gpd-watch-halo-teal {
    0%   { box-shadow: 0 0 0 0 rgba(35, 221, 190, .28); }
    70%  { box-shadow: 0 0 0 8px rgba(35, 221, 190, 0); }
    100% { box-shadow: 0 0 0 0 rgba(35, 221, 190, 0); }
}
body.single-product #right-summary-section .entry-summary #watching-right-now.gpd-watching,
body.single-product .gpd-watching {
    color: var(--acc);
    font-weight: 600;
}
/* symmetric vertical rhythm above (price); below, a hairline separator divides the
   price block from the variation selectors (design handoff) with a tighter gap than the
   old margin-bottom:18px. border spans the buy-box content width (counter is width:100%). */
body.single-product #right-summary-section .entry-summary #watching-right-now.gpd-watching {
    margin-top: 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-1);
}
body.single-product #right-summary-section #watching-right-now .gpd-watch-dot {
    background: var(--acc-soft);
    box-shadow: none;
    animation: gpd-watch-halo-teal 2s infinite;
}
body.single-product #right-summary-section #watching-right-now .gpd-watch-dot::after {
    background: var(--acc);
    animation: gpd-watch-blink 1.8s ease-in-out infinite;
}
body.single-product #right-summary-section #watching-right-now .gpd-watch-text {
    color: var(--fg-secondary);
}
body.single-product #right-summary-section #watching-right-now .gpd-watch-count {
    color: #fff;
    font-weight: 700;
}

/* ── gallery (.gs-gal-*) ─────────────────────────────────────────────────── */

body.single-product #commercegurus-pdp-gallery .swiper,
body.single-product #commercegurus-pdp-gallery .cg-main-swiper,
body.single-product .commercekit-pdp-gallery .swiper-container {
    border-radius: var(--r-xl);
    border: 1px solid var(--line-1);
    background:
        radial-gradient(120% 120% at 50% 12%, rgba(35, 221, 190, 0.12), transparent 55%),
        linear-gradient(180deg, #10161a, #0a0e11);
    overflow: hidden;
}
body.single-product #commercegurus-pdp-gallery .swiper-slide {
    background: transparent;
}
body.single-product #commercegurus-pdp-gallery .swiper-slide img {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.6));
}
/* gallery + thumbnail nav arrows → dark glass circles. The previous
   rgba(10,13,15,.7) fill + faint --line-1 border blended into the dark gallery
   so the arrows were invisible (esp. on the thumbnail strip, #89). Use a more
   opaque fill + a clearly visible border. */
body.single-product #commercegurus-pdp-gallery .swiper-button-next,
body.single-product #commercegurus-pdp-gallery .swiper-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(18, 22, 28, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}
body.single-product #commercegurus-pdp-gallery .swiper-button-next:hover,
body.single-product #commercegurus-pdp-gallery .swiper-button-prev:hover {
    background: rgba(28, 34, 42, 0.96);
    border-color: rgba(255, 255, 255, 0.35);
}
/* thumbs: 78px tiles (design .gs-gal-thumb — droix base forces 110px
   !important), 2px border, selected = --sel (teal) */
body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide,
body.single-product #commercegurus-pdp-gallery .swiper-thumbs .swiper-slide,
body.single-product .cg-thumb-swiper .swiper-wrapper .swiper-slide {
    width: 78px !important;
    height: 78px;
    border-radius: var(--r-md);
    border: 2px solid var(--line-1);
    background: #0c1014;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease);
}
body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide-thumb-active,
body.single-product #commercegurus-pdp-gallery .swiper-thumbs .swiper-slide-thumb-active {
    border-color: var(--sel);
    /* droix base paints border-bottom 3px #BB3DA1 !important (magenta peek) */
    border-bottom: 2px solid var(--sel) !important;
}
/* compare / wishlist floating buttons on the gallery */
body.single-product .gallery-compare-btn,
body.single-product .gallery-wishlist-btn,
body.single-product #commercegurus-pdp-gallery .cg-lightbox-btn {
    background: rgba(10, 13, 15, 0.7);
    border: 1px solid var(--line-1);
    color: #fff;
}

/* ── buy box panel (.gs-buybox) ──────────────────────────────────────────── */

body.single-product #right-summary-section,
body.single-product #right-summary-section .summary.entry-summary {
    background: var(--surface-elev);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    color: var(--fg-1);
}
/* avoid double border when both wrappers match */
body.single-product #right-summary-section .summary.entry-summary {
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* price block: lime conversion colour, quiet suffix, orange save */
body.single-product #right-summary-section .price,
body.single-product #right-summary-section .price .woocommerce-Price-amount {
    color: var(--lime-500);
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
body.single-product #right-summary-section .price .woocommerce-price-suffix {
    color: var(--fg-tertiary);
    font-weight: 400;
    letter-spacing: 0;
}
body.single-product #right-summary-section .price .gpd-was,
body.single-product #right-summary-section .price del,
body.single-product #right-summary-section .price del .woocommerce-Price-amount {
    color: var(--fg-tertiary);
    font-weight: 400;
    letter-spacing: 0;
}
body.single-product #right-summary-section .gpd-save {
    color: var(--orange-500);
    background: transparent;
    font-weight: 700;
}

/* dividers inside the buy box */
body.single-product #right-summary-section hr,
body.single-product #right-summary-section .summary-divider {
    border-color: var(--line-2);
    background: var(--line-2);
}

/* selection labels (the "Condition:" / chosen-value rows) */
body.single-product #right-summary-section table.variations label,
body.single-product #right-summary-section table.variations .label,
body.single-product #right-summary-section .cgkit-chosen-attribute {
    color: var(--fg-1);
}
body.single-product #right-summary-section table.variations th { color: var(--fg-1); }

/* ── stock pills (Stock Status Styles family, data-accent scheme) ────────── */
/* In Stock teal tint (lime is reserved for price/CTA) · Pre-order/ETA teal ·
   Backorder (no date) orange · Out of Stock grey */

body.single-product .gpd-stock-pill-row .stock,
body.single-product #right-summary-section .stock {
    color: var(--teal-500);
    background: rgba(35, 221, 190, 0.10);
    border: 1px solid rgba(35, 221, 190, 0.25);
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
}
body.single-product .gpd-stock-pill-row .stock.available-on-backorder,
body.single-product #right-summary-section .stock.available-on-backorder {
    color: var(--orange-500);
    background: rgba(255, 107, 53, 0.10);
    border-color: rgba(255, 107, 53, 0.28);
}
body.single-product .gpd-stock-pill-row .stock.on-backorder-eta,
body.single-product #right-summary-section .stock.on-backorder-eta {
    color: var(--teal-500);
    background: rgba(35, 221, 190, 0.10);
    border-color: rgba(35, 221, 190, 0.25);
}
body.single-product .gpd-stock-pill-row .stock.out-of-stock,
body.single-product #right-summary-section .stock.out-of-stock {
    color: var(--fg-secondary);
    background: var(--surface-glass);
    border-color: var(--line-1);
}

/* ── segmented buttons: condition / processor (cgkit buttons) ────────────── */

body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-button button {
    background: var(--surface-glass);
    border: 1.5px solid var(--line-1);
    border-radius: var(--r-md);
    color: #fff;
    font-weight: 700;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-button button:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: var(--surface-glass);
}
body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
    border-color: var(--sel);
    background: var(--sel-bg);
    color: #fff;
    box-shadow: none;
}
body.single-product #right-summary-section .cgkit-attribute-swatch button.cgkit-disabled,
body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-disabled button {
    opacity: 0.42;
}
/* discount note under a segbtn — quiet text per alt scheme */
body.single-product #right-summary-section .cgkit-attribute-swatch .gpd-seg-note {
    color: var(--fg-secondary);
    font-weight: 600;
}

/* colour swatch circles */
body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-color button {
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--line-1);
    border-radius: 50%;
}
body.single-product #right-summary-section .cgkit-attribute-swatch.cgkit-color button.cgkit-swatch-selected {
    border-color: var(--lime-500); /* design handoff: colour swatch selected ring is lime */
    box-shadow: 0 0 0 1px var(--line-1);
}

/* Sticky "Choose your options" sheet: the picker is ONE control with the buy
   box (AGENTS.md), so its pill swatches must use the same dark/teal treatment
   — not the light-theme white the base single-product.css ships. Overrides
   single-product.css:4415+ (this overlay loads after it). */
body.single-product .gpd-pick-body .cgkit-attribute-swatch.cgkit-button button {
    background: var(--surface-glass);
    border: 1.5px solid var(--line-1);
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
body.single-product .gpd-pick-body .cgkit-attribute-swatch.cgkit-button button:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: var(--surface-glass);
    color: #fff;
}
body.single-product .gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
    background: var(--sel-bg);
    border-color: var(--sel);
    color: #fff;
}
body.single-product .gpd-pick-body table.variations td.label { color: #fff; }
body.single-product .gpd-pick-body .gpd-cfg-note {
    background: var(--surface-glass);
    color: var(--fg-secondary);
}
body.single-product .gpd-pick-body .gpd-cfg-note span { color: #fff; }
/* obtainable-but-cgkit-disabled pills stay dark/selectable, not light */
body.single-product .gpd-pick-body .cgkit-attribute-swatch > button.cgkit-disabled.gpd-available,
body.single-product .gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.gpd-available:not(.gpd-swatch-preorder),
body.single-product .gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.gpd-available.gpd-swatch-preorder {
    background: var(--surface-glass);
    border-color: var(--line-1);
    color: #fff;
}

/* ── config cards (.gpd-cfg2 → .gs-cfgcard treatment) ────────────────────── */

body.single-product #right-summary-section button.gpd-cfg2,
.gpd-pick-body button.gpd-cfg2 {
    background: var(--surface-glass);
    border: 1.5px solid var(--line-1);
    border-radius: var(--r-md);
    color: var(--fg-1);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
body.single-product #right-summary-section button.gpd-cfg2:hover,
.gpd-pick-body button.gpd-cfg2:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: var(--surface-glass);
}
body.single-product #right-summary-section button.gpd-cfg2.cgkit-swatch-selected,
.gpd-pick-body button.gpd-cfg2.cgkit-swatch-selected {
    border-color: var(--sel);
    background: var(--sel-bg);
    box-shadow: none;
}
body.single-product button.gpd-cfg2.cgkit-disabled,
.gpd-pick-body button.gpd-cfg2.cgkit-disabled {
    opacity: 0.42;
}
.gpd-cfg2-head {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.gpd-cfg2-sub { color: var(--fg-secondary); }
/* design colour split per the APPROVED teal skin (theme-pdp-alt.css:82-85,
   user-confirmed): price deltas are QUIET plain text (--fg-secondary), only
   "Included" carries the teal selection colour, "Coming soon" tertiary.
   Scoped buy box + picker sheet to outgun the droix base literals
   (#666 / #B0CB1F / #AAA at single-product.css:4032-4099). */
body.single-product #right-summary-section .gpd-cfg2 .gpd-cfg2-delta,
.gpd-pick-body .gpd-cfg2 .gpd-cfg2-delta {
    color: var(--fg-secondary);
    font-weight: 700;
}
body.single-product #right-summary-section .gpd-cfg2 .gpd-cfg2-delta.gpd-inc,
body.single-product #right-summary-section .gpd-cfg2.cgkit-swatch-selected .gpd-cfg2-delta,
.gpd-pick-body .gpd-cfg2 .gpd-cfg2-delta.gpd-inc,
.gpd-pick-body .gpd-cfg2.cgkit-swatch-selected .gpd-cfg2-delta {
    color: var(--sel);
}
body.single-product #right-summary-section .gpd-cfg2 .gpd-cfg2-delta.gpd-coming,
body.single-product #right-summary-section .cgkit-disabled .gpd-cfg2 .gpd-cfg2-delta,
body.single-product #right-summary-section .cgkit-disabled button.gpd-cfg2.gpd-available .gpd-cfg2-delta,
.gpd-pick-body .gpd-cfg2 .gpd-cfg2-delta.gpd-coming,
.gpd-pick-body .cgkit-disabled .gpd-cfg2 .gpd-cfg2-delta,
.gpd-pick-body .cgkit-disabled button.gpd-cfg2.gpd-available .gpd-cfg2-delta {
    color: var(--fg-tertiary);
}
/* preorder badge on a card → teal reserve tag */
.gpd-cfg2-badge.gpd-preorder {
    background: var(--acc);
    color: var(--acc-ink);
    border: 0;
    font-weight: 800;
}

/* config note ("All models: …") → teal soft banner
   (matches the droix selectors at single-product.css:3971 / :4395) */
body.single-product .gpd-cfg-note,
body.single-product #right-summary-section .variations td.value .gpd-cfg-note,
.gpd-pick-body .gpd-cfg-note {
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    border-radius: var(--r-sm);
    color: var(--fg-secondary);
}
body.single-product #right-summary-section .variations td.value .gpd-cfg-note span,
.gpd-pick-body .gpd-cfg-note span {
    color: var(--fg-1);
}
body.single-product .gpd-cfg-note::before,
body.single-product .gpd-cfg-note svg,
body.single-product .gpd-cfg-note i { color: var(--acc); }

/* vertical rhythm: design shows ~18px between the last option section and
   the payment-icon row — the droix port stacked invisible helper margins
   (p.auto-variation 14px + single_variation 6px + pay 18px ≈ 57px gap,
   user-reported as "big gap between payment icons and variations") */
body.single-product #right-summary-section p.auto-variation {
    margin: 0;
}
body.single-product #right-summary-section .single_variation_wrap .woocommerce-variation.single_variation {
    margin-bottom: 0;
}
body.single-product #right-summary-section .payment-icons {
    margin-top: 10px;
}

/* ── quantity + add to cart row ──────────────────────────────────────────── */

body.single-product form.cart .quantity,
body.single-product form.cart .quantity input.qty {
    background: var(--surface-glass);
    border-color: var(--line-1);
    color: #fff;
    border-radius: var(--r-md);
}
body.single-product form.cart .quantity .plus,
body.single-product form.cart .quantity .minus {
    background: transparent;
    color: var(--fg-1);
    border-color: var(--line-1);
}
body.single-product form.cart .quantity .plus:hover,
body.single-product form.cart .quantity .minus:hover { color: #fff; background: rgba(255,255,255,.07); }

/* CTA — conversion lime (.gs-bb-cta): radius 10 (--r-md), 16px/800 Inter,
   black ink + black icon, NO resting glow (hover only). The droix base sets
   radius 16px + a permanent lime shadow at ≥1301 with an ID-strong selector
   (single-product.css:1723/1748) — mirror it to win. */
body.single-product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button.button,
body.single-product #right-summary-section form button.single_add_to_cart_button,
.gpd-pick-foot .gpd-pick-add {
    background: var(--lime-500) !important; /* beats droix gradient + hover rules in single-product.css */
    color: #0A0D0F !important;
    border: 0;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 16px;
    box-shadow: none;
    transition: box-shadow var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease-out);
}
@media (min-width: 1301px) {
    body.single-product #right-summary-section form button.single_add_to_cart_button {
        height: 54px; /* design .gs-bb-cta padding 17px ≈ 54px, not the droix 60px */
        font-size: 16px;
        font-weight: 800;
        box-shadow: none;
    }
}
body.single-product .single_add_to_cart_button:hover,
body.single-product #right-summary-section form button.single_add_to_cart_button:hover,
.gpd-pick-foot .gpd-pick-add:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
body.single-product .single_add_to_cart_button:active { background: var(--lime-600) !important; transform: translateY(0); }
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button:disabled {
    background: var(--fg-disabled) !important;
    color: var(--fg-secondary) !important;
    box-shadow: none;
}

/* ── gift strip (.gpd-giftbox → design .gs-gift, theme-pdp.css:51-64 +
   theme-pdp-alt.css:52-56) — under the approved teal accent skin the
   container/icon/eyebrow follow --acc (teal soft wash, teal icon tile,
   teal eyebrow); only the FREE badge stays lime (conversion colour).
   Dark item cards with WHITE 50px image tiles showing the real (colored)
   Woo product images. Consolidated 2026-06-11 PDP 1:1 pass. */

body.single-product .gpd-giftbox {
    background: var(--acc-soft, rgba(35, 221, 190, .09));
    border: 1px solid var(--acc-line, rgba(35, 221, 190, .28));
    border-radius: var(--r-lg);
    padding: 13px;
    color: var(--fg-1);
}
body.single-product .gpd-giftbox .gpd-giftbox-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
}
body.single-product .gpd-giftbox .gpd-giftstrip-badge {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--acc, var(--teal-500));
    color: var(--acc-ink, #06160F);
    box-shadow: none;
}
body.single-product .gpd-giftbox .gpd-giftstrip-badge svg,
body.single-product .gpd-giftbox .gpd-giftstrip-badge svg path {
    fill: currentColor;
    stroke: none;
}
body.single-product .gpd-giftbox .gpd-giftbox-eyebrow {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--acc, var(--teal-500));
}
body.single-product .gpd-giftbox .gpd-giftlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
body.single-product .gpd-giftbox .gpd-giftlist.single {
    grid-template-columns: 1fr;
}
body.single-product .gpd-giftbox .gpd-giftcard {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px 8px 8px;
    background: rgba(10, 13, 15, 0.45);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    color: var(--fg-1);
}
body.single-product .gpd-giftbox .gpd-giftcard-img {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff; /* white tile, colored product image (user decision) */
    border: 0;
    overflow: hidden;
}
body.single-product .gpd-giftbox .gpd-giftcard-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}
body.single-product .gpd-giftbox .gpd-giftcard-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.single-product .gpd-giftbox .gpd-giftcard-txt {
    min-width: 0;
}
body.single-product .gpd-giftbox .gpd-giftcard-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
body.single-product .gpd-giftbox .gpd-giftcard-price s,
body.single-product .gpd-giftbox del {
    font-size: 12px;
    color: var(--fg-tertiary);
}
body.single-product .gpd-giftbox .gpd-giftcard-price strong,
body.single-product .gpd-giftbox b {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lime-500);
}

/* ── BNPL (plugin DOM — GPD-PLUGIN-BRIDGE: keep selectors, restyle only) ───
   Trigger card per design .gpd-bnpl-trigger (theme-pdp.css:386-398, alt:97-98:
   icon tile quiet glass + --acc, hover --acc-line/--acc-soft); badges become
   small inline chips instead of the plugin's 38px grid tiles. */

body.single-product .dx-bnpl-card {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    color: var(--fg-1);
    padding: 16px;
    gap: 14px;
    box-shadow: none;
    transition: border-color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
}
body.single-product .dx-bnpl-card:hover,
body.single-product .dx-bnpl-card:focus-visible {
    border-color: var(--acc-line);
    background: var(--acc-soft);
    box-shadow: none;
}
body.single-product .dx-bnpl-card a { color: var(--acc); }
body.single-product .dx-bnpl-card .dx-bnpl-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--acc);
}
body.single-product .dx-bnpl-card .dx-bnpl-card__title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
body.single-product .dx-bnpl-card .dx-bnpl-card__headline {
    color: var(--fg-secondary);
    font-size: 12.5px;
    margin: 2px 0 0;
}
body.single-product .dx-bnpl-card .dx-bnpl-card__headline strong { color: #fff; }
body.single-product .dx-bnpl-card .dx-bnpl-card__chevron { color: var(--fg-tertiary); }
body.single-product .dx-bnpl-card:hover .dx-bnpl-card__chevron { color: var(--acc); }
/* badges: small content-width chips in a row (.gpd-bnpl-trigger-logos) */
body.single-product .dx-bnpl-card .dx-bnpl-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
body.single-product .dx-bnpl-card .dx-bnpl-card__badges .dx-bnpl-badge--sm {
    width: auto;
    height: 20px;
    padding: 3px 7px;
    border-radius: 4px;
}
body.single-product .dx-bnpl-card .dx-bnpl-card__badges .dx-bnpl-badge__logo {
    height: 12px !important; /* beats the plugin's per-brand --dx-logo-h sizing */
}

/* BNPL provider modal on dark (design .gpd-bnpl-modal, theme-pdp.css:442-456).
   The GPD modal shows the plugin's STATIC plan summaries (the design rows:
   bold plan line + grey sub + teal "Learn more ›"), not the providers' native
   widgets — those hydrate with dark-on-dark artwork that is illegible here, so
   they stay moved-in but hidden (the closed-modal hydration contract in the
   plugin is untouched; we only override its `.has-native` summary swap). */
.dx-bnpl-modal .dx-bnpl-modal__backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }
.dx-bnpl-modal .dx-bnpl-modal__dialog {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    color: var(--fg-1);
}
.dx-bnpl-modal .dx-bnpl-modal__close {
    left: auto;
    right: 20px;          /* design: close sits top-RIGHT */
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg-secondary);
    border-radius: 50%;
}
.dx-bnpl-modal .dx-bnpl-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.dx-bnpl-modal .dx-bnpl-modal__eyebrow {
    color: var(--acc);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.dx-bnpl-modal .dx-bnpl-modal__heading { color: #fff; font-weight: 800; }
.dx-bnpl-modal .dx-bnpl-modal__total { color: var(--fg-secondary); }
.dx-bnpl-modal .dx-bnpl-modal__total strong,
.dx-bnpl-modal .dx-bnpl-modal__total b { color: #fff; }

/* rows: compact brand chip · plan summary · Learn more (design gpd-bnpl.jsx) */
.dx-bnpl-modal .dx-bnpl-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border-color: var(--line-2);
}
.dx-bnpl-modal .dx-bnpl-row .dx-bnpl-badge {
    width: auto;
    min-width: 72px;
    height: 32px;
    padding: 0 13px;
    border-radius: 8px;
    --dx-logo-h: 15px;
}
/* static summary stays even after the native widget hydrates (.has-native) */
.dx-bnpl-modal .dx-bnpl-row.has-native .dx-bnpl-row__summary { display: grid; }
#dx-bnpl-modal .dx-bnpl-row__native { display: none !important; }
.dx-bnpl-modal .dx-bnpl-row__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
}
.dx-bnpl-modal .dx-bnpl-row__summary-main {
    grid-column: 1;
    color: var(--fg-1);
    font-size: 15px;
    font-weight: 700;
}
.dx-bnpl-modal .dx-bnpl-row__summary-main b,
.dx-bnpl-modal .dx-bnpl-row__summary-main strong { color: #fff; }
.dx-bnpl-modal .dx-bnpl-row__summary-sub {
    grid-column: 1;
    color: var(--fg-tertiary);
    font-size: 13px;
}
.dx-bnpl-modal .dx-bnpl-row__link {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    color: var(--acc);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.dx-bnpl-modal .dx-bnpl-row__link::after { content: " ›"; }
.dx-bnpl-modal .dx-bnpl-row__link:hover { color: #fff; }
.dx-bnpl-modal .dx-bnpl-modal__disclaimer { color: var(--fg-tertiary); }
@media (max-width: 600px) {
    .dx-bnpl-modal .dx-bnpl-row__summary { grid-template-columns: minmax(0, 1fr); }
    .dx-bnpl-modal .dx-bnpl-row__link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}

/* Trustpilot widget styling intentionally NOT overridden — use the droix-trustpilot
   plugin's own light/dark theming (Widget Theme = Dark). See the micro_combo note
   in the buy-box section below. */

/* ── accordions (.gpd-accordions → .gs-accord) ───────────────────────────── */

body.single-product .gpd-accordions,
body.single-product #middle-summary-section .gpd-accordions {
    background: var(--surface-glass-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    overflow: hidden;
}
body.single-product .gpd-accordions details,
body.single-product #middle-summary-section .gpd-accordions details,
body.single-product .gpd-accordions .gpd-accordion {
    border-bottom: 1px solid var(--line-2);
    background: transparent;
}
body.single-product .gpd-accordions details:last-child { border-bottom: 0; }
body.single-product .gpd-accordions summary {
    color: #fff;
    font-weight: 600;
    background: transparent;
}
body.single-product .gpd-accordions summary:hover { background: rgba(255, 255, 255, 0.04); }
body.single-product .gpd-accordions details[open] summary { color: #fff; }
body.single-product .gpd-accordions details > div,
body.single-product .gpd-accordions .accordion-content {
    color: var(--fg-secondary);
    background: transparent;
}
/* body copy: the droix base sets #484848 / strong #0B0B0B with
   #middle-summary-section ID specificity — invisible on the dark canvas
   (user-reported). Match the ID and lift everything to readable greys. */
body.single-product #middle-summary-section .gpd-accordions .cg-accordion-item,
body.single-product #middle-summary-section .gpd-accordions details > *:not(summary),
body.single-product #middle-summary-section .gpd-accordions details p,
body.single-product #middle-summary-section .gpd-accordions details li {
    color: var(--fg-1);
}
body.single-product #middle-summary-section .cg-accordion-item strong,
body.single-product #middle-summary-section .gpd-accordions details strong,
body.single-product #middle-summary-section .gpd-accordions details b {
    color: var(--fg-0);
    font-weight: 600;
}
body.single-product .gpd-accordions a { color: var(--acc); }

/* ── tabs + long description ─────────────────────────────────────────────── */

body.single-product .woocommerce-tabs {
    background: transparent;
    color: var(--fg-1);
}
body.single-product .woocommerce-tabs ul.tabs li a,
body.single-product .commercekit-atc-sticky-tabs a {
    color: var(--fg-secondary);
    font-weight: 600;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #fff;
    border-bottom-color: var(--sel);
}
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-Tabs-panel {
    background: transparent;
    color: var(--fg-1);
}
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 { color: var(--fg-0); }
body.single-product .woocommerce-Tabs-panel a { color: var(--acc); }
body.single-product .woocommerce-Tabs-panel table,
body.single-product .woocommerce-Tabs-panel table th,
body.single-product .woocommerce-Tabs-panel table td {
    border-color: var(--line-2);
    color: var(--fg-1);
}
body.single-product .woocommerce-Tabs-panel table th {
    background: var(--surface-glass);
    color: #fff;
}

/* sticky tabs bar (commercekit): design .gs-tabbar sits transparent on the
   page canvas with a single hairline — the near-black blur strip read as a
   "black band" against --bg-2 (user-reported). Page-bg fill keeps content
   covered while the bar is stuck without standing out. */
body.single-product .commercekit-atc-sticky-tabs {
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-1);
}

/* ── sticky add-to-cart bar + picker sheet ───────────────────────────────── */

/* "Elevated glass" — the approved default .gs-stickybar surface
   (Sticky Add to Cart.html / sticky-cases-app.jsx: lighter graphite glass a
   step above the page, 17% hairline, top inner highlight, radius 18). The
   wrapper is just the fixed positioning shell. */
body.single-product .custom-product-summary-wrapper {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    color: var(--fg-1);
}
body.single-product .custom-product-summary,
body.single-product .custom-product-summary-wrapper.show .custom-product-summary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)),
        rgba(30, 37, 45, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 18px;
    color: var(--fg-1);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .55),
        0 2px 10px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* CTA inside the bar: design radius 10 (--r-md), not the droix 14px pill */
body.single-product .custom-product-summary .add-to-cart-button .single_add_to_cart_button {
    border-radius: var(--r-md);
}
/* payment icons ride between the chip and the price on desktop (design
   Sticky Add to Cart.html, desktop case — an earlier pass hid them with
   !important at single-product.css:4743; tablet/mobile keep them hidden
   per the .gs-tabframe / mobile variants) */
@media (min-width: 1301px) {
    /* rebalance the bar grid: the droix template (base :4839, !important on
       .wrapper.show) fixes the chip track at up-to-520px with a 1fr spacer —
       too narrow for the CTA cluster once the design's payment icons join it
       (they spilled over the chip). Same selector, loaded later. */
    body.single-product .custom-product-summary-wrapper.show .custom-product-summary {
        grid-template-columns: 56px minmax(180px, max-content) minmax(0, 1fr) 12px auto !important;
    }
    /* the chip truncates inside its track instead of overflowing it
       (design .gs-sb-chip .txt b/i: nowrap + ellipsis) */
    body.single-product .custom-product-summary .product-configuration {
        min-width: 0;
        max-width: 100%;
    }
    body.single-product .custom-product-summary .gpd-sticky-chip {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    body.single-product .custom-product-summary .gpd-sticky-chip .gpd-sticky-chip-text {
        min-width: 0;
        overflow: hidden;
    }
    body.single-product .custom-product-summary .gpd-sticky-chip .gpd-sticky-chip-text b,
    body.single-product .custom-product-summary .gpd-sticky-chip .gpd-sticky-chip-text i {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* sale price: was-price sits inline left of the price (design
       .gs-stickybar .pr .was) — stacked it collides with the icon row */
    body.single-product .custom-product-summary .custom-product-summary-price p {
        display: flex;
        align-items: baseline;
        gap: 8px;
        white-space: nowrap;
    }
    body.single-product .custom-product-summary .custom-product-summary-price p del,
    body.single-product .custom-product-summary .custom-product-summary-price p del .amount {
        color: var(--fg-tertiary);
        font-size: 14px;
        font-weight: 600;
        position: static;
    }
    body.single-product .custom-product-summary .add-to-cart {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: none; /* droix caps it at 305px — price+CTA overflow into the chip */
        justify-content: flex-end;
    }
    /* payment icons removed from the sticky bar (user request) — the freed
       space lets the chip (1fr track) extend and show more of the config.
       The buy-box icons (#right-summary-section .payment-icons) are untouched. */
    body.single-product .custom-product-summary .add-to-cart .payment-icons {
        display: none !important;
    }
    /* reserve the price + sale-price width so the extended chip can never
       overlap them: the price block sizes to content and never shrinks. */
    body.single-product .custom-product-summary .add-to-cart .custom-product-summary-price,
    body.single-product .custom-product-summary .add-to-cart .add-to-cart-button {
        flex: 0 0 auto;
    }
}
/* availability meta: design shows quiet 12px text under the name
   ("In stock · free express shipping"), not a chip — keep the urgency
   colours for backorder / out-of-stock states */
body.single-product .custom-product-summary .gpd-stock-pill-row .stock {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-secondary);
}
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.available-on-backorder,
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.gpd-preorder {
    color: var(--acc);
    font-weight: 700;
}
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.out-of-stock {
    color: var(--orange-500);
    font-weight: 700;
}
body.single-product .custom-product-summary .product-details,
body.single-product .custom-product-summary .product-configuration {
    color: var(--fg-secondary);
}
body.single-product .custom-product-summary .product-title { color: #fff; font-weight: 700; }
body.single-product .custom-product-summary .price { color: var(--lime-500); font-weight: 800; }
body.single-product .gpd-sticky-chip,
body.single-product .custom-product-summary .product-configuration .gpd-sticky-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-1);
    color: var(--fg-1);
    border-radius: 12px;
}
body.single-product .gpd-sticky-chip:hover,
body.single-product .custom-product-summary .product-configuration .gpd-sticky-chip:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
}
body.single-product .custom-product-summary .product-configuration .gpd-sticky-chip b,
body.single-product .custom-product-summary .product-configuration .gpd-sticky-chip strong {
    color: #fff;
}
body.single-product .custom-product-summary .product-configuration .gpd-sticky-chip i {
    color: var(--fg-tertiary);
}
body.single-product .gpd-sticky-change { color: var(--acc); }

/* picker bottom-sheet */
.gpd-pick-sheet {
    background: var(--bg-1);
    border: 1px solid var(--line-1);
    border-radius: 18px 18px 0 0;
    color: var(--fg-1);
    box-shadow: var(--shadow-lg);
}
.gpd-pick-scrim { background: rgba(5, 7, 9, 0.62); }
.gpd-pick-head { color: #fff; border-bottom: 1px solid var(--line-2); }
.gpd-pick-grip { background: rgba(255, 255, 255, 0.18); }
.gpd-pick-x { color: var(--fg-secondary); background: rgba(255, 255, 255, 0.06); border-radius: 50%; }
.gpd-pick-body { background: transparent; }
.gpd-pick-foot {
    background: var(--bg-1);
    border-top: 1px solid var(--line-2);
}
.gpd-pick-qty,
.gpd-pick-qty input {
    background: var(--surface-glass);
    border-color: var(--line-1);
    color: #fff;
}

/* ── related products row — dark cards (full gs-pcard pass in Phase 4) ───── */

body.single-product .related-wrapper,
body.single-product section.related {
    background: transparent;
}
body.single-product .related-wrapper h2,
body.single-product section.related h2 { color: var(--fg-0); }
body.single-product .related-wrapper li.product,
body.single-product section.related li.product {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
body.single-product .related-wrapper li.product .woocommerce-loop-product__title,
body.single-product section.related li.product .woocommerce-loop-product__title { color: #fff; }
body.single-product .related-wrapper li.product .price,
body.single-product section.related li.product .price { color: var(--lime-500); font-weight: 800; }
body.single-product .related-wrapper li.product .price del { color: var(--fg-tertiary); }

/* ── payment-info / what's-included info cards in the middle column ──────── */

body.single-product .product-info-section,
body.single-product .product-info-section .info-card,
body.single-product .summary-inner .accordion-like-cards {
    background: transparent;
    color: var(--fg-1);
}

/* ==========================================================================
   Round 2 — specificity matches for droix rules found during verification
   ========================================================================== */

/* title + middle-column copy (droix paints #0B0B0B) */
body.single-product .product-details-wrapper h1.product_title,
body.single-product #middle-summary-section h1.product_title,
body.single-product h1.product_title.entry-title {
    color: var(--fg-0);
}
body.single-product #middle-summary-section,
body.single-product #middle-summary-section p,
body.single-product #middle-summary-section li {
    color: var(--fg-1);
}
body.single-product #middle-summary-section a { color: var(--acc); }

/* key-features tiles (.kf-item — droix-key-features plugin DOM,
   GPD-PLUGIN-BRIDGE: keep selectors, restyle to dark glass tiles) */
body.single-product .specification-section .kf-item,
body.single-product .specification-section.key-features .kf-item {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: none;
    color: var(--fg-1);
}
body.single-product .specification-section .kf-item * { color: var(--fg-1); }
body.single-product .specification-section .kf-item img { filter: none; }

/* (gift strip rules consolidated into the .gs-gift section above) */

/* related-products swiper cards (droix paints the slide white) */
body.single-product .related .swiper li.swiper-slide {
    background: var(--surface-elev);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
body.single-product .related .swiper li.swiper-slide .product-details h2,
body.single-product .related .swiper li.swiper-slide .product-details .product-title {
    color: #fff;
}
body.single-product .related .swiper li.swiper-slide .product-details .product-brand {
    color: var(--fg-tertiary);
}
body.single-product .related .swiper li.swiper-slide .price {
    color: var(--lime-500);
    font-weight: 800;
}
body.single-product .related .swiper li.swiper-slide .price del { color: var(--fg-tertiary); }

/* variations-table accordion rows + compare chip (white leftovers) */
body.single-product #right-summary-section table.variations tr.accordion,
body.single-product #right-summary-section table.variations tr {
    background: transparent;
}
body.single-product .comparelabel {
    background: rgba(10, 13, 15, 0.7);
    color: #fff;
    border: 1px solid var(--line-1);
}

/* ==========================================================================
   Round 3 — !important parity with droix config-card rules + text fixes
   ========================================================================== */

/* config cards: droix paints them white with !important (single-product.css
   :3990+). Same selector, same weight, GPD values. */
body.single-product #right-summary-section form .variations .gpd-cfg-group .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2 {
    background: var(--surface-glass) !important;
    border: 1.5px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
}
body.single-product #right-summary-section form .variations .gpd-cfg-group .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}
body.single-product #right-summary-section form .variations .gpd-cfg-group .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.cgkit-swatch-selected {
    background: var(--sel-bg) !important;
    border-color: var(--sel) !important;
}
/* card typography (droix: Ubuntu + near-black) */
.gpd-cfg2 .gpd-cfg2-head {
    font-family: var(--font-sans);
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.gpd-cfg2 .gpd-cfg2-delta {
    font-family: var(--font-sans);
    color: var(--fg-secondary);
}
.gpd-cfg2 .gpd-cfg2-sub {
    color: var(--fg-secondary);
}
button.gpd-cfg2.cgkit-disabled .gpd-cfg2-head { color: var(--fg-secondary); }

/* key-features tile headings */
body.single-product .specification-section.key-features .kf-item h5,
body.single-product .specification-section .kf-item h5 {
    color: var(--fg-0);
}

/* highlights list + accordion strongs in the middle column */
body.single-product #middle-summary-section > ul > li strong,
body.single-product #middle-summary-section .cg-accordion-item strong {
    color: var(--fg-0);
}
body.single-product #middle-summary-section .cg-accordion-item strong u { color: var(--fg-0); }

/* accordion summary headers (droix #242421) */
body.single-product #middle-summary-section .gpd-accordions summary {
    color: var(--fg-0);
}
body.single-product #middle-summary-section .gpd-accordions summary::after {
    filter: invert(1); /* droix draws a dark chevron icon — flip for dark bg */
}

/* ── Tabs wrap visibility ──────────────────────────────────────────────────
   The droix base hides .woocommerce-tabs.wc-tabs-wrapper at base (single-
   product.css:145, a selector-list quirk) and only re-shows it on droix.eu
   via the runtime body.pdp-full class — which gpdstore never gets, so the
   whole below-fold tab content (Description / Specifications / Support /
   Reviews / Q&A) rendered invisible on this fork. Restore the same stacked-
   sections layout the base CSS was written for (0,3,1 beats the 0,2,0 hide). */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
    display: flex;
}

/* ── Specifications tab → spec-group cards (design .gs-desc-card +
   .gs-spec-row, theme-pdp.css:209-216). Markup from the child override
   woocommerce/single-product/woocommerce-group-attributes-output-layout.php */
body.single-product .gpd-spec-cards {
    /* multi-column (true masonry) so short cards don't leave row-height gaps;
       reading flows down the left column then the right */
    columns: 2;
    column-gap: 22px;
}
body.single-product .gpd-spec-card {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: 22px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 22px; /* replaces the former grid gap */
}
body.single-product .gpd-spec-card h4 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
body.single-product .gpd-spec-card dl {
    margin: 0;
}
body.single-product .gpd-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--line-2);
    font-size: 13px;
}
body.single-product .gpd-spec-row dt {
    color: var(--fg-tertiary);
    flex: 0 1 auto; /* may wrap — long labels must not starve the value */
}
body.single-product .gpd-spec-row dd {
    margin: 0;
    color: var(--fg-1);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    flex: 1 1 55%;
}
body.single-product .gpd-spec-row dd p {
    margin: 0;
    display: inline;
}
body.single-product .gpd-spec-row dd a {
    color: var(--fg-1);
}
body.single-product .gpd-spec-row dd a:hover {
    color: var(--fg-0);
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 900px) {
    body.single-product .gpd-spec-cards {
        columns: 1;
    }
}

/* description tab lead paragraph (design .gs-desc-lead) */
body.single-product .woocommerce-Tabs-panel--description > p:first-of-type,
body.single-product #cgkit-tab-description > p:first-of-type {
    font-size: 18px;
    line-height: 1.6;
    color: var(--fg-1);
    max-width: 780px;
}

/* technical-specifications tables (shop_attributes) */
body.single-product table.shop_attributes tr.attribute_group_row th,
body.single-product table.shop_attributes tr.attribute_group_row td,
body.single-product table.shop_attributes table.attribute_name_values th,
body.single-product table.shop_attributes table.attribute_name_values td {
    color: var(--fg-1);
    border-color: var(--line-2);
}
body.single-product table.shop_attributes tr.attribute_group_row td { background: var(--surface-glass); }
body.single-product table.shop_attributes table.attribute_name_values tr.alt,
body.single-product table.shop_attributes table.attribute_name_values tr.alt > th,
body.single-product table.shop_attributes table.attribute_name_values tr.alt > td {
    background: var(--surface-glass-2);
}

/* inventory/stock meter title inside the buy box */
body.single-product #right-summary-section .entry-summary .gpd-fast-host .cki-variation .title {
    color: var(--fg-1);
}
/* B8: "selling fast" meter per design .gs-fast (theme-pdp.css:166-169 + alt:94)
   — 12.5px/700 orange label, 6px track, SOLID orange fill (alt scheme drops the
   lime gradient end). CK paints inline colors per threshold; the bar element
   carries them via style attr, so fill needs !important. */
body.single-product .gpd-fast-host .commercekit-inventory .title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--orange-500) !important;
}
body.single-product .gpd-fast-host .commercekit-inventory .progress-bar,
body.single-product #right-summary-section .entry-summary .gpd-fast-host .commercekit-inventory .progress-bar {
    height: 6px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
}
body.single-product .gpd-fast-host .commercekit-inventory .progress-bar span,
body.single-product .gpd-fast-host .commercekit-inventory .progress-bar > *,
body.single-product #right-summary-section .entry-summary .commercekit-inventory .progress-bar span,
body.single-product #right-summary-section .entry-summary .gpd-fast-host .commercekit-inventory .progress-bar span {
    height: 100%;
    border-radius: var(--r-full);
    /* approved teal skin (theme-pdp-alt.css:94): SOLID orange — urgency is
       orange's job, the lime gradient end is dropped. The droix base paints
       #B0CB1F !important at :4211 with an ID-strong selector, so the last
       selector here mirrors it exactly to outgun it. */
    background: var(--orange-500) !important;
}

/* gift card font fix (Ubuntu literal in the droix base) */
.gpd-giftbox .gpd-giftcard-name { font-family: var(--font-sans); }

/* ==========================================================================
   Round 4 — sticky picker sheet parity (cloned cards + chrome, mobile)
   ========================================================================== */

/* sheet chrome (droix: #fff at :4338, Ubuntu near-black head at :4354) */
.gpd-pick-sheet { background: var(--bg-1); }
.gpd-pick-head b {
    font-family: var(--font-sans);
    color: var(--fg-0);
}
.gpd-pick-head .gpd-pick-x { color: var(--fg-secondary); }

/* product mini-header inside the sheet */
.gpd-pick-sheet .gpd-pick-prod,
.gpd-pick-sheet .product-title,
.gpd-pick-sheet b,
.gpd-pick-sheet strong { color: var(--fg-0); }
.gpd-pick-sheet .price { color: var(--lime-500); font-weight: 800; }

/* cloned segmented buttons + config cards (droix paints white/.97 + #fff) */
.gpd-pick-body .cgkit-attribute-swatch.cgkit-button button {
    background: var(--surface-glass);
    border: 1.5px solid var(--line-1);
    color: #fff;
}
.gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
    background: var(--sel-bg);
    border-color: var(--sel);
}
.gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.gpd-available:not(.gpd-swatch-preorder),
.gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.gpd-available.gpd-swatch-preorder {
    background: var(--surface-glass);
    border-color: var(--line-1);
}
.gpd-pick-body .cgkit-attribute-swatch.cgkit-button button.gpd-cfg2.gpd-available.cgkit-swatch-selected {
    background: var(--sel-bg);
    border-color: var(--sel);
}
.gpd-pick-body .cgkit-disabled button.gpd-cfg2.gpd-available .gpd-cfg2-head { color: #fff; }
.gpd-pick-body .cgkit-disabled button.gpd-cfg2.gpd-available .gpd-cfg2-sub,
.gpd-pick-body .cgkit-disabled button.gpd-cfg2.gpd-available .gpd-cfg2-delta { color: var(--fg-secondary); }
.gpd-pick-body .cgkit-attribute-swatch.cgkit-disabled button {
    border-color: var(--line-2);
    color: var(--fg-tertiary);
    /* design .gs-cfgcard.off: dark muted card — the droix base paints
       disabled cards WHITE inside the sheet (user-reported) */
    background: var(--surface-glass);
    opacity: .42;
}
.gpd-pick-body .cgkit-attribute-swatch.cgkit-disabled button .gpd-cfg2-head,
.gpd-pick-body .cgkit-attribute-swatch.cgkit-disabled button .gpd-cfg2-sub {
    color: var(--fg-tertiary);
}
/* "Coming soon" / genuinely-OOS cards carry .stock_out_of_stock on the
   BUTTON (the li is not .cgkit-disabled) — droix base leaves them white */
.gpd-pick-body button.gpd-cfg2.stock_out_of_stock,
body.single-product #right-summary-section button.gpd-cfg2.stock_out_of_stock {
    background: var(--surface-glass) !important;
    border-color: var(--line-2) !important;
    color: var(--fg-tertiary) !important;
    opacity: .55;
}
.gpd-pick-body button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-head,
.gpd-pick-body button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-sub,
.gpd-pick-body button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-delta,
body.single-product #right-summary-section button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-head,
body.single-product #right-summary-section button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-sub,
body.single-product #right-summary-section button.gpd-cfg2.stock_out_of_stock .gpd-cfg2-delta {
    color: var(--fg-tertiary) !important;
}
.gpd-pick-body .cgkit-attribute-swatch > button.cgkit-disabled.gpd-available {
    border-color: var(--line-1);
    color: var(--fg-1);
}

/* picker footer + qty (droix rgba(255,255,255,.97) bar) */
.gpd-pick-foot { background: var(--bg-1); }

/* picker mini product header: Ubuntu/near-black title + purple price (droix
   !important at single-product.css:5703/5728) → Inter white + lime */
.gpd-pick-product-text b {
    font-family: var(--font-sans);
    color: var(--fg-0);
}
.gpd-pick-product-thumb { background: #0c1014; border-color: var(--line-2); }
.gpd-pick-product-text .regular-price,
.gpd-pick-product-text .regular-price bdi,
.gpd-pick-product-text .regular-price .amount,
.gpd-pick-product-text .sale-price,
.gpd-pick-product-text .sale-price bdi,
.gpd-pick-product-text .sale-price .amount {
    color: var(--lime-500) !important;
}
.gpd-pick-product-text .regular-price-del,
.gpd-pick-product-text .regular-price-del .amount {
    color: var(--fg-tertiary) !important;
}

/* selectable-but-cgkit-disabled buttons in the picker: kill the white bg */
.gpd-pick-body .cgkit-attribute-swatch > button.cgkit-disabled.gpd-available,
body.single-product .gpd-pick-body .cgkit-attribute-swatch > button.cgkit-disabled.gpd-available {
    background: var(--surface-glass);
    border-color: var(--line-1);
    color: var(--fg-1);
}

/* sticky BAR price (droix purple at :2106-2120) → lime */
body.single-product .custom-product-summary-price,
body.single-product .custom-product-summary-price .regular-price,
body.single-product .custom-product-summary-price .sale-price,
body.single-product .custom-product-summary-price .regular-price.no-sale,
body.single-product .custom-product-summary-price bdi,
body.single-product .custom-product-summary-price .amount {
    color: var(--lime-500) !important;
}
body.single-product .custom-product-summary-price del,
body.single-product .custom-product-summary-price del .amount {
    color: var(--fg-tertiary) !important;
}

/* max-specificity price override for the picker mini header (droix !important
   chains at single-product.css:5726+ kept outranking the shorter forms) */
body.single-product .gpd-pick-product-text .regular-price,
body.single-product .gpd-pick-product-text .regular-price bdi,
body.single-product .gpd-pick-product-text .regular-price .amount,
body.single-product .gpd-pick-product-text .regular-price .woocommerce-Price-currencySymbol,
body.single-product .gpd-pick-product-text .sale-price,
body.single-product .gpd-pick-product-text .sale-price bdi,
body.single-product .gpd-pick-product-text .sale-price .amount,
body.single-product .gpd-pick-product-text .sale-price .woocommerce-Price-currencySymbol {
    color: var(--lime-500) !important;
}
body.single-product .gpd-pick-product-text .regular-price del bdi,
body.single-product .gpd-pick-product-text .regular-price-del del bdi {
    color: var(--fg-tertiary) !important;
}

/* final hammer for the picker price: every descendant of the price span goes
   lime (strikethrough del handled above keeps tertiary via later rule) */
body.single-product .gpd-pick-product-text .custom-product-summary-price :where(span, bdi, p):not(del *):not(del) {
    color: var(--lime-500) !important;
}

/* cover the -webkit-text-fill-color vector too (droix uses fill tricks on
   prices; computed `color` alone doesn't decide the painted colour) */
body.single-product .gpd-pick-product-text .custom-product-summary-price,
body.single-product .gpd-pick-product-text .custom-product-summary-price * {
    -webkit-text-fill-color: var(--lime-500) !important;
}
body.single-product .gpd-pick-product-text .custom-product-summary-price del,
body.single-product .gpd-pick-product-text .custom-product-summary-price del * {
    -webkit-text-fill-color: var(--fg-tertiary) !important;
}

/* ==========================================================================
   Round 5 — design-parity pass vs Product Page.html (2026-06-11)
   Sources: theme-pdp.css (.gs-bb-status/.gs-bb-sale/.gs-bb-price/.gs-paystrip/
   .gs-tp), theme-pdp-alt.css (approved teal/lime scheme).
   ========================================================================== */

/* ── A1: stock/availability row (.gs-bb-status) ──────────────────────────── */
/* pill left, circular sale badge right (droix base absolutely-positions the
   badge at the panel corner and pads the row 64px for it — undo both). */
body.single-product #right-summary-section .stock-container {
    justify-content: space-between;
    gap: 10px;
    padding: 0 20px 14px 20px;
}
/* the -N% sale circle (.gs-bb-sale): 46px orange disc, text only.
   single-product.css:4695 hides .sale-badge with display:none !important (it
   suppressed the legacy text badge); the GPD design wants this orange circle
   visible, so re-show it with !important (this overlay loads after). */
body.single-product #right-summary-section .stock-container span.sale-badge {
    position: static;
    top: auto;
    right: auto;
    width: 46px;
    height: 46px;
    margin-left: auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--orange-500);
    color: #1A0C04;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}
body.single-product #right-summary-section .stock-container span.sale-badge img {
    display: none;
}

/* ── A2: price block (.gs-bb-price family) ───────────────────────────────── */
/* 42px/800 lime with tight tracking on the desktop grid; quiet 13px suffix;
   was-price 14px tertiary; "Save X" plain orange text (droix base paints it
   as a magenta pill with !important — same selector + !important to win). */
@media (min-width: 1301px) {
    body.single-product #right-summary-section .price .woocommerce-Price-amount {
        font-size: 42px;
        letter-spacing: -1.5px;
    }
}
body.single-product #right-summary-section .price .woocommerce-price-suffix {
    font-size: 13px;
}
body.single-product #right-summary-section .price .gpd-was {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--fg-tertiary);
}
body.single-product #right-summary-section .price .gpd-save {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--orange-500) !important;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
/* On sale, stack the cluster to the right of the price as TWO rows (design ref):
   row 1 = struck was-price, row 2 = "Save X" beneath it — not both on one line.
   2-col grid: price spans both rows on the left (column-1 auto), the was/save cluster
   sits in column-2 just right of it (justify-content:start leaves free space to the
   right, matching the handoff). Overrides the droix base flex-wrap row.
   .price children are exactly [.woocommerce-Price-amount, .gpd-was, .gpd-save]. */
body.single-product #right-summary-section .price:has(.gpd-was) {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
}
body.single-product #right-summary-section .price:has(.gpd-was) .woocommerce-Price-amount {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}
body.single-product #right-summary-section .price:has(.gpd-was) .gpd-was {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 !important;
}
body.single-product #right-summary-section .price:has(.gpd-was) .gpd-save {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
}
/* The was/save cluster now sits BESIDE the price (the grid above), so the on-sale block is the
   same height as a normal single-line price. The droix base reserves min-height 62px/83px on
   .gpd-pdp-onsale .price (sized for the former below-the-price wrap), which now just leaves dead
   space above the "viewing" row. Drop the reservation — the grid means no injection-time height
   change (was/save go into column 2, not a new line), so there is no CLS to guard against. */
body.single-product #right-summary-section.gpd-pdp-onsale .price {
    min-height: 0;
}

/* ── A3: payment marks → white pill chips (.gs-paymark) ──────────────────── */
body.single-product #right-summary-section form .payment-icons {
    gap: 6px;
    margin: 18px 0 4px;
}
body.single-product #right-summary-section form .payment-icons img,
body.single-product .custom-product-summary .add-to-cart .payment-icons img {
    background: #fff;
    border-radius: 4px;
    height: 22px;
    width: auto;
    padding: 4px 6px;
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 0;
}

/* ── A4: Trustpilot micro row — position only, no style overrides ─────────────
   The widget's internals (stars/logo/text/card) are left to the droix-trustpilot
   plugin's own dark theming so it matches the plugin's default design (the theme
   previously recoloured stars/logo green and killed the card, which diverged from
   the intended look). Only the buy-box placement is set here. */
body.single-product #right-summary-section #droix-tp-widget-wrapper-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 16px 0 0;
    text-decoration: none;
}
/* the trustscore row is a full-width flex block — make it inline so the wrapper's
   text-align centres it in the buy box (positioning only, no style override). */
body.single-product #right-summary-section #droix-tp-widget-wrapper-link > * {
    display: inline-flex !important;
}

/* ── E18: sticky bar → floating rounded pill (.gs-stickybar) ─────────────── */
/* wrapper stays the fixed full-width rail (JS show/hide untouched); the inner
   bar becomes the floating rounded element with side gaps + bottom offset */
body.single-product .custom-product-summary-wrapper {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 24px;
}
body.single-product .custom-product-summary {
    /* match the design's lighter slate-glass (theme-pdp.css .gs-stickybar) —
       the earlier rgba(13,16,19,.94) read as near-black */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)),
        rgba(30, 37, 45, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 18px;
    margin-bottom: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* the .show state re-paints the bar white at higher specificity (base
   :4821/:5028 grid blocks) — same selector, design slate-glass values */
body.single-product .custom-product-summary-wrapper.show .custom-product-summary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)),
        rgba(30, 37, 45, .94) !important;
    border: 1px solid rgba(255, 255, 255, 0.17);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* bar price: base paints magenta (no-sale, :5085) / red (sale, :4958) with
   !important under min-width:1025 — outrank with the same state selectors */
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price,
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price bdi,
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price .amount,
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price.no-sale,
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price.no-sale bdi,
body.single-product .custom-product-summary.gpd-sticky-no-sale .custom-product-summary-price .regular-price.no-sale .amount,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .sale-price,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .sale-price bdi,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .sale-price .amount {
    color: var(--lime-500) !important;
    font-family: var(--font-sans);
}
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .regular-price del,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .regular-price del *,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .regular-price-del del,
body.single-product .custom-product-summary.gpd-sticky-has-sale .custom-product-summary-price .regular-price-del del * {
    color: var(--fg-tertiary) !important;
    font-family: var(--font-sans);
}
/* bar thumb: design 48px dark tile (base paints a 212px white-bordered tile) */
body.single-product .custom-product-summary .product-thumbnail {
    border-color: var(--line-1);
    background: #0c1014;
    border-radius: var(--r-md);
}
/* bar stock pills reuse the buy-box family (base paints the light scheme at
   .custom-product-summary .gpd-stock-pill-row .stock, base:4448-4491 — match) */
body.single-product .custom-product-summary .gpd-stock-pill-row .stock,
body.single-product .custom-product-summary-wrapper p .stock {
    color: var(--teal-500);
    background: rgba(35, 221, 190, 0.10);
    border: 1px solid rgba(35, 221, 190, 0.25);
}
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.available-on-backorder,
body.single-product .custom-product-summary-wrapper p .stock.available-on-backorder {
    color: var(--orange-500);
    background: rgba(255, 107, 53, 0.10);
    border-color: rgba(255, 107, 53, 0.28);
}
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.on-backorder-eta {
    color: var(--teal-500);
    background: rgba(35, 221, 190, 0.10);
    border-color: rgba(35, 221, 190, 0.25);
}
body.single-product .custom-product-summary .gpd-stock-pill-row .stock.out-of-stock,
body.single-product .custom-product-summary-wrapper p .stock.out-of-stock {
    color: var(--fg-secondary);
    background: var(--surface-glass);
    border-color: var(--line-1);
}
/* bar typography on dark (base inks are light-scheme near-black/Ubuntu) */
body.single-product .custom-product-summary .custom-product-summary-title h3 {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
}
body.single-product .custom-product-summary .product-configuration p,
body.single-product .custom-product-summary .product-configuration p span {
    color: var(--fg-secondary);
    font-family: var(--font-sans);
}
body.single-product .custom-product-summary .product-configuration p b,
body.single-product .custom-product-summary .product-configuration p strong {
    color: #fff;
}

/* ── E16: section-tabs bar — design tab typography (.gs-tabbar/.gs-tab) ───── */
/* Align the tab row to the 1280px content container (matches the buy box /
   description / cards) instead of CommerceKit's wider .col-full rail, so the
   tabs left-align under the content like the reference (was stuck far-left). */
body.single-product .commercekit-atc-tab-links,
body.single-product .woocommerce-tabs ul.tabs {
    max-width: 1280px !important; /* outranks the Kirki .col-full 1620 inline */
    margin-left: auto !important;
    margin-right: auto !important;
}
body.single-product .commercekit-atc-sticky-tabs .commercekit-atc-tab-links a {
    padding: 13px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fg-secondary);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
body.single-product .commercekit-atc-sticky-tabs .commercekit-atc-tab-links a:hover,
body.single-product .commercekit-atc-sticky-tabs .commercekit-atc-tab-links a[aria-selected="true"],
body.single-product .commercekit-atc-sticky-tabs .commercekit-atc-tab-links li.active a {
    color: #fff;
    border-bottom-color: var(--sel);
}
/* CK's animated underline (a::after) doubles up with the design's 2px
   border-bottom (user-reported double underline) — the border IS the
   design's single teal underline, so the ::after goes entirely. */
body.single-product .woocommerce-tabs .tabs li a::after,
body.single-product .commercekit-atc-tab-links li a::after {
    display: none !important;
}
/* the design tab set has no "Gallery" anchor — CK injects it as the sticky
   bar's first link (label from sticky_atc_label); JS still finds it. */
body.single-product .commercekit-atc-tab-links li#cgkit-tab-commercekit-gallery-title {
    display: none;
}

/* ── News tab: [fetch_blog_posts] cards (droix-tools plugin) — the plugin
   sheet is the shared light droix design; reskin to GPD dark blog-card
   language (.gsb-card: surface card, radius 14, white title, teal link).
   Plugin CSS is shared with droix.eu — override here, never edit it. ────── */
body.single-product .fetch-blog-posts-card {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    overflow: hidden;
    align-items: stretch;
    transition: border-color var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}
body.single-product .fetch-blog-posts-card:hover {
    border-color: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}
body.single-product .fetch-blog-posts-card img {
    border-radius: var(--r-md);
    height: 190px;
}
body.single-product .fetch-blog-posts-card-title {
    color: var(--fg-0);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
body.single-product .fetch-blog-posts-card-description {
    color: var(--fg-secondary);
    font-size: 13.5px;
    line-height: 1.55;
}
body.single-product .fetch-blog-posts-card-read-more {
    background: rgba(255, 255, 255, .08);
    color: var(--acc);
    border-radius: var(--r-md);
    font-weight: 700;
}
body.single-product .fetch-blog-posts-card-read-more:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--acc);
}

/* ── E17: related products — section head + design cards (.gs-pcard) ─────── */
body.single-product .related .gpd-sect-eyebrow,
.gpd-sect-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acc);
    margin-bottom: 6px;
}
body.single-product section.related h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--fg-0);
}
/* pre-init flash guard: before Swiper boots, slides are flex children at full
   width — approximate the 4-up layout so the first paint doesn't stretch */
body.single-product .related-products-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper {
    display: flex;
    gap: 20px;
}
body.single-product .related-products-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
    width: calc(25% - 15px) !important;
    max-width: calc(25% - 15px);
    flex: 0 0 auto;
}
/* card internals per design: eyebrow, 19px title, lime price, icon ATC */
body.single-product .related .swiper li.swiper-slide .product-details .product-brand {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acc);
}
body.single-product .related .swiper li.swiper-slide .product-details .product-title {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}
body.single-product .related .swiper li.swiper-slide .product-details .rating-and-stock .product-stock-status.in-stock {
    color: var(--teal-500);
}
body.single-product .related .swiper li.swiper-slide .product-details .rating-and-stock .product-stock-status.out-of-stock {
    color: var(--fg-tertiary);
}
body.single-product .related .swiper li.swiper-slide .product-details .product-price .regular-price,
body.single-product .related .swiper li.swiper-slide .product-details .product-price .sale-price {
    color: var(--lime-500);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
body.single-product .related .swiper li.swiper-slide .product-details .product-price .regular-price del,
body.single-product .related .swiper li.swiper-slide .product-details .product-price del,
body.single-product .related .swiper li.swiper-slide .product-details .product-price del * {
    color: var(--fg-tertiary);
    font-weight: 500;
}
body.single-product .related .swiper li.swiper-slide .add-to-cart-button {
    background: var(--lime-500);
    color: #0A0D0F;
    border-radius: var(--r-md);
    font-weight: 800;
}
/* badges: design "New" pill */
body.single-product .related .swiper li.swiper-slide .badge.new-badge {
    background: var(--acc);
    color: var(--acc-ink);
    border-radius: var(--r-full);
    font-weight: 800;
}
body.single-product .related .swiper li.swiper-slide .badge.sale-badge {
    background: var(--orange-500);
    color: #1A0C04;
    border-radius: var(--r-full);
    font-weight: 800;
}
/* slider arrows on dark */
body.single-product .related .buttons .slider-prev,
body.single-product .related .buttons .slider-next {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-1);
    border-radius: 50%;
}

/* ── C10: category eyebrow above the H1 (.gs-pt-eyebrow + alt: teal) ─────── */
body.single-product #middle-summary-section .gpd-pt-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acc);
    margin-bottom: 8px;
    text-decoration: none;
}
body.single-product #middle-summary-section .gpd-pt-eyebrow:hover { color: #fff; }

/* ── C11: quick-specs highlights panel (.gs-highlights) ──────────────────── */
/* the short-description <ul> becomes a glass panel card; rows lose bullets */
body.single-product #middle-summary-section > ul {
    background: var(--surface-glass);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: 14px 20px;
    margin: 16px 0 18px;
    list-style: none;
}
body.single-product #middle-summary-section > ul > li {
    list-style: none;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-1);
    padding: 7px 0 7px 28px;
    margin: 0;
}
body.single-product #middle-summary-section > ul > li + li {
    border-top: 1px solid var(--line-2);
}
body.single-product #middle-summary-section > ul > li::marker { content: ""; }
/* teal checkmark per row — matches the product-category card feature ticks
   (gpd-archive.css .woocommerce-product-details__short-description li::before) */
body.single-product #middle-summary-section > ul > li::before {
    display: block;
    content: '';
    position: absolute;
    left: 2px;
    top: 11px;
    width: 15px;
    height: 15px;
    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 / 15px 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 / 15px no-repeat;
}

/* ── C13: white "FREE GIFTS" banner strip — design has no such strip ───────
   (covers both the <p><img></p> form and the bare <img> direct child, e.g.
   win-5-freebie-l.jpg on GPD WIN 5) */
body.single-product #middle-summary-section > p:has(> img),
body.single-product #middle-summary-section > img,
body.single-product #middle-summary-section > div > img[src*="freebie"] {
    display: none;
}

/* ── D15: key-feature chips → spec tiles (.gs-fspec, theme-pdp.css:480-484).
   Colored Woo feature images on 56px WHITE tiles (user decision 2026-06-11 —
   was grayscale(1) monochrome). */
body.single-product .specification-section .container,
body.single-product .specification-section.key-features .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
body.single-product .specification-section .kf-item,
body.single-product .specification-section.key-features .kf-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0;
    padding: 16px 8px 14px;
    margin: 0;
}
body.single-product .specification-section .kf-item img {
    filter: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 5px;
    box-sizing: border-box;
    margin: 0 auto 10px;
}
body.single-product .specification-section .kf-item h5 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0;
}
body.single-product .specification-section .kf-item p {
    font-size: 11.5px;
    color: var(--fg-tertiary);
    margin: 2px 0 0;
}

/* ── B6: variation sections — full-width stacked rows (.gs-sect/.gs-selhead) ─ */
/* The CK sticky-ATC wrapper that previously kept the table in 2-cell rows is
   gone (module disabled); stack each tr.accordion as a full-width section:
   header row (label + chosen value + chevron) over a 2-col card grid, per
   theme-pdp.css .gs-selhead/.gs-cfg. DOM untouched — buildSheet still clones
   table.variations for the sticky picker. */
body.single-product #right-summary-section table.variations,
body.single-product #right-summary-section table.variations > tbody,
body.single-product #right-summary-section table.variations tr {
    display: block;
    width: 100%;
}
body.single-product #right-summary-section table.variations tr.accordion th.label,
body.single-product #right-summary-section table.variations tr th.label {
    display: grid; /* keep the base 1fr/auto label+chevron grid, now full width */
    width: 100%;
    box-sizing: border-box;
}
body.single-product #right-summary-section table.variations tr td.value {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
/* header typography (.gs-selhead): quiet label, white chosen value */
body.single-product #right-summary-section table.variations th.label label {
    width: auto;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--fg-1);
}
body.single-product #right-summary-section table.variations th.label label strong {
    font-weight: 500;
    color: var(--fg-1);
}
body.single-product #right-summary-section table.variations th.label .cgkit-chosen-attribute {
    color: #fff;
    font-weight: 700;
}
/* option grids: two columns like .gs-seg.grid/.gs-cfg (the base auto-fit
   minmax(160px,1fr) collapses to one column at this buy-box width) */
body.single-product #right-summary-section form .variations .accordion td.value .cgkit-as-wrap .cgkit-attribute-swatches:has(.cgkit-attribute-swatch.cgkit-button),
body.single-product #right-summary-section form .variations .active td.value .cgkit-as-wrap .cgkit-attribute-swatches:has(.cgkit-attribute-swatch.cgkit-button) {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

/* ── B7: buy row — CTA + square wishlist (.gs-bb-buyrow/.gs-bb-iconcta) ───── */
body.single-product .woocommerce-variation-add-to-cart,
body.single-product form.cart div.gpd-atc-row {
    display: flex;
    flex-wrap: wrap; /* payment strip + qty live in the same container */
    align-items: stretch;
    gap: 10px;
}
/* the payment strip (hooked before the button) is its own full-width row */
body.single-product .woocommerce-variation-add-to-cart .payment-icons {
    flex: 1 1 100%;
}
/* CK wraps qty+button in an intersector div — that's the flexing middle cell.
   flex-basis 0 (not auto): the button keeps the droix base width:100%, and a
   content-sized basis would push the heart onto its own line. */
body.single-product .woocommerce-variation-add-to-cart .commercekit-sticky-atc-intersector {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    gap: 10px;
}
body.single-product .woocommerce-variation-add-to-cart .commercekit-sticky-atc-intersector .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap;
}
/* mobile: base flips the container to flex-direction:column (base:2906) which
   stacks the heart under the CTA — the design mobile buy row keeps them side
   by side. Row-wrap reproduces the same stacking for the payment strip. */
@media (max-width: 768px) {
    body.single-product #right-summary-section form .single_variation_wrap .woocommerce-variation-add-to-cart {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
}
body.single-product div.product form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button {
    flex: 1 1 auto;
    width: auto; /* droix base sets width:100% at .single-product div.product form.cart .button */
    min-width: 0;
}
body.single-product form.cart .custom-wishlist.gpd-bb-wish {
    flex: 0 0 auto;
    display: flex;
    margin: 0;
    width: 54px !important; /* base .custom-wishlist goes 100% on mobile */
    min-width: 54px;
}
body.single-product form.cart .gpd-bb-wish .wishlist-button {
    width: 54px;
    height: auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: var(--r-md);
    transition: background var(--dur-normal) var(--ease);
}
body.single-product form.cart .gpd-bb-wish .wishlist-button:hover {
    background: rgba(255, 255, 255, 0.16);
}
body.single-product form.cart .gpd-bb-wish .wishlist-button.in-wishlist svg path {
    fill: var(--acc);
    stroke: var(--acc);
}
/* the gallery heart is replaced by the buy-row one (design gallery has none).
   The compare+wishlist pair actually renders inside
   #commercegurus-pdp-gallery-wrapper > #compare-like-button (white floating
   buttons over the artwork) — the design gallery carries no buttons at all. */
body.single-product .commercekit-pdp-gallery .custom-wishlist:not(.gpd-bb-wish),
body.single-product #left-summary-section > .custom-wishlist.full,
body.single-product #left-summary-section #compare-like-button,
body.single-product .gallery-wishlist-btn {
    display: none !important;
}

/* ── A5: buy-box noise — design has no "Clear all" link or SKU paragraph ─── */
/* keep the elements (Woo JS toggles the reset link; the variation-description
   paragraph carries the SKU text some JS reads) — visual removal only */
body.single-product #right-summary-section a.reset_variations {
    display: none !important;
}
body.single-product #right-summary-section .woocommerce-variation-description {
    display: none;
}

/* Hide the WooCommerce-injected "View cart" link that appears beside the buy
   box CTA after an AJAX add-to-cart — the design keeps a single CTA; the side
   cart opens automatically. */
body.single-product #right-summary-section .added_to_cart,
body.single-product #right-summary-section a.added_to_cart.wc-forward {
    display: none !important;
}

/* ==========================================================================
   Revix reviews tab → design Reviews layout (2026-06-11 PDP 1:1 pass)
   Design ref: product.jsx DescriptionTabs tab 2 + .gs-desc-card/.gs-pill;
   summary card left (score, orange stars, lime distribution bars), review
   cards right. Revix (dx-plugins/revix) emits heavy INLINE styles — hence
   the !important on every rule that fights a style attribute. Plugin DOM
   classes (.drvws-*) are styled, never renamed; star SVG fills untouched
   (locked #E8821E family).
   ========================================================================== */

/* "Reviews" section heading + separation from the preceding spec section
   (tabs are anchor sections that stack on one scroll).
   CommerceKit rebuilds its relocated tab panel and discards the callback's
   <h2>, so the heading is injected as the CK panel's ::before; the PHP
   .gpd-reviews-heading is the fallback for non-CommerceKit panels (mutually
   exclusive — CK panels carry .commercekit-Tabs-panel--drvws_reviews). */
body.single-product .gpd-tab-heading.gpd-reviews-heading,
body.single-product .commercekit-Tabs-panel--drvws_reviews::before {
    display: block;
    margin: 48px 0 22px;
    padding-top: 40px;
    border-top: 1px solid var(--line-1);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
}
body.single-product .commercekit-Tabs-panel--drvws_reviews::before {
    content: "Reviews";
}

/* layout: summary rail 280px left, controls + cards right; 1-col <=900 */
body.single-product .drvws-product-tab-widget {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px 36px;
    align-items: start;
}
body.single-product .drvws-product-tab-widget > .drvws-review-stats {
    grid-column: 1;
    grid-row: 1 / span 3;
}
body.single-product .drvws-product-tab-widget > :not(.drvws-review-stats) {
    grid-column: 2;
}
@media (max-width: 900px) {
    body.single-product .drvws-product-tab-widget {
        display: block;
    }
}

/* summary card (.gs-desc-card) */
body.single-product .drvws-review-stats {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
    padding: 22px !important;
    margin-bottom: 0 !important;
}
/* inline grid (score | distribution) → stacked column; the inline
   align-items:center would shrink-wrap the bar rows in column direction */
body.single-product .drvws-review-stats > div[style*="grid"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
}
/* big score */
body.single-product .drvws-review-stats div[style*="font-size: 48px"] {
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #fff !important;
}
/* "N reviews" line + distribution labels/counts */
body.single-product .drvws-review-stats div[style*="color: #6B7280"] {
    color: var(--fg-secondary) !important;
    font-size: 13px !important;
}
body.single-product .drvws-review-stats .drvws-dist-filter span {
    color: var(--fg-tertiary) !important;
    font-size: 12px !important;
}
body.single-product .drvws-review-stats .drvws-dist-filter:hover span {
    color: var(--fg-1) !important;
}
/* distribution bars: dark track, lime fill (keep the inline width %) */
body.single-product .drvws-review-stats .drvws-dist-filter > div {
    height: 6px !important;
    border-radius: var(--r-full) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
body.single-product .drvws-review-stats .drvws-dist-filter > div > div {
    background: var(--lime-500) !important;
}

/* controls row: dark glass; chips/inputs per .gs-fchip/.gs-input/.gs-select */
body.single-product .drvws-reviews-controls {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}
body.single-product .drvws-filter-btn {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-full) !important;
    color: var(--fg-1) !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body.single-product .drvws-filter-btn:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
body.single-product .drvws-filter-btn.active {
    background: var(--sel-bg) !important;
    border-color: var(--sel) !important;
    color: #fff !important;
}
body.single-product .drvws-filter-btn span {
    color: var(--star-500) !important;
}
body.single-product .drvws-review-search-input {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    padding: 9px 13px !important;
    box-shadow: none !important;
}
body.single-product .drvws-review-search-input::placeholder {
    color: var(--fg-tertiary) !important;
}
body.single-product .drvws-review-search-input:focus {
    border-color: var(--acc) !important;
    outline: none !important;
}
body.single-product .drvws-verified-toggle {
    color: var(--fg-secondary) !important;
}
body.single-product .drvws-verified-checkbox {
    accent-color: var(--sel);
}
body.single-product .drvws-reviews-sort,
body.single-product .drvws-reviews-sort label {
    color: var(--fg-secondary) !important;
}
body.single-product .drvws-sort-select {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}
body.single-product .drvws-sort-select option {
    background: var(--bg-1);
    color: var(--fg-1);
}

/* review cards (.gs-desc-card) */
body.single-product .drvws-review-card {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
    padding: 22px !important;
}
body.single-product .drvws-review-card:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
}
body.single-product .drvws-review-author {
    color: #fff !important;
    font-weight: 700 !important;
}
body.single-product .drvws-review-date {
    color: var(--fg-tertiary) !important;
    font-size: 12px !important;
}
body.single-product .drvws-review-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
body.single-product .drvws-review-content {
    color: var(--fg-secondary) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}
/* VERIFIED / DIRECT badges → design .gs-pill (quiet glass, uppercase) */
body.single-product .drvws-verified-badge,
body.single-product .drvws-review-source {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-full) !important;
    color: var(--fg-1) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px !important;
}
/* helpfulness votes + report — quiet ghost controls */
body.single-product .drvws-helpfulness {
    color: var(--fg-tertiary) !important;
    border-color: var(--line-2) !important;
}
body.single-product .drvws-helpfulness span,
body.single-product .drvws-helpfulness strong {
    color: var(--fg-tertiary) !important;
}
body.single-product .drvws-vote-btn,
body.single-product .drvws-flag-button {
    background: transparent !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    color: var(--fg-tertiary) !important;
    box-shadow: none !important;
}
body.single-product .drvws-vote-btn:hover,
body.single-product .drvws-flag-button:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
body.single-product .drvws-vote-count {
    color: var(--fg-tertiary) !important;
}
/* pagination / load-more, if rendered */
body.single-product .drvws-product-tab-widget a:not(.drvws-filter-btn):not(.drvws-dist-filter) {
    color: var(--review-link);
}

/* ── Q&A tab (drvws-qa-*) — same dark family as the reviews tab ──────────── */
body.single-product .drvws-qa-tab-widget .drvws-qa-summary,
body.single-product .drvws-qa-tab-widget .drvws-qa-controls,
body.single-product .drvws-qa-tab-widget .drvws-question-card,
body.single-product .drvws-qa-tab-widget .drvws-qa-form-wrapper {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
}
body.single-product .drvws-qa-tab-widget .drvws-answer-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--line-2) !important;
    border-left: 3px solid var(--sel) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
body.single-product .drvws-qa-tab-widget,
body.single-product .drvws-qa-tab-widget .drvws-question-content,
body.single-product .drvws-qa-tab-widget .drvws-answer-content {
    color: var(--fg-1) !important;
}
body.single-product .drvws-qa-tab-widget .drvws-question-asker,
body.single-product .drvws-qa-tab-widget .drvws-answer-header strong,
body.single-product .drvws-qa-tab-widget .drvws-qa-summary [style*="font-size: 48px"],
body.single-product .drvws-qa-tab-widget .drvws-qa-summary [style*="font-weight: 700"] {
    color: #fff !important;
}
body.single-product .drvws-qa-tab-widget .drvws-question-date,
body.single-product .drvws-qa-tab-widget .drvws-qa-description,
body.single-product .drvws-qa-tab-widget .drvws-page-info,
body.single-product .drvws-qa-tab-widget .drvws-char-count {
    color: var(--fg-tertiary) !important;
}
body.single-product .drvws-qa-tab-widget [style*="color: #6B7280"],
body.single-product .drvws-qa-tab-widget [style*="color: #1F2937"] {
    color: var(--fg-secondary) !important;
}
/* Browse Questions / Ask a Question switcher */
body.single-product .drvws-qa-tabs-nav .drvws-qa-tab-btn {
    background: transparent !important;
    color: var(--fg-secondary) !important;
    border-bottom: 2px solid transparent !important;
}
body.single-product .drvws-qa-tabs-nav .drvws-qa-tab-btn.active,
body.single-product .drvws-qa-tabs-nav .drvws-qa-tab-btn[aria-selected="true"] {
    color: #fff !important;
    border-bottom-color: var(--sel) !important;
}
/* filter chips / sort reuse the reviews treatment via .drvws-filter-btn /
   .drvws-sort-select rules above; helpful buttons: */
body.single-product .drvws-qa-tab-widget .drvws-helpful-btn,
body.single-product .drvws-qa-tab-widget .drvws-not-helpful-btn,
body.single-product .drvws-qa-tab-widget .drvws-page-btn {
    background: transparent !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    color: var(--fg-tertiary) !important;
}
body.single-product .drvws-qa-tab-widget .drvws-helpful-btn:hover,
body.single-product .drvws-qa-tab-widget .drvws-not-helpful-btn:hover,
body.single-product .drvws-qa-tab-widget .drvws-page-btn:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
/* ask-a-question form fields */
body.single-product .drvws-qa-form input[type="text"],
body.single-product .drvws-qa-form input[type="email"],
body.single-product .drvws-qa-form textarea {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.single-product .drvws-qa-form input:focus,
body.single-product .drvws-qa-form textarea:focus {
    border-color: var(--acc) !important;
    outline: none !important;
}
body.single-product .drvws-qa-form label {
    color: var(--fg-secondary) !important;
}
body.single-product .drvws-qa-form .drvws-submit-button {
    background: var(--lime-500) !important;
    color: #0A0D0F !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    font-weight: 800 !important;
}
body.single-product .drvws-qa-form .drvws-submit-button:hover {
    background: var(--lime-600) !important;
}

/* ==========================================================================
   PDP CENTERING — neutralise the Kirki inline `.content-area{width:76%}`
   (theme mod shoptimizer_layout_content_width default). The parent's own
   product.css intends `.single-product .content-area{width:100%}` but the
   inline Customizer CSS wins the cascade; at wide viewports #primary then
   computes to 76% of the .col-full rail and the 1280px-clamped
   .product-details-wrapper lands left of the header rail. Scoped to
   single-product only — blog/static pages keep the Customizer width.
   ========================================================================== */
@media (min-width: 993px) {
    body.single-product #primary.content-area {
        width: 100%;
        float: none;
    }
}

/* ── Lazy YouTube video modal (#90): dark GPD overlay, 16:9 frame ─────────── */
body .gpd-video-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
body .gpd-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 11, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body .gpd-video-modal__dialog {
    position: relative;
    width: min(960px, 100%);
}
body .gpd-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line-1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    background: #000;
}
body .gpd-video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
body .gpd-video-modal__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--line-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
body .gpd-video-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}
body .gpd-video-modal__close svg { width: 18px; height: 18px; }
body.gpd-video-modal-open { overflow: hidden; }
@media (max-width: 600px) {
    body .gpd-video-modal { padding: 16px; }
    body .gpd-video-modal__close { top: -42px; }
}

/* ------------------------------------------------------------------ *
 * CommerceKit "Notify me when back in stock" waitlist popup — GPD dark
 * The plugin ships a light/white modal with its own ID-specificity inline
 * <style> printed in the body (so it source-orders after this head sheet);
 * overrides therefore use !important to win, mirroring gpd-checkout.css.
 * The reparent-to-body fix lives in assets/js/single-product.js.
 * ------------------------------------------------------------------ */

/* Backdrop: darker scrim + blur, matching .gpd-bnpl-modal */
#commercekit-waitlist-popup {
    background-color: rgba(6, 8, 10, .7) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Panel */
#commercekit-waitlist-wrap {
    background-color: var(--surface-elev) !important; /* #1A2028 */
    color: var(--fg-1) !important;
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-lg);
}

/* Close button: white icon (svg uses currentColor) on glass disc */
#commercekit-waitlist-close {
    width: 32px !important;
    height: 32px !important;
    top: 14px !important;
    right: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transition: background .2s;
}
#commercekit-waitlist-close:hover { background: rgba(255, 255, 255, .15); }
#commercekit-waitlist-close svg { width: 18px !important; height: 18px !important; }

/* Product header row */
#commercekit-waitlist-wrap .commercekit-waitlist-head {
    background: var(--bg-3) !important; /* #161C20 raised */
    border-bottom: 1px solid var(--line-2);
}
#commercekit-waitlist-wrap .cgkit-product-name { color: #fff; }
#commercekit-waitlist-wrap .cgkit-product-price,
#commercekit-waitlist-wrap .cgkit-product-price .woocommerce-Price-amount,
#commercekit-waitlist-wrap .cgkit-product-price .woocommerce-Price-currencySymbol {
    color: var(--fg-accent) !important; /* lime */
}

/* Form body */
#commercekit-waitlist-wrap .commercekit-waitlist {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#commercekit-waitlist-wrap .commercekit-waitlist p { color: #fff; }
#commercekit-waitlist-wrap .commercekit-waitlist label { color: var(--fg-secondary); }
#commercekit-waitlist-wrap #ckwtl-consent { accent-color: var(--lime-500); }

/* Email input: GPD glass field with lime focus (mirrors gpd-checkout.css) */
#commercekit-waitlist-wrap #ckwtl-email {
    background: var(--surface-glass) !important;
    border: 1px solid var(--line-1) !important;
    color: #fff !important;
    border-radius: var(--r-md);
}
#commercekit-waitlist-wrap #ckwtl-email::placeholder { color: var(--fg-tertiary); }
#commercekit-waitlist-wrap #ckwtl-email:focus {
    border-color: var(--lime-500) !important;
    background: rgba(255, 255, 255, .06) !important;
    outline: none;
}
#commercekit-waitlist-wrap #ckwtl-email.error { border-color: var(--gpd-danger, #FF5C5C) !important; }

/* Submit button: lime primary CTA when enabled, dimmed when disabled (consent unticked) */
#commercekit-waitlist-wrap #ckwtl-button {
    background: var(--lime-500) !important;
    color: #0A0D0F !important;
    font-weight: 800;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    cursor: pointer;
}
#commercekit-waitlist-wrap #ckwtl-button:hover:not(:disabled) { box-shadow: var(--shadow-glow); }
#commercekit-waitlist-wrap #ckwtl-button:disabled {
    background: var(--surface-glass) !important;
    color: var(--fg-tertiary) !important;
    cursor: not-allowed;
}