/* ============================================================
   teas.co.uk, Design System v1
   Shared tokens & components used across all pages.
   ============================================================ */

:root{
  /* Surfaces */
  --paper:#E8EAEE;
  --paper-2:#F2F4F7;
  --white:#FFFFFF;
  --bone:#F2F4F7;
  --char:#042220;
  --ink:#042220;
  --ink-soft:#3b4a64;
  --ink-mute:#7682a0;
  --slate:#5C6270;
  --mist:#8A8F9C;
  /* Navy panel gradient stops — TRUE BLUE (not near-black) */
  --navy-1:#0e6868;
  --navy-2:#0a4444;
  --navy-3:#042220;
  --royal-1:#4666b8;
  --royal-2:#324c8e;
  --royal-3:#1a2e60;
  --slate-1:#3a5e9e;
  --slate-2b:#2a4a85;
  --slate-3:#162a55;
  --slate-grad:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%);
  --slate-deep:#042220;
  /* Cyan brand voice */
  --cyan:#7be0d4;
  --cyan-deep:#0fc4a8;
  --ash:#C8CDD6;
  --hair:rgba(14,15,18,.10);
  --hair-2:rgba(14,15,18,.06);

  /* Accents */
  --acc:#30d8c8;          /* electric cyan, primary */
  --acc-2:#00B8D4;
  --berry:#FF2D8E;
  --lime:#B8FF3C;
  --indigo:#7C3AED;
  --amber:#FFB347;
  --terracotta:#E26A4A;
  --moss:#7CA25C;
  --gold:#D4A24A;

  /* Tea family signature colours (used for category swatches & accents) */
  --tea-black:#1A1410;
  --tea-black-tint:#F2EBE3;
  --tea-green:#4A8272;
  --tea-green-tint:#DCF0EA;
  --tea-fruit:#A8547A;
  --tea-fruit-tint:#F5DDED;
  --tea-rooibos:#B86845;
  --tea-rooibos-tint:#F5E0D2;
  --tea-wellness:#5E7FA0;
  --tea-wellness-tint:#E2EAF3;
  --tea-chai:#8B5A2B;
  --tea-chai-tint:#F4E5D0;
  --tea-coffee:#3B2418;
  --tea-coffee-tint:#EBE0D6;
  --tea-biscuit:#A87C4F;
  --tea-biscuit-tint:#F4E8D8;

  /* Type stacks */
  --fb:'DM Sans',system-ui,-apple-system,sans-serif;
  --fd:'Instrument Serif',Georgia,serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --num:tabular-nums lining-nums;
  --ease:cubic-bezier(0.32,0.72,0,1);

  /* Radii */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:28px;
  --r-2xl:32px;
  --r-3xl:40px;
  --r-pill:999px;

  /* Shadows */
  --sh-card:0 .5px 1px rgba(14,15,18,.04), 0 1px 2px rgba(14,15,18,.04), 0 8px 24px rgba(14,15,18,.05);
  --sh-card-h:0 .5px 1px rgba(14,15,18,.06), 0 4px 8px rgba(14,15,18,.06), 0 20px 40px rgba(14,15,18,.10);
  --sh-dark:0 1px 2px rgba(14,15,18,.20), 0 12px 32px rgba(14,15,18,.18);

  /* Spacing */
  --gap:18px;
  --pad:22px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--fb);color:var(--ink);font-feature-settings:var(--num);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.005em}
body{min-height:100vh;background:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}

.shell{max-width:1340px;margin:0 auto;padding:24px 28px 64px}
.mono{font-family:var(--fm);font-feature-settings:var(--num)}
.serif{font-family:var(--fd);font-style:italic;font-weight:400}

/* ===== TOPBAR ===== */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:8px;background:#fff;border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(14,15,18,.04), 0 12px 32px rgba(14,15,18,.06);
  margin-bottom:28px;position:sticky;top:14px;z-index:30;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 8px;border-radius:var(--r-pill);
  border:1.5px solid rgba(14,15,18,.08);font-weight:600;font-size:14px;
}
.brand .mark{
  width:34px;height:34px;border-radius:50%;background:#042220;color:var(--acc);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-style:italic;font-size:19px;line-height:1;
}
.brand .word{font-family:var(--fd);font-style:italic;font-weight:400;font-size:20px;letter-spacing:-.005em}
nav.pills{display:flex;align-items:center;flex:1;justify-content:center;gap:0;font-size:13.5px}
nav.pills a{
  padding:10px 18px;border-radius:var(--r-pill);color:var(--slate);font-weight:500;
  transition:background .14s var(--ease),color .14s var(--ease);
}
nav.pills a:hover{background:rgba(14,15,18,.04);color:var(--ink)}
nav.pills a.active{background:#042220;color:var(--acc);font-weight:600}
.icon-btn{
  width:42px;height:42px;border-radius:50%;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .14s var(--ease);position:relative;
}
.icon-btn:hover{background:rgba(14,15,18,.05)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--berry);border:2px solid #fff}
.bag{
  display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 8px;height:42px;
  border-radius:var(--r-pill);background:#042220;color:var(--acc);
  font-weight:600;font-size:13px;
}
.bag .b-mark{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#042220;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}

/* Logged-in points pill (sits beside bag) */
.points-pill{
  display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:42px;
  border-radius:var(--r-pill);background:#eff7f6;color:#042220;
  font-weight:600;font-size:12.5px;border:1.5px solid rgba(14,15,18,.08);
}
.points-pill .star{width:16px;height:16px;color:var(--amber)}
.points-pill b{font-family:var(--fb);font-weight:800;letter-spacing:-.01em}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:0 4px;margin:6px 0 18px;
  font-family:var(--fm);font-size:11.5px;color:var(--slate);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
}
.breadcrumb a{color:var(--slate);transition:color .14s var(--ease)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{opacity:.4;font-weight:400}
.breadcrumb .here{color:var(--ink);font-weight:600}

/* ===== EYEBROW / SECTION HEAD ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;
  text-transform:uppercase;letter-spacing:.10em;color:var(--slate);font-weight:600;
}
.eyebrow .pip{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(0,224,255,.18)}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin:36px 0 16px;
}
.sec-head h2{font-family:var(--fb);font-size:32px;font-weight:800;letter-spacing:-.022em;margin:0;line-height:1}
.sec-head h2 em{font-family:var(--fd);font-style:italic;font-weight:400;letter-spacing:-.010em}
.sec-head .sub{font-size:13px;color:var(--slate);margin-top:8px;display:block}
.sec-head .right{display:flex;gap:6px;align-items:center}
.sec-head .right a{
  font-size:12.5px;font-weight:600;color:var(--ink);
  padding:8px 14px;border-radius:var(--r-pill);
  border:1.5px solid rgba(14,15,18,.10);
  display:inline-flex;align-items:center;gap:8px;transition:all .14s var(--ease);
}
.sec-head .right a:hover{background:#042220;color:var(--acc);border-color:#042220}
.sec-head .right a svg{width:11px;height:11px}

/* ===== CHIPS ===== */
.chip{
  padding:6px 12px;border-radius:var(--r-pill);background:transparent;
  border:1px solid rgba(14,15,18,.12);font-size:12px;font-weight:500;color:var(--slate);
  transition:all .14s var(--ease);font-family:var(--fb);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:#042220;color:var(--acc);border-color:#042220}
.chip .x{font-family:var(--fm);font-size:10px;opacity:.7}

/* ===== BUTTONS ===== */
.btn-primary{
  background:#042220;color:var(--acc);border-radius:var(--r-pill);
  padding:0 22px;height:46px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .14s var(--ease);
}
.btn-primary:hover{transform:translateX(2px)}
.btn-primary svg{width:13px;height:13px}

.btn-ghost{
  background:transparent;color:var(--ink);border:1.5px solid rgba(14,15,18,.12);
  border-radius:var(--r-pill);padding:0 18px;height:42px;font-weight:600;font-size:13px;
  display:inline-flex;align-items:center;gap:8px;transition:all .14s var(--ease);
}
.btn-ghost:hover{border-color:var(--ink);background:rgba(14,15,18,.04)}

.btn-acc{
  background:var(--acc);color:#0A0B0F;border-radius:var(--r-pill);
  padding:0 22px;height:46px;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 0 0 1px rgba(0,224,255,.4), 0 8px 24px rgba(0,224,255,.25);
  transition:transform .14s var(--ease);
}
.btn-acc:hover{transform:translateY(-1px)}

/* ===== TEA FAMILY BADGES ===== */
.tfb{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:10.5px;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.06em;
}
.tfb .swatch{width:8px;height:8px;border-radius:50%}
.tfb.black{background:var(--tea-black-tint);color:var(--tea-black)}
.tfb.black .swatch{background:var(--tea-black)}
.tfb.green{background:var(--tea-green-tint);color:var(--tea-green)}
.tfb.green .swatch{background:var(--tea-green)}
.tfb.fruit{background:var(--tea-fruit-tint);color:var(--tea-fruit)}
.tfb.fruit .swatch{background:var(--tea-fruit)}
.tfb.rooibos{background:var(--tea-rooibos-tint);color:var(--tea-rooibos)}
.tfb.rooibos .swatch{background:var(--tea-rooibos)}
.tfb.wellness{background:var(--tea-wellness-tint);color:var(--tea-wellness)}
.tfb.wellness .swatch{background:var(--tea-wellness)}
.tfb.chai{background:var(--tea-chai-tint);color:var(--tea-chai)}
.tfb.chai .swatch{background:var(--tea-chai)}
.tfb.coffee{background:var(--tea-coffee-tint);color:var(--tea-coffee)}
.tfb.coffee .swatch{background:var(--tea-coffee)}
.tfb.biscuit{background:var(--tea-biscuit-tint);color:var(--tea-biscuit)}
.tfb.biscuit .swatch{background:var(--tea-biscuit)}

/* ===== PRODUCT CARD (shared across grids) ===== */
.prod{
  background:#fff;border-radius:var(--r-2xl);padding:14px;position:relative;
  box-shadow:var(--sh-card);transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  display:flex;flex-direction:column;gap:10px;cursor:pointer;
}
.prod:hover{transform:translateY(-3px);box-shadow:var(--sh-card-h)}
.prod .img{
  background: #fff;
  border-radius:var(--r-lg);aspect-ratio:1/1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.prod .img img{width:100%;height:100%;object-fit:cover;padding:0;box-sizing:border-box}
.prod .img .placeholder{
  font-family:var(--fm);font-size:10px;color:rgba(14,15,18,.35);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.prod .badge{
  position:absolute;top:10px;left:10px;
  background:#042220;color:var(--acc);
  font-family:var(--fm);font-size:10px;font-weight:600;
  padding:4px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.06em;
}
.prod .badge.berry{background:var(--berry);color:#fff}
.prod .badge.lime{background:var(--lime);color:#0A0B0F}
.prod .badge.amber{background:var(--amber);color:#0A0B0F}
.prod .heart{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  backdrop-filter:blur(8px);
}
.prod .heart svg{width:13px;height:13px}
.prod .heart.on{background:#042220;color:var(--berry)}

/* Quick Buy hover overlay on product cards. Hover-revealed on desktop,
   always-visible on touch devices. Deep-links to /buy/{slug} for express checkout. */
.prod .prod-quick-buy{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;
  background:#042220;color:var(--acc);border-radius:var(--r-pill);
  font-family:var(--fb);font-size:12.5px;font-weight:700;text-decoration:none;
  opacity:0;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease);
  pointer-events:none;
  box-shadow:0 4px 12px rgba(14,15,18,.18);
}
.prod:hover .prod-quick-buy{opacity:1;transform:translateY(0);pointer-events:auto}
.prod .prod-quick-buy svg{width:13px;height:13px}
.prod .prod-quick-buy:hover{transform:translateY(-2px)}
@media (hover:none){
  .prod .prod-quick-buy{opacity:1;transform:translateY(0);pointer-events:auto}
}
.prod .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:0 4px}
.prod .meta .nm{font-size:13.5px;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.prod .meta .br{font-family:var(--fm);font-size:10.5px;color:var(--slate);font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.prod .meta .pr{font-family:var(--fb);font-weight:700;font-size:15px;letter-spacing:-.012em;flex-shrink:0}
.prod .meta .pr s{font-weight:500;font-size:11.5px;color:var(--mist);margin-right:4px}
.prod .foot{display:flex;justify-content:space-between;align-items:center;padding:0 4px 4px}
.prod .tasting{display:flex;gap:4px;flex-wrap:wrap}
.prod .tnote{
  font-family:var(--fm);font-size:9.5px;color:var(--slate);font-weight:500;
  padding:3px 7px;border-radius:var(--r-pill);background:var(--paper-2);
  text-transform:lowercase;letter-spacing:.02em;
}
.prod .add{
  width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .14s var(--ease);
}
.prod .add:hover{transform:rotate(90deg);background:var(--acc);color:#0A0B0F}
.prod .add svg{width:12px;height:12px}
.prod .points-earn{
  font-family:var(--fm);font-size:9.5px;color:var(--amber);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}

/* ===== FILTER RAIL ===== */
.filters{
  background:#fff;border-radius:var(--r-2xl);padding:18px;
  box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:18px;
  position:sticky;top:80px;align-self:flex-start;
}
.filter-group h4{
  font-family:var(--fm);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.10em;color:var(--ink);
  margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;
}
.filter-group h4 .ct{font-family:var(--fm);color:var(--mist);font-weight:500}
.f-list{display:flex;flex-direction:column;gap:6px}
.f-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:6px 8px;border-radius:var(--r-md);
  transition:background .14s var(--ease);
}
.f-row:hover{background:var(--paper-2)}
.f-row .box{
  width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(14,15,18,.20);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#fff;transition:all .14s var(--ease);
}
.f-row.on .box{background:#042220;border-color:#042220;color:var(--acc)}
.f-row.on .box svg{width:10px;height:10px}
.f-row .nm{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.f-row .ct{font-family:var(--fm);font-size:11px;color:var(--mist);font-weight:500}
.filter-divider{height:1px;background:var(--hair-2);margin:4px 0}

/* ===== CARDS / SURFACES ===== */
.card{background:#fff;border-radius:var(--r-2xl);padding:24px;box-shadow:var(--sh-card)}
.card-dark{background:#042220;color:#eff7f6;border-radius:var(--r-2xl);padding:24px}
.card-cream{background:#F4EFE2;color:var(--ink);border-radius:var(--r-2xl);padding:24px}
.card-acc{background:var(--acc);color:#0A0B0F;border-radius:var(--r-2xl);padding:24px}

/* ===== FOOTER v4, 2026-05-10 (round 3) =====
   Lee called out the tea-brown palette as too brown + the column titles
   in amber-on-brown as unreadable. Switched to deep tea-leaf FOREST GREEN
   (already a brand colour, used on the Curator pill + brand identity).
   Forest reads sophisticated + tea-coded + has enough chroma for cream
   titles to pop against it without straining contrast. */
.foot{
  margin-top:0;
  /* 2026-05-21 Lee: was margin-top:56px which left a big white gap before the footer.
     Combined with .tpp padding-bottom:96px on product pages it doubled up. Footer
     should sit flush against the page content. */
  background:linear-gradient(180deg,#1F3329 0%,#142019 100%);
  color:#eff7f6;
  border-radius:var(--r-3xl);
  padding:0;
  overflow:hidden;
}

/* ROW 1, Newsletter strip */
.foot .foot-news{
  display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;
  padding:36px 40px;
  background:linear-gradient(135deg,rgba(216,108,66,.16) 0%,rgba(216,108,66,.04) 60%,transparent 100%);
  border-bottom:1px solid rgba(239,247,246,.10);
}
.foot .fn-copy{min-width:0}
.foot .fn-eyebrow{font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#FFB347;font-weight:700;display:inline-block;padding:4px 12px;background:rgba(255,179,71,.12);border-radius:999px;margin-bottom:12px}
.foot .fn-h{font-family:var(--fd);font-size:28px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;color:#eff7f6;font-weight:400}
.foot .fn-sub{font-size:13.5px;line-height:1.55;color:rgba(239,247,246,.72);margin:0;max-width:52ch}
.foot .fn-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative}
.foot .fn-form input{flex:1 1 220px;min-width:0;background:rgba(239,247,246,.08);border:1px solid rgba(239,247,246,.18);border-radius:999px;padding:12px 18px;color:#eff7f6;font-family:inherit;font-size:14px;outline:none;transition:border-color .14s ease,background .14s ease}
.foot .fn-form input::placeholder{color:rgba(239,247,246,.45)}
.foot .fn-form input:focus{border-color:#FFB347;background:rgba(239,247,246,.12)}
.foot .fn-form button{background:linear-gradient(135deg,#FFB347 0%,#FF8C42 55%,#D86C42 100%);color:#1F1814;border:none;border-radius:999px;padding:0 20px;font-weight:700;font-size:13px;height:46px;cursor:pointer;letter-spacing:-.005em;transition:transform .14s ease,filter .14s ease;flex:0 0 auto}
.foot .fn-form button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.foot .fn-msg{flex:1 1 100%;font-size:12px;margin:6px 0 0;font-family:var(--fm)}

/* ROW 2, Sitemap grid */
.foot .foot-grid{
  display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:32px;
  padding:40px;
}
.foot .col{min-width:0}
/* Column titles, full-cream + bigger weight + underline rule + slight
   size bump. Was #FFB347 amber-on-brown which Lee called unreadable. Now
   pure cream on forest green = 11:1 contrast, well above WCAG AAA. */
.foot .col h4,.foot h4{font-family:var(--fm);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#eff7f6 !important;margin:0 0 16px;font-weight:800;padding-bottom:10px;border-bottom:1px solid rgba(239,247,246,.14)}
.foot .col a{display:block;font-size:13px;color:rgba(239,247,246,.85);padding:5px 0;font-weight:500;letter-spacing:-.005em;transition:color .14s ease,padding-left .14s ease;line-height:1.4}
.foot .col a:hover{color:#FFB347;padding-left:4px}
.foot .col-brand{padding-right:8px}
.foot .b-brand{display:flex;align-items:center;gap:10px}
.foot .b-brand .mark{width:38px;height:38px;border-radius:50%;background:#FFB347;color:#2E2620;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fd);font-style:italic;font-size:21px;line-height:1}
.foot .b-brand .word{font-family:var(--fd);font-style:italic;font-size:24px;letter-spacing:-.005em;color:#eff7f6}
.foot .b-tag{font-size:13px;line-height:1.55;color:rgba(239,247,246,.78);margin:14px 0 12px;max-width:34ch;background:none;border:0;border-radius:0;padding:0}
.foot .b-addr{font-family:var(--fm);font-size:11px;line-height:1.6;color:rgba(239,247,246,.55);margin:0 0 18px;letter-spacing:.01em}
.foot .b-socials{display:flex;gap:8px;flex-wrap:wrap}
.foot .b-socials a{width:34px;height:34px;border-radius:50%;background:rgba(239,247,246,.08);border:1px solid rgba(239,247,246,.14);display:inline-flex;align-items:center;justify-content:center;color:rgba(239,247,246,.82);padding:0;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}
.foot .b-socials a:hover{background:#FFB347;color:#1F1814;border-color:#FFB347;transform:translateY(-2px);padding-left:0}
.foot .b-socials a svg{width:15px!important;height:15px!important;display:block;flex:0 0 auto}

/* ROW 3, Trust pills */
.foot .foot-trust{
  list-style:none;margin:0;padding:18px 40px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  background:rgba(239,247,246,.04);
  border-top:1px solid rgba(239,247,246,.08);
  border-bottom:1px solid rgba(239,247,246,.08);
}
.foot .foot-trust li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(239,247,246,.06);border:1px solid rgba(239,247,246,.12);border-radius:999px;font-size:12px;color:rgba(239,247,246,.85);font-weight:500;letter-spacing:-.005em}
.foot .foot-trust .ft-ic{display:inline-flex;align-items:center;justify-content:center;color:#FFB347;width:14px;height:14px;flex:0 0 14px}
.foot .foot-trust .ft-ic svg{width:14px!important;height:14px!important;display:block;flex:0 0 auto;max-width:14px;max-height:14px}

/* ROW 2b, Explore more — full-width wrapped SEO link row. Keeps the
   sitemap grid columns balanced (the landing-page links used to bloat the
   Discover column to ~34 items / 1100px). Inherently balanced because it
   wraps across the full width instead of stacking in one column. */
.foot .foot-explore{
  display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:baseline;
  padding:20px 40px;
  border-top:1px solid rgba(239,247,246,.08);
}
.foot .foot-explore .fx-h{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(239,247,246,.55);font-weight:700;white-space:nowrap;padding-top:2px;
}
.foot .foot-explore .fx-links{display:flex;flex-wrap:wrap;gap:7px 9px}
.foot .foot-explore .fx-links a{
  display:inline-flex;align-items:center;
  font-size:12px;line-height:1;color:rgba(239,247,246,.78);font-weight:500;letter-spacing:-.005em;
  padding:6px 12px;border:1px solid rgba(239,247,246,.13);border-radius:999px;
  background:rgba(239,247,246,.04);
  transition:color .14s ease,border-color .14s ease,background .14s ease;
}
.foot .foot-explore .fx-links a:hover{
  color:#1F1814;background:#FFB347;border-color:#FFB347;
}
@media (max-width:760px){
  .foot .foot-explore{grid-template-columns:1fr;gap:10px;padding:18px 24px}
}

/* ROW 4, Copyright + legal */
.foot-bot{
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  padding:18px 40px 22px;
  font-size:11.5px;color:rgba(239,247,246,.55);font-family:var(--fm);
}
.foot-bot .fb-c{letter-spacing:.01em}
.foot-bot .fb-c:last-child{text-align:right}
.foot-bot .fb-legal{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.foot-bot .fb-legal a{color:rgba(239,247,246,.7);text-decoration:none;transition:color .14s ease}
.foot-bot .fb-legal a:hover{color:#FFB347}
.foot-bot .fb-legal .sep{color:rgba(239,247,246,.3)}

/* Generic responsive, collapse the grids cleanly */
@media (max-width:1180px){
  nav.pills{display:none}
  .foot .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px;padding:32px}
  .foot .col-brand{grid-column:1/-1;padding-right:0}
  .foot .foot-news{padding:30px}
  .foot .fn-h{font-size:24px}
}
@media (max-width:760px){
  .shell{padding:14px 14px 36px}
  .foot{border-radius:var(--r-2xl);margin-top:36px}
  .foot .foot-news{grid-template-columns:1fr;gap:18px;padding:24px}
  .foot .foot-grid{grid-template-columns:1fr 1fr;gap:24px;padding:24px}
  .foot .col-brand{grid-column:1/-1}
  .foot .fn-h{font-size:22px}
  .foot .foot-trust{padding:14px 18px;gap:6px}
  .foot .foot-trust li{font-size:11px;padding:6px 10px}
  .foot-bot{grid-template-columns:1fr;text-align:center;gap:8px;padding:18px}
  .foot-bot .fb-c:last-child{text-align:center}
}
@media (max-width:460px){
  .foot .foot-grid{grid-template-columns:1fr}
}

/* =====================================================================
   2026-06-16  SITEWIDE CHROME RETHEME — Electric Teal + Pink
   Replaces lilac/purple palette with electric teal (#30d8c8) + hot pink (#e84898).
   Append-only override (cascade/last-wins). Reversible: delete from this banner down.
   ===================================================================== */
/* Brand pill mark -> electric teal */
.topbar .brand .mark{
  background:#1faa9c !important;
  color:#042220 !important;
}
/* Active nav pill -> deep teal + white */
nav.pills a.active,
nav.pills .current-menu-item > a,
nav.pills .current_page_item > a,
nav.pills a[aria-current]{
  background:#0a4444 !important;
  color:#ffffff !important;
}
nav.pills a:hover{ background:#eff7f6 !important; color:#042220 !important; }
/* Basket pill -> dark teal + teal count badge */
.topbar .bag{
  background:#042220 !important; color:#ffffff !important;
  border:1px solid rgba(31,170,156,.20) !important;
  box-shadow:0 1px 2px rgba(4,34,32,.12) !important;
}
.topbar .bag .b-mark{
  background:#30d8c8 !important; color:#042220 !important;
}
.topbar .bag .b-sep{ color:rgba(255,255,255,.35) !important; }
/* Footer -> deep teal gradient */
.foot{
  background:linear-gradient(155deg,#0e6868 0%,#062828 55%,#042220 100%) !important;
  color:#ffffff !important;
}
.foot .foot-news{
  background:linear-gradient(135deg,rgba(48,216,200,.12) 0%,rgba(48,216,200,.04) 60%,transparent 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.foot .fn-eyebrow{
  color:#30d8c8 !important; background:rgba(48,216,200,.14) !important;
}
.foot .fn-h{ color:#ffffff !important; }
.foot .fn-form input:focus{ border-color:#30d8c8 !important; }
.foot .fn-form button{
  background:#e84898 !important; color:#ffffff !important;
}
/* Footer brand mark -> teal */
.foot .b-brand .mark{ background:#1faa9c !important; color:#042220 !important; }
/* ===================== END SITEWIDE CHROME RETHEME ===================== */

/* =====================================================================
   HERO HEADING CONTRAST — site-wide fix (2026-05-17)
   Every rebuilt page wraps its hero in a `.XX-hero-l` (or `.XX-hero`)
   block with `background:var(--slate-grad); color:#fff`. Blocksy's global
   heading colour beats the inherited white on a single class, so the H1/H2
   rendered near-black on dark navy (Lee flagged gift-cards et al). This
   forces the heading white with the cyan italic <em> accent preserved,
   scoped to the known dark hero wrappers so light heroes are untouched.
   ===================================================================== */
/* Two-class selectors (0,2,0)+!important — Blocksy's heading rule is
   !important at ~(0,1,1), so a single-class/descendant !important loses
   the !important-specificity tie-break. The .XX-hero-l .XX-h1 form is the
   pattern already proven on the brand hero. */
.gc-hero-l .gc-h1, .sm-hero-l .sm-h1, .rf-hero-l .rf-h1,
.rw-hero-l .rw-h1, .sb-hero-l .sb-h1, .tc-hero-l .tc-h1,
.bz-hero-l .bz-h1,
.gc-hero .gc-h1, .sm-hero .sm-h1, .rf-hero .rf-h1,
.rw-hero .rw-h1, .sb-hero .sb-h1, .tc-hero .tc-h1, .bz-hero .bz-h1,
.sp-hero-l .sp-h1, .br-hero .br-h1,
.wk-hero-l .wk-h1, .we-hero-l .we-h1,
.rc-hero-l .rc-h1 { color: #fff !important; }

.gc-hero-l .gc-h1 em, .sm-hero-l .sm-h1 em, .rf-hero-l .rf-h1 em,
.rw-hero-l .rw-h1 em, .sb-hero-l .sb-h1 em, .tc-hero-l .tc-h1 em,
.bz-hero-l .bz-h1 em,
.gc-hero .gc-h1 em, .sm-hero .sm-h1 em, .rf-hero .rf-h1 em,
.rw-hero .rw-h1 em, .sb-hero .sb-h1 em, .tc-hero .tc-h1 em, .bz-hero .bz-h1 em,
.sp-hero-l .sp-h1 em, .br-hero .br-h1 em,
.wk-hero-l .wk-h1 em, .we-hero-l .we-h1 em,
.rc-hero-l .rc-h1 em { color: var(--accent, #30d8c8) !important; }

/* Older-design footer/nav pages — different hero markup (plain h1, no
   .XX-h1 class). tenders/suppliers use a cream + amber-italic palette;
   cafes/council share .biz-hero on a dark slate panel (white + cyan). */
.tenders-hero h1, .suppliers-hero h1 { color: #eff7f6 !important; }
.tenders-hero h1 em, .suppliers-hero h1 em { color: #FDE68A !important; }
.biz-hero h1 { color: #fff !important; }
.biz-hero h1 em { color: var(--accent, #30d8c8) !important; }

/* =====================================================================
   WIKI ENTRY (.we) LAYOUT — hoisted here from wiki-entry.css (2026-05-17).
   wiki-entry.css is intermittently edge-cached stale by Rocket.net, which
   left /wiki/delivery/ (and other page-template wiki entries) rendering the
   body full-width with the sticky rail collapsed below it. design-system.css
   is reliably filemtime-busted, so duplicating the critical 2-column /
   sticky-rail layout here guarantees it regardless of wiki-entry.css cache
   state. Hardened specificity + !important so it always wins.
   ===================================================================== */
.we .we-hero { display: grid !important; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) !important; gap: 24px !important; align-items: stretch !important; }
.we .we-stage { display: grid !important; grid-template-columns: minmax(0,1fr) 320px !important; gap: 36px !important; align-items: flex-start !important; }
.we .we-rail { position: sticky !important; top: 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.we .we-body { display: flex !important; flex-direction: column !important; gap: 28px !important; min-width: 0 !important; }
@media (max-width: 1100px) {
  .we .we-hero,
  .we .we-stage { grid-template-columns: 1fr !important; }
  .we .we-rail { position: static !important; }
}

/* =====================================================================
   GENERIC SEGMENT PAGES -> blue/slate design system (2026-05-17)
   .seg-* pages (e.g. /charities/) shipped on the old warm-cream
   page-generic.css palette — the odd ones out vs every other business
   page (cafes/council/tenders/suppliers are slate). Bring them onto the
   system here (design-system.css is reliably filemtime-busted + loaded
   site-wide). Hardened so it beats page-generic.css + Blocksy headings.
   ===================================================================== */
.seg-hero { background: linear-gradient(155deg,#0e6868 0%,#062828 55%,#042220 100%) !important; border-radius: 24px !important; padding: 52px 48px !important; position: relative; overflow: hidden; box-shadow: 0 22px 50px -22px rgba(4,34,32,.45), inset 0 1px 0 rgba(255,255,255,.08) !important; }
.seg-hero::before { content:""; position:absolute; top:-150px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(48,216,200,.18), transparent 65%); pointer-events:none; }
.seg-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(70% 55% at 0% 100%, rgba(5,12,30,.40) 0%, transparent 60%), linear-gradient(90deg, transparent 15%, rgba(123,224,212,.25) 50%, transparent 85%) top / 100% 1px no-repeat; }
.seg-hero > * { position: relative; z-index: 1; }
.seg-page .seg-hero .eyebrow, .seg-hero .eyebrow { color: #30d8c8 !important; }
.seg-page .seg-hero .eyebrow .pip, .seg-hero .eyebrow .pip { background: #30d8c8 !important; }
.seg-page .seg-hero h1, .seg-hero h1.entry-title, .seg-hero h1 { font-family: 'Newsreader', Georgia, serif !important; color: #fff !important; font-weight: 500 !important; letter-spacing: -.025em; }
.seg-page .seg-hero h1 em, .seg-hero h1 em { color: #30d8c8 !important; font-style: italic; }
.seg-page .seg-hero .lede, .seg-hero .lede { color: rgba(255,255,255,.82) !important; }
.seg-page .seg-hero .cta-primary, .seg-hero .cta-primary { background: #e84898 !important; color: #042220 !important; border: none !important; border-radius: 999px !important; padding: 12px 22px !important; font-weight: 700 !important; }
.seg-page .seg-hero .cta-secondary, .seg-hero .cta-secondary { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 999px !important; padding: 12px 22px !important; font-weight: 600 !important; }
.seg-features article { background: #fff !important; border: 1px solid rgba(4,34,32,.10) !important; border-radius: 16px !important; transition: border-color .15s, transform .15s; }
.seg-features article:hover { border-color: #1faa9c !important; transform: translateY(-2px); }
.seg-features h3 { font-family: 'Newsreader', serif !important; color: #062828 !important; }
.seg-features a { color: #1faa9c !important; }
.seg-trust { background: #f4f6f9 !important; border: 1px solid rgba(4,34,32,.10) !important; border-radius: 18px !important; }
.seg-trust h2 { font-family: 'Newsreader', serif !important; color: #062828 !important; }
.seg-trust ul li::before { color: #1faa9c !important; }
.seg-cta-final { background: linear-gradient(155deg,#0e6868 0%,#062828 55%,#042220 100%) !important; color: #fff !important; border-radius: 24px !important; position: relative; overflow: hidden; box-shadow: 0 22px 50px -22px rgba(4,34,32,.45), inset 0 1px 0 rgba(255,255,255,.08) !important; }
.seg-cta-final h2 { font-family: 'Newsreader', serif !important; color: #fff !important; }
.seg-cta-final h2 em { color: #30d8c8 !important; }
.seg-cta-final .cta-primary { background: #e84898 !important; color: #042220 !important; border-radius: 999px !important; }


/* =====================================================================
   2026-05-17  MOBILE NAV DRAWER  (Claude)
   The primary nav was `display:none` at <=1180px with NO drawer rule,
   so the hamburger did nothing and there was no mobile navigation at
   all (the Shop mega-menu included). This builds the missing mobile
   menu: a full-screen slide-in sheet driven by the existing
   mobile-nav.js (#primary-nav[data-open]) + the .nav-toggle button.
   Append-only, reversible: delete from this banner down.
   ===================================================================== */

/* Hamburger: hidden on desktop, shown when the mega/pills row collapses */
.nav-toggle{ display:none; }
.nav-toggle-close{ display:none; }

@media (max-width:1180px){

  /* Show the hamburger; keep it above the drawer so it always closes */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; margin-left:auto;
    background:#ffffff; border:1px solid rgba(4,34,32,.10); border-radius:999px;
    color:#1a2740; cursor:pointer; position:relative; z-index:8600;
    box-shadow:0 1px 2px rgba(20,24,30,.05);
  }
  .nav-toggle svg{ width:20px; height:20px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-close{ display:block; }

  /* The drawer itself — full-screen white sheet over the page.
     nav.pills{display:none} (line ~448) still applies until opened;
     the [data-open="true"] selector out-specifies it. */
  nav#primary-nav.pills{
    position:fixed; inset:0; z-index:8500;
    display:none; flex-direction:column; align-items:stretch;
    gap:0; background:#ffffff; overflow-y:auto;
    padding:84px 20px 40px; -webkit-overflow-scrolling:touch;
  }
  nav#primary-nav.pills[data-open="true"]{ display:flex; }

  /* Plain nav links -> stacked full-width rows */
  nav#primary-nav.pills > a{
    display:flex; align-items:center; width:100%;
    padding:16px 14px; margin:0; border:0;
    border-bottom:1px solid #eef1f6; border-radius:0;
    font-size:17px; font-weight:600; color:#0f1626;
  }
  nav#primary-nav.pills > a:hover{ background:#f6f8fb !important; color:#0f1626 !important; }

  /* The injected Shop mega becomes a full-width block; its trigger a row */
  nav#primary-nav.pills .teas-mega{ display:block; width:100%; order:-1; }
  nav#primary-nav.pills .teas-mega-trigger{
    width:100% !important; justify-content:space-between !important;
    padding:16px 18px !important; font-size:17px !important;
    border-radius:14px !important; margin-bottom:8px !important;
  }
  /* Mega panel: it already becomes a sized sheet <=820 and a full-screen
     scroll sheet <=600 (see inc/mega-menu.php). Lift it above the drawer
     and pin it to the viewport so it works opened from inside the drawer. */
  nav#primary-nav.pills .teas-mega-panel{ z-index:9200; }
}

/* Phone: make the mega sheet edge-to-edge under the topbar (mirrors the
   <=600 rule in inc/mega-menu.php so the two stay in lockstep). */
@media (max-width:600px){
  nav#primary-nav.pills{ padding:76px 16px 32px; }
  nav#primary-nav.pills > a{ font-size:16px; padding:15px 12px; }
}


/* =====================================================================
   2026-05-17  STAGE 2 — SHARED HEADER (.topbar) MOBILE FIX  (Claude)
   On mobile the .topbar flex row (brand + hamburger + search + account +
   basket) had no flex-shrink:0 on the controls, so the 44px icon buttons
   got crushed to ~8-9px slivers (unusable, the broken "· ◦ ^" cluster,
   WCAG 2.5.5 fail). This pins real 44px tap targets and compacts the
   basket pill so the row fits a phone. Append-only, reversible.
   ===================================================================== */
@media (max-width: 1180px) {
  /* Balance the header: nav.pills (the flex filler) is hidden below 1180px, which
     left every icon bunched at the left with a big empty right side. Spread the
     remaining controls evenly, and drop the bulky Shop mega-dropdown (Shop is
     reachable from the hamburger menu) so the bar never overflows on phones. */
  .topbar { gap: 6px; padding: 7px 12px; flex-wrap: nowrap; justify-content: space-between; }
  .topbar > .teas-mega { display: none !important; } /* direct child only: inline Shop mega lives inside #primary-nav and must stay visible in the mobile drawer (2026-06-19) */

  /* Real, non-shrinking 44px tap targets (WCAG 2.5.5) */
  .topbar .icon-btn,
  .topbar .nav-toggle {
    flex: 0 0 44px !important; width: 44px !important; height: 44px !important;
    min-width: 44px !important; padding: 0 !important;
  }
  .topbar .icon-btn svg { width: 19px; height: 19px; }
  .topbar .nav-toggle svg { width: 22px; height: 22px; }
  .topbar .nav-toggle { margin-left: 0 !important; }

  /* Brand: don't let it hog width; keep it from shrinking the icons */
  .topbar .brand { flex: 0 1 auto; min-width: 0; padding: 6px 12px 6px 6px; }
  .topbar .brand .word { font-size: 17px; }

  /* Compact basket: keep the count bubble, drop the long "Basket · £0.00"
     text that was eating ~90px and crushing the icons */
  .topbar .bag {
    flex: 0 0 auto; padding: 0 10px; height: 44px; gap: 6px;
  }
  .topbar .bag .b-text,
  .topbar .bag .b-sep,
  .topbar .bag .b-total { display: none; }
  .topbar .bag .b-mark { width: 26px; height: 26px; }
}

@media (max-width: 420px) {
  /* Tiny phones: logo mark only, maximise room for the controls */
  .topbar .brand .word { display: none; }
  .topbar { gap: 5px; }
}


/* =====================================================================
   2026-05-17  STAGE 4 — MOBILE POLISH  (Claude)
   - .teas-easy-cancel-banner rendered as a tall plain wall at the very
     top of subscription pages on mobile. Compact it to a slim note.
   - Keep the floating Help chat from sitting on top of primary CTAs by
     giving page content a little bottom breathing room on phones.
   Append-only, reversible: delete from this banner down.
   ===================================================================== */
@media (max-width: 768px) {
  .teas-easy-cancel-banner {
    padding: .7rem .9rem !important;
    margin: .9rem 0 !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }
  .teas-easy-cancel-banner h3 {
    font-size: .95rem !important;
    margin: 0 0 .25rem !important;
  }
  .teas-easy-cancel-banner p { margin: .25rem 0 0 !important; font-size: .82rem !important; }

  /* Floating chat clearance so it never permanently covers a CTA/footer */
  body { scroll-padding-bottom: 84px; }
  .tpp .buy-combo, .tpp .product-hero { margin-bottom: 24px; }
}

/* =====================================================================
   2026-05-17  MOBILE VIEWPORT CLAMP  (Claude)
   .topbar pages had no overflow-x guard, so an off-screen element
   (announce marquee / overlay interaction) expanded the layout viewport
   to ~453px on a 390px device — shrinking text, clipping the fixed nav
   drawer, and wasting ~63px of canvas. Home already had this clamp in
   page-home-v2.css and renders at a correct 390. Same fix, sitewide.
   ===================================================================== */
@media (max-width: 1180px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
}

/* =====================================================================
   2026-05-17  MOBILE CANVAS — tighten side gutters (Claude)
   Bespoke wrappers carried ~24-32px side padding on phones, leaving the
   content column at ~84% of screen. Drop to 14px so it uses ~94% — more
   canvas without going edge-to-edge (readability kept). <=768 only.
   ===================================================================== */
@media (max-width: 768px) {
  .we, .ct, .nw, .rc, .sp,
  main.lp-rare, .lp-rare, .tpp .shell,
  .bd-crumb {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .we-body, .we-stage, .ct-grid, .nw-grid { min-width: 0; }
}

/* =====================================================================
   2026-05-17  MOBILE COSMETICS  (Claude)
   1) .teas-easy-cancel-banner rendered as a 175px wall ABOVE the header
      on mobile (subscription pages). The 3-click cancel promise is also
      shown in the footer strip, beside Add-to-Cart, and in the account
      dash, so the top wall is redundant on phones — hide it there only.
      Desktop unchanged (thin strip there).
   2) Crisp chat launcher is fixed bottom-right; give the footer a little
      bottom clearance so its newsletter CTA is never hidden under it.
   ===================================================================== */
@media (max-width: 768px) {
  .teas-easy-cancel-banner { display: none !important; }
  .foot { margin-bottom: 72px; }
}


/* =====================================================================
   NAVY PANEL COMPONENT — 5-layer recipe (design spec §3)
   The gradient must have THREE stops. A single/solid colour = wrong.
   Use .navy-panel--royal or .navy-panel--slate for variety.
   ===================================================================== */
.navy-panel {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 32px 36px;
  color: #fff;
  /* LAYER 1 — three-stop diagonal gradient */
  background: linear-gradient(155deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  /* LAYER 2 — depth shadow + inset top highlight */
  box-shadow:
    0 22px 50px -22px rgba(4,34,32,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* LAYER 3 — top-right cyan glow */
.navy-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(85% 65% at 100% 0%, rgba(123,224,212,.16) 0%, transparent 55%);
}
/* LAYER 4+5 — bottom shadow lift + top hairline rim */
.navy-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(5,12,30,.50) 0%, transparent 60%),
    linear-gradient(90deg, transparent 15%, rgba(123,224,212,.30) 50%, transparent 85%) top / 100% 1px no-repeat;
}
.navy-panel__inner { position: relative; z-index: 1; }

/* Tone variants */
.navy-panel--royal {
  background: linear-gradient(155deg, var(--royal-1) 0%, var(--royal-2) 55%, var(--royal-3) 100%);
}
.navy-panel--slate {
  background: linear-gradient(155deg, var(--slate-1) 0%, var(--slate-2b) 55%, var(--slate-3) 100%);
}
.navy-panel--royal::before,
.navy-panel--slate::before {
  background: radial-gradient(85% 65% at 100% 0%, rgba(140,180,255,.18) 0%, transparent 55%);
}

/* Pulsing live dot (cyan) */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 4px;
  background: var(--cyan);
  animation: pulseDot 1.8s ease-in-out infinite;
}

/* STAGING FIX: hide the Google reCAPTCHA "ERROR for site owner: Invalid domain
   for site key" toast. The reCAPTCHA site key (enqueued by WooCommerce PayPal
   Payments) is registered for teas.co.uk only, so on the staging host Google
   renders the v2 widget / badge in an error state, producing a red box pinned
   and clipped at the right edge of /product, /cart and /checkout. We hide only
   the error UI; the invisible v3 grecaptcha.execute token logic still runs, so
   the checkout security element is NOT disabled. On live (teas.co.uk) the key
   validates and no error renders. Reversible: delete this block. */
#ppcp-recaptcha-v2-container,
.grecaptcha-badge {
  display: none !important;
}


/* =====================================================================
   2026-06-19  SHOP MEGA MOVED INLINE INTO THE PILL ROW  (Claude, LIVE)
   Shop now renders ONCE, centrally, inside nav#primary-nav as a hover
   dropdown (functions.php). These desktop rules seat it neatly among the
   flat pill links. Mobile drawer behaviour is handled by the <=1180 rules.
   ===================================================================== */
@media (min-width:1181px){
  nav.pills .teas-mega{ margin:0 6px; align-self:center; }
  nav.pills .teas-mega-entry{ min-height:38px; }
}