/* 2026-05-10 v2: removed the "hide Shop nav-menu link" rules — the
       mega-menu is now INSIDE that nav link via wp_nav_menu_items filter
       (see inc/mega-menu.php). Hiding it would kill the entire mega-menu
       trigger.

       === BLOCKSY BLUE BLEED OVERRIDE ===
       Blocksy's customizer sets --theme-palette-color-3 / -4 to a navy
       blue (#255876) and Blocksy's heading rules set color to that
       palette token. The design system wants headings in --ink (#0E0F12).
       Force the design-system colour on every heading site-wide. */
    h1, h2, h3, h4, h5, h6,
    .archive-title, .archive-head h1,
    .entry-title, .page-title,
    .product .nm a, .product .name a,
    .ct-dynamic-data h1, .ct-dynamic-data h2, .ct-dynamic-data h3,
    .ct-dynamic-data h4, .ct-dynamic-data h5, .ct-dynamic-data h6 {
        color: #0E0F12 !important;
    }
    /* Body text too — was inheriting the navy via Blocksy's text-color token */
    body, p, .archive-lede, .ct-dynamic-data p {
        color: #0E0F12;
    }

    /* === /our-story/ Trustpilot card CTA fix ===
       The generic `.cta` rule in page-about.css (cta-strip) is loaded after
       the `.tp-card .cta` rule and at the same specificity, so the
       "Read the reviews" pill on the Trustpilot card was being painted as a
       240px-tall white CTA card, covering the link text. Force the pill
       styling back. */
    .page-template-page-our-story .tp-card .cta,
    body .tp-card .cta,
    a.tp-card .cta,
    a.tp-card span.cta {
        margin-top: 8px !important;
        align-self: flex-start !important;
        background: #fff !important;
        color: #00925E !important;
        padding: 8px 14px !important;
        border-radius: 99px !important;
        font-weight: 700 !important;
        font-size: 12.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        width: auto !important;
    }
    .tp-card .cta svg { width: 11px !important; height: 11px !important; }

    /* === SINGLE PRODUCT INFO CARD: split lower content into 2 columns ===
       The right-column info card stacks too tall in 1 column. Below the
       short description (.summary block), the rest (IN STOCK, Buy/Subscribe,
       trust boxes, wishlist, meta, share) gets re-flowed into a 2-column
       responsive grid so it doesn't form a single tall narrow stack. */
    @media (min-width: 1100px) {
        body.single-product .product-info,
        body.product-template-default .product-info {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 18px 24px;
            align-items: start;
        }
        /* Items that should span both columns at the top of the card */
        body.single-product .product-info > .product-tags,
        body.single-product .product-info > .trust-signals,
        body.single-product .product-info > .summary,
        body.single-product .product-info > .product-percup-hero,
        body.single-product .product-info > .why-this-tea,
        body.single-product .product-info > .by-brand-card,
        body.product-template-default .product-info > .product-tags,
        body.product-template-default .product-info > .trust-signals,
        body.product-template-default .product-info > .summary,
        body.product-template-default .product-info > .product-percup-hero,
        body.product-template-default .product-info > .why-this-tea,
        body.product-template-default .product-info > .by-brand-card {
            grid-column: 1 / -1;
        }
        /* The big 2-up cells: IN STOCK box + Buy/Subscribe block sit side-by-side;
           trust-row of 4 mini-cards below spans both. */
        body.single-product .product-info > .ct-product-add-to-cart,
        body.product-template-default .product-info > .ct-product-add-to-cart {
            grid-column: 1 / -1;
        }
        body.single-product .product-info > .product-trust-row,
        body.product-template-default .product-info > .product-trust-row {
            grid-column: 1 / -1;
        }
        body.single-product .product-info > .product_meta,
        body.single-product .product-info > .share-strip,
        body.product-template-default .product-info > .product_meta,
        body.product-template-default .product-info > .share-strip {
            grid-column: 1 / -1;
        }
    }

    /* === SINGLE PRODUCT LAYOUT FIX ===
       Blocksy's `.is-width-constrained` rule:
           .is-width-constrained {
               margin-inline: auto;
               width: var(--theme-container-width);
               max-width: var(--theme-block-max-width);
           }
       That `--theme-container-width` is Blocksy customizer-controlled and
       was constraining the entire product article during the production cutover. The fix:
       (a) override the Blocksy CSS variables on the page so any
           `is-width-constrained` resolves to 100%/none, AND
       (b) belt-and-braces hard-override `width` / `max-width` on the
           specific wrappers with very high specificity. */

    /* (a) Reset the Blocksy CSS variables on single product pages */
    html body.single-product,
    html body.product-template-default {
        --theme-container-width: 100% !important;
        --theme-container-width-base: 100% !important;
        --theme-block-max-width: none !important;
        --theme-narrow-container-width: 100% !important;
        --theme-wide-container-width: 100% !important;
        --container-width: 100% !important;
        --narrow-container-width: 100% !important;
    }

    /* (b) Direct overrides on every wrapper class Blocksy might apply.
       NOTE: margin-inline must stay `auto` so the wrapper centers in the
       viewport — setting it to 0 was pushing the entire product layout
       hard against the left edge of the page. */
    html body.single-product .hero-section,
    html body.single-product .hero-section.is-width-constrained,
    html body.single-product .is-width-constrained,
    html body.single-product .product-entry-wrapper,
    html body.single-product .product-entry-wrapper.is-width-constrained,
    html body.single-product .ct-container,
    html body.single-product .ct-container-narrow,
    html body.single-product .entry-content,
    html body.product-template-default .hero-section,
    html body.product-template-default .hero-section.is-width-constrained,
    html body.product-template-default .is-width-constrained,
    html body.product-template-default .product-entry-wrapper,
    html body.product-template-default .product-entry-wrapper.is-width-constrained,
    html body.product-template-default .ct-container,
    html body.product-template-default .ct-container-narrow {
        max-width: none !important;
        width: 100% !important;
        inline-size: 100% !important;
        max-inline-size: none !important;
        margin-inline: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* (c) Force the product-grid to use both columns at desktop */
    html body.single-product .product-grid,
    html body.product-template-default .product-grid {
        display: grid !important;
        grid-template-columns: 6fr 5fr !important;
        gap: 36px !important;
        max-width: 1280px !important;
        margin: 0 auto 36px !important;
        padding: 0 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    @media (max-width: 1100px) {
        html body.single-product .product-grid,
        html body.product-template-default .product-grid {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
        }
    }
    /* Defensive: kill the inner product-entry-wrapper that wraps the gallery */
    html body.single-product .product-gallery .product-entry-wrapper,
    html body.product-template-default .product-gallery .product-entry-wrapper {
        max-width: none !important;
        width: 100% !important;
    }

    /* === WIKI A-Z DIRECTORY (every entry, surfaced from landing) === */
    .wiki-az {
        margin: 48px auto 0;
        max-width: 1100px;
        padding: 32px 24px 60px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 1px 0 rgba(14,15,18,.04), 0 8px 28px rgba(14,15,18,.06);
    }
    .wiki-az-head .kicker {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; font-weight: 700;
        letter-spacing: .12em; text-transform: uppercase;
        color: #5C6270;
    }
    .wiki-az-head h2 {
        font-family: 'Instrument Serif', Georgia, serif;
        font-size: 36px; font-weight: 400; line-height: 1.05;
        margin: 4px 0 8px; color: #0E0F12 !important;
    }
    .wiki-az-head .muted { color: #5C6270; margin: 0 0 18px; font-size: 14px; }
    .wiki-az-jump {
        display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px;
        padding-bottom: 18px; border-bottom: 1px solid rgba(14,15,18,.08);
    }
    .wiki-az-jump a {
        width: 30px; height: 30px;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px; font-weight: 700;
        color: #0E0F12 !important;
        background: #F2F4F7; border-radius: 8px;
        text-decoration: none;
        transition: background .14s, color .14s;
    }
    .wiki-az-jump a:hover {
        background: #0E0F12; color: #00E0FF !important;
    }
    .wiki-az-section { margin-bottom: 28px; scroll-margin-top: 100px; }
    .wiki-az-section h3 {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 14px; font-weight: 800;
        color: #0E0F12 !important;
        margin: 0 0 12px;
        padding-bottom: 6px;
        border-bottom: 2px solid #0E0F12;
        display: inline-block;
    }
    .wiki-az-list {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 4px 18px;
    }
    .wiki-az-list li { padding: 0; margin: 0; }
    .wiki-az-list a {
        display: block; padding: 6px 0;
        font-size: 14px; color: #0E0F12 !important;
        text-decoration: none;
        transition: color .12s;
        border-bottom: 1px solid rgba(14,15,18,.04);
    }
    .wiki-az-list a:hover { color: #00B8D4 !important; }

    /* === PRODUCT GRID + CARD (.pcard) — matches shop.html spec ===
       2026-05-11: bumped from 3-col to 4-col at desktop. Lee wants a denser
       visual scan now that the cards are compact + tea-family gradient-framed.
       Was 3-col with !important overrides that beat the wc-archive.css rules. */
    body.woocommerce .archive-loop ul.products,
    body.woocommerce-page ul.products,
    body.archive ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 22px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    @media (max-width: 1180px) {
      body.woocommerce ul.products,
      body.woocommerce-page ul.products,
      body.archive ul.products {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 900px) {
      body.woocommerce ul.products,
      body.woocommerce-page ul.products,
      body.archive ul.products {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 480px) {
      body.woocommerce ul.products,
      body.woocommerce-page ul.products,
      body.archive ul.products {
          grid-template-columns: 1fr !important;
      }
    }

    /* The pcard itself */
    li.pcard {
        list-style: none;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 1px 0 rgba(14,15,18,.04), 0 6px 16px rgba(14,15,18,.06);
        transition: transform .18s ease, box-shadow .18s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    li.pcard:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 0 rgba(14,15,18,.04), 0 18px 44px rgba(14,15,18,.10);
    }
    li.pcard:hover .qadd {
        opacity: 1; transform: translateY(0); pointer-events: auto;
    }
    li.pcard .pimg {
        position: relative; aspect-ratio: 1/1; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        text-decoration: none;
        background: #fff !important;
    }
    li.pcard .pimg img {
        width: 100%; height: 100%; object-fit: contain;
        padding: 8%; box-sizing: border-box;
        transition: transform .25s ease;
        display: block;
        background: transparent !important;
        mix-blend-mode: normal !important;
        filter: none !important;
    }
    li.pcard:hover .pimg img { transform: scale(1.04); }

    /* All bg-* helper classes are forced white; tea-family colour lives on .pbody (bottom half). */
    .bg-cream, .bg-green, .bg-pink, .bg-amber, .bg-mint,
    .bg-charcoal, .bg-purple, .bg-coffee, .bg-sky, .bg-rose {
        background: #fff !important;
        background-image: none !important;
    }

    /* Badge pill */
    li.pcard .bdg {
        position: absolute; top: 10px; left: 10px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em;
        padding: 4px 8px; border-radius: 999px;
        pointer-events: none;
        z-index: 2;
    }
    .bdg-new   { background: #0E0F12; color: #00E0FF; }
    .bdg-sale  { background: #FF2D8E; color: #fff; }
    .bdg-rare  { background: #FFB347; color: #0E0F12; }
    .bdg-staff { background: #B8FF3C; color: #1F3300; }
    .bdg-stock { background: rgba(14,15,18,.86); color: #fff; }

    /* Caffeine label on image */
    li.pcard .caff-label {
        position: absolute; bottom: 10px; left: 10px;
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(14,15,18,.84);
        border: 1px solid rgba(255,255,255,.76);
        box-shadow: 0 8px 18px rgba(14,15,18,.18), 0 1px 0 rgba(255,255,255,.36) inset;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 5px 10px 5px 7px; border-radius: 999px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .06em;
        color: #fff !important;
        text-shadow: 0 1px 0 rgba(0,0,0,.26);
        pointer-events: none;
        z-index: 2;
    }
    li.pcard .caff-label .pip {
        width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(14,15,18,.18);
        box-shadow: 0 1px 4px rgba(14,15,18,.22);
    }
    li.pcard .caff-label .pip::after {
        content: "";
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--caf-dot, #0E0F12);
    }
    .cl-full  { --caf-dot: #0E0F12; }
    .cl-decaf { --caf-dot: #00B8D4; }
    .cl-free  { --caf-dot: #B8FF3C; }
    .cl-low   { --caf-dot: #FFB347; }

    /* Quick-add hover button */
    li.pcard .qadd {
        position: absolute; bottom: 10px; right: 10px;
        background: #0E0F12; color: #00E0FF;
        border-radius: 999px;
        padding: 0 14px 0 10px; height: 34px;
        display: inline-flex; align-items: center; gap: 8px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .06em;
        opacity: 0; transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events: none;
        z-index: 2;
        text-decoration: none;
    }
    li.pcard .qadd .plus {
        width: 22px; height: 22px; border-radius: 50%;
        background: #00E0FF; color: #0E0F12;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 16px; font-weight: 700;
    }

    /* Card body — tea-family colour painted on the bottom half via --tea-tint.
       Fallback (no family class) = white. */
    li.pcard .pbody {
        padding: 14px 16px 16px;
        display: flex; flex-direction: column; gap: 8px;
        flex: 1;
        background: color-mix(in srgb, var(--tea-tint, transparent) 14%, #fff);
    }
    li.pcard .pcard-add,
    li.pcard .pcard-stock {
        margin-top: auto;
    }
    li.pcard .brand-tag {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
        font-weight: 600; color: #5C6270;
    }
    li.pcard .name {
        font-size: 14.5px; font-weight: 700; letter-spacing: -.008em;
        line-height: 1.3; color: #0E0F12 !important; margin: 0;
    }
    li.pcard .name a { color: inherit !important; text-decoration: none; }
    li.pcard .tnotes { display: flex; flex-wrap: wrap; gap: 4px; }
    li.pcard .tnote {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; font-weight: 500;
        padding: 3px 7px; border-radius: 999px;
        background: #F2F4F7; color: #5C6270;
        text-transform: lowercase;
    }
    li.pcard .prow {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 8px; margin-top: 4px;
    }
    li.pcard .ppc {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px; color: #5C6270;
    }
    li.pcard .ppc b {
        font-size: 14px; font-weight: 700; color: #0E0F12;
    }
    li.pcard .ppc span { color: #8A8F9C; }
    li.pcard .ptotal {
        font-size: 16px; font-weight: 800; color: #0E0F12;
    }
    li.pcard .ptotal del {
        font-size: 12px; font-weight: 500; color: #8A8F9C; margin-right: 4px;
    }
    li.pcard .ptotal .woocommerce-Price-amount { font-weight: 800; }
    /* Out-of-stock: dim + desaturate the real thumbnail but keep it clearly
       visible (a pale product image at opacity .5 on white read as blank). A
       faint neutral panel sits behind so the area never looks empty. */
    li.pcard.outofstock .pimg { background: #f1f3f6 !important; }
    li.pcard.outofstock .pimg img { opacity: .62; filter: grayscale(.35); }

    /* Out-of-stock card footer, wired into the existing stock-alert store. */
    li.pcard .pcard-stock {
        min-height: 116px;
        padding: 12px;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,.12);
        background:
            radial-gradient(90% 120% at 0% 0%, rgba(48,216,200,.22), transparent 58%),
            linear-gradient(135deg, #102927 0%, #241915 100%);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 32px -26px rgba(7,31,29,.55);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    li.pcard .pcard-stock-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    li.pcard .pcard-stock-title {
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 800;
        color: #fff;
    }
    li.pcard .pcard-stock-note {
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
        color: rgba(255,255,255,.72);
    }
    li.pcard .pcard-stock-form,
    li.pcard .pcard-stock-row {
        margin: 0;
    }
    li.pcard .pcard-stock-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        align-items: stretch;
    }
    li.pcard .pcard-stock input[type="email"] {
        min-width: 0;
        width: 100%;
        min-height: 38px;
        border: 0;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
        color: #0E0F12;
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        padding: 0 12px;
        box-shadow: 0 1px 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(14,15,18,.04);
    }
    li.pcard .pcard-stock input[type="email"]::placeholder {
        color: rgba(92,98,112,.78);
    }
    li.pcard .pcard-stock input[type="email"]:focus {
        outline: 2px solid rgba(94,234,212,.42);
        outline-offset: 2px;
        border-color: #0fc4a8;
    }
    li.pcard .pcard-stock button {
        min-height: 38px;
        border: 0;
        border-radius: 999px;
        padding: 0 13px;
        background: #30d8c8;
        color: #102927;
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .02em;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .14s ease, background .14s ease, color .14s ease, opacity .14s ease;
    }
    li.pcard .pcard-stock button:hover,
    li.pcard .pcard-stock button:focus-visible {
        transform: translateY(-1px);
        background: #ffffff;
        color: #102927;
    }
    body.woocommerce-shop li.pcard .pcard-stock button,
    body.post-type-archive-product li.pcard .pcard-stock button,
    body.tax-product_cat li.pcard .pcard-stock button {
        background: #30d8c8 !important;
        color: #102927 !important;
    }
    body.woocommerce-shop li.pcard .pcard-stock button:hover,
    body.woocommerce-shop li.pcard .pcard-stock button:focus-visible,
    body.post-type-archive-product li.pcard .pcard-stock button:hover,
    body.post-type-archive-product li.pcard .pcard-stock button:focus-visible,
    body.tax-product_cat li.pcard .pcard-stock button:hover,
    body.tax-product_cat li.pcard .pcard-stock button:focus-visible {
        background: #ffffff !important;
        color: #102927 !important;
    }
    body.woocommerce-shop .sp .sp-products li.pcard .pcard-stock .pcard-stock-form .pcard-stock-row button,
    body.post-type-archive-product .sp .sp-products li.pcard .pcard-stock .pcard-stock-form .pcard-stock-row button,
    body.tax-product_cat .sp .sp-products li.pcard .pcard-stock .pcard-stock-form .pcard-stock-row button {
        background: #30d8c8 !important;
        color: #102927 !important;
    }
    li.pcard .pcard-stock button:disabled {
        opacity: .68;
        cursor: wait;
        transform: none;
    }
    li.pcard .pcard-stock-msg {
        margin: 0;
        padding: 8px 10px;
        border-radius: 10px;
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 700;
    }
    li.pcard .pcard-stock-msg.success {
        background: rgba(6,95,70,.11);
        color: #065f46;
    }
    li.pcard .pcard-stock-msg.error {
        background: rgba(153,27,27,.10);
        color: #991b1b;
    }
    @media (max-width: 560px) {
        li.pcard .pcard-stock-row {
            grid-template-columns: 1fr;
        }
        li.pcard .pcard-stock button {
            width: 100%;
        }
    }

    /* === ARCHIVE-HEAD STATS ROW (live product metrics from WooCommerce) === */
    .archive-stats {
        display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
        margin: 18px 0 22px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px; font-weight: 500;
        text-transform: uppercase; letter-spacing: .06em;
        color: #5C6270;
    }
    .archive-stats .stat b {
        font-weight: 700; color: #0E0F12;
    }
    .archive-stats .stat-sep { color: #C8CDD6; }

    /* === TEA-FAMILY PILL ROW === */
    nav.cat-nav {
        display: flex; gap: 8px; flex-wrap: nowrap;
        overflow-x: auto;
        margin: 8px 0 24px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    nav.cat-nav::-webkit-scrollbar { display: none; }
    nav.cat-nav .cat-pill {
        flex-shrink: 0;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 16px;
        border-radius: 999px;
        font-size: 13px; font-weight: 600;
        background: #fff;
        border: 1.5px solid rgba(14,15,18,.10);
        color: #5C6270 !important;
        text-decoration: none;
        transition: border-color .14s ease, color .14s ease, background .14s ease;
    }
    nav.cat-nav .cat-pill:hover { border-color: #0E0F12; color: #0E0F12 !important; }
    nav.cat-nav .cat-pill.on {
        background: #0E0F12;
        color: #00E0FF !important;
        border-color: #0E0F12;
    }
    nav.cat-nav .cat-pill .swatch {
        width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    }
    nav.cat-nav .cat-pill .ct {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px; font-weight: 500; opacity: .7;
    }
    nav.cat-nav .cat-pill.on .ct { color: rgba(0,224,255,.75); }

    /* === FILTER RAIL === */
    aside.filters {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 1px 0 rgba(14,15,18,.04), 0 4px 14px rgba(14,15,18,.04);
        overflow: hidden;
        align-self: flex-start;
        position: sticky;
        top: 96px;
    }
    .filt-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(14,15,18,.06);
    }
    .filt-head h3 {
        font-size: 14px; font-weight: 800; margin: 0; color: #0E0F12;
    }
    .filt-head a#clearFilters {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; font-weight: 600;
        color: #FF2D8E;
        text-transform: uppercase; letter-spacing: .08em;
        text-decoration: none;
    }
    .filt-sect {
        padding: 14px 18px;
        border-bottom: 1px solid rgba(14,15,18,.06);
    }
    .filt-sect:last-of-type { border-bottom: none; }
    .filt-sect h4 {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .10em;
        color: #0E0F12 !important;
        margin: 0 0 10px;
        display: flex; justify-content: space-between; align-items: center;
    }
    .caff-row { display: flex; flex-direction: column; gap: 6px; }
    .caff-opt {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px; border-radius: 10px;
        cursor: pointer; transition: background .12s ease;
        border: 1.5px solid transparent;
        text-decoration: none;
        color: inherit;
    }
    .caff-opt:hover { background: #F2F4F7; }
    .caff-opt.on { background: #0E0F12; border-color: #0E0F12; }
    .caff-opt .box {
        width: 20px; height: 20px; border-radius: 6px;
        border: 1.5px solid #C8CDD6; background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0; transition: all .12s;
    }
    .caff-opt.on .box { background: #00E0FF; border-color: #00E0FF; }
    .caff-opt .lbl { font-size: 13px; font-weight: 500; flex: 1; color: #0E0F12; }
    .caff-opt.on .lbl { color: #FAF3DF !important; font-weight: 600; }
    .caff-opt .ct {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; color: #8A8F9C;
    }
    .caff-opt.on .ct { color: rgba(250,243,223,.6) !important; }
    .caff-pip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    .price-range { display: flex; flex-direction: column; gap: 8px; }
    .price-range input[type="range"] {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 4px; border-radius: 2px;
        background: #F2F4F7; outline: none; cursor: pointer;
    }
    .price-range input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; width: 18px; height: 18px;
        border-radius: 50%; background: #0E0F12;
        border: 3px solid #00E0FF; cursor: pointer;
    }
    .price-vals {
        display: flex; justify-content: space-between;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px; font-weight: 600; color: #0E0F12;
    }

    .cb-list { display: flex; flex-direction: column; gap: 3px; }
    .cb-row {
        display: flex; align-items: center; gap: 10px;
        padding: 6px 8px; border-radius: 8px;
        cursor: pointer; transition: background .12s;
        text-decoration: none; color: inherit;
    }
    .cb-row:hover { background: #F2F4F7; }
    .cb-row.on .box { background: #0E0F12; border-color: #0E0F12; }
    .cb-row .box {
        width: 18px; height: 18px; border-radius: 5px;
        border: 1.5px solid #C8CDD6; background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0; transition: all .12s;
    }
    .cb-row .nm { flex: 1; font-size: 13px; font-weight: 500; color: #0E0F12; }
    .cb-row .ct {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; color: #8A8F9C;
    }
    .filt-more {
        display: block; text-align: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; font-weight: 600; color: #5C6270;
        text-transform: uppercase; letter-spacing: .08em;
        margin-top: 8px; cursor: pointer;
        text-decoration: none;
    }
    .filt-more:hover { color: #0E0F12; }

    .tp-mini {
        padding: 12px 18px;
        background: linear-gradient(135deg,#00B67A,#00925E);
        color: #fff;
        border-radius: 0 0 18px 18px;
    }
    .tp-mini .stars { display: flex; gap: 2px; margin-bottom: 4px; }
    .tp-mini .star {
        width: 16px; height: 16px;
        background: #fff; color: #00B67A; border-radius: 2px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .tp-mini .star svg { width: 11px; height: 11px; fill: currentColor; }
    .tp-mini .label { font-size: 11.5px; font-weight: 600; line-height: 1.35; }
    .tp-mini .label b { font-size: 15px; }

    /* === ADD-TO-CART vs READ-MORE button parity ===
       WC renders "Read more" as a plain link <a> for sold-out / variable
       products. It looked nothing like the rounded-pill "Add to basket"
       button next to it. Match the styling. */
    .product .button.product_type_simple,
    .product .button.product_type_variable,
    .product .button.add_to_cart_button,
    .product a.button.product_type_external,
    li.product .button {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 9px 18px !important;
        background: #0E0F12 !important;
        color: #00E0FF !important;
        border-radius: 999px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        border: none !important;
        line-height: 1.2 !important;
        transition: background .14s ease, color .14s ease;
    }
    .product .button:hover {
        background: #1a1c20 !important;
        color: #00E0FF !important;
    }

    /* Blocksy Pro shows the WooCommerce category list on each archive card
       by default (data-id="categories" element). LIVE has this turned off in
       the customizer so cards stay clean. Until that setting is mirrored on
       production, suppress the category list inside any product card. */
    li.product .ct-woo-card-meta [data-id="categories"],
    li.product [data-id="categories"],
    li.product ul:has(a[class*="ct-term-"]),
    li.product a[class*="ct-term-"] {
        display: none !important;
    }

    /* Blocksy parent theme renders a .hero-section containing the page title
       and term description BEFORE our archive template's <header class="archive-head">.
       On archives the same H1 + description ends up rendered twice. Hide the
       Blocksy hero so only our designed archive head shows. */
    .archive .hero-section,
    .tax-product_cat .hero-section,
    .tax-product_brand .hero-section,
    .tax-product_tag .hero-section,
    .post-type-archive-product .hero-section,
    body.woocommerce-shop .hero-section,
    body.woocommerce-page.archive .hero-section {
        display: none !important;
    }