/* ============================================================
   teas.co.uk, Homepage layout
   Page-specific styles for front-page.php only.
   Shared component styles live in design-system.css.
   ============================================================ */

/* ===== HERO ===== */
.hero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--gap);
  margin-bottom:var(--gap);
}
.hero-main{
  background:#fff;border-radius:var(--r-3xl);padding:36px 36px 28px;
  position:relative;overflow:hidden;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;justify-content:space-between;min-height:420px;
}
h1.head{
  font-family:var(--fb);font-size:64px;font-weight:800;letter-spacing:-.030em;
  line-height:.98;margin:14px 0 22px;color:var(--ink);text-wrap:balance;
}
h1.head em{font-family:var(--fd);font-style:italic;font-weight:400;letter-spacing:-.012em}
h1.head .pin{
  position:relative;display:inline-block;font-family:var(--fd);font-style:italic;font-weight:400;
  color:var(--ink);padding:0 4px;
}
.subhead{font-size:15px;color:var(--slate);max-width:520px;line-height:1.55;margin:0 0 24px}

.hero-search{
  display:flex;align-items:center;background:var(--paper-2);border-radius:var(--r-pill);
  padding:6px 6px 6px 18px;gap:10px;border:1.5px solid transparent;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.hero-search:focus-within{border-color:rgba(14,15,18,.2);background:#fff}
.hero-search svg{width:16px;height:16px;color:var(--slate);flex-shrink:0}
.hero-search input{
  flex:1;background:transparent;border:none;outline:none;font-family:inherit;
  font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 0;
}
.hero-search input::placeholder{color:var(--mist)}
.hero-search .btn-go{
  background:#042220;color:var(--acc);border-radius:var(--r-pill);
  padding:0 22px;height:42px;font-weight:600;font-size:13.5px;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .14s var(--ease);border:none;cursor:pointer;
}
.hero-search .btn-go:hover{transform:translateX(2px)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

.hero-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--hair);
}
.kpi .num{font-family:var(--fb);font-weight:800;font-size:34px;letter-spacing:-.022em;line-height:1}
.kpi .num em{font-family:var(--fd);font-style:italic;font-weight:400;color:var(--slate);font-size:22px}
.kpi .lbl{font-size:11.5px;color:var(--slate);font-weight:500;margin-top:6px;display:block}

.hero-card{
  border-radius:var(--r-3xl);padding:24px;position:relative;overflow:hidden;
  background:var(--acc);color:#0A0B0F;
  box-shadow:0 0 0 1px rgba(0,224,255,.4), 0 12px 40px rgba(0,224,255,.25);
  display:flex;flex-direction:column;justify-content:space-between;min-height:420px;
}

/* ===== Tea of the Week HERO CARD v2 (rebuilt 2026-05-11) =====
   Lee 2026-05-11: didn't like the shouty pure-cyan background of v1.
   Now uses var(--tea-grad) which the .tea-fam-* class on the wrapper
   supplies (matches whatever tea is featured). Cleaner 3-stack layout:
   eyebrow + arrow → big product image in a white inset frame → brand +
   title + price + stock pill. Reads as a curator-pick CARD, not a
   neon billboard. */
.hero-card-v2 {
  background: var(--tea-grad, linear-gradient(160deg, #F7F1E1 0%, #EDE3CC 55%, #E0D2B2 100%));
  color: var(--ink);
  border: 1px solid rgba(46,38,32,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(46,38,32,.04),
    0 22px 50px -16px rgba(46,38,32,.22);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
}
.hero-card-v2 .ring { display: none; }
.hero-card-v2 .hc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hero-card-v2 .hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(46,38,32,.10);
  opacity: 1;
  margin: 0;
}
.hero-card-v2 .hc-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tea-tint, #D88B2C);
}
.hero-card-v2 .hc-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .14s var(--ease);
}
.hero-card-v2 .hc-arrow:hover { transform: translateX(2px); }
.hero-card-v2 .hc-arrow svg { width: 16px; height: 16px; }

/* Product image, sits in an inset white frame so it floats on the gradient */
.hero-card-v2 .hc-product {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 200px;
}
.hero-card-v2 .hc-product-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(46,38,32,.05),
    0 14px 30px -8px rgba(46,38,32,.20);
  transition: transform .35s var(--ease);
}
.hero-card-v2:hover .hc-product-frame { transform: translateY(-4px); }
.hero-card-v2 .hc-product-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.hero-card-v2 .hc-product-frame svg {
  width: 70%; height: 70%;
  color: var(--ink);
  filter: drop-shadow(0 8px 16px rgba(46,38,32,.20));
}

/* Bottom body: brand pill + title + price + stock */
.hero-card-v2 .hc-body {
  background: rgba(46,38,32,.92);
  color: #eff7f6;
  border-radius: 22px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: background .14s var(--ease);
}
.hero-card-v2:hover .hc-body { background: var(--tea-brown-2, #1F1814); }
.hero-card-v2 .hc-brand {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--acc);
  display: inline-block;
}
.hero-card-v2 .hc-title {
  font-family: var(--fb);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 0;
  color: #eff7f6;
}
.hero-card-v2 .hc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(239,247,246,.14);
}
.hero-card-v2 .hc-price {
  font-family: var(--fb);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.018em;
  color: var(--acc);
}
.hero-card-v2 .hc-price del { opacity: .5; font-weight: 500; font-size: 13px; margin-right: 6px; text-decoration: line-through; }
.hero-card-v2 .hc-price ins { text-decoration: none; }
.hero-card-v2 .hc-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(239,247,246,.70);
  text-align: right;
}
.hero-card-v2 .hc-stock-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
}
.hero-card .ring{position:absolute;border-radius:50%;border:1px dashed rgba(10,11,15,.18)}
.hero-card .ring.r1{width:520px;height:520px;right:-220px;top:-160px}
.hero-card .ring.r2{width:340px;height:340px;right:-110px;top:-50px}
.hero-card .top-row{display:flex;justify-content:space-between;align-items:flex-start}
.hero-card .corner{
  width:38px;height:38px;border-radius:50%;background:#0A0B0F;color:var(--acc);
  display:inline-flex;align-items:center;justify-content:center;
}
.hero-card .corner svg{width:14px;height:14px}
.hero-card h3{font-family:var(--fb);font-size:18px;font-weight:700;margin:0;letter-spacing:-.012em}
.hero-card .pot{flex:1;display:flex;align-items:center;justify-content:center;margin:6px 0;position:relative;text-decoration:none}
.hero-card .pot svg{width:200px;height:200px;filter:drop-shadow(0 12px 24px rgba(10,11,15,.18))}
.hero-card .pot img{width:62%;max-width:240px;aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 12px 32px rgba(10,11,15,.22)}
.hero-card .hc-eyebrow{font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;font-weight:600;opacity:.75;margin-bottom:6px}
.hero-card a.deal{text-decoration:none}
.hero-card a.deal:hover{transform:translateX(2px);transition:transform .14s var(--ease)}
.hero-card a.deal .price{color:var(--acc)}
.hero-card a.deal .price .amount.hero-card a.deal .price ins.hero-card a.deal .price del.hero-card a.deal .price bdi{color:inherit}
.hero-card a.deal .price del{opacity:.5;font-weight:500;font-size:14px;margin-right:6px;text-decoration:line-through}
.hero-card a.deal .price ins{text-decoration:none}
.hero-card a.corner{text-decoration:none;transition:transform .14s var(--ease)}
.hero-card a.corner:hover{transform:translateX(2px)}
.hero-card .deal{
  background:#0A0B0F;color:var(--acc);border-radius:var(--r-2xl);padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.hero-card .deal .lhs{display:flex;flex-direction:column;line-height:1.2}
.hero-card .deal .lhs b{font-family:var(--fb);font-weight:700;font-size:14px}
.hero-card .deal .lhs span{font-family:var(--fm);font-size:10.5px;color:rgba(0,224,255,.65);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.hero-card .deal .price{font-family:var(--fb);font-weight:800;font-size:24px;letter-spacing:-.018em}
.hero-card .deal .price s{font-weight:500;font-size:14px;color:rgba(0,224,255,.5);margin-right:6px}

/* ===== MARQUEE / BRAND STRIP ===== */
.marquee{
  background:#042220;color:#eff7f6;border-radius:var(--r-2xl);
  padding:14px 20px;margin-bottom:var(--gap);overflow:hidden;position:relative;
  display:flex;align-items:center;gap:36px;font-size:13px;font-weight:500;
}
.marquee .lead{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);font-weight:600;flex-shrink:0}
.marquee .lead .pip{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.marquee .track{display:flex;gap:36px;white-space:nowrap;animation:teas-marquee 40s linear infinite;flex:1}
.marquee .track span{font-family:var(--fd);font-style:italic;font-size:18px;color:#eff7f6}
.marquee .track .sep{font-family:var(--fb);color:var(--acc);font-weight:300}
@keyframes teas-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none}
}

/* ===== CATEGORY GRID (8 tea families) ===== */
.cat-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
}
.cat{
  border-radius:var(--r-3xl);padding:24px;position:relative;overflow:hidden;
  box-shadow:var(--sh-card);min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh-card-h)}
.cat:hover .cat-art{transform:translate(-4px,-6px) rotate(-2deg)}
/* Decorative tea SVG illustration (added 2026-05-11). Sits in the upper-right
   corner of each tile at low opacity so it doesn't fight the title. currentColor
   means each tile's existing text colour tints the illustration automatically. */
.cat-art{
  position:absolute;
  top:-10px;right:-10px;
  width:180px;height:130px;
  opacity:.18;
  pointer-events:none;
  z-index:0;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.cat-art svg{width:100%;height:100%;display:block;color:currentColor}
.cat:hover .cat-art{opacity:.28}
.cat .cat-body,.cat .arr{position:relative;z-index:1}
.cat .corner-tag{
  position:absolute;top:18px;right:18px;
  font-family:var(--fm);font-size:10.5px;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(14,15,18,.08);color:var(--ink);
  z-index:2;
}
.cat h3{
  font-family:var(--fd);font-style:italic;font-weight:400;
  font-size:36px;letter-spacing:-.012em;margin:0;line-height:1;
}
.cat .count{font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:500;margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.cat .arr{
  width:34px;height:34px;border-radius:50%;background:rgba(14,15,18,.08);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  align-self:flex-end;
}
.cat .arr svg{width:13px;height:13px}

/* Family colour variants, keyed off design-system tea-family tokens */
.cat.cat-black{background:var(--tea-black);color:#eff7f6;grid-column:span 4}
.cat.cat-black .corner-tag{background:rgba(239,247,246,.10);color:#eff7f6}
.cat.cat-black .count{color:rgba(239,247,246,.55)}
.cat.cat-black .arr{background:var(--acc);color:var(--tea-black)}

.cat.cat-green{background:var(--tea-green);color:#fff;grid-column:span 4}
.cat.cat-green .arr{background:#fff;color:var(--tea-green)}

.cat.cat-fruit{background:var(--tea-fruit-tint);color:var(--tea-fruit);grid-column:span 4}
.cat.cat-fruit .arr{background:var(--tea-fruit);color:#fff}

.cat.cat-rooibos{background:var(--tea-rooibos-tint);color:var(--tea-rooibos);grid-column:span 3}
.cat.cat-rooibos .arr{background:var(--tea-rooibos);color:#fff}

.cat.cat-chai{background:var(--tea-chai-tint);color:var(--tea-chai);grid-column:span 3}
.cat.cat-chai .arr{background:var(--tea-chai);color:#fff}

.cat.cat-wellness{background:var(--tea-wellness-tint);color:var(--tea-wellness);grid-column:span 3}
.cat.cat-wellness .arr{background:var(--tea-wellness);color:#fff}

.cat.cat-coffee{background:var(--tea-coffee);color:var(--tea-coffee-tint);grid-column:span 3}
.cat.cat-coffee .corner-tag{background:rgba(235,224,214,.18);color:var(--tea-coffee-tint)}
.cat.cat-coffee .count{color:rgba(235,224,214,.65)}
.cat.cat-coffee .arr{background:var(--tea-coffee-tint);color:var(--tea-coffee)}

.cat.cat-biscuits{background:var(--tea-biscuit-tint);color:var(--tea-biscuit);grid-column:span 6}
.cat.cat-biscuits .arr{background:var(--tea-biscuit);color:#fff}

/* ===== PRODUCT GRID ===== */
.prod-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}

/* ===== EDITORIAL ROW ===== */
.edit-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--gap);margin-top:36px}
.edit{border-radius:var(--r-3xl);padding:24px;position:relative;overflow:hidden;box-shadow:var(--sh-card);min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.edit.dark{background:#042220;color:#eff7f6}
.edit.dark .corner{background:var(--acc);color:#042220}
.edit.cream{background:#F4EFE2;color:var(--ink)}
.edit.cream .corner{background:#042220;color:#F4EFE2}
.edit.acc{background:var(--acc);color:#0A0B0F}
.edit.acc .corner{background:#0A0B0F;color:var(--acc)}
.edit .corner{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
}
.edit .corner svg{width:14px;height:14px}
.edit .top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.edit .kicker{font-family:var(--fm);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;opacity:.65}
.edit h3{font-family:var(--fd);font-style:italic;font-weight:400;font-size:36px;letter-spacing:-.012em;margin:0 0 8px;line-height:1.05;text-wrap:balance}
.edit p{font-size:13.5px;line-height:1.5;margin:0;opacity:.85;max-width:42ch}
.edit .cta{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.10);
  font-size:12.5px;font-weight:600;align-self:flex-start;
  border:1px solid rgba(255,255,255,.18);
}
.edit.dark .cta{background:rgba(239,247,246,.08);border-color:rgba(239,247,246,.16);color:#eff7f6}
.edit.cream .cta{background:rgba(14,15,18,.06);border-color:rgba(14,15,18,.10);color:var(--ink)}
.edit.acc .cta{background:#0A0B0F;border-color:#0A0B0F;color:var(--acc)}
.edit .cta svg{width:11px;height:11px}

/* Brew-card structured content (cream variant of .edit) */
.brew-card{display:flex;flex-direction:column;gap:0;margin-top:8px}
.brew-card .step{
  display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid rgba(14,15,18,.08);
}
.brew-card .step:last-child{border-bottom:none}
.edit.dark .brew-card .step{border-bottom-color:rgba(239,247,246,.08)}
.brew-card .num{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:12px;font-weight:700;
  background:rgba(14,15,18,.06);color:inherit;
}
.edit.dark .brew-card .num{background:rgba(239,247,246,.10)}
.brew-card .step.cur .num{background:var(--acc);color:#0A0B0F}
.brew-card .nm{font-size:13px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.brew-card .mt{font-family:var(--fm);font-size:10.5px;opacity:.55;font-weight:500;margin-top:2px}
.brew-card .val{font-family:var(--fb);font-weight:700;font-size:13px;letter-spacing:-.005em}

/* Score-list tasting-profile bars (acc variant of .edit) */
.score-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.score{display:flex;flex-direction:column;gap:6px}
.score .top{display:flex;justify-content:space-between;align-items:baseline}
.score .nm{font-size:12.5px;font-weight:600}
.score .v{font-family:var(--fm);font-size:11px;font-weight:700;opacity:.7}
.score .bar{height:6px;border-radius:6px;background:rgba(10,11,15,.10);overflow:hidden}
.score .fill{height:100%;background:#0A0B0F;border-radius:6px;transition:width .4s var(--ease)}

/* ===== RESPONSIVE ===== */
@media (max-width:1180px){
  .hero,.edit-row{grid-template-columns:1fr}
  .cat.cat-black,.cat.cat-green,.cat.cat-fruit{grid-column:span 12}
  .cat.cat-rooibos,.cat.cat-chai,.cat.cat-wellness,.cat.cat-coffee,.cat.cat-biscuits{grid-column:span 6}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  h1.head{font-size:42px}
  .hero-meta{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr 1fr}
  .cat{min-height:180px;padding:18px}
  .cat h3{font-size:28px}
}

/* ===== FIND YOUR PERFECT TEA, attribute discovery (added 2026-05-08) ===== */
.find-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:0 0 48px;
}
.find-card{
  background:var(--surface,#eff7f6);
  border:1px solid rgba(14,15,18,.08);
  border-radius:14px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.find-card-head .eyebrow{
  display:inline-block;
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-soft,#5a5a5a);
  margin-bottom:8px;
}
.find-card-head h3{
  font-family:var(--serif,'Instrument Serif',serif);
  font-size:32px;
  line-height:1.05;
  color:var(--ink,#0A0B0F);
  margin:0;
}
.find-tiles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.find-tile{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(14,15,18,.04);
  border:1px solid rgba(14,15,18,.08);
  border-radius:999px;
  padding:8px 14px;
  text-decoration:none;
  color:var(--ink,#0A0B0F);
  font-size:14px;
  font-weight:500;
  transition:all .15s ease;
}
.find-tile:hover{
  background:var(--ink,#0A0B0F);
  color:var(--surface,#eff7f6);
  border-color:var(--ink,#0A0B0F);
  transform:translateY(-1px);
}
.find-tile .ico{font-size:16px}
.find-tile .ct{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;
  opacity:.55;
  font-weight:400;
}
.find-tile:hover .ct{opacity:.85}

/* ===== QUICK STRIP, Organic / Bestsellers / Rare / Quiz ===== */
.quick-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:0 0 56px;
  padding:14px 18px;
  background:linear-gradient(135deg, #f5e9c8 0%, #e9d8a8 100%);
  border-radius:14px;
}
.quick-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#0A0B0F;
  color:#eff7f6;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
}
.quick-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.quick-pill.organic{background:#3a7d3a}
.quick-pill.bestseller{background:#b8860b}
.quick-pill.rare{background:#8b3a62}
.quick-pill.quiz{background:#0A0B0F}
.quick-pill .ico{font-size:18px}
.quick-pill .ct{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;
  background:rgba(255,255,255,.18);
  padding:2px 8px;
  border-radius:999px;
}

@media (max-width:900px){
  .find-grid{grid-template-columns:1fr}
  .find-card-head h3{font-size:28px}
  .quick-strip{flex-direction:column;align-items:stretch}
  .quick-pill{justify-content:center}
}

/* ===== Discovery strip, Tea Club / Gift Cards / Samples / Quiz (added 2026-05-08) ===== */
.discovery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 56px;
}
.ds-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  min-height: 200px;
}
.ds-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.ds-tile .ds-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  opacity: 0.65;
}
.ds-tile h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 4px;
  font-weight: 400;
}
.ds-tile h3 em { font-style: italic; }
.ds-tile p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  opacity: 0.85;
}
.ds-tile .ds-cta {
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ds-club { background: linear-gradient(135deg, #042220 0%, #0a4444 100%); color: #eff7f6; }
.ds-club .ds-eyebrow { color: #fde68a; opacity: 1; }
.ds-club h3 em { color: #fde68a; }

.ds-gift { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); color: #831843; }
.ds-gift .ds-eyebrow { color: #be185d; }
.ds-gift h3 em { color: #c44b4b; }

.ds-sample { background: linear-gradient(135deg, #fff8e1 0%, #fde68a 100%); color: #78350f; }
.ds-sample .ds-eyebrow { color: #92400e; }
.ds-sample h3 em { color: #d97706; }

.ds-quiz { background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); color: #064e3b; }
.ds-quiz .ds-eyebrow { color: #047857; }
.ds-quiz h3 em { color: #059669; }

@media (max-width: 1080px) {
  .discovery-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .discovery-strip { grid-template-columns: 1fr; }
}