/* 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;
    }
    

    /* Blocksy "Suggested Products" carousel (cart + checkout) — exclusively
       Blocksy's .ct-suggested-products; our own cross-sell uses
       #cross-sells-heading, so this is safe. Belt for the closure removal above. */
    .ct-suggested-products,
    .ct-suggested-products--cart,
    .ct-suggested-products--checkout { display: none !important; }
    /* Hide WC/Blocksy upsells, related-products, cross-sells, keep ONLY
       the "Similar teas from other brands" widget (id=cross-sells-heading)
       rendered by inc/cross-sell-rules.php. */
    section.upsells,
    section.related.upsells.products.related.products.cross-sells.ct-suggested-products.ct-suggested-products--cart.ct-suggested-products--related.ct-suggested-products--upsells.ct-cross-sells,
    aside.cart_collaterals .cross-sells {
        display: none !important;
    }
    /* Belt: also hide ct-module-title h2 if it contains 'You may also like' or
       'Related products', narrow targeting via :has() (modern browsers). */
    section:has(> .ct-module-title),
    div:has(> .ct-module-title) {
        /* Only hide if it's an upsells/related-products module, our
           cross-sells section uses #cross-sells-heading, not ct-module-title. */
    }
    /* Direct hit: any UL with class .products that's NOT inside our
       similar-teas section */
    body.single-product ul.products.related,
    body.single-product ul.products.upsells {
        display: none !important;
    }

    /* === SINGLE-PRODUCT BLOCKSY ACTION BUTTONS (wishlist + compare) ===
       Blocksy injects its own wishlist + compare buttons into the WC
       product summary via .ct-product-additional-actions. We have our own
       "Wishlist | Compare" links rendered by inc/wishlist.php further
       down the info card, so these are duplicates. Hide them. */
    body.single-product .ct-product-additional-actions,
    body.single-product .ct-wishlist-button-single,
    body.single-product .ct-compare-button-single,
    body.single-product .summary .ct-wishlist-button,
    body.single-product .summary .ct-compare-button,
    body.single-product .summary [class*="ct-wishlist-button"],
    body.single-product .summary [class*="ct-compare-button"] {
        display: none !important;
    }

    /* === ARCHIVE CARD ACTION TRIPLE (wishlist + compare + quick-view) ===
       Blocksy injects three icon buttons on each product card via
       .ct-woo-card-extra. Our .pcard layout has its own .qadd Quick Buy
       hover button.wheart wishlist heart, and we don't surface compare
       at all. Hide Blocksy's triple on cards. */
    li.pcard .ct-woo-card-extra,
    li.product .ct-woo-card-extra,
    li.pcard .ct-woo-card-actions,
    li.product .ct-woo-card-actions,
    li.pcard [class*="ct-wishlist-button-archive"],
    li.product [class*="ct-wishlist-button-archive"],
    li.pcard [class*="ct-compare-button-archive"],
    li.product [class*="ct-compare-button-archive"],
    li.pcard .ct-open-quick-view,
    li.product .ct-open-quick-view {
        display: none !important;
    }
    

.sp-card{--paper:#fff;--ink:#0c1a36;--ink-2:#2a3a5f;--muted:rgba(12,26,54,.45);--line:rgba(12,26,54,.10);--bg-2:#f4f6f9;--accent:#5eead4;--accent-dark:#0fc4a8;--page:#ebeef2;
 background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .2s;list-style:none;margin:0;font-family:'DM Sans',-apple-system,sans-serif;}
ul.products:has(.sp-card){display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0;}
.related ul.products:has(.sp-card),.up-sells ul.products:has(.sp-card){grid-template-columns:repeat(4,1fr);}
.sp-card:hover{transform:translateY(-2px);border-color:rgba(12,26,54,.25);box-shadow:0 16px 32px -16px rgba(12,26,54,.15);}
.sp-card a{text-decoration:none;color:inherit;}
/* --- vis area: fixed-height white container, no pseudo-element overlays --- */
.sp-card-vis{height:150px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;}
.sp-card-vis::before,.sp-card-vis::after,.sp-card-vis.has-img::before{display:none;}
.sp-card-img{position:relative;width:auto;height:100%;max-width:100%;max-height:130px;object-fit:contain;padding:10px;z-index:1;filter:none;transition:transform .25s ease;}
.sp-card:hover .sp-card-img{transform:scale(1.045);}
/* All tone vis areas stay white (teas-tea-type-theme.php handles body gradients) */
.sp-tone-cyan .sp-card-vis,.sp-tone-sky .sp-card-vis,.sp-tone-plum .sp-card-vis,
.sp-tone-mint .sp-card-vis,.sp-tone-rose .sp-card-vis,.sp-tone-sage .sp-card-vis,
.sp-tone-amber .sp-card-vis,.sp-tone-rust .sp-card-vis{background:#fff;}
/* --- tags: pill, absolute top-left --- */
.sp-card-tag{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;font-weight:700;}
.sp-card-tag-sale{background:#0c1a36;color:#5eead4;}
.sp-card-tag-rare{background:#5eead4;color:#0c1a36;}
/* letterbox badge: absolute top-right */
.sp-card-lb{position:absolute!important;top:10px;right:10px;z-index:2;padding:3px 9px;background:rgba(12,26,54,.75);color:#fff;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.10em;font-weight:700;text-decoration:none;}
/* sp-card-name hidden in V3 (product name is in card body) */
.sp-card-name{display:none;}
/* --- card body --- */
.sp-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1;}
/* type + caffeine pill row */
.sp-card-pills{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.sp-card-type{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(12,26,54,.06);border:1px solid rgba(12,26,54,.10);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;font-weight:700;color:var(--ink);}
.sp-card-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sp-card-caf{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;font-weight:700;}
.sp-caf-caf{background:rgba(14,138,62,.10);color:#0e6b32;border:1px solid rgba(14,138,62,.22);}
.sp-caf-caf-free{background:rgba(94,234,212,.12);color:var(--accent-dark);border:1px solid rgba(94,234,212,.30);}
.sp-caf-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.sp-card-brand{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--muted);font-weight:700;}
.sp-card-h{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:15px;line-height:1.3;color:var(--ink);margin:0;}
.sp-card-h a{color:inherit;}
.sp-card-tags{display:flex;flex-wrap:wrap;gap:4px;}
.sp-card-tags span{padding:3px 10px;background:#fff;border:1px solid rgba(12,26,54,.12);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-2);font-weight:700;letter-spacing:.06em;}
.sp-card-rule{height:1px;background:rgba(12,26,54,.08);margin:2px 0;flex-shrink:0;}
.sp-card-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;gap:8px;margin-top:auto;}
.sp-card-pp{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sp-card-cup{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:26px;color:var(--ink);letter-spacing:-.02em;line-height:1;}
.sp-card-cup span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:10px;color:var(--muted);}
.sp-card-cups{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);font-weight:600;}
.sp-card-price{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink);}
.sp-card-price .woocommerce-Price-amount{font-weight:500;}
.sp-card-price del{opacity:.5;font-size:14px;font-weight:400;}
/* add-to-basket: pill shape, navy bg */
.sp-card a.sp-card-add{padding:10px 18px;background:var(--ink);color:#fff!important;border-radius:999px;font-family:'DM Sans',-apple-system,sans-serif;font-weight:600;font-size:13px;transition:all .15s;display:block;text-align:center;margin-top:8px;}
.sp-card a.sp-card-add:hover{background:var(--ink-2);color:#fff!important;}
.sp-card a.sp-card-sub{display:block;text-align:center;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--accent-dark)!important;text-decoration:none;letter-spacing:.01em;font-family:'DM Sans',-apple-system,sans-serif;}
.sp-card a.sp-card-sub:hover{color:var(--ink)!important;text-decoration:underline;}
@media(max-width:1100px){ul.products:has(.sp-card){grid-template-columns:repeat(2,1fr);}}


.sp-card .sp-card-vis,
ul.products .sp-card .sp-card-vis {
	background: #fff !important;
	background-image: none !important;
}
.sp-card .sp-card-vis::before,
.sp-card .sp-card-vis::after {
	display: none !important;
}
/* Title text inside image area no longer needs to be white (image area is now white). */
.sp-card .sp-card-name {
	color: var(--ink, #0c1a36) !important;
	text-shadow: none !important;
}
.sp-card[data-tea-type="black"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a888 100%);position:relative;}.sp-card[data-tea-type="black"] .teas-pip::before{background:#c9a888;}.sp-card[data-tea-type="green"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#b3cba1 100%);position:relative;}.sp-card[data-tea-type="green"] .teas-pip::before{background:#b3cba1;}.sp-card[data-tea-type="white"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ece6d8 100%);position:relative;}.sp-card[data-tea-type="white"] .teas-pip::before{background:#ece6d8;}.sp-card[data-tea-type="oolong"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d4a06a 100%);position:relative;}.sp-card[data-tea-type="oolong"] .teas-pip::before{background:#d4a06a;}.sp-card[data-tea-type="herbal"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#e3a8c0 100%);position:relative;}.sp-card[data-tea-type="herbal"] .teas-pip::before{background:#e3a8c0;}.sp-card[data-tea-type="fruit"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ecabb6 100%);position:relative;}.sp-card[data-tea-type="fruit"] .teas-pip::before{background:#ecabb6;}.sp-card[data-tea-type="chai"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d8b96f 100%);position:relative;}.sp-card[data-tea-type="chai"] .teas-pip::before{background:#d8b96f;}.sp-card[data-tea-type="rooibos"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6826f 100%);position:relative;}.sp-card[data-tea-type="rooibos"] .teas-pip::before{background:#d6826f;}.sp-card[data-tea-type="matcha"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#9bc278 100%);position:relative;}.sp-card[data-tea-type="matcha"] .teas-pip::before{background:#9bc278;}.sp-card[data-tea-type="coffee"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a896 100%);position:relative;}.sp-card[data-tea-type="coffee"] .teas-pip::before{background:#c9a896;}.sp-card[data-tea-type="biscuits"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a673 100%);position:relative;}.sp-card[data-tea-type="biscuits"] .teas-pip::before{background:#c9a673;}.sp-card[data-tea-type="cocoa"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#a07a5e 100%);position:relative;}.sp-card[data-tea-type="cocoa"] .teas-pip::before{background:#a07a5e;}.sp-card[data-tea-type="other"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6c8b8 100%);position:relative;}.sp-card[data-tea-type="other"] .teas-pip::before{background:#d6c8b8;}
.sp-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; }
.teas-pip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; }
.teas-pip-row > * { flex-shrink: 0; }
.teas-pip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 8px; border-radius: 999px;
	font-family: "JetBrains Mono", monospace; font-size: 8.5px;
	letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase;
	background: rgba(255,255,255,.78); color: #131c30;
	border: 1px solid rgba(0,0,0,.10);
	box-shadow: 0 1px 2px rgba(31,44,71,.08), 0 1px 0 rgba(255,255,255,.85) inset;
	white-space: nowrap;
}
.teas-pip::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
	box-shadow: 0 1px 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30);
}
/* Caffeinated vs Caffeine-free — visually differentiated.
   Caffeinated = warm amber (energy / strong-brew association)
   Caffeine-free = cool navy (rest / calm association)
   Both have a clear glass-pill background so they read on any tea-tint. */
.sp-card-caf {
	font-size: 8px !important;
	padding: 2px 7px !important;
	letter-spacing: 0.10em !important;
	white-space: nowrap !important;
}
.sp-card-caf.sp-caf-caf {
	background: rgba(184,85,30,.12) !important;
	color: #8a4318 !important;
	border-color: rgba(184,85,30,.28) !important;
}
.sp-card-caf.sp-caf-caf-free {
	background: rgba(35,55,110,.10) !important;
	color: #2c3e7a !important;
	border-color: rgba(35,55,110,.26) !important;
}
/* 2026-05-21 Lee: subscribe link removed from shop tile — dilutes the clean design.
   Subscribe & save story is fully covered on the product detail page. */
body .sp-card a.sp-card-sub,
body ul.products .sp-card a.sp-card-sub { display: none !important; }

/* Polish: price-per-cup hierarchy (drunk-grandma rule v2).
   Per-cup is THE selling point — make it MASSIVE, deep dark, instantly readable from
   across the room. Total price becomes a tiny caption. No pill chrome — the number
   itself is the visual weight. */
.sp-card .sp-card-pp {
	flex: 1 !important;
	min-width: 0 !important;
}
.sp-card .sp-card-cup {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	font-family: "DM Sans", -apple-system, sans-serif !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: #0c1a36 !important;
	line-height: 1 !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.sp-card .sp-card-cup > span {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.10em !important;
	color: rgba(12,26,54,.70) !important;
	text-transform: uppercase !important;
}
.sp-card .sp-card-cups {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	color: rgba(12,26,54,.55) !important;
	font-weight: 700 !important;
	margin-top: 4px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}
.sp-card .sp-card-price {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	color: rgba(12,26,54,.55) !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	align-self: flex-end !important;
}
.sp-card .sp-card-price::before {
	content: "TOTAL ";
	font-size: 9px;
	letter-spacing: 0.14em;
	color: rgba(12,26,54,.40);
}
.sp-card .sp-card-price .woocommerce-Price-amount {
	font-family: "DM Sans", -apple-system, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: rgba(12,26,54,.75) !important;
}
.sp-card .sp-card-foot {
	align-items: flex-end !important;
	padding-top: 10px !important;
	border-top-color: rgba(0,0,0,.10) !important;
	gap: 10px !important;
}

/* Product detail page main image — keep drop-shadow for edge definition. */
.tpp .main-img img {
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.07)) !important;
}
/* Shop card images — no drop-shadow; white-background shots look cleaner without it. */
.sp-card .sp-card-vis img,
.sp-card .sp-card-img {
	filter: none !important;
}
/* Polish: card depth + lift */
.sp-card {
	box-shadow:
		0 1px 0 rgba(255,255,255,.90) inset,
		0 -1px 0 rgba(30,42,82,.04) inset,
		0 8px 20px -10px rgba(31,44,71,.18),
		0 2px 4px -2px rgba(31,44,71,.10);
}
.sp-card:hover {
	box-shadow:
		0 1px 0 rgba(255,255,255,.90) inset,
		0 -1px 0 rgba(30,42,82,.04) inset,
		0 18px 36px -14px rgba(31,44,71,.30),
		0 3px 6px -2px rgba(31,44,71,.12);
}
/* Image highlight */
.sp-card .sp-card-vis {
	position: relative;
}
.sp-card .sp-card-vis::after {
	content: ""; display: block !important; position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 55%);
	pointer-events: none;
}
.sp-fam[href*="filter_cat=black-tea"] .sp-fam-dot,a.sp-fam[href*="/black-tea/"] .sp-fam-dot{background:#c9a888 !important;}.sp-fam.on[href*="filter_cat=black-tea"],a.sp-fam.on[href*="/black-tea/"]{background:linear-gradient(180deg,#fff 0%,#c9a888 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=black-tea"] .sp-fam-ct,a.sp-fam.on[href*="/black-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=green-tea"] .sp-fam-dot,a.sp-fam[href*="/green-tea/"] .sp-fam-dot{background:#b3cba1 !important;}.sp-fam.on[href*="filter_cat=green-tea"],a.sp-fam.on[href*="/green-tea/"]{background:linear-gradient(180deg,#fff 0%,#b3cba1 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=green-tea"] .sp-fam-ct,a.sp-fam.on[href*="/green-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=white-tea"] .sp-fam-dot,a.sp-fam[href*="/white-tea/"] .sp-fam-dot{background:#ece6d8 !important;}.sp-fam.on[href*="filter_cat=white-tea"],a.sp-fam.on[href*="/white-tea/"]{background:linear-gradient(180deg,#fff 0%,#ece6d8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=white-tea"] .sp-fam-ct,a.sp-fam.on[href*="/white-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=fruit-herbal-tea"] .sp-fam-dot,a.sp-fam[href*="/fruit-herbal-tea/"] .sp-fam-dot{background:#e3a8c0 !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"],a.sp-fam.on[href*="/fruit-herbal-tea/"]{background:linear-gradient(180deg,#fff 0%,#e3a8c0 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"] .sp-fam-ct,a.sp-fam.on[href*="/fruit-herbal-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=rooibos-tea"] .sp-fam-dot,a.sp-fam[href*="/rooibos-tea/"] .sp-fam-dot{background:#d6826f !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"],a.sp-fam.on[href*="/rooibos-tea/"]{background:linear-gradient(180deg,#fff 0%,#d6826f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"] .sp-fam-ct,a.sp-fam.on[href*="/rooibos-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=chai-tea"] .sp-fam-dot,a.sp-fam[href*="/chai-tea/"] .sp-fam-dot{background:#d8b96f !important;}.sp-fam.on[href*="filter_cat=chai-tea"],a.sp-fam.on[href*="/chai-tea/"]{background:linear-gradient(180deg,#fff 0%,#d8b96f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=chai-tea"] .sp-fam-ct,a.sp-fam.on[href*="/chai-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=matcha-tea"] .sp-fam-dot,a.sp-fam[href*="/matcha-tea/"] .sp-fam-dot{background:#9bc278 !important;}.sp-fam.on[href*="filter_cat=matcha-tea"],a.sp-fam.on[href*="/matcha-tea/"]{background:linear-gradient(180deg,#fff 0%,#9bc278 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=matcha-tea"] .sp-fam-ct,a.sp-fam.on[href*="/matcha-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=coffee"] .sp-fam-dot,a.sp-fam[href*="/coffee/"] .sp-fam-dot{background:#c9a896 !important;}.sp-fam.on[href*="filter_cat=coffee"],a.sp-fam.on[href*="/coffee/"]{background:linear-gradient(180deg,#fff 0%,#c9a896 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=coffee"] .sp-fam-ct,a.sp-fam.on[href*="/coffee/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=biscuits"] .sp-fam-dot,a.sp-fam[href*="/biscuits/"] .sp-fam-dot{background:#c9a673 !important;}.sp-fam.on[href*="filter_cat=biscuits"],a.sp-fam.on[href*="/biscuits/"]{background:linear-gradient(180deg,#fff 0%,#c9a673 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=biscuits"] .sp-fam-ct,a.sp-fam.on[href*="/biscuits/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-dot,a.sp-fam[href*="/decaffeinated-speciality-teas/"] .sp-fam-dot{background:#d6c8b8 !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"],a.sp-fam.on[href*="/decaffeinated-speciality-teas/"]{background:linear-gradient(180deg,#fff 0%,#d6c8b8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-ct,a.sp-fam.on[href*="/decaffeinated-speciality-teas/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}
.tpp .main-img { background: #ffffff !important; background-image: none !important; border: 1px solid rgba(0,0,0,.06); }
.tpp .gallery .main-img { position: relative; }
.teas-hero-pip {
	position: absolute; top: 16px; right: 16px; z-index: 5;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 14px; border-radius: 999px;
	font-family: "JetBrains Mono", monospace; font-size: 10px;
	letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
	background: rgba(255,255,255,.92); color: #131c30;
	border: 1px solid rgba(0,0,0,.10);
	box-shadow: 0 4px 12px -4px rgba(31,44,71,.18), 0 1px 0 rgba(255,255,255,.85) inset;
	backdrop-filter: blur(6px);
}
.teas-hero-pip::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var(--teas-pip-color, #d6c8b8);
	box-shadow: 0 1px 2px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.30);
}