/* =====================================================================
   TEA LUX — top-shop.com.ua
   Luxury Pu-erh tea store. Design system + components.
   Scoped under .tl- prefix so it drops cleanly into WordPress / Divi
   without colliding with theme styles.
   ===================================================================== */

/* ---------- Page reset: kill default margins / white edge gap ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; background: var(--tl-bg); overflow-x: hidden; }
body { margin: 0; padding: 0; background: var(--tl-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Design tokens ---------- */
:root {
  --tl-ink:    #0c0a07;   /* warm deep black (page bg)  */
  --tl-earth:  #1a1710;   /* warm dark surface          */
  --tl-clay:   #5c3a22;   /* wet clay                   */
  --tl-copper: #a86a38;   /* steeped tea                */
  --tl-gold:   #c8a05a;   /* richer gilded accent       */
  --tl-gold-2: #e8d09a;   /* champagne highlight        */
  --tl-jade:   #5a6b54;   /* young leaf                 */
  --tl-ash:    #a2937c;   /* muted warm text            */
  --tl-cream:  #f0e6d0;   /* warm rice-paper text       */
  --tl-paper:  #faf6ef;   /* lightest                   */
  --tl-burgundy: #4a1c1c; /* deep accent (subtle use)   */
  --tl-line:   rgba(200,160,90,.2);

  /* semantic theme tokens (flip under [data-theme="light"]) */
  --tl-bg:      #0c0a07;
  --tl-surface: #1a1710;
  --tl-text:    #f0e6d0;
  --tl-text-2:  #bdb09a;
  --tl-gold-lt: #e8d09a;
  --tl-border:  rgba(200,160,90,0.16);
  --tl-bg-rgb:  12,10,7;
  --tl-nav-bg:  rgba(12,10,7,0.92);
  --tl-smoke:   #9a8d76;   /* muted meta text */

  --tl-serif:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tl-sans:   "Jost", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --tl-ease:   cubic-bezier(.22,.61,.36,1);
  --tl-slow:   cubic-bezier(.16,1,.3,1);
  --tl-lux:    cubic-bezier(.2,.8,.2,1);

  --tl-maxw:   1280px;
  --tl-gutter: clamp(20px, 5vw, 72px);
}

/* ---------- Light theme (warm parchment) ---------- */
[data-theme="light"] {
  /* semantic tokens */
  --tl-bg:      #f5f0e8;
  --tl-surface: #fdf8f0;
  --tl-text:    #1a1410;
  --tl-text-2:  #6b5f4e;
  --tl-gold:    #a07830;
  --tl-gold-lt: #b98a3e;
  --tl-border:  rgba(160,120,48,0.08);
  --tl-bg-rgb:  245,240,232;
  --tl-nav-bg:  rgba(245,240,232,0.92);
  --tl-smoke:   #6b5f4e;
  /* remap the core palette so existing var()-driven rules flip too */
  --tl-ink:     #f5f0e8;
  --tl-earth:   #fdf8f0;
  --tl-cream:   #1a1410;
  --tl-ash:     #6b5f4e;
  --tl-gold-2:  #a07830;
  --tl-line:    rgba(160,120,48,0.22);
}
/* light theme: cards lift on a soft warm shadow */
[data-theme="light"] .tl--tea-card,
[data-theme="light"] .box-card { box-shadow: 0 6px 26px rgba(160,120,48,.08); }

/* light theme: button treatment */
[data-theme="light"] .tl-btn {
  background: #1a1410 !important;
  color: #f0e6d0 !important;
  border-color: transparent !important;
}
[data-theme="light"] .tl-btn--ghost {
  background: transparent !important;
  border: 1.5px solid rgba(26,20,16,0.35) !important;
  color: #1a1410 !important;
}
[data-theme="light"] .tl-btn--ghost:hover {
  background: rgba(26,20,16,0.07) !important;
  border-color: rgba(26,20,16,0.6) !important;
}

/* hero canvas is always dark (both themes) — keep its ghost button light */
.tl-hero .tl-btn--ghost,
[class*="hero"] .tl-btn--ghost {
  border-color: rgba(240,230,208,.45) !important;
  color: #f0e6d0 !important;
}
.tl-hero .tl-btn--ghost:hover,
[class*="hero"] .tl-btn--ghost:hover {
  background: rgba(240,230,208,.1) !important;
  border-color: rgba(240,230,208,.7) !important;
}

/* the hero & top nav sit on permanently-dark generated art:
   keep their content light regardless of the active theme */
[data-theme="light"] .tl-header .tl-logo,
[data-theme="light"] .tl-header .tl-nav a,
[data-theme="light"] .tl-hero h1,
[data-theme="light"] .tl-hero .tl-hero__sub,
[data-theme="light"] .tl-scrollcue { color: #f4ece0; }
[data-theme="light"] .tl-header .tl-burger span { background: #f4ece0; }

/* ---------- Reset (scoped, gentle) ---------- */
.tl-root *,
.tl-root *::before,
.tl-root *::after { box-sizing: border-box; }

.tl-root {
  margin: 0;
  font-family: var(--tl-sans);
  color: var(--tl-cream);
  background: var(--tl-ink);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.tl-root img,
.tl-root canvas { display: block; max-width: 100%; }

.tl-root a { color: inherit; text-decoration: none; }

/* ---------- Typography ---------- */
.tl-root h1, .tl-root h2, .tl-root h3, .tl-root h4 {
  font-family: var(--tl-serif);
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  letter-spacing: .01em;
}

.tl-display {
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.03em;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

.tl-h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing: -.02em; line-height: 1; }
.tl-h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }

.tl-eyebrow {
  font-family: var(--tl-sans);
  font-size: .74rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--tl-gold);
  font-weight: 500;
  display: inline-block;
}

.tl-lead {
  font-family: var(--tl-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  color: var(--tl-cream);
  font-style: italic;
}

.tl-muted { color: var(--tl-ash); }
.tl-gold  { color: var(--tl-gold); }

/* ---------- Layout helpers ---------- */
.tl-wrap {
  max-width: var(--tl-maxw);
  margin-inline: auto;
  padding-inline: var(--tl-gutter);
}

.tl-section { padding-block: clamp(6rem, 12vw, 14rem); position: relative; }

/* ---------- Buttons ---------- */
.tl-btn {
  --b: var(--tl-gold);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 2.4em;
  font-family: var(--tl-sans);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--b);
  color: var(--tl-ink);
  background: var(--b);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .5s var(--tl-ease), background .5s var(--tl-ease);
}
.tl-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tl-ink);
  transform: translateY(101%);
  transition: transform .5s var(--tl-ease);
  z-index: 0;
}
.tl-btn > * { position: relative; z-index: 1; }
.tl-btn:hover { color: var(--tl-gold-2); }
.tl-btn:hover::after { transform: translateY(0); }

.tl-btn--ghost {
  background: transparent;
  color: var(--tl-cream);
  border-color: var(--tl-line);
}
.tl-btn--ghost::after { background: var(--tl-gold); }
.tl-btn--ghost:hover { color: var(--tl-ink); border-color: var(--tl-gold); }

.tl-link {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tl-gold);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.tl-link .tl-arrow { transition: transform .4s var(--tl-ease); }
.tl-link:hover .tl-arrow { transform: translateX(6px); }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.tl-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px,2.4vw,28px) var(--tl-gutter);
  transition: background .5s var(--tl-ease), padding .5s var(--tl-ease);
}
.tl-header.is-scrolled {
  background: rgba(22,17,12,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: 14px;
  border-bottom: 1px solid var(--tl-line);
}
.tl-logo {
  font-family: var(--tl-serif);
  font-size: 1.5rem;
  letter-spacing: .12em;
  color: var(--tl-cream);
}
.tl-logo b { color: var(--tl-gold); font-weight: 500; }
.tl-nav { display: flex; gap: clamp(20px,3vw,42px); align-items: center; }
.tl-nav a {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tl-cream); opacity: .82; transition: opacity .3s, color .3s;
  position: relative;
}
.tl-nav a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background: var(--tl-gold); transition: width .4s var(--tl-ease);
}
.tl-nav a:hover { opacity: 1; color: var(--tl-gold-2); }
.tl-nav a:hover::after { width: 100%; }
.tl-nav-cta { color: var(--tl-gold) !important; opacity: 1 !important; }
.tl-burger { display: none; }

@media (max-width: 860px) {
  .tl-nav { display: none; }
  .tl-burger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 6px;
  }
  .tl-burger span { width: 26px; height: 1.5px; background: var(--tl-cream); }
}

/* =====================================================================
   HERO
   ===================================================================== */
.tl-hero {
  position: relative;
  min-height: 100vh; /* fallback for browsers without svh units */
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.tl-hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0;
}
.tl-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(75% 75% at 50% 45%, transparent 30%, rgba(8,6,4,.55) 100%),
    radial-gradient(120% 90% at 70% 30%, transparent 0%, rgba(12,9,6,.35) 55%, var(--tl-ink) 100%),
    linear-gradient(180deg, rgba(12,9,6,.55) 0%, transparent 30%, transparent 58%, var(--tl-ink) 100%);
}
/* lift the (vertically-centered) hero content higher up the viewport */
.tl-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 12vh; }
.tl-hero__inner .tl-eyebrow { margin-bottom: 1.6rem; }
.tl-hero h1 { max-width: 14ch; margin-bottom: 1.8rem; }
.tl-hero__sub { max-width: 46ch; margin-bottom: 2.6rem; color: var(--tl-cream); }
.tl-hero__actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.tl-scrollcue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tl-ash);
}
.tl-scrollcue__line {
  width: 1px; height: 56px;
  background: linear-gradient(var(--tl-gold), transparent);
  position: relative; overflow: hidden;
}
.tl-scrollcue__line::after {
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background: var(--tl-gold-2);
  animation: tl-drip 2.4s var(--tl-ease) infinite;
}
@keyframes tl-drip { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(300%)} }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.tl-marquee {
  border-block: 1px solid var(--tl-line);
  padding-block: 22px;
  overflow: hidden;
  background: var(--tl-earth);
}
.tl-marquee__track {
  display: flex; gap: 3.4rem; width: max-content;
  animation: tl-marq 32s linear infinite;
}
.tl-marquee span {
  font-family: var(--tl-serif);
  font-size: 1.5rem; font-style: italic; color: var(--tl-ash);
  display: inline-flex; align-items: center; gap: 3.4rem;
}
.tl-marquee span::after { content: "·"; color: var(--tl-gold); }
@keyframes tl-marq { to { transform: translateX(-50%); } }

/* =====================================================================
   COLLECTION GRID
   ===================================================================== */
.tl-sechead { max-width: 60ch; margin-bottom: clamp(40px,6vw,72px); }
.tl-sechead .tl-eyebrow { margin-bottom: 1.2rem; }
.tl-sechead .tl-h2 { margin-bottom: 1.2rem; }

.tl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 980px){ .tl-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .tl-grid { grid-template-columns: 1fr;} }

.tl-card {
  position: relative;
  border: 1px solid var(--tl-line);
  background: linear-gradient(180deg, var(--tl-earth), var(--tl-ink));
  border-radius: 4px;
  overflow: hidden;
  transition: transform .6s var(--tl-slow), border-color .6s;
}
.tl-card:hover { transform: translateY(-8px); border-color: var(--tl-gold); }
.tl-card__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--tl-earth);
}
.tl-card__media canvas {
  width: 100%; height: 100%;
  transition: transform 1.1s var(--tl-slow);
}
.tl-card:hover .tl-card__media canvas { transform: scale(1.06); }
.tl-card__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  padding: .5em .9em; background: rgba(22,17,12,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--tl-line); color: var(--tl-gold-2); border-radius: 2px;
}
.tl-card__body { padding: 24px 26px 30px; }
.tl-card__body .tl-h3 { margin-bottom: .4rem; }
.tl-card__meta { font-size: .82rem; color: var(--tl-ash); margin-bottom: 1.1rem; }
.tl-card__foot { display: flex; align-items: center; justify-content: space-between; }
.tl-price { font-family: var(--tl-serif); font-size: 1.5rem; color: var(--tl-cream); }
.tl-price small { font-size: .8rem; color: var(--tl-ash); }

/* =====================================================================
   PHILOSOPHY (sticky cinematic)
   ===================================================================== */
.tl-philo { background: var(--tl-earth); }
.tl-philo__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px);
  align-items: center;
}
@media (max-width: 880px){ .tl-philo__grid { grid-template-columns: 1fr; } }
.tl-philo__visual {
  position: relative; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--tl-line);
}
.tl-philo__visual canvas { width:100%; height:100%; }
.tl-philo__text .tl-h2 { margin: 1rem 0 1.6rem; }
.tl-philo__text p { color: var(--tl-cream); margin: 0 0 1.2rem; max-width: 50ch; }

.tl-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--tl-line); border: 1px solid var(--tl-line);
  margin-top: 2.4rem; border-radius: 4px; overflow: hidden;
}
.tl-stat { background: var(--tl-earth); padding: 1.6rem 1.2rem; text-align: center; }
.tl-stat__num { font-family: var(--tl-serif); font-size: 2.6rem; color: var(--tl-gold); line-height: 1; }
.tl-stat__lab { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tl-ash); margin-top: .6rem; }

/* =====================================================================
   RITUAL STRIP
   ===================================================================== */
.tl-ritual__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
@media (max-width: 880px){ .tl-ritual__grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .tl-ritual__grid { grid-template-columns: 1fr;} }
.tl-step__no {
  font-family: var(--tl-serif); font-size: 1rem; color: var(--tl-gold);
  border: 1px solid var(--tl-line); width: 2.6em; height: 2.6em;
  display: grid; place-items: center; border-radius: 50%; margin-bottom: 1.2rem;
}
.tl-step .tl-h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.tl-step p { color: var(--tl-ash); font-size: .95rem; max-width: 30ch; }

/* =====================================================================
   QUOTE / CTA
   ===================================================================== */
.tl-quote { text-align: center; }
.tl-quote blockquote {
  font-family: var(--tl-serif); font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.25; margin: 0 auto;
  max-width: 22ch; color: var(--tl-cream);
}
.tl-quote cite { display:block; margin-top: 2rem; font-style: normal; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color: var(--tl-gold); }

.tl-cta {
  text-align: center;
  background: linear-gradient(180deg, var(--tl-earth), var(--tl-ink));
  border-top: 1px solid var(--tl-line);
}
.tl-cta .tl-h2 { max-width: 18ch; margin: 1rem auto 1.6rem; }
.tl-cta p { max-width: 44ch; margin: 0 auto 2.4rem; color: var(--tl-ash); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.tl-footer { position: relative; background: var(--tl-ink); padding-block: clamp(50px,7vw,80px) 40px; }
.tl-footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(200,160,90,.5), transparent);
}
.tl-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .tl-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
.tl-footer h4 { font-family: var(--tl-sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: var(--tl-gold); margin-bottom: 1.2rem; }
.tl-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.tl-footer a { font-size: .92rem; color: var(--tl-ash); transition: color .3s; }
.tl-footer a:hover { color: var(--tl-cream); }
.tl-footer__brand p { color: var(--tl-ash); max-width: 32ch; margin: 1rem 0 0; }
.tl-footer__bottom {
  margin-top: clamp(40px,6vw,70px); padding-top: 26px; border-top: 1px solid var(--tl-line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .68rem; letter-spacing: .12em; color: var(--tl-ash);
}
.tl-footer__statement {
  margin: 1.2rem 0 0; font-family: var(--tl-serif); font-style: italic;
  font-size: 1rem; color: var(--tl-gold-lt); letter-spacing: .02em;
}

/* =====================================================================
   PRODUCT PAGE
   ===================================================================== */
.tl-breadcrumb { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--tl-ash); padding-top: clamp(96px,12vw,130px); }
.tl-breadcrumb a:hover { color: var(--tl-gold); }

.tl-product {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,80px);
  padding-top: 2rem;
}
@media (max-width: 920px){ .tl-product { grid-template-columns: 1fr; } }

.tl-product__gallery { position: relative; }
.tl-product__stage {
  position: -webkit-sticky;
  position: sticky; top: 110px;
  aspect-ratio: 1/1; border: 1px solid var(--tl-line); border-radius: 6px;
  overflow: hidden; background: linear-gradient(180deg, var(--tl-earth), var(--tl-ink));
}
.tl-product__stage canvas { width: 100%; height: 100%; }
.tl-thumbs { display: flex; gap: 12px; margin-top: 16px; }
.tl-thumb {
  width: 76px; aspect-ratio: 1/1; border: 1px solid var(--tl-line); border-radius: 4px;
  overflow: hidden; cursor: pointer; opacity: .6; transition: opacity .3s, border-color .3s;
  background: var(--tl-earth);
}
.tl-thumb canvas { width:100%; height:100%; }
.tl-thumb.is-active { opacity: 1; border-color: var(--tl-gold); }

.tl-product__info .tl-eyebrow { margin-bottom: 1rem; }
.tl-product__info h1 { font-size: clamp(2.2rem,4.5vw,3.6rem); margin-bottom: 1rem; }
.tl-product__rating { display:flex; gap:.6rem; align-items:center; font-size:.86rem; color: var(--tl-ash); margin-bottom: 1.6rem; }
.tl-stars { color: var(--tl-gold); letter-spacing: 2px; }
.tl-product__price { display:flex; align-items:baseline; gap: .8rem; margin-bottom: 1.8rem; }
.tl-product__price .tl-price { font-size: 2.4rem; }
.tl-product__price del { color: var(--tl-ash); font-size: 1.2rem; font-family: var(--tl-serif); }
.tl-product__desc { color: var(--tl-cream); margin-bottom: 2rem; max-width: 52ch; }

.tl-options { display: grid; gap: 1.4rem; margin-bottom: 2rem; }
.tl-options__label { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--tl-ash); margin-bottom:.7rem; display:block; }
.tl-chips { display:flex; gap:.7rem; flex-wrap:wrap; }
.tl-chip {
  border: 1px solid var(--tl-line); background: transparent; color: var(--tl-cream);
  padding: .7em 1.2em; border-radius: 2px; cursor: pointer; font-size: .82rem;
  font-family: var(--tl-sans); letter-spacing: .04em; transition: all .3s var(--tl-ease);
}
.tl-chip:hover { border-color: var(--tl-gold); }
.tl-chip.is-active { background: var(--tl-gold); color: var(--tl-ink); border-color: var(--tl-gold); }

.tl-buyrow { display:flex; gap: 1rem; align-items:stretch; margin-bottom: 1.4rem; flex-wrap: wrap; }
.tl-qty { display:flex; align-items:center; border: 1px solid var(--tl-line); border-radius: 2px; }
.tl-qty button { background:none; border:0; color: var(--tl-cream); width: 44px; height: 100%; font-size: 1.2rem; cursor:pointer; }
.tl-qty input { width: 46px; text-align:center; background:none; border:0; color: var(--tl-cream); font-family: var(--tl-serif); font-size: 1.2rem; }
.tl-qty input::-webkit-outer-spin-button,.tl-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tl-buyrow .tl-btn { flex: 1; min-width: 200px; justify-content: center; }
.tl-assurance { display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.8rem; color: var(--tl-ash); }
.tl-assurance span { display:inline-flex; align-items:center; gap:.5em; }
.tl-assurance svg { color: var(--tl-gold); }

/* specs */
.tl-specs { border-top: 1px solid var(--tl-line); }
.tl-specs__grid { display: grid; grid-template-columns: repeat(2,1fr); }
@media (max-width: 600px){ .tl-specs__grid { grid-template-columns: 1fr; } }
.tl-spec {
  display:flex; justify-content:space-between; gap:1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--tl-line);
}
.tl-spec dt { color: var(--tl-ash); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.tl-spec dd { margin:0; font-family: var(--tl-serif); font-size: 1.15rem; color: var(--tl-cream); text-align:right; }

/* story / scroll reveal blocks on product */
.tl-story__block { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items:center; }
.tl-story__block + .tl-story__block { margin-top: clamp(60px,9vw,120px); }
.tl-story__block.is-rev { direction: rtl; }
.tl-story__block.is-rev > * { direction: ltr; }
@media (max-width: 760px){ .tl-story__block, .tl-story__block.is-rev { grid-template-columns: 1fr; direction: ltr; } }
.tl-story__visual { aspect-ratio: 4/3; border:1px solid var(--tl-line); border-radius:6px; overflow:hidden; background: var(--tl-earth); }
.tl-story__visual canvas { width:100%; height:100%; }
.tl-story__text .tl-h3 { margin: .8rem 0 1rem; }
.tl-story__text p { color: var(--tl-cream); max-width: 44ch; }

/* =====================================================================
   SCROLL ANIMATION UTILITIES
   ===================================================================== */
.tl-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--tl-slow), transform 1s var(--tl-slow); will-change: transform, opacity; }
.tl-reveal.is-in { opacity: 1; transform: none; }
.tl-reveal[data-delay="1"]{ transition-delay: .15s; }
.tl-reveal[data-delay="2"]{ transition-delay: .30s; }
.tl-reveal[data-delay="3"]{ transition-delay: .45s; }
.tl-reveal[data-delay="4"]{ transition-delay: .60s; }

.tl-reveal-x { opacity:0; transform: translateX(-40px); transition: opacity 1s var(--tl-slow), transform 1s var(--tl-slow); }
.tl-reveal-x.is-in { opacity:1; transform:none; }

/* give parallaxed canvases slack so the shift never exposes edges */
.tl-hero__canvas[data-parallax] { height: 116%; top: -8%; bottom: auto; }
.tl-philo__visual canvas[data-parallax],
.tl-story__visual canvas[data-parallax] { height: 126%; margin-top: -13%; }

@media (prefers-reduced-motion: reduce) {
  .tl-reveal, .tl-reveal-x { opacity:1 !important; transform:none !important; }
  .tl-marquee__track, .tl-scrollcue__line::after { animation: none !important; }
  .tl-hero__canvas[data-parallax] { height: 100%; top: 0; }
  .tl-philo__visual canvas[data-parallax],
  .tl-story__visual canvas[data-parallax] { height: 100%; margin-top: 0; }
}

/* =====================================================================
   PRODUCT PAGE — larger type + stronger contrast
   ===================================================================== */
.tl-page-product { font-size: 16px; }

.tl-page-product .tl-eyebrow,
.tl-page-product .tl-options__label { font-size: .75rem; color: var(--tl-gold-lt); }

.tl-page-product .tl-product__info h1 { font-size: clamp(2.8rem, 5vw, 3.6rem); color: var(--tl-text); }
.tl-page-product .tl-lead { color: var(--tl-text); }
.tl-page-product .tl-product__desc { font-size: 16px; color: var(--tl-text); }
.tl-page-product .tl-story__text p { font-size: 16px; color: var(--tl-text); }

.tl-page-product .tl-product__rating,
.tl-page-product .tl-card__meta,
.tl-page-product .tl-muted { color: var(--tl-text-2); }

.tl-page-product .tl-spec dt { font-size: 15px; color: var(--tl-text-2); }
.tl-page-product .tl-spec dd { font-size: 1.2rem; color: var(--tl-text); }

/* =====================================================================
   STICKY BOTTOM BAR
   ===================================================================== */
.tl--bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--tl-surface);
  border-top: 1px solid rgba(199,154,85,0.25);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tl--bottom-bar-price {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--tl-gold-lt);
  flex-shrink: 0;
}
.tl--bottom-bar-cart {
  flex: 1;
  background: linear-gradient(135deg, var(--tl-gold-lt), var(--tl-gold));
  color: #0e0c08;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.tl--bottom-bar-fav {
  width: 48px; height: 48px;
  border: 1px solid rgba(199,154,85,0.35);
  background: transparent;
  color: var(--tl-gold);
  font-size: 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
/* keep content clear of the fixed bar */
body { padding-bottom: 80px; }

/* index variant: full-width gold link, revealed after the hero */
.tl--bottom-bar-cart[href] {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.tl--bottom-bar--home {
  transform: translateY(110%);
  transition: transform .45s var(--tl-ease);
}
.tl--bottom-bar--home.is-visible { transform: translateY(0); }

/* =====================================================================
   LANGUAGE SWITCHER + THEME TOGGLE (live in the dark top nav)
   ===================================================================== */
.tl--lang-switcher { position: relative; }
.tl--lang-current {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(199,154,85,0.3);
  border-radius: 20px;
  padding: 6px 12px;
  color: #e6c98e;
  font-size: 0.7rem; letter-spacing: 0.15em;
  cursor: pointer;
}
.tl--lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #1f1c14;
  border: 1px solid rgba(199,154,85,0.2);
  border-radius: 8px;
  padding: 6px;
  display: none;
  z-index: 200;
  min-width: 130px;
}
.tl--lang-dropdown.open { display: block; }
.tl--lang-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: none;
  color: #bdb09a;
  font-size: 0.72rem; letter-spacing: 0.1em;
  padding: 7px 10px; border-radius: 5px;
  cursor: pointer; text-align: left;
}
.tl--lang-btn:hover, .tl--lang-btn.active {
  background: rgba(199,154,85,0.12);
  color: #e6c98e;
}

.tl--theme-toggle {
  background: transparent;
  border: 1px solid var(--tl-border);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem;
  position: relative;
}

/* === CEREMONY SECTION === */
.tl--ceremony-preview {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,160,90,.06), transparent 60%),
    var(--tl-earth);
  padding-block: clamp(6rem,12vw,14rem);
}
.tl--ceremony-head { text-align: center; max-width: 60ch; margin-inline: auto; }
.tl--ceremony-head .tl-eyebrow { margin-bottom: 1.1rem; }
.tl--ceremony-head .tl-h2 { margin-bottom: 1.1rem; }

.tl--ceremony-demos {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
  max-width: 760px; margin: clamp(40px,6vw,64px) auto 0;
}
@media (max-width: 600px) { .tl--ceremony-demos { grid-template-columns: 1fr; } }

.tl--ceremony-card {
  border: 1px solid var(--tl-line); border-radius: 8px; padding: 24px;
  background: linear-gradient(180deg, var(--tl-earth), var(--tl-ink));
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.tl--ceremony-stage {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #2c2013, var(--tl-ink));
  display: grid; place-items: center;
}
.tl--ceremony-stage canvas { width: 100%; height: 100%; }
.tl--ceremony-status {
  font-family: var(--tl-serif); font-style: italic; font-size: 1.2rem;
  color: var(--tl-gold-lt); min-height: 1.4em; transition: color .4s var(--tl-ease);
}
.tl--ceremony-caption { font-size: .82rem; color: var(--tl-ash); }
.tl--pour-btn { cursor: pointer; }
.tl--ceremony-cta { text-align: center; margin-top: clamp(36px,5vw,56px); }

/* === CEREMONY PAGE === */
.tl--ceremony-hero {
  min-height: 70svh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: clamp(120px,16vw,190px) var(--tl-gutter) clamp(56px,9vw,90px);
  position: relative; overflow: hidden;
  background: radial-gradient(120% 110% at 50% 0%, #3a2a18 0%, var(--tl-ink) 70%);
}
.tl--ceremony-hero .tl--eyebrow {
  font-family: var(--tl-sans); font-size: .75rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--tl-gold); margin: 0;
}
.tl--ceremony-hero h1 {
  font-family: var(--tl-serif); font-weight: 500; line-height: 1.04;
  font-size: clamp(2.8rem, 8vw, 6rem); margin: 1.4rem 0 1rem; color: var(--tl-cream);
}
.tl--ceremony-hero h1 em { font-style: italic; color: var(--tl-gold-lt); }
.tl--ceremony-hero > p:last-child {
  font-family: var(--tl-serif); font-style: italic; color: var(--tl-ash);
  font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 0;
}

.tl--ceremony-steps {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 720px) { .tl--ceremony-steps { grid-template-columns: 1fr; } }
.tl--ceremony-step { border-left: 1px solid var(--tl-line); padding: 2px 0 22px 26px; }
.tl--ceremony-step__no { font-family: var(--tl-serif); color: var(--tl-gold); font-size: 1.2rem; }
.tl--ceremony-step h3 {
  font-family: var(--tl-serif); font-size: clamp(1.4rem,2.2vw,1.9rem);
  margin: .4rem 0 .6rem; color: var(--tl-cream);
}
.tl--ceremony-step p { color: var(--tl-ash); max-width: 42ch; }

/* === NAV DROPDOWN === */
.tl--nav { position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:1.15rem 2rem; background:var(--tl-nav-bg);backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--tl-border); }

.tl--nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 0.1rem;
}
.tl--brand-top {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--tl-gold-lt);
  font-variation-settings: 'opsz' 30;
  letter-spacing: 0.02em;
}
.tl--brand-bottom {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tl-text-2);
  display: inline-block;
  transform: skewX(-14deg);
  font-style: normal;
}

.tl--nav-links { display:flex;align-items:center;gap:2.2rem;list-style:none;margin:0;padding:0; }

.tl--nav-item { position:relative; }
.tl--nav-item > a,
.tl--nav-btn {
  font-family:'Manrope',sans-serif;font-weight:400;
  font-size:0.66rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--tl-text-2);text-decoration:none;background:none;border:none;
  cursor:pointer;padding:0;transition:color .3s; position:relative;
}
/* underline grows from the centre on hover (desktop) */
.tl--nav-item > a::after,
.tl--nav-btn::after {
  content:""; position:absolute; left:50%; right:50%; bottom:-7px; height:1px;
  background:var(--tl-gold-lt); transition:left .35s var(--tl-lux), right .35s var(--tl-lux);
}
.tl--nav-item > a:hover,
.tl--nav-btn:hover { color:var(--tl-gold-lt); }
.tl--nav-item > a:hover::after,
.tl--nav-btn:hover::after { left:0; right:0; }

/* Dropdown panel */
.tl--dropdown {
  position:absolute;top:100%;left:0;right:0;
  background:var(--tl-nav-bg);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--tl-gold), transparent) 1;
  border-bottom:1px solid var(--tl-border);
  padding:2.8rem 2rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  z-index:300;
  /* stay in the layout so the cursor can travel into the panel;
     toggle visibility instead of display to avoid a hover gap */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  /* FIX 4 — close-only delay: hold the panel open ~1.5s after the cursor
     leaves, then fade out over 0.15s. Opening stays instant (rule below). */
  transition: opacity 0.15s ease 1.5s,
              visibility 0.15s ease 1.5s,
              pointer-events 0s ease 1.5s;
}
/* FIX 4 — invisible hover bridge spanning the gap between the nav button
   and the panel, so the cursor can cross without arming the close timer.
   It inherits the panel's pointer-events, so it only captures the pointer
   while the menu is already open and never opens the menu on its own. */
.tl--dropdown::before {
  content:'';
  position:absolute;
  left:0; right:0; bottom:100%;
  height:24px;
  background:transparent;
}
/* Keep the panel full-width: its containing block must stay the fixed nav
   bar, so .tl--has-dropdown remains statically positioned (NOT relative). */
.tl--has-dropdown { position:static; }
.tl--has-dropdown:hover .tl--dropdown,
.tl--has-dropdown:focus-within .tl--dropdown,
.tl--has-dropdown.open .tl--dropdown {
  opacity:1;
  visibility:visible;
  pointer-events:all;
  /* opening: react immediately, no delay */
  transition: opacity 0.15s ease 0s,
              visibility 0.15s ease 0s,
              pointer-events 0s ease 0s;
}

.tl--dropdown-col { display:flex;flex-direction:column;gap:0.7rem; }

.tl--dropdown-heading {
  display:block;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:1rem;color:var(--tl-gold-lt);
  margin-bottom:0.4rem;
  font-variation-settings:'opsz' 20;
  text-decoration:none;
  transition:color .3s;
}
.tl--dropdown-heading:hover { color:var(--tl-gold); }

.tl--dropdown a {
  font-size:0.68rem;letter-spacing:0.14em;
  color:var(--tl-text-2);text-decoration:none;
  transition:color .3s, padding-left .3s;
  padding-left:0;
}
.tl--dropdown a:hover { color:var(--tl-text);padding-left:6px; }

.tl--nav-actions { display:flex;align-items:center;gap:0.8rem; }

.tl--nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.tl--nav-burger span { width:24px;height:1.5px;background:var(--tl-text);display:block;transition:transform .3s, opacity .3s; }
.tl--nav-burger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.tl--nav-burger.is-open span:nth-child(2) { opacity:0; }
.tl--nav-burger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile */
@media(max-width:768px) {
  .tl--nav-burger { display:flex; }
  /* .tl--nav has backdrop-filter, so it is the containing block for this
     fixed child — use explicit height instead of bottom:0, which would
     collapse against the 64px bar. */
  .tl--nav-links { display:none;flex-direction:column;align-items:flex-start;gap:1.4rem; position:fixed;top:64px;left:0;right:0;height:calc(100dvh - 64px); background:var(--tl-bg) !important;border-top:1px solid var(--tl-border);padding:2rem; overflow-y:auto; }
  .tl--nav-links.open { display:flex; }
  .tl--dropdown {
    position: static;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.5rem;
    border: none;
    padding: 0.8rem 0 0.8rem 1rem;
    background: transparent;
    /* mobile uses an explicit tap toggle, not hover travel */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  /* FIX 4 — the desktop hover bridge is not needed in the tap-toggle menu */
  .tl--dropdown::before { content: none; }
  .tl--has-dropdown:hover .tl--dropdown { display:none; }
  .tl--has-dropdown.open .tl--dropdown {
    display: grid;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .tl--dropdown-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  /* top-level items (Чаї, Церемонія …): small spaced labels */
  .tl--nav-item > a,
  .tl--nav-btn {
    color: var(--tl-text-2);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
  }
  /* dropdown sub-links: larger, theme-coloured */
  .tl--dropdown a {
    color: var(--tl-text-2);
    font-size: 1rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
  }
  .tl--dropdown a:hover { color: var(--tl-text); }
  .tl--dropdown-heading {
    color: var(--tl-gold-lt);
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
  }
}

/* === CATALOG CAROUSELS === */
.tl--catalogs { padding: 5rem 0; }

.tl--catalog-row {
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--tl-border);
}
.tl--catalog-row:first-child { border-top: none; }

.tl--catalog-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2.6rem;
  padding-inline: 2rem;
}
.tl--catalog-eyebrow {
  font-size: .58rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--tl-gold); margin-bottom: .5rem;
}
.tl--catalog-title {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144;
  color: var(--tl-text);
}
.tl--catalog-title em { font-style: italic; color: var(--tl-gold-lt); }
.tl--catalog-link {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tl-gold-lt); text-decoration: none;
  border-bottom: 1px solid rgba(199,154,85,.3);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color .3s;
}
.tl--catalog-link:hover { border-color: var(--tl-gold-lt); }

.tl--carousel-wrap {
  position: relative;
}
/* fade the right edge to hint scrollability */
.tl--carousel-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 1.2rem;
  width: 80px;
  background: linear-gradient(to right, transparent, var(--tl-bg));
  pointer-events: none;
  z-index: 2;
}

.tl--carousel {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .5rem 2rem 1.2rem;
  scroll-behavior: auto;  /* important: NOT smooth for infinite loop */
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.tl--carousel:active { cursor: grabbing; }
.tl--carousel::-webkit-scrollbar { display: none; }

/* Tea card */
.tl--tea-card {
  flex-shrink: 0;
  width: clamp(200px, 46vw, 260px);
  scroll-snap-align: start;
  border: 1px solid var(--tl-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--tl-surface);
  transition: transform .5s var(--tl-lux), border-color .4s, box-shadow .5s var(--tl-lux);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
/* Dark theme — card lightens on hover */
.tl--tea-card:hover,
.woocommerce ul.products li.product:hover {
  border-color: rgba(199,154,85,0.5) !important;
  background: #221e16 !important;
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.tl--tea-card-img {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(200,160,90,.14), transparent 62%),
    linear-gradient(160deg, #221d14, #0c0a07);
  padding: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.tl--tea-card-img canvas {
  width: 82%; height: 82%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Real product photos: fill the square stage instead of rendering at the
   image's intrinsic size (which overflowed and got clipped). */
.tl--tea-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.tl--tea-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tl--tea-tag {
  font-size: .5rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tl-gold-lt);
  border: 1px solid rgba(199,154,85,.3);
  border-radius: 10px; padding: .25rem .6rem;
  display: inline-block; margin-bottom: .7rem;
  align-self: flex-start; /* keep pill compact inside the flex-column body */
}

.tl--tea-name {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: 1rem; margin-bottom: .25rem;
  color: var(--tl-text);
  font-variation-settings: 'opsz' 20;
  line-height: 1.2;
  flex-shrink: 0;
}

.tl--tea-origin {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tl-text-2);
  flex: 1;
  margin-bottom: 0;
}

.tl--tea-foot {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--tl-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.tl--tea-price {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.15rem;
  background: linear-gradient(100deg, var(--tl-gold-lt) 0%, #fff4d8 18%, var(--tl-gold-lt) 38%, var(--tl-gold-lt) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--tl-gold-lt);
  animation: tlShimmer 2.6s var(--tl-ease) .6s 1;
}
@keyframes tlShimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: 0 0; }
}

.tl--tea-add {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(165deg, #f0dfa8, #c8a05a 55%, #9a7a3a);
  border: none; color: #0c0a07; font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .4s var(--tl-lux);
  will-change: transform;
}
.tl--tea-card:hover .tl--tea-add { transform: rotate(90deg) scale(1.08); }
.tl--tea-add:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) { .tl--tea-price { animation: none; } }

/* === BOTTOM NAV === */
.tl--bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  height: 64px;
  align-items: stretch;
  background: rgba(var(--tl-bg-rgb), 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--tl-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.28);
  display: none; /* shown on mobile only */
}

@media(max-width:768px) {
  .tl--bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
  /* product page has its own sticky bar above the nav — clear both */
  .tl-page-product { padding-bottom: 64px; }
}

.tl--bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tl-text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s;
  position: relative;
}

.tl--bottom-nav-item:hover,
.tl--bottom-nav-item.active {
  color: var(--tl-gold-lt);
}
.tl--bottom-nav-item.active svg { stroke: var(--tl-gold-lt); }
.tl--bottom-nav-item svg { transition: stroke 0.25s, transform 0.25s; }
.tl--bottom-nav-item:active { color: var(--tl-gold-lt); }
.tl--bottom-nav-item:active svg { transform: scale(.88); }

/* Cart badge (hidden until JS reveals it; inline display:none holds) */
.tl--cart-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl--cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  background: var(--tl-gold);
  color: #0c0a07;
  border-radius: 9px;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* old homepage sticky bar replaced by the bottom nav */
.tl--bottom-bar--home { display: none !important; }

/* product sticky bar sits above the bottom nav on mobile */
.tl--bottom-bar { bottom: 64px !important; }

@media(min-width:769px) {
  .tl--bottom-bar { bottom: 0 !important; }
  body { padding-bottom: 80px; }
}

/* === GIFT BANNER === */
.tl--gift-banner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 2rem;
  border: 1px solid var(--tl-border);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(199,154,85,.08), rgba(199,154,85,.03));
  text-decoration: none;
  transition: border-color .35s, transform .35s;
}
.tl--gift-banner:hover {
  border-color: rgba(199,154,85,.5);
  transform: translateY(-4px);
}
.tl--gift-banner-icon { font-size: 2.8rem; flex-shrink: 0; }
.tl--gift-banner-text { flex: 1; }
.tl--gift-banner-eyebrow {
  font-size: .56rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: .4rem;
}
.tl--gift-banner-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--tl-text);
  margin-bottom: .4rem;
  font-variation-settings: 'opsz' 30;
}
.tl--gift-banner-title em { font-style: italic; color: var(--tl-gold-lt); }
.tl--gift-banner-sub {
  font-size: .75rem;
  color: var(--tl-text-2);
  line-height: 1.6;
}
.tl--gift-banner-arrow {
  font-size: 1.4rem;
  color: var(--tl-gold-lt);
  flex-shrink: 0;
  transition: transform .3s;
}
.tl--gift-banner:hover .tl--gift-banner-arrow { transform: translateX(6px); }

/* === MOBILE HERO TITLE === */
@media(max-width:768px) {
  .tl-hero__title, .hero-title,
  [class*="hero"] h1 {
    font-size: clamp(2.4rem, 10vw, 3.6rem) !important;
    line-height: 1.05 !important;
  }
}

/* =====================================================================
   FIX 1 — PRODUCT PAGE: details to the right of the image (desktop)
   ===================================================================== */
/* the wrapping <section> must not impose its own columns — the inner
   .tl--product-layout grid owns the two-column split now */
.tl-product { display: block; }
.tl--product-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 3rem;
  align-items: start;
}
@media(max-width: 768px) {
  .tl--product-layout {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   FIX 2 — QUANTITY +/- BUTTONS
   ===================================================================== */
.tl--qty-wrap {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  width: fit-content;
}
.tl--qty-btn {
  width: 44px !important;
  background: transparent !important;
  border: none !important;
  color: var(--tl-gold-lt) !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  height: 100% !important;
  transition: background 0.2s;
}
.tl--qty-btn:hover {
  background: rgba(199,154,85,0.1) !important;
}
.tl--qty-input {
  width: 48px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  color: var(--tl-text) !important;
  font-size: 1rem !important;
  -moz-appearance: textfield !important;
  appearance: textfield;
  align-self: center !important;
}
.tl--qty-input::-webkit-outer-spin-button,
.tl--qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

/* =====================================================================
   FIX 3 — MOBILE SHOP: 2 products per row
   ===================================================================== */
@media(max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .tl-shop-grid,
  .tl--catalog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.8rem !important;
  }
  .woocommerce ul.products li.product,
  .tl--tea-card {
    width: 100% !important;
  }
}

/* =====================================================================
   FIX 5 — INFINITE SCROLL (replaces pagination)
   ===================================================================== */
.tl--load-more-wrap { width: 100%; }
.tl--load-sentinel { width: 100%; height: 1px; }
.tl--load-spinner {
  display: flex;
  justify-content: center;
  padding: 2rem;
}
.tl--spinner-ring {
  width: 36px; height: 36px;
  border: 2px solid var(--tl-border);
  border-top-color: var(--tl-gold-lt);
  border-radius: 50%;
  animation: tlSpin 0.8s linear infinite;
}
@keyframes tlSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tl--spinner-ring { animation-duration: 2s; }
}

/* =====================================================================
   FIX 6 — PRODUCT SORTING
   ===================================================================== */
.tl--sort-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.tl--sort-select {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  color: var(--tl-text);
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  outline: none;
}

/* =====================================================================
   FIX 7 — PRODUCT FILTERS SIDEBAR
   ===================================================================== */
.tl--shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media(max-width: 768px) {
  .tl--shop-layout {
    grid-template-columns: 1fr;
  }
  .tl--filters {
    order: -1;
  }
}
.tl--shop-main { min-width: 0; }
.tl--filters {
  position: sticky;
  top: 90px;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 18px;
  padding: 1.5rem;
}
.tl--filters-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--tl-gold-lt);
  margin-bottom: 1.2rem;
  font-variation-settings: 'opsz' 20;
}
.tl--filter-group {
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--tl-border);
}
.tl--filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.tl--filter-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 0.8rem;
}
.tl--filter-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--tl-text-2);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.tl--filter-check input[type="checkbox"] {
  accent-color: var(--tl-gold);
}
.tl--price-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tl--price-input {
  width: 70px;
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  color: var(--tl-text);
  font-size: 0.8rem;
}
.tl--filter-apply {
  background: linear-gradient(135deg, var(--tl-gold-lt), var(--tl-gold));
  border: none;
  border-radius: 12px;
  padding: 0.4rem 0.8rem;
  color: #0c0a07;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* =====================================================================
   FIX 8 — "Подбери насолоду" gift nav item + CSS gift-box animation
   ===================================================================== */
.tl--nav-gift-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tl-text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.tl--nav-gift-link:hover { color: var(--tl-gold-lt); }
.tl--nav-gift-icon {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  position: relative;
}
.tl--gbox {
  position: relative;
  width: 22px;
  height: 18px;
  display: block;
  transform-style: preserve-3d;
}
.tl--gbox-front {
  position: absolute;
  bottom: 0; left: 0;
  width: 18px; height: 13px;
  background: linear-gradient(160deg, #2a1e0e, #1a1208);
  border-radius: 2px;
}
.tl--gbox-side {
  position: absolute;
  bottom: 0; right: 0;
  width: 6px; height: 11px;
  background: linear-gradient(160deg, #1e1608, #120e04);
  transform: skewY(-38deg);
  transform-origin: bottom left;
}
.tl--gbox-lid {
  position: absolute;
  top: 0; left: 0;
  width: 19px; height: 6px;
  background: linear-gradient(160deg, #c8a05a, #9a7a3a);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tl--gbox-ribbon-h {
  position: absolute;
  top: 4px; left: 0;
  width: 18px; height: 2px;
  background: rgba(199,154,85,0.7);
}
.tl--gbox-ribbon-v {
  position: absolute;
  top: 0; left: 7px;
  width: 2px; height: 18px;
  background: rgba(199,154,85,0.7);
}
/* Tea items inside box */
.tl--gtea {
  position: absolute;
  font-size: 8px;
  opacity: 0;
  top: 12px;
  transition: none;
}
.tl--gtea-1 { left: 2px; }
.tl--gtea-2 { left: 6px; }
.tl--gtea-3 { left: 10px; }
/* Hover animation */
.tl--nav-gift-link:hover .tl--gbox-lid {
  transform: perspective(60px) rotateX(-50deg);
}
.tl--nav-gift-link:hover .tl--gtea-1 {
  animation: teaDrop 0.5s ease 0.1s forwards;
}
.tl--nav-gift-link:hover .tl--gtea-2 {
  animation: teaDrop 0.5s ease 0.25s forwards;
}
.tl--nav-gift-link:hover .tl--gtea-3 {
  animation: teaDrop 0.5s ease 0.4s forwards;
}
@keyframes teaDrop {
  0% { opacity: 0; transform: translateY(-12px) scale(0.5); }
  60% { opacity: 1; transform: translateY(0px) scale(1.1); }
  100% { opacity: 1; transform: translateY(-2px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tl--gbox-lid { transition: none; }
  .tl--nav-gift-link:hover .tl--gtea-1,
  .tl--nav-gift-link:hover .tl--gtea-2,
  .tl--nav-gift-link:hover .tl--gtea-3 { animation: none; opacity: 1; }
}

/* =====================================================================
   NEW NAV — icon links + supermarket pill
   Scoped to .tl--nav-item so they override the legacy `.tl--nav-item > a`
   rule (higher specificity). Gift-box CSS already lives above (FIX 8).
   ===================================================================== */
.tl--nav-item .tl--nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--tl-text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: none;
  transition: color 0.3s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tl--nav-item .tl--nav-link:hover { color: var(--tl-gold-lt); }
.tl--nav-icon {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.tl--nav-item .tl--nav-link:hover .tl--nav-icon { opacity: 1; }

/* Supermarket link — special gold bordered pill */
.tl--nav-item .tl--nav-super-link {
  border: 1px solid rgba(199,154,85,0.4);
  border-radius: 20px;
  padding: 0.35rem 0.8rem;
  font-size: 0.58rem;
  color: var(--tl-gold-lt) !important;
  transition: border-color 0.3s, background 0.3s;
}
.tl--nav-item .tl--nav-super-link:hover {
  border-color: var(--tl-gold-lt);
  background: rgba(199,154,85,0.08);
}
/* the pill carries its own affordance — drop the legacy hover underline */
.tl--nav-item .tl--nav-super-link::after { display: none; }

/* Active page — highlight + underline the current nav item */
.tl--nav-item.current-menu-item > .tl--nav-link,
.tl--nav-item.current-menu-item > a,
.tl--nav-item.current_page_item > .tl--nav-link,
.tl--nav-item.current_page_item > a,
.tl--nav-item.current-menu-ancestor > .tl--nav-link,
.tl--nav-item.current-menu-ancestor > a {
  color: var(--tl-gold-lt) !important;
  border-bottom: 1.5px solid var(--tl-gold-lt);
  padding-bottom: 2px;
}

/* Active state for the gift item — underline the label, not the box icon.
   Overrides the generic link underline above so it doesn't double up. */
.tl--nav-gift.current-menu-item > .tl--nav-gift-link,
.tl--nav-gift.current_page_item > .tl--nav-gift-link {
  color: var(--tl-gold-lt) !important;
  border-bottom: none;
  padding-bottom: 0;
}
.tl--nav-gift.current-menu-item .tl--nav-gift-text,
.tl--nav-gift.current_page_item .tl--nav-gift-text {
  border-bottom: 1.5px solid var(--tl-gold-lt);
  padding-bottom: 2px;
}

/* Dropdown submenu link icons */
.tl--dd-icon {
  font-size: 0.85em;
  margin-right: 0.3rem;
  opacity: 0.8;
}

/* =====================================================================
   NAV ICON HOVER ANIMATIONS — moved to end of file (see "RELIABLE NAV
   HOVER ANIMATIONS" block) using actual class names instead of :nth-child.
   ===================================================================== */


/* =====================================================================
   SHOP FILTERS — collapsible luxury filter bar + panel (improved)
   ===================================================================== */
/* ═══ FILTER BAR ═══ */
.tl--filter-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  padding: 0.8rem 1.2rem;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 18px;
  flex-wrap: wrap;
}
.tl--filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  background: var(--tl-bg);
  color: var(--tl-text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.tl--filter-toggle:hover,
.tl--filter-toggle.active {
  border-color: var(--tl-gold);
  color: var(--tl-gold-lt);
}
.tl--filter-arrow {
  transition: transform 0.3s ease;
}
.tl--filter-toggle.active .tl--filter-arrow {
  transform: rotate(180deg);
}
.tl--filter-count {
  display: none;
  min-width: 18px;
  height: 18px;
  background: var(--tl-gold);
  color: #0c0a07;
  border-radius: 9px;
  font-size: 0.58rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
/* Sort pills */
.tl--sort-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.tl--sort-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--tl-border);
  border-radius: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--tl-text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s;
  background: transparent;
}
.tl--sort-pill:hover {
  border-color: rgba(199,154,85,0.5);
  color: var(--tl-text);
}
.tl--sort-pill.active {
  border-color: var(--tl-gold);
  color: var(--tl-gold-lt);
  background: rgba(199,154,85,0.1);
}
/* Filter panel */
.tl--filter-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.2,0.8,0.2,1),
              padding 0.3s ease,
              border-color 0.3s ease;
  background: var(--tl-surface);
  border: 1px solid transparent;
  border-radius: 16px;
  margin-bottom: 0;
  padding: 0 1.4rem;
}
.tl--filter-panel.open {
  max-height: 700px;
  border-color: var(--tl-border);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}
.tl--filter-section {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--tl-border);
}
.tl--filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tl--filter-section-label {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 0.75rem;
}
/* Price inputs */
.tl--price-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tl--price-field {
  width: 85px;
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  color: var(--tl-text);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  outline: none;
  -moz-appearance: textfield;
  transition: border-color 0.22s;
}
.tl--price-field::-webkit-outer-spin-button,
.tl--price-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.tl--price-field:focus {
  border-color: var(--tl-gold-lt);
}
.tl--price-dash {
  color: var(--tl-smoke);
  font-size: 0.9rem;
}
.tl--price-ok {
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg,
    var(--tl-gold-lt), var(--tl-gold));
  border: none;
  border-radius: 10px;
  color: #0c0a07;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tl--price-ok:hover { opacity: 0.85; }
/* Type tags */
.tl--type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.tl--type-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.9rem;
  border: 1px solid var(--tl-border);
  border-radius: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--tl-text-2);
  text-decoration: none;
  transition: all 0.22s;
  background: transparent;
}
.tl--type-tag:hover {
  border-color: rgba(199,154,85,0.4);
  color: var(--tl-text);
  background: rgba(199,154,85,0.05);
}
.tl--type-tag.active {
  border-color: var(--tl-gold);
  color: var(--tl-gold-lt);
  background: rgba(199,154,85,0.12);
}
/* Toggle switch */
.tl--toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tl--toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.tl--toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.tl--toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(199,154,85,0.1);
  border: 1px solid var(--tl-border);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.tl--toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: var(--tl-smoke);
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s;
}
.tl--toggle-switch input:checked + .tl--toggle-slider {
  background: rgba(199,154,85,0.2);
  border-color: var(--tl-gold);
}
.tl--toggle-switch input:checked + .tl--toggle-slider::before {
  transform: translateX(18px);
  background: var(--tl-gold-lt);
}
/* Filter actions */
.tl--filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.tl--filter-reset {
  padding: 0.48rem 1.1rem;
  background: transparent;
  border: 1px solid var(--tl-border);
  border-radius: 14px;
  color: var(--tl-text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.22s;
}
.tl--filter-reset:hover {
  border-color: rgba(199,154,85,0.5);
  color: var(--tl-gold-lt);
}
.tl--filter-apply-btn {
  padding: 0.48rem 1.4rem;
  background: linear-gradient(135deg,
    var(--tl-gold-lt), var(--tl-gold));
  border: none;
  border-radius: 14px;
  color: #0c0a07;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tl--filter-apply-btn:hover { opacity: 0.85; }

/* Mobile filter adjustments */
@media(max-width: 768px) {
  .tl--filter-bar {
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
  }
  .tl--sort-pills {
    margin-left: 0;
    width: 100%;
  }
  .tl--sort-pill {
    font-size: 0.58rem;
    padding: 0.32rem 0.7rem;
  }
}

/* =====================================================================
   LEARNING PAGE (/navchannya/)
   ===================================================================== */
.tl--learn-page {
  padding-top: 80px;
}
.tl--learn-hero {
  text-align: center;
  padding: clamp(4rem,8vw,8rem) 2rem 3rem;
}
.tl--learn-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem,6vw,5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  margin: 0.6rem 0;
}
.tl--learn-title em {
  font-style: italic;
  color: var(--tl-gold-lt);
}
.tl--learn-sub {
  font-size: 1rem;
  color: var(--tl-text-2);
  max-width: 520px;
  margin: 1rem auto 0;
  line-height: 1.7;
}
.tl--learn-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 0 2rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media(max-width: 768px) {
  .tl--learn-categories {
    grid-template-columns: 1fr 1fr;
    padding: 0 1rem 3rem;
  }
}
.tl--learn-cat {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: 1.8rem 1.4rem;
  transition: border-color 0.3s, transform 0.35s;
}
.tl--learn-cat:hover {
  border-color: rgba(199,154,85,0.4);
  transform: translateY(-4px);
  cursor: pointer;
}
.tl--learn-cat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(199,154,85,0.08);
  border: 1px solid rgba(199,154,85,0.2);
  border-radius: 14px;
  margin-bottom: 1rem;
  transition: background 0.3s, border-color 0.3s;
}
.tl--learn-cat:hover .tl--learn-cat-icon {
  background: rgba(199,154,85,0.15);
  border-color: rgba(199,154,85,0.4);
}
.tl--learn-cat-icon svg {
  transition: transform 0.3s ease;
}
.tl--learn-cat:hover .tl--learn-cat-icon svg {
  transform: scale(1.1);
}
.tl--learn-cat h2 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-variation-settings: 'opsz' 20;
}
.tl--cat-count {
  font-size: 0.65rem;
  color: var(--tl-gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}
.tl--learn-cat p {
  font-size: 0.82rem;
  color: var(--tl-text-2);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.tl--learn-cat-link {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--tl-gold-lt);
  text-decoration: none;
  text-transform: uppercase;
}
.tl--learn-articles {
  padding: 0 2rem 6rem;
  max-width: 1100px;
  margin: 0 auto;
}
.tl--learn-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-variation-settings: 'opsz' 40;
}
.tl--articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media(max-width: 768px) {
  .tl--articles-grid {
    grid-template-columns: 1fr;
  }
}
.tl--article-card {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.tl--article-card:hover {
  border-color: rgba(199,154,85,0.4);
}
.tl--article-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.tl--article-body {
  padding: 1.2rem;
}
.tl--article-title a {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--tl-text);
  text-decoration: none;
  font-variation-settings: 'opsz' 20;
}
.tl--article-excerpt {
  font-size: 0.8rem;
  color: var(--tl-text-2);
  line-height: 1.6;
  margin: 0.5rem 0 0.8rem;
}
.tl--article-link {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--tl-gold-lt);
  text-decoration: none;
  text-transform: uppercase;
}
.tl--no-posts {
  color: var(--tl-text-2);
  font-style: italic;
  text-align: center;
  padding: 3rem;
  grid-column: 1/-1;
}

/* NUCLEAR MOBILE 2-COL FIX */
@media screen and (max-width: 768px) {
  .woocommerce .products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce-page .products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
  }
  /* Also fix our custom grid */
  .tl--catalog-grid,
  .tl-shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
}

/* =====================================================================
   LIGHT THEME — card hover + header contrast fixes
   ===================================================================== */
/* Light theme — soften the resting card border (remove the dark edge) */
[data-theme="light"] .tl--tea-card,
[data-theme="light"] .woocommerce ul.products li.product {
  border-color: rgba(180,155,110,0.25) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Light theme — card darkens on hover */
[data-theme="light"] .tl--tea-card:hover,
[data-theme="light"] .woocommerce ul.products li.product:hover {
  border-color: rgba(120,90,40,0.4) !important;
  background: #ede6d8 !important;
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

/* Light theme nav — darker text for readability */
[data-theme="light"] .tl--nav {
  background: rgba(245,240,232,0.97) !important;
  border-bottom: 1px solid rgba(160,120,60,0.2);
}
/* Nav links darker in light theme */
[data-theme="light"] .tl--nav-link,
[data-theme="light"] .tl--nav-item > a,
[data-theme="light"] .tl--nav-btn {
  color: #3a2e1c !important;
}
[data-theme="light"] .tl--nav-link:hover,
[data-theme="light"] .tl--nav-item > a:hover,
[data-theme="light"] .tl--nav-btn:hover {
  color: #8a6020 !important;
}
/* Brand name darker */
[data-theme="light"] .tl--brand-top {
  color: #a07030 !important;
}
[data-theme="light"] .tl--brand-bottom {
  color: #5a4a2c !important;
}
/* Language switcher darker */
[data-theme="light"] .tl--lang-current,
[data-theme="light"] .tl--lang-btn {
  color: #3a2e1c !important;
  border-color: rgba(100,70,20,0.3) !important;
}
/* Theme toggle icon darker */
[data-theme="light"] .tl--theme-toggle {
  color: #3a2e1c !important;
  border-color: rgba(100,70,20,0.3) !important;
}
/* Cart icon darker */
[data-theme="light"] .tl--nav-cart svg,
[data-theme="light"] a[href*="cart"] svg {
  stroke: #3a2e1c !important;
}
/* Supermarket pill in light theme */
[data-theme="light"] .tl--nav-super-link {
  border-color: rgba(100,70,20,0.4) !important;
  color: #7a5010 !important;
}
[data-theme="light"] .tl--nav-super-link:hover {
  background: rgba(100,70,20,0.08) !important;
  color: #5a3808 !important;
}
/* Active nav item in light theme */
[data-theme="light"] .tl--nav-item.current-menu-item > .tl--nav-link,
[data-theme="light"] .tl--nav-item.current-menu-item > a {
  color: #8a6020 !important;
  border-bottom-color: #8a6020 !important;
}

/* ═══ NUCLEAR LIGHT THEME CARD BORDERS ═══ */
html[data-theme="light"] .tl--tea-card,
html[data-theme="light"] .woocommerce ul.products li.product,
[data-theme="light"] .tl--catalog-grid .tl--tea-card,
[data-theme="light"] .tl-shop-grid .tl--tea-card {
  border-color: rgba(160,130,80,0.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  outline: none !important;
}
html[data-theme="light"] .tl--tea-card:hover,
html[data-theme="light"] .woocommerce ul.products li.product:hover {
  border-color: rgba(140,100,40,0.4) !important;
  background-color: #ede6d8 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ═══ NUCLEAR LIGHT THEME HEADER ═══ */
html[data-theme="light"] .tl--nav,
html[data-theme="light"] nav.tl--nav {
  background: rgba(248,243,234,0.98) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .tl--nav *,
html[data-theme="light"] .tl--nav a,
html[data-theme="light"] .tl--nav button,
html[data-theme="light"] .tl--nav span {
  color: #2a1e0c !important;
}
html[data-theme="light"] .tl--nav a:hover,
html[data-theme="light"] .tl--nav button:hover {
  color: #8a6020 !important;
}
html[data-theme="light"] .tl--brand-top {
  color: #9a7030 !important;
}
html[data-theme="light"] .tl--brand-bottom {
  color: #4a3820 !important;
}
html[data-theme="light"] .tl--nav-super-link {
  border-color: rgba(100,70,20,0.5) !important;
  color: #6a4810 !important;
}
html[data-theme="light"] .tl--lang-current,
html[data-theme="light"] .tl--lang-dropdown {
  background: rgba(240,230,215,0.98) !important;
  border-color: rgba(100,70,20,0.3) !important;
  color: #2a1e0c !important;
}
html[data-theme="light"] .tl--theme-toggle {
  border-color: rgba(100,70,20,0.3) !important;
  color: #2a1e0c !important;
}
/* Keep gift box animation colors */
html[data-theme="light"] .tl--nav-gift-link {
  color: #2a1e0c !important;
}
html[data-theme="light"] .tl--nav-gift-link:hover {
  color: #8a6020 !important;
}
/* Active item */
html[data-theme="light"] .tl--nav-item.current-menu-item .tl--nav-link,
html[data-theme="light"] .tl--nav-item.current-menu-item > a {
  color: #8a6020 !important;
  border-bottom-color: #8a6020 !important;
}

/* ═══ LIGHT THEME TOKEN OVERRIDES ═══ */
html[data-theme="light"],
[data-theme="light"] {
  --tl-border: rgba(180,150,100,0.07) !important;
  --tl-surface: #fdf8f0 !important;
  --tl-bg: #f5f0e8 !important;
}

/* Force override all card borders in light theme */
html[data-theme="light"] .tl--tea-card {
  border: 1px solid rgba(180,150,100,0.07) !important;
  background: var(--tl-surface) !important;
}
html[data-theme="light"] .woocommerce ul.products li.product {
  border-color: rgba(180,150,100,0.07) !important;
}
/* WooCommerce removes its own borders */
html[data-theme="light"] .woocommerce ul.products li.product {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

/* ═══ RELIABLE NAV HOVER ANIMATIONS ═══ */
/* Tea cup icon animation */
.tl--nav-item:first-child .tl--nav-icon,
.tl--nav-item:first-child .tl--nav-link:hover .tl--nav-icon svg {
  transition: transform 0.3s ease;
}
.tl--nav-item:first-child .tl--nav-link:hover .tl--nav-icon svg {
  transform: translateY(-3px) rotate(5deg);
}

/* All nav icons — base transition */
.tl--nav-link .tl--nav-icon svg {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.tl--nav-link:hover .tl--nav-icon svg {
  transform: scale(1.2);
  opacity: 1;
}

/* Ceremony icon — rotate */
.tl--nav-item:nth-child(2) .tl--nav-link:hover .tl--nav-icon svg {
  transform: rotate(15deg) scale(1.15);
}

/* Book/Learn — perspective tilt */
.tl--nav-item:nth-child(3) .tl--nav-link:hover .tl--nav-icon svg {
  transform: perspective(80px) rotateY(-25deg) scale(1.1);
}

/* Supermarket cart — slide right */
.tl--nav-super-link:hover .tl--nav-icon svg {
  transform: translateX(5px) scale(1.1) !important;
}

/* Logo hover */
.tl--nav-brand:hover .tl--brand-top {
  transition: color 0.3s ease;
  color: var(--tl-text) !important;
}

/* Language button hover */
.tl--lang-current:hover,
.tl--lang-btn:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* ═══ THEME TOGGLE ANIMATIONS (always-on pulse + slow spin/sway) ═══ */
/* Base — always pulsing gold glow */
.tl--theme-toggle {
  position: relative;
  animation: themePulse 2.5s ease-in-out infinite !important;
}
/* Dark theme — sun slowly spins + pulses */
html:not([data-theme="light"]) .tl--theme-toggle {
  animation: sunRotateSlow 12s linear infinite,
             themePulse 2.5s ease-in-out infinite !important;
}
/* Light theme — moon gently sways + pulses */
html[data-theme="light"] .tl--theme-toggle {
  animation: moonSwaySlow 5s ease-in-out infinite !important;
}
@keyframes themePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(199,154,85,0),
                0 0 0 0 rgba(199,154,85,0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(199,154,85,0.3),
                0 0 10px rgba(199,154,85,0.15);
  }
}
@keyframes sunRotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes moonSwaySlow {
  0%, 100% {
    transform: rotate(-8deg) scale(1);
    box-shadow: 0 0 0 0 rgba(199,154,85,0);
  }
  50% {
    transform: rotate(8deg) scale(1.08);
    box-shadow: 0 0 0 4px rgba(199,154,85,0.3),
                0 0 10px rgba(199,154,85,0.15);
  }
}
/* Hover — stop animation, scale up */
.tl--theme-toggle:hover {
  animation: none !important;
  transform: scale(1.2) !important;
  box-shadow: 0 0 16px rgba(199,154,85,0.5) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .tl--theme-toggle,
  html:not([data-theme="light"]) .tl--theme-toggle,
  html[data-theme="light"] .tl--theme-toggle {
    animation: themePulse 3s ease-in-out infinite !important;
  }
}

/* Cart hover */
.tl--nav-cart {
  transition: transform 0.3s ease !important;
}
.tl--nav-cart:hover {
  transform: scale(1.15) !important;
}
.tl--nav-cart:hover svg {
  animation: cartWiggle 0.4s ease !important;
}
@keyframes cartWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* ═══ FOOTER BRAND ATTRIBUTION ═══ */
.tl--footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: opacity 0.3s;
}
.tl--footer-brand-link:hover { opacity: 0.75; }
.tl--footer-future {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
}
.tl--footer-logo {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}
.tl--footer-red-word {
  color: #ffffff;
}
.tl--footer-code-word {
  color: #e63030;
}

/* ═══ SINGLE PRODUCT PAGE ═══ */
.tl--single-product {
  padding-top: 90px;
  min-height: 100vh;
}
.tl--product-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}

/* Breadcrumbs */
.tl--breadcrumbs {
  font-size: 0.72rem;
  color: var(--tl-smoke);
  margin-bottom: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.tl--breadcrumbs a {
  color: var(--tl-smoke);
  text-decoration: none;
  transition: color 0.2s;
}
.tl--breadcrumbs a:hover { color: var(--tl-gold-lt); }
.tl--breadcrumbs span { opacity: 0.4; }

/* TOP grid */
.tl--product-top {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}

/* Gallery */
.tl--product-main-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--tl-surface);
  aspect-ratio: 1;
  cursor: zoom-in;
}
.tl--product-main-img img,
.tl--product-main-img canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tl--product-main-img:hover img { transform: scale(1.04); }
.tl--zoom-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.tl--product-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
.tl--product-thumb {
  width: 70px; height: 70px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.25s, opacity 0.25s;
  opacity: 0.65;
}
.tl--product-thumb:hover,
.tl--product-thumb.active {
  border-color: var(--tl-gold);
  opacity: 1;
}

/* Product info */
.tl--product-info { position: sticky; top: 100px; }
.tl--product-cat {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 0.6rem;
}
.tl--product-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.5rem,2.5vw,2.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 60;
  margin-bottom: 0.8rem;
}
.tl--product-price {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--tl-gold-lt);
  margin-bottom: 0.8rem;
}
.tl--stock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-family: 'Manrope', sans-serif;
  margin-bottom: 1rem;
  font-weight: 500;
}
.tl--in-stock { color: #4caf7d; }
.tl--out-stock { color: #e05555; }
.tl--product-short {
  font-size: 0.82rem;
  color: var(--tl-text-2);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

/* Actions row */
.tl--product-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0.8rem !important;
  margin-bottom: 1.2rem;
  flex-wrap: nowrap !important;
}
/* Add-to-cart button — match qty height via stretch */
.tl--product-actions .tl-btn,
.tl--product-actions .button,
.tl--product-actions input[type="submit"],
.tl--product-actions .single_add_to_cart_button {
  align-self: stretch !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.tl--wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--tl-text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  margin-bottom: 1.2rem;
  padding: 0;
}
.tl--wishlist-btn:hover { color: #e05555; }

/* Price + wishlist on one row */
.tl--price-wish-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}
.tl--price-wish-row .tl--product-price {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.tl--wishlist-btn--large {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tl-text-2);
  padding: 0;
  transition: color 0.25s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.tl--wishlist-btn--large:hover {
  color: #e05555;
}
.tl--wishlist-btn--large svg {
  flex-shrink: 0;
}
.tl--wishlist-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Mobile — keep price+wishlist and qty+button inline */
@media(max-width: 768px) {
  .tl--price-wish-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  /* qty + button heights are governed by align-self:stretch — no explicit
     px heights here (they conflicted and broke alignment). Keep only the
     mobile width compaction. */
  .tl--qty-btn {
    width: 40px !important;
  }
  .tl--qty-input {
    width: 40px !important;
  }
}

/* Info rows */
.tl--product-divider {
  border: none;
  border-top: 1px solid var(--tl-border);
  margin: 1rem 0;
}
.tl--product-notice {
  font-size: 0.75rem;
  color: var(--tl-smoke);
  margin-bottom: 0.4rem;
}
.tl--product-notice svg {
  vertical-align: middle;
  margin-right: 0.3rem;
}
.tl--product-sku {
  font-size: 0.72rem;
  color: var(--tl-smoke);
  margin-top: 0.6rem;
}

/* Share row */
.tl--share-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--tl-smoke);
  flex-wrap: wrap;
}
.tl--share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tl-border);
  color: var(--tl-text-2);
  text-decoration: none;
  transition: all 0.25s;
}
.tl--share-btn:hover {
  border-color: var(--tl-gold-lt);
  color: var(--tl-gold-lt);
  background: rgba(199,154,85,0.08);
}

/* Tabs */
.tl--product-tabs {
  border-top: 1px solid var(--tl-border);
  margin-top: 1rem;
}
.tl--tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tl-border);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.tl--tab-btn {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tl-text-2);
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: -1px;
}
.tl--tab-btn:hover { color: var(--tl-text); }
.tl--tab-btn.active {
  color: var(--tl-gold-lt);
  border-bottom-color: var(--tl-gold-lt);
}
.tl--tab-content { display: none; }
.tl--tab-content.active { display: block; }
.tl--no-reviews {
  font-size: 0.88rem;
  color: var(--tl-text-2);
  font-style: italic;
  padding: 1rem 0;
}

/* Mobile accordion — tabs collapse into clickable panels */
@media(max-width: 768px) {
  .tl--tabs-nav {
    display: none;
  }
  .tl--tab-content {
    display: block;
    position: relative;
    border: 1px solid var(--tl-border);
    border-radius: 14px;
    margin-bottom: 0.6rem;
    overflow: hidden;
  }
  .tl--tab-content::before {
    content: attr(data-label);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tl-text);
    cursor: pointer;
    background: var(--tl-surface);
  }
  .tl--tab-content::after {
    content: '›';
    position: absolute;
    top: 0.85rem;
    right: 1.2rem;
    font-size: 1.2rem;
    color: var(--tl-gold);
    transition: transform 0.3s;
    pointer-events: none;
  }
  .tl--tab-content.mobile-open::after {
    transform: rotate(90deg);
  }
  .tl--tab-inner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 1.2rem;
  }
  .tl--tab-content.mobile-open .tl--tab-inner {
    max-height: 3000px;
    padding: 1.2rem;
  }
}

/* Description content */
.tl--desc-content {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--tl-text-2);
  max-width: 800px;
}
.tl--desc-content h2,
.tl--desc-content h3 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  color: var(--tl-text);
  margin: 2rem 0 0.8rem;
  font-variation-settings: 'opsz' 30;
}
.tl--desc-content p { margin-bottom: 1rem; }
.tl--desc-content ul,
.tl--desc-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.tl--desc-content li { margin-bottom: 0.4rem; }
.tl--desc-content strong {
  color: var(--tl-text);
  font-weight: 600;
}

/* Delivery info */
.tl--delivery-info h3 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.8rem;
  color: var(--tl-text);
}
.tl--delivery-info ul {
  list-style: none;
  padding: 0;
}
.tl--delivery-info li {
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--tl-text-2);
  border-bottom: 1px solid var(--tl-border);
}

/* Lightbox */
.tl--lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.tl--lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}
.tl--lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tl--lightbox-close:hover {
  background: rgba(255,255,255,0.2);
}

/* Sticky bar */
.tl--sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--tl-surface);
  border-top: 1px solid var(--tl-border);
  padding: 0.8rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tl--sticky-bar.visible {
  transform: translateY(0);
}
.tl--sticky-title {
  font-size: 0.82rem;
  color: var(--tl-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl--sticky-price {
  color: var(--tl-gold-lt);
  font-weight: 600;
  white-space: nowrap;
}
.tl--sticky-buy {
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg,
    var(--tl-gold-lt), var(--tl-gold));
  border: none;
  border-radius: 20px;
  color: #0c0a07;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  white-space: nowrap;
}
.tl--sticky-wish {
  background: none;
  border: 1px solid var(--tl-border);
  border-radius: 50%;
  width: 36px; height: 36px;
  color: var(--tl-text-2);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.tl--sticky-wish:hover {
  border-color: #e05555;
  color: #e05555;
}

/* Mobile — single product */
@media(max-width: 768px) {
  .tl--single-product { padding-top: 70px; }
  .tl--product-wrap { padding: 1rem 1rem 5rem; }
  .tl--product-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tl--product-info { position: static; }
  .tl--sticky-title { display: none; }
}

/* ═══ CATEGORY ARCHIVE PAGE ═══ */
.tl--category-page {
  padding-top: 80px;
  min-height: 100vh;
}

/* Hero */
.tl--cat-hero {
  text-align: center;
  padding: clamp(2rem,5vw,5rem) clamp(1.5rem,5vw,3rem) 2rem;
  position: relative;
}
.tl--cat-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 1px;
  background: var(--tl-gold);
  opacity: 0.4;
}
.tl--cat-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem,6vw,5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  margin: 0.5rem 0 1rem;
}
.tl--cat-desc {
  font-size: 0.95rem;
  color: var(--tl-text-2);
  max-width: 500px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}
.tl--cat-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl-gold);
  text-decoration: none;
  transition: opacity 0.2s;
}
.tl--cat-back:hover { opacity: 0.7; }

/* Grid */
.tl--cat-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem clamp(1rem,4vw,2rem) 6rem;
}
.tl--cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media(max-width: 900px) {
  .tl--cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media(max-width: 560px) {
  .tl--category-page {
    padding-top: 70px;
  }
  .tl--cat-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .tl--cat-hero {
    padding: 1.5rem 1.2rem 1.5rem;
  }
  .tl--cat-title {
    font-size: clamp(2rem,8vw,3rem);
  }
  .tl--cat-card-img {
    aspect-ratio: 16/9;
  }
}

/* Card */
.tl--cat-card {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s,
              box-shadow 0.35s;
}
.tl--cat-card:hover {
  border-color: rgba(199,154,85,0.4);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.tl--cat-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tl--cat-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--tl-bg);
}
.tl--cat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tl--cat-card:hover .tl--cat-card-img img {
  transform: scale(1.05);
}
.tl--cat-card-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl--cat-card-body {
  padding: 1.4rem;
}
.tl--cat-card-date {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--tl-smoke);
  margin-bottom: 0.5rem;
}
.tl--cat-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  font-variation-settings: 'opsz' 20;
  color: var(--tl-text);
}
.tl--cat-card-excerpt {
  font-size: 0.8rem;
  color: var(--tl-text-2);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.tl--cat-card-read {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl-gold-lt);
}

/* Pagination */
.tl--cat-pagination {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--tl-border);
}
.tl--cat-pagination a {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-gold-lt);
  text-decoration: none;
  transition: opacity 0.2s;
}
.tl--cat-pagination a:hover { opacity: 0.7; }

/* Empty state */
.tl--cat-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--tl-text-2);
}
.tl--cat-empty p { margin-bottom: 1.5rem; }
.tl--btn-gold {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: linear-gradient(135deg, var(--tl-gold-lt), var(--tl-gold));
  border-radius: 22px;
  color: #0c0a07;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}
.tl--btn-gold:hover { opacity: 0.85; }

/* ═══ SINGLE POST PAGE ═══ */
.tl--single-post {
  padding-top: 90px;
  min-height: 100vh;
}
.tl--post-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem clamp(1rem,4vw,2rem) 6rem;
}

/* Top nav */
.tl--post-nav-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.tl--post-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--tl-text-2);
  text-decoration: none;
  transition: all 0.25s;
}
.tl--post-nav-btn:hover {
  border-color: var(--tl-gold-lt);
  color: var(--tl-gold-lt);
}
.tl--post-nav-active {
  border-color: var(--tl-gold);
  color: var(--tl-gold-lt);
}

/* Hero */
.tl--post-hero {
  margin-bottom: 2rem;
}
.tl--post-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.8rem,5vw,3.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 90;
  margin: 0.6rem 0 1rem;
}
.tl--post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--tl-smoke);
}
.tl--post-meta-dot { opacity: 0.4; }

/* Cover image */
.tl--post-cover {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  aspect-ratio: 16/9;
}
.tl--post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content */
.tl--post-content {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--tl-text-2);
  margin-bottom: 4rem;
}
.tl--post-content h2,
.tl--post-content h3 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  color: var(--tl-text);
  margin: 2.5rem 0 1rem;
  font-variation-settings: 'opsz' 30;
}
.tl--post-content h2 {
  font-size: clamp(1.3rem,3vw,1.8rem);
}
.tl--post-content h3 {
  font-size: clamp(1.1rem,2.5vw,1.4rem);
}
.tl--post-content p {
  margin-bottom: 1.2rem;
}
.tl--post-content ul,
.tl--post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}
.tl--post-content li {
  margin-bottom: 0.5rem;
}
.tl--post-content strong {
  color: var(--tl-text);
  font-weight: 600;
}
.tl--post-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1.5rem 0;
}
.tl--post-content blockquote {
  border-left: 3px solid var(--tl-gold);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--tl-text);
  font-size: 1.05rem;
}

/* Bottom navigation */
.tl--post-nav-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-top: 2.5rem;
  border-top: 1px solid var(--tl-border);
}
.tl--post-nav-prev {
  justify-self: start;
}
.tl--post-nav-center {
  justify-self: center;
}
.tl--post-nav-next {
  justify-self: end;
  text-align: right;
}
.tl--post-nav-arrow {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  max-width: 220px;
  transition: opacity 0.25s;
}
.tl--post-nav-arrow:hover { opacity: 0.7; }
.tl--nav-arrow-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl-gold);
}
.tl--nav-arrow-title {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--tl-text);
  line-height: 1.3;
  font-variation-settings: 'opsz' 20;
}
.tl--post-nav-all {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-text-2);
  text-decoration: none;
  transition: all 0.25s;
  white-space: nowrap;
}
.tl--post-nav-all:hover {
  border-color: var(--tl-gold-lt);
  color: var(--tl-gold-lt);
}

@media(max-width: 600px) {
  .tl--single-post { padding-top: 70px; }
  .tl--post-nav-bottom {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .tl--post-nav-center {
    grid-column: 1 / -1;
    order: -1;
    justify-self: center;
    margin-bottom: 0.5rem;
  }
  .tl--post-nav-next {
    text-align: right;
  }
}

/* ═══ CEREMONY HORIZONTAL CAROUSEL ═══ */
.tl--ceremony-carousel-wrap {
  position: relative;
  overflow: hidden;
  margin: clamp(40px,6vw,64px) -1rem 0;
  padding: 0 1rem;
}
.tl--ceremony-carousel {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.tl--ceremony-carousel::-webkit-scrollbar {
  display: none;
}
/* Each ceremony card snaps */
.tl--ceremony-carousel .tl--ceremony-card,
.tl--ceremony-carousel > * {
  flex: 0 0 min(320px, 85vw);
  scroll-snap-align: start;
  margin: 0;
}

/* Dots */
.tl--carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.tl--dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--tl-border);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.tl--dot:hover { background: var(--tl-gold-lt); }
.tl--dot.active {
  background: var(--tl-gold);
  transform: scale(1.3);
}

/* Arrows */
.tl--carousel-prev,
.tl--carousel-next {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 1px solid var(--tl-border);
  border-radius: 50%;
  background: var(--tl-nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--tl-gold-lt);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s;
  z-index: 3;
}
.tl--carousel-prev:hover,
.tl--carousel-next:hover {
  border-color: var(--tl-gold-lt);
  background: rgba(199,154,85,0.12);
}
.tl--carousel-prev { left: 0.2rem; }
.tl--carousel-next { right: 0.2rem; }
@media(max-width: 600px) {
  .tl--carousel-prev,
  .tl--carousel-next { display: none; }
}
@media(max-width: 768px) {
  .tl--ceremony-carousel-wrap .tl--carousel-prev,
  .tl--ceremony-carousel-wrap .tl--carousel-next,
  .tl--ceremony-carousel-wrap .tl--carousel-dots {
    display: none !important;
  }
}

/* ═══ TASTING PROFILE ═══ */
.tl--taste-profile {
  margin: 1.5rem 0;
  padding: 1.4rem;
  background: rgba(199,154,85,0.04);
  border: 1px solid rgba(199,154,85,0.15);
  border-radius: 16px;
}
.tl--taste-title {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 1.1rem;
}
.tl--taste-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tl--taste-row {
  display: grid;
  grid-template-columns: 18px 80px 1fr 36px;
  align-items: center;
  gap: 0.6rem;
}
.tl--taste-icon {
  font-size: 0.7rem;
  color: var(--tl-gold);
  opacity: 0.7;
  text-align: center;
}
.tl--taste-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  color: var(--tl-text-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tl--taste-bar-wrap {
  height: 4px;
  background: rgba(199,154,85,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.tl--taste-bar {
  height: 100%;
  border-radius: 2px;
  /* Fallback solid color for browsers without gradient support */
  background-color: rgba(199,154,85,0.9);
  background-image: linear-gradient(
    90deg,
    rgba(199,154,85,0.5) 0%,
    rgba(199,154,85,1) 60%,
    rgba(220,180,100,1) 100%
  );
  width: 0%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  /* Force hardware acceleration */
  will-change: width;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* Shimmer animation on the bar */
.tl--taste-bar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: tasteShimmer 2s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes tasteShimmer {
  0% { transform: translateX(-20px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(20px); opacity: 0; }
}
.tl--taste-score {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--tl-gold-lt);
  text-align: right;
  font-variation-settings: 'opsz' 20;
}
.tl--taste-max {
  font-size: 0.55rem;
  opacity: 0.5;
  margin-left: 1px;
}

/* Mobile */
@media(max-width: 768px) {
  .tl--taste-row {
    grid-template-columns: 16px 70px 1fr 32px;
    gap: 0.4rem;
  }
  .tl--taste-label {
    font-size: 0.65rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl--taste-bar { transition: none; }
  .tl--taste-bar::after { animation: none; }
}

/* ═══ MOBILE CAROUSEL SIZING — 1 full card + peek of the next ═══ */
@media(max-width: 768px) {
  /* Tea product cards in carousel */
  .tl--carousel .tl--tea-card {
    flex: 0 0 72vw !important;
    min-width: 72vw !important;
    max-width: 72vw !important;
  }
  /* Ceremony cards */
  .tl--ceremony-carousel .tl--ceremony-card,
  .tl--ceremony-carousel > * {
    flex: 0 0 78vw !important;
    min-width: 78vw !important;
  }
  /* General carousel items */
  .tl--carousel > * {
    flex: 0 0 72vw;
    min-width: 72vw;
  }
  /* Carousel wrapper padding to show peek */
  .tl--carousel-wrap,
  .tl--section-carousel {
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .tl--carousel {
    padding-right: 15vw;
  }
}

/* ═══ GIFT CONFIGURATOR PAGE ═══ */
.tl--gift-page {
  padding-top: 90px;
  min-height: 100vh;
}

/* Hero */
.tl--gift-hero {
  text-align: center;
  padding: clamp(3rem,6vw,6rem) 2rem 2rem;
}
.tl--gift-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem,6vw,5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  margin: 0.5rem 0 1rem;
}
.tl--gift-title em {
  font-style: italic;
  color: var(--tl-gold-lt);
}
.tl--gift-sub {
  font-size: 1rem;
  color: var(--tl-text-2);
  line-height: 1.7;
}

/* Steps */
.tl--gift-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 2rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}
.tl--gift-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.tl--gift-step-num {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--tl-gold-lt);
  font-variation-settings: 'opsz' 30;
}
.tl--gift-step-label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-smoke);
  white-space: nowrap;
}
.tl--gift-step-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--tl-gold) 0%,
    rgba(199,154,85,0.2) 100%);
  margin: 0 1rem;
  margin-bottom: 1.2rem;
  min-width: 40px;
}

/* Main layout */
.tl--gift-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
  align-items: start;
}
@media(max-width: 900px) {
  .tl--gift-wrap {
    grid-template-columns: 1fr;
  }
  .tl--gift-page { padding-top: 70px; }
}

.tl--gift-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  font-variation-settings: 'opsz' 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tl--gift-counter {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: var(--tl-gold);
  font-weight: 400;
}

/* Box cards */
.tl--gift-boxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 100px;
}
.tl--gift-box-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tl--gift-box-card:hover,
.tl--gift-box-card.active {
  border-color: var(--tl-gold);
  background: rgba(199,154,85,0.05);
}
.tl--gift-box-card.active {
  box-shadow: 0 0 0 1px var(--tl-gold);
}

/* 3D CSS Gift box */
.tl--gift-box-visual {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tl--gbox-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(200px) rotateY(-15deg) rotateX(10deg);
  transition: transform 0.4s ease;
}
.tl--gift-box-card:hover .tl--gbox-3d,
.tl--gift-box-card.active .tl--gbox-3d {
  transform: perspective(200px) rotateY(-25deg) rotateX(15deg);
}
.tl--gbox-small { width: 50px; height: 40px; }
.tl--gbox-medium { width: 62px; height: 50px; }
.tl--gbox-large { width: 74px; height: 58px; }

.tl--gbox-body-3d {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 78%;
  background: linear-gradient(160deg, #2a1e0e, #1a1208);
  border-radius: 3px;
  overflow: hidden;
}
.tl--gbox-lid-3d {
  position: absolute;
  top: 0; left: -3%;
  width: 106%;
  height: 28%;
  background: linear-gradient(160deg,
    var(--tl-gold-lt), var(--tl-gold));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
  z-index: 2;
}
.tl--gift-box-card:hover .tl--gbox-lid-3d,
.tl--gift-box-card.active .tl--gbox-lid-3d {
  transform: perspective(100px) rotateX(-45deg);
}
.tl--gbox-ribbon-3d {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: rgba(199,154,85,0.5);
  z-index: 3;
}
.tl--gbox-ribbon-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 8px;
  height: 100%;
  background: rgba(199,154,85,0.5);
}

/* Items inside box (animation targets) */
.tl--gbox-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  align-content: flex-start;
}
.tl--gbox-item {
  width: 10px; height: 10px;
  border-radius: 50%;
  animation: gboxItemDrop 0.4s cubic-bezier(0.2,0.8,0.2,1) forwards;
  opacity: 0;
}
@keyframes gboxItemDrop {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tl--gift-box-info { flex: 1; }
.tl--gift-box-name {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 300;
  font-variation-settings: 'opsz' 20;
  margin-bottom: 0.2rem;
}
.tl--gift-box-cap {
  font-size: 0.7rem;
  color: var(--tl-smoke);
  margin-bottom: 0.3rem;
}
.tl--gift-box-price {
  font-size: 0.82rem;
  color: var(--tl-gold-lt);
}

/* Tea grid */
.tl--gift-tea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tl-border) transparent;
  padding-right: 0.3rem;
}
@media(max-width: 600px) {
  .tl--gift-tea-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tl--gift-tea-item {
  position: relative;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
}
.tl--gift-tea-item:hover {
  border-color: rgba(199,154,85,0.4);
  transform: translateY(-2px);
}
.tl--gift-tea-item.selected {
  border-color: var(--tl-gold);
  box-shadow: 0 0 0 1px var(--tl-gold);
}
.tl--gift-tea-item.selected::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  background: var(--tl-gold);
  color: #0c0a07;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl--gift-tea-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.tl--gift-tea-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tl-bg);
  font-size: 1.5rem;
}
.tl--gift-tea-info {
  padding: 0.5rem 0.6rem;
}
.tl--gift-tea-cat {
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 0.2rem;
}
.tl--gift-tea-name {
  font-size: 0.72rem;
  color: var(--tl-text);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.tl--gift-tea-price {
  font-size: 0.7rem;
  color: var(--tl-gold-lt);
}
.tl--gift-tea-add {
  position: absolute;
  bottom: 0.5rem; right: 0.5rem;
  width: 22px; height: 22px;
  background: var(--tl-gold);
  color: #0c0a07;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.tl--gift-tea-item:hover .tl--gift-tea-add {
  transform: scale(1.2);
}

/* Basket */
.tl--gift-basket {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: 1.4rem;
  position: sticky;
  top: 100px;
}
.tl--gift-basket-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-variation-settings: 'opsz' 20;
}
.tl--gift-basket-total {
  color: var(--tl-gold-lt);
  font-size: 1rem;
}
.tl--gift-basket-items {
  min-height: 80px;
  margin-bottom: 1rem;
}
.tl--gift-basket-empty {
  font-size: 0.78rem;
  color: var(--tl-smoke);
  text-align: center;
  padding: 1rem 0;
  font-style: italic;
}
.tl--gift-basket-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tl-border);
  animation: giftItemIn 0.35s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
@keyframes giftItemIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.tl--gift-basket-item img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.tl--gift-basket-item-name {
  font-size: 0.75rem;
  color: var(--tl-text);
  flex: 1;
  line-height: 1.3;
}
.tl--gift-basket-item-price {
  font-size: 0.72rem;
  color: var(--tl-gold-lt);
  white-space: nowrap;
}
.tl--gift-basket-item-remove {
  background: none;
  border: none;
  color: var(--tl-smoke);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.2rem;
  transition: color 0.2s;
  line-height: 1;
}
.tl--gift-basket-item-remove:hover {
  color: #e05555;
}

/* Message textarea */
.tl--gift-message {
  width: 100%;
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: 12px;
  padding: 0.8rem;
  color: var(--tl-text);
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.25s;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.tl--gift-message:focus {
  border-color: var(--tl-gold-lt);
}

/* Order button */
.tl--gift-order-btn {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg,
    var(--tl-gold-lt), var(--tl-gold));
  border: none;
  border-radius: 16px;
  color: #0c0a07;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.tl--gift-order-btn:hover:not(:disabled) {
  opacity: 0.85;
  transform: translateY(-1px);
}
.tl--gift-order-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ═══ GIFT PROMO BLOCK (homepage) ═══ */
.tl--gift-promo {
  height: 100%;
}
.tl--gift-promo-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 24px;
  overflow: hidden;
  transition: border-color 0.4s,
              box-shadow 0.4s,
              transform 0.4s;
  padding: 2.5rem;
  gap: 2rem;
}
.tl--gift-promo-link:hover {
  border-color: rgba(199,154,85,0.5);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}

/* Big animated gift box */
.tl--gift-promo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 200px;
}
.tl--gift-promo-box-inner {
  position: relative;
}
.tl--gpbox {
  position: relative;
  width: 130px;
  height: 110px;
  filter: drop-shadow(0 8px 24px rgba(199,154,85,0.3));
  transition: filter 0.5s ease;
}
/* Glow effect on hover */
.tl--gift-promo-link:hover .tl--gpbox {
  filter: drop-shadow(0 12px 32px rgba(199,154,85,0.5));
}

/* Lid - slightly darker gold, clearly separate */
.tl--gpbox-lid {
  position: absolute;
  top: 0; left: -5%;
  width: 110%;
  height: 36px;
  background: linear-gradient(145deg,
    #c8973c 0%, #a87830 50%, #8a6020 100%);
  border-radius: 6px 6px 2px 2px;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
  z-index: 2;
  box-shadow:
    0 -3px 8px rgba(0,0,0,0.3),
    inset 0 2px 6px rgba(255,255,255,0.2);
}
.tl--gift-promo-link:hover .tl--gpbox-lid {
  transform: perspective(200px) rotateX(-65deg) translateY(-4px);
}
/* Lid shine */
.tl--gpbox-lid::after {
  content: '';
  position: absolute;
  top: 4px; left: 8px;
  width: 40%; height: 40%;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.25) 0%,
    transparent 60%);
  border-radius: 2px;
}

/* Box body - warm beige/cream color, visible on dark */
.tl--gpbox-body {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 78px;
  background: linear-gradient(145deg,
    #f5e6c8 0%, #e8d0a0 40%, #d4b87a 100%);
  border-radius: 4px 4px 6px 6px;
  box-shadow:
    inset -8px 0 16px rgba(0,0,0,0.15),
    inset 0 -6px 12px rgba(0,0,0,0.1);
}
/* Bow on top of ribbon cross */
.tl--gpbox-body::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 14px;
  background: radial-gradient(ellipse at center,
    #a01e1e 0%, #6b1414 100%);
  border-radius: 50% 50% 0 0;
  box-shadow: -14px 0 0 -2px #6b1414,
              14px 0 0 -2px #6b1414;
  z-index: 4;
}
/* Box shine/highlight */
.tl--gpbox-body::after {
  content: '';
  position: absolute;
  top: 6px; left: 8px;
  width: 30%; height: 30%;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.15) 0%,
    transparent 60%);
  border-radius: 2px;
}

/* Ribbon - dark red/burgundy for contrast */
.tl--gpbox-ribbon-h {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  height: 12px;
  background: linear-gradient(180deg,
    #8b1a1a 0%, #6b1414 50%, #8b1a1a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.tl--gpbox-ribbon-v {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  background: linear-gradient(90deg,
    #8b1a1a 0%, #6b1414 50%, #8b1a1a 100%);
  box-shadow: inset 2px 0 4px rgba(0,0,0,0.3);
}


/* Flying tea items on hover */
.tl--gpbox-teas {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  pointer-events: none;
}
.tl--gptea {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0;
  transition: none;
}
.tl--gptea-1 { top: 20%; left: 15%; }
.tl--gptea-2 { top: 30%; left: 55%; }
.tl--gptea-3 { top: 50%; left: 25%; }
.tl--gptea-4 { top: 20%; left: 70%; }
.tl--gptea-5 { top: 55%; left: 65%; }

.tl--gift-promo-link:hover .tl--gptea-1 {
  animation: gteaFly 0.6s ease 0.3s forwards;
}
.tl--gift-promo-link:hover .tl--gptea-2 {
  animation: gteaFly 0.6s ease 0.45s forwards;
}
.tl--gift-promo-link:hover .tl--gptea-3 {
  animation: gteaFly 0.6s ease 0.6s forwards;
}
.tl--gift-promo-link:hover .tl--gptea-4 {
  animation: gteaFly 0.6s ease 0.5s forwards;
}
.tl--gift-promo-link:hover .tl--gptea-5 {
  animation: gteaFly 0.6s ease 0.7s forwards;
}
@keyframes gteaFly {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.3);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Text content */
.tl--gift-promo-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tl--gift-promo-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.8rem,3vw,2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 80;
}
.tl--gift-promo-title em {
  font-style: italic;
  color: var(--tl-gold-lt);
}
.tl--gift-promo-desc {
  font-size: 0.88rem;
  color: var(--tl-text-2);
  line-height: 1.65;
}
.tl--gift-promo-features {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tl--gift-promo-features span {
  font-size: 0.75rem;
  color: var(--tl-smoke);
  letter-spacing: 0.02em;
}
.tl--gift-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl-gold-lt);
  margin-top: 0.5rem;
  transition: gap 0.3s;
}
.tl--gift-promo-link:hover .tl--gift-promo-cta {
  gap: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
  .tl--gift-promo-link:hover .tl--gptea-1,
  .tl--gift-promo-link:hover .tl--gptea-2,
  .tl--gift-promo-link:hover .tl--gptea-3,
  .tl--gift-promo-link:hover .tl--gptea-4,
  .tl--gift-promo-link:hover .tl--gptea-5 {
    animation: none;
    opacity: 1;
  }
  .tl--gift-promo-link:hover { transform: none; }
}

/* ═══ TEA PASSPORT ═══ */
.tl--passport-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl--passport-row {
  display: grid;
  grid-template-columns: 28px 140px 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--tl-border);
  transition: background 0.2s;
}
.tl--passport-row:last-child {
  border-bottom: none;
}
.tl--passport-row:hover {
  background: rgba(199,154,85,0.03);
  border-radius: 8px;
  padding-left: 0.5rem;
}
.tl--passport-icon {
  font-size: 1rem;
  text-align: center;
}
.tl--passport-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tl-smoke);
  text-transform: uppercase;
}
.tl--passport-value {
  font-size: 0.88rem;
  color: var(--tl-text);
  font-weight: 500;
}

/* ═══ BREWING METHODS ═══ */
.tl--brew-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.tl--brew-method {
  background: rgba(199,154,85,0.04);
  border: 1px solid rgba(199,154,85,0.15);
  border-radius: 16px;
  padding: 1.4rem;
}
.tl--brew-method-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tl-border);
}
.tl--brew-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.tl--brew-name {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--tl-text);
  margin-bottom: 0.3rem;
  font-variation-settings: 'opsz' 20;
}
.tl--brew-desc {
  font-size: 0.75rem;
  color: var(--tl-smoke);
  line-height: 1.5;
}
.tl--brew-params {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
@media(max-width: 600px) {
  .tl--brew-params {
    grid-template-columns: repeat(3, 1fr);
  }
  .tl--passport-row {
    grid-template-columns: 24px 110px 1fr;
  }
}
.tl--brew-param {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem;
  background: var(--tl-bg);
  border-radius: 12px;
  text-align: center;
}
.tl--brew-param-icon {
  font-size: 1.1rem;
}
.tl--brew-param-label {
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-smoke);
}
.tl--brew-param-value {
  font-family: 'Fraunces', serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--tl-gold-lt);
  font-variation-settings: 'opsz' 20;
}
.tl--no-data {
  font-size: 0.82rem;
  color: var(--tl-smoke);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

/* ═══ SCROLL TO TOP (inside sticky bars) ═══ */
/* Scroll up in bottom nav */
.tl--scroll-top-btn svg {
  color: var(--tl-gold-lt);
  stroke: var(--tl-gold-lt);
}
.tl--scroll-top-btn span {
  font-size: 0.5rem;
  color: var(--tl-gold-lt);
  letter-spacing: 0.1em;
}
.tl--scroll-top-btn:hover svg {
  stroke: var(--tl-gold);
}

/* Scroll up in product sticky bar */
.tl--sticky-scroll-up {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin-left: auto !important;
  margin-right: 0.3rem !important;
  background: linear-gradient(135deg,
    var(--tl-gold-lt), var(--tl-gold)) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #0c0a07 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 12px rgba(199,154,85,0.4);
}
.tl--sticky-scroll-up:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(199,154,85,0.6);
}
.tl--sticky-scroll-up svg {
  stroke: #0c0a07 !important;
  flex-shrink: 0;
}

/* === LIGHT THEME — product price color === */
html[data-theme="light"] .tl--tea-price,
html[data-theme="light"] .tl--product-price,
html[data-theme="light"] .price,
html[data-theme="light"] .woocommerce-Price-amount {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #8b6520 !important;
  color: #8b6520 !important;
  opacity: 1 !important;
}

/* ═══ GIFT PROMO SECTION (moved below ceremony) ═══ */
.tl--gift-promo-section {
  padding: clamp(3rem,6vw,5rem) 0;
  border-top: 1px solid var(--tl-border);
}

/* Ceremony cards smaller on mobile (1.5 cards visible) — overrides the
   earlier 78vw rule (later in source order). */
@media(max-width: 768px) {
  .tl--ceremony-carousel .tl--ceremony-card,
  .tl--ceremony-carousel > * {
    flex: 0 0 65vw !important;
    min-width: 65vw !important;
    max-width: 65vw !important;
  }
}

/* === LIGHT THEME FIXES === */
html[data-theme="light"] .tl--tea-card {
  border: 1px solid rgba(160,120,48,0.1) !important;
  background: var(--tl-surface) !important;
}
html[data-theme="light"] .tl--tea-card:hover {
  border-color: rgba(199,154,85,0.4) !important;
}
html[data-theme="light"] .tl--tea-card-img {
  background: #f5efe3 !important;
  background-image: none !important;
}
html[data-theme="light"] .tl--tea-tag {
  border-color: rgba(160,120,48,0.15) !important;
  color: #8b6520 !important;
  background: rgba(160,120,48,0.06) !important;
}
html[data-theme="light"] .tl--tea-foot {
  border-top-color: rgba(160,120,48,0.12) !important;
}
html[data-theme="light"] .tl--tea-name {
  color: #2c1f0e !important;
}
html[data-theme="light"] .tl--tea-add {
  background: linear-gradient(165deg, #f0dfa8, #c8a05a 55%, #9a7a3a) !important;
  color: #1a1410 !important;
}
html[data-theme="light"] .tl--tea-add:hover {
  color: #f0dfa8 !important;
}
html[data-theme="light"] .tl--tea-card .add_to_cart_button,
html[data-theme="light"] .tl--tea-card .button {
  background: linear-gradient(165deg, #f0dfa8, #c8a05a 55%, #9a7a3a) !important;
  color: #1a1410 !important;
}
html[data-theme="light"] .tl--tea-card .add_to_cart_button:hover,
html[data-theme="light"] .tl--tea-card .button:hover {
  color: #f0dfa8 !important;
}

/* =====================================================================
   ACCESSIBILITY — visible keyboard focus
   Several inputs reset outline:none for mouse users; restore a clear
   indicator for keyboard navigation only (:focus-visible).
   ===================================================================== */
.tl--sort-select:focus-visible,
.tl--price-field:focus-visible,
.tl--gift-message:focus-visible,
.tl--qty-input:focus-visible,
.tl-btn:focus-visible,
.tl--tea-add:focus-visible,
.tl--qty-btn:focus-visible,
.tl--tab-btn:focus-visible,
.tl--filter-toggle:focus-visible,
.tl--sort-pill:focus-visible,
.tl--type-tag:focus-visible,
.tl--theme-toggle:focus-visible,
.tl--nav-burger:focus-visible {
  outline: 2px solid var(--tl-gold-lt);
  outline-offset: 2px;
}


/* ═══ DESKTOP MEGA-MENU — ensure clickable above everything ═══ */
/* The fixed nav shared z-index:200 with other fixed elements (bottom bar,
   lang dropdown) — a later-DOM sibling at the same level can swallow clicks
   on the dropdown panel. Lift the whole nav stacking context, and force
   pointer-events on the open panel. */
.tl--nav { z-index: 990; }
.tl--dropdown {
  pointer-events: none;
  z-index: 10000 !important;
}
.tl--has-dropdown:hover .tl--dropdown,
.tl--has-dropdown:focus-within .tl--dropdown,
.tl--has-dropdown.open .tl--dropdown {
  pointer-events: auto !important;
}

/* ═══ MOBILE MEGA PANEL — full-screen tea categories (tap "Чай") ═══ */
.tl--mobile-mega {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--tl-bg, #0c0a07);
  z-index: 10001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 0;
}
.tl--mobile-mega.is-open {
  transform: translateX(0);
}
.tl--mobile-mega-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--tl-border, rgba(199,154,85,0.15));
  position: sticky;
  top: 0;
  background: var(--tl-bg, #0c0a07);
  z-index: 1;
  font-family: 'Fraunces', serif;
  color: var(--tl-gold-lt, #e8d09a);
  font-size: 1.1rem;
}
.tl--mobile-mega-back {
  background: none;
  border: none;
  color: var(--tl-gold, #c79a55);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.4rem 0;
}
.tl--mobile-mega-all {
  padding: 1.2rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(199,154,85,0.15);
}
.tl--mobile-mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(199,154,85,0.1);
  border: 1px solid rgba(199,154,85,0.3);
  border-radius: 20px;
  color: var(--tl-gold, #c79a55);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tl--mobile-mega-all-link:hover {
  background: var(--tl-gold, #c79a55);
  color: #0c0a07;
  border-color: var(--tl-gold, #c79a55);
}
.tl--mobile-mega-body {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.tl--mobile-mega-group h4 {
  font-family: 'Fraunces', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl-gold, #c79a55);
  margin: 0 0 0.8rem;
}
.tl--mobile-mega-group a {
  display: block;
  padding: 0.4rem 0;
  color: var(--tl-text, #e8dcc8);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(199,154,85,0.08);
  transition: color 0.2s;
}
.tl--mobile-mega-group a:hover {
  color: var(--tl-gold, #c79a55);
}
@media (min-width: 769px) {
  .tl--mobile-mega { display: none !important; }
}

/* ═══ REDCODE LOGO IN LIGHT THEME (all screen sizes) ═══ */
/* "RED" stays white but gets a dark outline so it reads on parchment;
   "CODE" keeps its red. The tagline must flip dark too.
   Applied at root scope (no @media) so desktop + mobile both get it. */
html[data-theme="light"] .tl--footer-red-word {
  color: #ffffff !important;
  -webkit-text-stroke: 0.8px #1a1410 !important;
  text-stroke: 0.8px #1a1410 !important;
  paint-order: stroke fill !important;
}
html[data-theme="light"] .tl--footer-future,
html[data-theme="light"] .tl--footer-tagline {
  color: #3a2a1a !important;
}