/* =========================================================
   ORMELIA · ATHOS — dark editorial design system
   ---------------------------------------------------------
   Canvas  : near-black with a green cast
   Accents : gold hairlines, olive green
   Product : always shown on a warm ivory "vitrine" panel with
             object-fit:contain, so no bottle is ever cropped
             at any breakpoint (this was a real bug before).
   ========================================================= */

/* ---------- 1 · TOKENS ----------
   Colour psychology, deliberately:
   · The canvas is a near-black carrying a GREEN cast rather than a
     neutral one. Green reads fresh, natural and unprocessed — the
     right associations for food, where neutral black can read cold.
   · The metal is AMBER-gold, not lemon-gold. Warm hues in the amber
     band are appetite-forward and signal premium at the same time.
   · The product plinth is a warm ivory, never a cool white, so the
     oil's own green-gold is never fighting a blue-white surround.
   · Blue is deliberately absent as a surface colour: it is the one
     family that reliably suppresses appetite.
*/
:root{
  /* canvas — warm charcoal-olive, deliberately lifted off black.
     A near-black canvas reads expensive but inert; at this value the
     green cast is actually perceptible and the amber stops looking
     harsh against it. Every surface layer lifts with it so the
     depth relationships stay intact. */
  --ink:        #1E241A;
  --ink-2:      #262D20;
  --ink-3:      #2E3628;
  --ink-4:      #38412F;

  /* warm ivory vitrine (product plinth) */
  --vitrine:    #F8F3E9;
  --vitrine-2:  #EDE4D2;

  /* type */
  --cream:      #F6F2E7;
  --cream-2:    rgba(246,242,231,.76);
  --cream-3:    rgba(246,242,231,.56);
  --cream-4:    rgba(246,242,231,.44);

  /* accents — amber gold + fresh olive, both brightened a step so
     they still carry against the lighter ground */
  --gold:       #DFB255;
  --gold-hi:    #F5D68C;
  --gold-dim:   rgba(223,178,85,.38);
  --gold-line:  rgba(223,178,85,.28);
  --olive:      #8FB463;
  --olive-hi:   #AECE86;
  --olive-dim:  rgba(143,180,99,.20);

  /* Translucent surfaces are mixed FROM the canvas, so lifting the
     canvas lifts them too. Hardcoding these was what made the old
     header read darker than the page it sat on. */
  --ink-rgb:    30,36,26;
  --scrim:      rgba(12,16,10,.76);
  --on-gold:    #1A1F14;

  /* utility */
  --line:       rgba(246,242,231,.14);
  --line-2:     rgba(246,242,231,.22);
  --shadow:     0 24px 60px -24px rgba(0,0,0,.85);
  --shadow-lg:  0 40px 90px -30px rgba(0,0,0,.95);
  --glow:       0 0 60px -12px rgba(210,164,65,.35);

  /* type scale */
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --greek: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --pad:        clamp(1.15rem, 4.5vw, 3.25rem);
  --maxw:       1280px;
  --radius:     3px;
  --radius-lg:  5px;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ---------- 2 · RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }

/* The browser hides [hidden] with a UA rule of display:none, and ANY
   author rule that sets display beats it. This site has a lot of
   components that are shown and hidden from JS and a lot of components
   that set display:flex, so the two collided constantly and silently:
   the product page rendered "Pret vechi", "Stoc epuizat" and a NaN
   countdown on a bottle that had no campaign and was in stock, and the
   review and reminder forms never cleared their fields after a
   successful submit. .dlg[hidden] existed as a one-off patch for the
   same collision. Fix it once, for every element.
   !important is deliberate: hidden must win over whatever a component
   declares, or the next display:flex reintroduces the bug. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold); color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- 3 · PRIMITIVES ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* visible to screen readers and to crawlers, not on screen — used to
   keep heading levels contiguous where the design has no visible one */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.eyebrow{
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold-dim); flex:none; }

.h2{ font-size:clamp(2rem, 5.2vw, 3.4rem); }
.h3{ font-size:clamp(1.5rem, 3.4vw, 2.1rem); }
.lead{ color:var(--cream-2); font-size:clamp(.95rem,1.6vw,1.05rem); max-width:56ch; }

.rule{ height:1px; background:linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent); border:0; margin:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.5rem; border-radius:var(--radius);
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  /* a long label must never be able to push the page sideways */
  max-width:100%;
  border:1px solid var(--gold-line); color:var(--cream);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn svg{ width:15px; height:15px; flex:none; }
.btn:hover{ border-color:var(--gold); background:rgba(201,162,74,.10); }
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.btn--gold:hover{ background:var(--gold-hi); border-color:var(--gold-hi); color:var(--on-gold); }
.btn--ghost{ background:transparent; }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn.is-busy{ opacity:.6; pointer-events:none; }

.chip{
  display:inline-flex; align-items:center; padding:.3rem .68rem;
  border:1px solid var(--gold-line); border-radius:100px;
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-2);
}

/* reveal on scroll */
.reveal, .card, .tile{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in, .card.is-in, .tile.is-in{ opacity:1; transform:none; }
.card{ transition-delay:calc(var(--d,0) * 45ms); }

/* language fade */
@keyframes langIn{ from{ opacity:.35 } to{ opacity:1 } }
body.lang-in main{ animation:langIn .4s var(--ease); }

/* ---------- 4 · TOPBAR ---------- */
.topbar{
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-3);
}
.topbar__in{ display:flex; align-items:center; justify-content:center; gap:2.5rem; height:38px; }
.topbar__item{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.topbar__item::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }
.topbar__item--hl{ color:var(--gold-hi); }
/* the wholesale entry point, at the very top of every page */
.topbar__cta{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .7rem; margin-left:.4rem;
  border:1px solid var(--gold-line); border-radius:100px;
  font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-hi); white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.topbar__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

/* ---------- 5 · HEADER ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(var(--ink-rgb),.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.header.is-scrolled{ background:rgba(var(--ink-rgb),.94); border-bottom-color:var(--line); }
.header__in{ display:flex; align-items:center; gap:1rem; height:72px; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; min-width:0; }
.brand__logo{ width:34px; height:34px; flex:none; }
.brand__text{ display:flex; flex-direction:column; min-width:0; }
.brand__name{
  font-family:var(--serif); font-size:1.22rem; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
}
.brand__tag{
  font-size:.54rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-top:.24rem;
}

.nav{ display:flex; align-items:center; gap:1.65rem; }
.nav a{
  position:relative; font-size:.76rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--cream-2);
  transition:color .3s var(--ease); white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--gold-hi); }

.header__tools{ display:flex; align-items:center; gap:.55rem; }

.lang{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:100px; padding:2px; }
.lang__btn{
  padding:.28rem .62rem; border-radius:100px;
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-3); transition:color .3s var(--ease), background .3s var(--ease);
}
.lang__btn.is-active{ background:var(--gold); color:var(--on-gold); }

.icon-btn{
  position:relative; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.icon-btn:hover{ border-color:var(--gold-line); background:rgba(201,162,74,.07); }
.icon-btn svg{ width:19px; height:19px; }
.cart-count{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:100px;
  background:var(--gold); color:var(--on-gold);
  font-size:.63rem; font-weight:800; line-height:1;
  transition:transform .3s var(--ease);
}
.cart-count.is-zero{ transform:scale(0); }

.menu-toggle{ display:none; width:40px; height:40px; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius); }
.menu-toggle span{ display:block; width:17px; height:1.5px; background:var(--cream); transition:transform .35s var(--ease), opacity .25s; }
.menu-toggle span + span{ margin-top:4px; }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:110px 0 0; z-index:55;
  background:var(--ink); padding:0 var(--pad) 3rem;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:1.5rem; color:var(--cream);
}
.mobile-nav a::after{ content:'→'; color:var(--gold); font-size:1rem; }

/* ---------- 6 · THE GATE (category-first entry) ---------- */
/* Height of the fixed chrome above the gate (topbar + header), so the
   gate can be exactly one screen tall and the info line at its foot
   lands on the bottom edge of the viewport on entry. */
:root{ --chrome:110px; }

.gate{
  position:relative;
  min-height:calc(100svh - var(--chrome));
  display:flex; flex-direction:column;
  /* NO overflow:hidden here — it would break the sticky info line.
     The branch artwork is clipped by .gate__deco instead. */
}
.gate__deco{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.gate__inner{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(1.5rem, 3vw, 2.6rem);
}
/* The info line sits UNDER the tiles in document order, and sticks to
   the bottom edge of the viewport for as long as the entry screen is
   on screen — so it is visible the moment someone lands, then
   releases and scrolls away once the tiles are behind them. */
.gate > .marquee{
  flex:none; position:sticky; bottom:0; z-index:3;
  box-shadow:0 -14px 30px -18px rgba(0,0,0,.7);
}

/* ---------- OLIVE BRANCH ----------
   Restored from the pre-rebuild site: a slow sway hinged at the top
   of the stem. Purely decorative, so aria-hidden and pointer-none. */
.branch{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(150px, 19vw, 280px); height:auto; opacity:.5;
}
.branch--right{ top:-3%;  right:-2%; }
.branch--left{
  bottom:6%; left:-4%; width:clamp(110px, 13vw, 190px); opacity:.34;
  transform:scaleX(-1);
}
.branch__stem{ fill:none; stroke:var(--olive); stroke-width:3; stroke-linecap:round; opacity:.65; }
.branch__leaves ellipse{ fill:var(--olive); opacity:.5; }
.branch__olives ellipse{ fill:var(--gold); opacity:.6; }
.branch__sway{
  transform-origin:168px 6px;
  animation:sway 7s ease-in-out infinite;
}
.branch__sway--slow{ animation-duration:9.5s; animation-direction:reverse; }
@keyframes sway{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(3deg) } }

/* branch art used inside the "in curand" category tiles */
.tile__branch{ display:grid; place-items:center; width:100%; height:100%;
  background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2)); }
.tile__branch svg{ width:56%; height:auto; }
.tile__branch .branch__stem{ stroke:#6E8C4F; opacity:.55; }
.tile__branch .branch__leaves ellipse{ fill:#6E8C4F; opacity:.4; }
.tile__branch .branch__olives ellipse{ fill:#B8912F; opacity:.5; }
.gate::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 18% 8%,  rgba(110,140,79,.13), transparent 62%),
    radial-gradient(760px 480px at 88% 92%, rgba(201,162,74,.11), transparent 66%);
}
.gate__head{ text-align:center; margin-bottom:clamp(1.1rem, 2vw, 1.6rem); }
.gate__head .eyebrow{ justify-content:center; }
.gate__title{
  font-size:clamp(2rem, 4.6vw, 3.35rem);
  margin:.5rem 0 .5rem;
  background:linear-gradient(180deg, var(--cream) 40%, rgba(242,237,227,.68));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gate__sub{ color:var(--cream-3); font-size:.92rem; max-width:46ch; margin-inline:auto; }

/* the greeting — Greek flavour */
.greet{
  display:inline-flex; align-items:baseline; gap:.6rem;
  padding:.4rem .95rem; margin-bottom:1.1rem;
  border:1px solid var(--gold-line); border-radius:100px;
  background:rgba(201,162,74,.06);
}
.greet__gr{ font-family:var(--greek); font-size:1.06rem; color:var(--gold-hi); letter-spacing:.02em; }
.greet__sub{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-3); }

.gate__grid{
  display:grid; gap:clamp(.7rem, 1.4vw, 1.05rem);
  grid-template-columns:repeat(3, 1fr);
}
.gate__foot{ display:flex; justify-content:center; margin-top:clamp(1.5rem, 3.5vw, 2.5rem); }
.gate__scroll{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-3); transition:color .3s var(--ease);
}
.gate__scroll:hover{ color:var(--gold-hi); }
.gate__scroll svg{ width:15px; height:15px; animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }

/* ---------- 7 · CATEGORY TILE ---------- */
.tile{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:opacity .7s var(--ease-out), transform .45s var(--ease-out),
             border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.tile.is-in:hover{ transform:translateY(-6px); border-color:var(--gold-line); box-shadow:var(--shadow); }

/* the ivory vitrine — product always fully visible */
.tile__media{
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  /* cap the height in viewport units too, so a wide window does not
     make the fixed ratio push the grid off the first screen */
  max-height:min(26vh, 230px);
  background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2));
}
.tile__img{
  width:100%; height:100%; object-fit:contain; padding:6.5%;
  transition:transform .8s var(--ease-out);
}
.tile:hover .tile__img{ transform:scale(1.055); }
.tile__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,11,9,.16));
  pointer-events:none;
}

/* stacked pack composition */
.tile__stack, .card__stack{ position:relative; display:block; width:100%; height:100%; }
.tile__stack img, .card__stack img{
  position:absolute; top:50%; left:50%; height:74%; width:auto; max-width:56%;
  object-fit:contain;
  transform:translate(-50%,-50%) translateX(calc((var(--i) - .5) * 26%)) rotate(calc((var(--i) - 1) * 3deg));
  transition:transform .7s var(--ease-out);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.18));
  z-index:calc(10 - var(--i));
}
.tile:hover .tile__stack img{
  transform:translate(-50%,-50%) translateX(calc((var(--i) - .5) * 31%)) rotate(calc((var(--i) - 1) * 5deg));
}

/* soon / no-photo mark */
.tile__mark, .card__mark{
  display:grid; place-items:center; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(10,11,9,.045) 11px 22px),
    linear-gradient(165deg, var(--vitrine), var(--vitrine-2));
}
.tile__mark::after, .card__mark::after{
  content:''; width:38%; aspect-ratio:1; border:1px solid rgba(10,11,9,.14); border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(201,162,74,.34), transparent 62%);
}

.tile__body{ display:flex; flex-direction:column; gap:.32rem; padding:.95rem 1.1rem 1.05rem; flex:1; }
.tile__kicker{ font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.tile__name{ font-family:var(--serif); font-size:clamp(1.28rem, 2.1vw, 1.62rem); line-height:1.12; color:var(--cream); }
.tile__line{ font-size:.8rem; line-height:1.55; color:var(--cream-3); }
.tile__count{
  margin-top:auto; padding-top:.6rem; font-size:.64rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--cream-4);
}
.tile__count--soon{ color:var(--gold); }

.tile__arrow{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(var(--ink-rgb),.62); backdrop-filter:blur(6px);
  border:1px solid rgba(242,237,227,.16); color:var(--cream);
  opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.tile__arrow svg{ width:15px; height:15px; }
.tile:hover .tile__arrow{ opacity:1; transform:none; background:var(--gold); color:var(--on-gold); border-color:var(--gold); }

/* "in curand" tiles carry illustrated branch art, so they should NOT
   be desaturated the way a greyed-out photo would be */
.tile.is-soon .tile__name{ color:var(--cream-2); }
.tile.is-soon .tile__branch{ opacity:.9; }
.tile.is-soon:hover .tile__branch svg{ transform:rotate(2deg); }
.tile__branch svg{ transition:transform .8s var(--ease-out); transform-origin:70% 4%; }

/* ---------- 8 · SECTIONS ---------- */
.section{ padding-block:clamp(3.5rem, 8vw, 7rem); }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.section__head{ margin-bottom:clamp(1.8rem, 4vw, 3rem); }
.section__head .h2{ margin:.6rem 0 .8rem; }

/* proof strip */
.proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.proof__item{ background:var(--ink); padding:1.6rem 1.2rem; text-align:center; }
.proof__val{ font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--gold-hi); line-height:1; }
.proof__key{ margin-top:.5rem; font-size:.7rem; line-height:1.5; color:var(--cream-3); }

/* ---------- 9 · SHOP ---------- */
.filters{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:1.9rem; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.filter{
  flex:none; padding:.55rem 1.05rem; border:1px solid var(--line-2); border-radius:100px;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-3); white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.filter:hover{ color:var(--cream); border-color:var(--gold-line); }
.filter.is-active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

.grid{ display:grid; gap:clamp(.8rem, 1.6vw, 1.4rem); grid-template-columns:repeat(4, 1fr); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
.card.is-in:hover{ transform:translateY(-4px); border-color:var(--gold-line); box-shadow:var(--shadow); }
.card__media{ position:relative; aspect-ratio:1; background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2)); overflow:hidden; }
.card__link{ display:block; width:100%; height:100%; }

/* WHOLE-CARD CLICK TARGET.
   Only the photo and the title used to be links, so most of a card -
   the category line, the size line, the price block, all the padding -
   did nothing when clicked, which on a phone is most of the tap area.
   The title link is stretched over the card instead of the image link:
   .card__media has overflow:hidden, which would clip an overlay opened
   from inside it, and the title is also the better thing for a screen
   reader to announce. The image link is left in place but taken out of
   the tab order (see the renderers) so the card is ONE stop, not two.
   Anything genuinely interactive - the size buttons and the add/notify
   button - is lifted above the overlay so it still receives its own
   clicks. */
/* NOTE: .card__name must NOT be position:relative. The overlay is
   inset:0 against the nearest positioned ancestor, and that has to be
   .card - positioning the heading makes the overlay the size of the
   title and the rest of the card stays dead. */
.card__name a::after{
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:var(--radius-lg);
}
.card__sizes,
.card__foot .btn{ position:relative; z-index:2; }
/* The size row is only a wrapper: its gaps and the empty space beside
   the last button must fall through to the card link, or they read as
   dead strips across the middle of every olive card. */
.card__sizes{ pointer-events:none; }
.card__sizes .card__size{ pointer-events:auto; }

/* TOUCH TARGETS.
   The size chips measure 33px and the add button 38px — legible, but
   under the ~44px a thumb actually wants, so selecting 1 kg on a phone
   took two goes. Worse since the row above lets near-misses fall
   through to the card link: a slightly-off tap did not do nothing, it
   navigated. Expanding the hit area with a pseudo-element instead of
   padding keeps the chips visually exactly as designed while making
   them 45px to a finger. Horizontal growth stays under half the
   0.35rem gap so neighbouring targets never overlap and steal each
   other's taps. */
.card__sizes .card__size{ position:relative; }
.card__sizes .card__size::before{
  content:''; position:absolute; inset:-6px -2px;
}
/* Badges sit above the overlay so they stay legible, but they are
   labels, not controls - without this the corner of every card with a
   badge is a dead spot. */
.card__badge{ pointer-events:none; }
.card:hover .card__name a{ color:var(--gold-hi); }
/* Keyboard focus has to be visible on the card, not on an invisible
   overlay the size of the card. */
.card__name a:focus-visible{ outline:none; }
.card:has(.card__name a:focus-visible){
  border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-line);
}

/* A saving stated against the a-la-carte cost is information, not a
   markdown, so it must not inherit the strike-through from .card__was -
   a struck-out figure is exactly the reduction claim Omnibus forbids
   here. .card__was--sep never overrode text-decoration, so it was
   rendering 'save 14 RON vs separately' with a line through it. */
.card__was--sep{ text-decoration:none; }
.card__img{ width:100%; height:100%; object-fit:contain; padding:8%; transition:transform .75s var(--ease-out); }
.card:hover .card__img{ transform:scale(1.06); }
.card__stack img{ height:72%; }

.card__badge{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  padding:.26rem .6rem; border-radius:2px;
  font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--gold-hi); border:1px solid var(--gold-line);
}
.card__badge--save, .card__badge--bestseller{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.card__badge--soon{ background:rgba(var(--ink-rgb),.88); color:var(--cream-2); }

.card__body{ display:flex; flex-direction:column; gap:.32rem; padding:1rem 1rem 1.1rem; flex:1; }
.card__cat{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.card__name{ font-family:var(--serif); font-size:1.18rem; line-height:1.2; }
.card__name a:hover{ color:var(--gold-hi); }
.card__size{ font-size:.76rem; color:var(--cream-3); line-height:1.45; }

.card__sizes{ display:flex; gap:.35rem; margin-top:.35rem; }
.card__size:is(button){ all:unset; }
.card__sizes .card__size{
  padding:.28rem .62rem; border:1px solid var(--line-2); border-radius:2px;
  font-size:.66rem; font-weight:600; letter-spacing:.06em; color:var(--cream-3);
  cursor:pointer; transition:all .3s var(--ease);
}
.card__sizes .card__size:hover{ border-color:var(--gold-line); color:var(--cream); }
.card__sizes .card__size.is-active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

.card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.85rem; }
.card__prices{ display:flex; flex-direction:column; min-width:0; }
.card__was{ font-size:.7rem; color:var(--cream-4); text-decoration:line-through; }
.card__price{ font-family:var(--serif); font-size:1.32rem; color:var(--gold-hi); line-height:1.15; }
.card__unit{ font-size:.62rem; color:var(--cream-4); letter-spacing:.04em; font-style:normal; }
.btn--add{ padding:.6rem .95rem; font-size:.68rem; }
/* The card's add / notify button sat at 38px. It is the button the
   whole card exists to deliver, so on a touch screen it gets the full
   44px rather than a pseudo-element: growing it for real is worth six
   pixels of card height. */
@media (pointer:coarse), (max-width:880px){
  .card__foot .btn{ min-height:44px; }
}

.card.is-soon{ opacity:.72; }
.card.is-soon .card__media{ filter:grayscale(1); }

/* ---------- 10 · FREE-DELIVERY PROGRESS ---------- */
.shipbar{ padding:.9rem 0 .2rem; }
.shipbar__label{ font-size:.72rem; color:var(--cream-2); margin-bottom:.5rem; letter-spacing:.02em; }
.shipbar__label b{ color:var(--gold-hi); }
.shipbar__track{ height:3px; border-radius:100px; background:var(--line-2); overflow:hidden; }
.shipbar__fill{
  display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg, var(--olive), var(--gold));
  transition:width .6s var(--ease-out);
}
.shipbar.is-done .shipbar__fill{ background:var(--olive); }

/* ---------- 11 · CART DRAWER ---------- */
.overlay{
  position:fixed; inset:0; z-index:70; background:var(--scrim);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }

.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(420px, 100%); display:flex; flex-direction:column;
  background:var(--ink-2); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .5s var(--ease-out);
  box-shadow:var(--shadow-lg);
}
.cart.is-open{ transform:none; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:1.35rem var(--pad) 1.1rem; border-bottom:1px solid var(--line); }
.cart__title{ font-family:var(--serif); font-size:1.5rem; }
.cart__body{ flex:1; overflow-y:auto; padding:0 var(--pad); }
.cart__empty{ padding:3.5rem 0; text-align:center; }
.cart__emptyTitle{ font-family:var(--serif); font-size:1.25rem; color:var(--cream-2); }
.cart__emptySub{ font-size:.82rem; color:var(--cream-4); margin-top:.4rem; }

.cart__row{ display:grid; grid-template-columns:62px 1fr auto; gap:.85rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.cart__thumb{ aspect-ratio:1; border-radius:2px; overflow:hidden; background:var(--vitrine); }
.cart__thumb img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.cart__name{ font-size:.86rem; font-weight:600; line-height:1.35; }
.cart__name i{ font-style:normal; color:var(--cream-3); font-weight:400; }
.cart__each{ font-size:.7rem; color:var(--cream-4); margin-top:.15rem; }
.cart__qty{ display:flex; align-items:center; gap:.3rem; margin-top:.5rem; }
.cart__qty button{
  width:25px; height:25px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:2px; font-size:.9rem; color:var(--cream-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cart__qty button:hover{ border-color:var(--gold-line); color:var(--gold-hi); }
.cart__qty span{ min-width:24px; text-align:center; font-size:.82rem; font-weight:600; }
.cart__rm{ margin-left:.4rem; width:auto!important; padding:0 .5rem; border:0!important; font-size:.64rem!important; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-4)!important; }
.cart__rm:hover{ color:var(--gold-hi)!important; }
.cart__line{ font-family:var(--serif); font-size:1.02rem; color:var(--gold-hi); white-space:nowrap; }

.cart__foot{ padding:1.15rem var(--pad) 1.5rem; border-top:1px solid var(--line); background:var(--ink-3); }
.cart__totals{ display:flex; flex-direction:column; gap:.42rem; margin:.9rem 0 1rem; }
.cart__totalRow{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--cream-2); }
.cart__totalRow--grand{ padding-top:.62rem; border-top:1px solid var(--line); font-family:var(--serif); font-size:1.3rem; color:var(--cream); }
.cart__totalRow--grand span:last-child{ color:var(--gold-hi); }
.cart__note{ font-size:.68rem; color:var(--cream-4); margin-top:.75rem; text-align:center; line-height:1.5; }
.cart__foot .btn{ width:100%; }

/* sticky mobile cart bar */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.85rem var(--pad); background:var(--gold); color:var(--on-gold);
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 -12px 30px -12px rgba(0,0,0,.6);
}
.cartbar__count{ display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px; border-radius:100px; background:var(--on-gold); color:var(--gold); font-size:.66rem; }

/* ---------- 12 · MODALS (detail + finder) ---------- */
.modal{
  position:fixed; inset:auto 0 0 0; z-index:80;
  max-height:92svh; display:flex; flex-direction:column;
  background:var(--ink-2); border-top:1px solid var(--gold-line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  transform:translateY(102%); transition:transform .55s var(--ease-out);
  box-shadow:var(--shadow-lg);
}
.modal.is-open{ transform:none; }
@media (min-width:1080px){
  .modal{
    inset:50% auto auto 50%; width:min(1000px, calc(100vw - 3rem)); max-height:88svh;
    transform:translate(-50%, -46%) scale(.98); opacity:0;
    border:1px solid var(--gold-line); border-radius:var(--radius-lg);
    transition:transform .5s var(--ease-out), opacity .35s var(--ease);
  }
  .modal.is-open{ transform:translate(-50%,-50%); opacity:1; }
}
.modal__close{
  position:absolute; top:.85rem; right:.85rem; z-index:3;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:rgba(var(--ink-rgb),.78); border:1px solid var(--line-2); color:var(--cream);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.modal__close:hover{ background:var(--gold); color:var(--on-gold); }
.modal__close svg{ width:16px; height:16px; }
.modal__body{ overflow-y:auto; padding:0; }

/* detail layout */
.detail{ display:grid; }
@media (min-width:900px){ .detail{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.detail__media{ position:relative; background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2)); padding:1.4rem; }
.detail__img{ width:100%; aspect-ratio:1; object-fit:contain; }
.detail__thumbs{ display:flex; gap:.45rem; margin-top:.8rem; }
.detail__thumb{ width:54px; aspect-ratio:1; border:1px solid rgba(10,11,9,.14); border-radius:2px; overflow:hidden; background:#fff; }
.detail__thumb.is-active{ border-color:var(--gold); }
.detail__thumb img{ width:100%; height:100%; object-fit:contain; padding:8%; }

.detail__info{ padding:1.6rem var(--pad) 2.2rem; }
.detail__cat{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.detail__name{ font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.35rem); margin:.4rem 0 .3rem; }
.detail__size{ font-size:.84rem; color:var(--cream-3); }
.detail__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.detail__story{ font-size:.9rem; line-height:1.72; color:var(--cream-2); margin-bottom:1.3rem; }
.detail__story b{ color:var(--gold-hi); font-weight:600; }

.detail__sizes{ margin-bottom:1.15rem; }
.detail__sizesLabel{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-4); margin-bottom:.5rem; }
.detail__sizeBtns{ display:flex; gap:.4rem; }
.detail__size:is(button){
  padding:.5rem .95rem; border:1px solid var(--line-2); border-radius:2px;
  font-size:.75rem; font-weight:600; color:var(--cream-2); transition:all .3s var(--ease);
}
.detail__size:is(button):hover{ border-color:var(--gold-line); }
.detail__size:is(button).is-active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

.detail__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; padding:1.1rem 0; border-block:1px solid var(--line); }
.detail__price{ display:flex; flex-direction:column; margin-right:auto; }
.detail__price #detailPrice{ font-family:var(--serif); font-size:1.75rem; color:var(--gold-hi); line-height:1.1; }
.qty{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:2px; }
.qty button{ width:36px; height:36px; display:grid; place-items:center; color:var(--cream-2); font-size:1rem; }
.qty button:hover{ color:var(--gold-hi); }
.qty span{ min-width:30px; text-align:center; font-size:.85rem; font-weight:700; }
.detail__origin{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-4); margin-top:.9rem; }

.detail__block{ margin-top:1.9rem; }
.detail__h{ font-family:var(--serif); font-size:1.22rem; margin-bottom:.35rem; }
.detail__note{ font-size:.7rem; color:var(--cream-4); margin-bottom:.9rem; line-height:1.5; }
.detail__within{ font-size:.72rem; color:var(--olive); margin-top:.7rem; }
.detail__taste{ font-family:var(--serif); font-size:1.05rem; color:var(--gold-hi); margin-top:.85rem; font-style:italic; }
.detail__defect{ font-size:.72rem; color:var(--cream-3); margin-top:.3rem; }

.pack__list li{ display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--line); font-size:.84rem; color:var(--cream-2); }
.pack__list li a{ color:var(--cream-2); border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease); }
.pack__list li a:hover{ color:var(--gold-hi); border-bottom-color:var(--gold-line); }
.pack__list li i{ font-style:normal; color:var(--cream-4); white-space:nowrap; }
.pack__save{ margin-top:.8rem; font-size:.82rem; color:var(--cream-2); }
.pack__save b{ color:var(--gold-hi); }
.pack__save s{ color:var(--cream-4); }

.spec{ font-size:.78rem; }
.spec th{ text-align:left; font-weight:600; color:var(--cream-2); padding:.5rem .5rem .5rem 0; }
.spec thead th{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-4); border-bottom:1px solid var(--line); }
.spec td{ padding:.5rem .5rem .5rem 0; border-bottom:1px solid var(--line); }
.spec__val{ color:var(--gold-hi); font-weight:600; white-space:nowrap; }
.spec__bar{ width:34%; min-width:52px; }
.spec__bar span{ display:block; height:3px; border-radius:100px; background:linear-gradient(90deg, var(--olive), var(--gold)); }
.spec__lim{ color:var(--cream-4); font-size:.7rem; white-space:nowrap; text-align:right; }

.taste__row{ display:grid; grid-template-columns:76px 1fr 34px; align-items:center; gap:.7rem; padding:.34rem 0; }
.taste__k{ font-size:.76rem; color:var(--cream-2); }
.taste__bar{ height:3px; border-radius:100px; background:var(--line-2); overflow:hidden; }
.taste__bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--olive), var(--gold)); }
.taste__v{ font-size:.74rem; color:var(--gold-hi); text-align:right; }

.nutri{ border-top:1px solid var(--line); }
.nutri__row{ display:flex; justify-content:space-between; gap:1rem; padding:.44rem 0; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--cream-2); }
.nutri__row.is-sub{ padding-left:1rem; color:var(--cream-4); font-size:.74rem; }

/* ---------- 13 · FINDER ---------- */
.finder{ padding:2.2rem var(--pad) 2.4rem; }
.finder__step{ font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.finder__progress{ height:2px; background:var(--line-2); border-radius:100px; margin:.7rem 0 1.5rem; overflow:hidden; }
.finder__progress span{ display:block; height:100%; background:var(--gold); transition:width .5s var(--ease-out); }
.finder__q{ font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.15rem); margin-bottom:1.4rem; }
.finder__opts{ display:grid; gap:.6rem; }
.finder__opt{
  display:flex; flex-direction:column; gap:.2rem; text-align:left;
  padding:1.05rem 1.2rem; border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.finder__opt:hover{ border-color:var(--gold); background:rgba(201,162,74,.07); transform:translateX(4px); }
.finder__optK{ font-size:.95rem; font-weight:600; }
.finder__optD{ font-size:.74rem; color:var(--cream-4); }
.finder__back{ margin-top:1.2rem; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--cream-4); }
.finder__back:hover{ color:var(--gold-hi); }

.finder__res{ display:grid; gap:1.4rem; }
@media (min-width:760px){ .finder__res{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; } }
.finder__resMedia{ aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2)); }
.finder__resMedia img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.finder__resMedia .card__stack img{ padding:0; }
.finder__resName{ font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.15rem); }
.finder__resSize{ font-size:.82rem; color:var(--cream-3); margin-top:.25rem; }
.finder__resPrice{ font-family:var(--serif); font-size:1.6rem; color:var(--gold-hi); margin-top:.6rem; }
.finder__why{ font-size:.85rem; line-height:1.65; color:var(--cream-2); margin-top:.9rem; }
.finder__why b{ color:var(--gold); font-weight:600; }
.finder__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }

/* finder teaser band */
.teaser{ background:var(--ink-3); border-block:1px solid var(--line); }
.teaser__in{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; padding-block:clamp(2.2rem,5vw,3.4rem); }
/* the finder sits immediately under the entry screen, so it gets a
   warmer ground and a gold hairline to read as a deliberate stop */
.teaser--hero{
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border-top-color:var(--gold-line);
}
.teaser--hero .teaser__in{ padding-block:clamp(2.6rem,5.5vw,4rem); }
.btn--lg{ padding:1rem 2.1rem; font-size:.84rem; }
.teaser__text{ flex:1 1 300px; }
.teaser__title{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.3rem); margin:.5rem 0 .5rem; }
.teaser__sub{ font-size:.88rem; color:var(--cream-3); max-width:46ch; }

/* ---------- 14 · FEATURES / HERITAGE / QUOTE ---------- */
.feat{ display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.feat__item{ background:var(--ink); padding:1.9rem 1.5rem; }
.feat__n{ font-family:var(--serif); font-size:2.2rem; color:var(--gold-dim); line-height:1; }
.feat__t{ font-family:var(--serif); font-size:1.3rem; margin:.7rem 0 .5rem; }
.feat__d{ font-size:.82rem; line-height:1.65; color:var(--cream-3); }

.timeline{ display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.timeline__item{ background:var(--ink-2); padding:2rem 1.6rem; }
.timeline__y{ font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.2rem); color:var(--gold); line-height:1; }
.timeline__t{ font-family:var(--serif); font-size:1.22rem; margin:.65rem 0 .45rem; }
.timeline__d{ font-size:.82rem; line-height:1.65; color:var(--cream-3); }

.quote{ text-align:center; padding-block:clamp(3.5rem,8vw,6rem); }
.quote__mark{ font-family:var(--serif); font-size:4rem; color:var(--gold-dim); line-height:.6; }
.quote__text{ font-family:var(--serif); font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1.35; max-width:22ch; margin:1.2rem auto .9rem; font-style:italic; }
.quote__cite{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ---------- 15 · CONTACT / FOOTER ---------- */
.contact__card{
  max-width:460px; margin-inline:auto; text-align:center;
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:2.2rem 1.8rem; background:var(--ink-2);
}
.contact__h{ font-family:var(--serif); font-size:1.35rem; margin-bottom:1rem; }
.contact__row{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem 0; border-top:1px solid var(--line); }
.contact__k{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-4); }
.contact__v{ font-size:.95rem; color:var(--cream); }
.contact__v a:hover{ color:var(--gold-hi); }

.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem) 2rem; }
.footer__grid{ display:grid; gap:2.2rem; grid-template-columns:1.6fr repeat(3,1fr); }
.footer__brandText{ font-size:.82rem; line-height:1.7; color:var(--cream-3); max-width:40ch; margin-top:1rem; }
.footer__h{ font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer__list li{ margin-bottom:.62rem; }
.footer__list a{ font-size:.82rem; color:var(--cream-3); transition:color .3s var(--ease); }
.footer__list a:hover{ color:var(--gold-hi); }
/* Firm details are deliberately understated: one small link in the
   footer, full identity on /termeni#date-firma. Still reachable from
   every page, which is what ANPC expects. */
.footer__firm{ opacity:.72; }
.footer--slim{ padding-block:1.6rem; }
.footer__slimLinks{ font-size:.7rem; color:var(--cream-4); line-height:1.9; }
.footer__slimLinks a{ color:var(--cream-3); }
.footer__slimLinks a:hover{ color:var(--gold-hi); }

.footer__legal{ margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.footer__legal p{ font-size:.7rem; line-height:1.7; color:var(--cream-4); letter-spacing:.02em; }
.footer__legal a{ color:var(--cream-3); }
.footer__legal a:hover{ color:var(--gold-hi); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.72rem; color:var(--cream-4); }
.footer__legalLinks{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.footer__legalLinks a:hover{ color:var(--gold-hi); }

/* ---------- 16 · TOAST / CONSENT ---------- */
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:95;
  transform:translate(-50%, 22px); opacity:0; pointer-events:none;
  padding:.85rem 1.35rem; max-width:min(420px, calc(100vw - 2rem));
  background:var(--ink-3); border:1px solid var(--gold-line); border-radius:var(--radius);
  font-size:.82rem; text-align:center; box-shadow:var(--shadow);
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
.toast b{ color:var(--gold-hi); }

.consent{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90;
  max-width:520px; margin-inline:auto; padding:1.2rem 1.35rem;
  background:var(--ink-3); border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.consent__title{ font-family:var(--serif); font-size:1.15rem; margin-bottom:.4rem; }
.consent__text{ font-size:.78rem; line-height:1.6; color:var(--cream-3); }
.consent__actions{ display:flex; gap:.6rem; margin-top:1rem; }
.consent__actions .btn{ flex:1; padding:.65rem 1rem; font-size:.7rem; }

/* ---------- 17 · PDP (generated product pages) ---------- */
.pdp{ padding-block:clamp(2rem,5vw,3.5rem); }
.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; font-size:.7rem; color:var(--cream-4); margin-bottom:1.6rem; }
.crumbs a:hover{ color:var(--gold-hi); }
.crumbs span{ color:var(--cream-4); }
.pdp__grid{ display:grid; gap:clamp(1.5rem,3.5vw,3rem); }
@media (min-width:880px){ .pdp__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.pdp__media{ border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2)); }
.pdp__media img{ width:100%; aspect-ratio:1; object-fit:contain; padding:7%; }
.pdp__cat{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pdp__title{ font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,3rem); margin:.5rem 0 .4rem; }
.pdp__size{ font-size:.88rem; color:var(--cream-3); }
.pdp__desc{ font-size:.92rem; line-height:1.75; color:var(--cream-2); margin:1.2rem 0; }
.pdp__price{ font-family:var(--serif); font-size:2rem; color:var(--gold-hi); display:flex; flex-direction:column; }
.unit-price{ font-family:var(--sans); font-size:.66rem; color:var(--cream-4); font-style:normal; letter-spacing:.04em; }
.pdp__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1.2rem 0; border-block:1px solid var(--line); margin:1.2rem 0; }
.pdp__sizes{ display:flex; gap:.45rem; margin-bottom:1.1rem; }
.pdp__sizes button{ padding:.5rem 1rem; border:1px solid var(--line-2); border-radius:2px; font-size:.76rem; font-weight:600; color:var(--cream-2); transition:all .3s var(--ease); position:relative; }
/* Same hit-area expansion as the card chips: these are 35px tall and
   are the single most-tapped control on the merged oil page, since
   choosing a format is the only decision on it. Horizontal growth
   stays under half the 0.45rem gap so targets never overlap. */
.pdp__sizes button::before{ content:''; position:absolute; inset:-6px -3px; }
.pdp__sizes button.is-active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.pdp__ship{ display:flex; flex-direction:column; gap:.4rem; font-size:.78rem; color:var(--cream-3); }
.pdp__ship span{ display:flex; align-items:center; gap:.5rem; }
.pdp__ship span::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--olive); flex:none; }

/* ---------- 18 · CATEGORY PAGE HEADER ---------- */
.cathead{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem); position:relative; overflow:hidden; }
.cathead::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(760px 420px at 20% 0%, rgba(201,162,74,.12), transparent 66%);
}
.cathead__title{ font-size:clamp(2.2rem,6vw,3.8rem); margin:.6rem 0 .8rem; }
.cathead__lead{ color:var(--cream-2); max-width:58ch; font-size:clamp(.92rem,1.6vw,1.02rem); }

/* ---------- 19 · LEGAL PAGES ---------- */
.legal{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.legal__inner{ max-width:74ch; }
.legal h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:1rem; }
.legal h2{ font-family:var(--serif); font-size:1.4rem; margin:2.2rem 0 .7rem; color:var(--cream); }
.legal h3{ font-family:var(--serif); font-size:1.12rem; margin:1.4rem 0 .5rem; }
.legal p, .legal li{ font-size:.9rem; line-height:1.8; color:var(--cream-2); }
.legal p{ margin-bottom:.9rem; }
.legal ul{ list-style:none; margin:0 0 1.1rem; }
.legal ul li{ position:relative; padding-left:1.15rem; margin-bottom:.5rem; }
.legal ul li::before{ content:''; position:absolute; left:0; top:.72em; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.legal a{ color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px; }
.legal__meta{ font-size:.74rem; color:var(--cream-4); margin-bottom:2rem; }
/* Legal pages carry full-sentence button labels ("Modifică preferințele
   de cookie-uri"), which cannot stay on one line on a phone. */
.legal .btn{ white-space:normal; text-align:center; line-height:1.4; }
.legal__box{ border:1px solid var(--gold-line); border-radius:var(--radius-lg); padding:1.4rem 1.5rem; background:var(--ink-2); margin:1.5rem 0; }
.legal__box p{ margin:0; }
.legal__box strong{ color:var(--gold-hi); }
.legal strong{ color:var(--cream); font-weight:600; }
/* Wide tables scroll inside their own container rather than pushing
   the page sideways. The wrapper is added by _build-legal.ps1; the
   rules below apply to every table in a legal page, not just the
   ones that happen to carry the .legal__table class. */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2rem 0 1.6rem; }
.legal table{ width:100%; min-width:520px; font-size:.86rem; }
.legal th, .legal td{ padding:.72rem 1rem .72rem 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.legal thead th{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.legal td{ color:var(--cream-2); }
.legal td strong{ color:var(--gold-hi); }

/* ---------- 20 · CHECKOUT ---------- */
.checkout{ padding-block:clamp(2rem,5vw,3.5rem); }
.checkout__grid{ display:grid; gap:clamp(1.5rem,3.5vw,3rem); }
/* Grid items default to min-width:auto, so a child refuses to shrink
   below its min-content and punches out of the column on narrow
   phones. Every grid child on the site gets min-width:0. */
.checkout__grid > *, .pdp__grid > *, .detail > *, .finder__picks > *{ min-width:0; }
@media (min-width:900px){ .checkout__grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start; } }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.field input, .field textarea{
  width:100%; padding:.8rem .95rem; background:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--radius);
  color:var(--cream); font-family:var(--sans); font-size:.92rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--ink-3); }
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-4); }
.field textarea{ resize:vertical; min-height:88px; }
.field-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.form__section{ margin-bottom:2rem; }
.form__h{ font-family:var(--serif); font-size:1.35rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.consent-check{ display:flex; align-items:flex-start; gap:.7rem; font-size:.82rem; color:var(--cream-2); line-height:1.55; }
.consent-check input{ width:17px; height:17px; margin-top:.18rem; accent-color:var(--gold); flex:none; }
.consent-check a{ color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px; }

.order-summary{
  position:sticky; top:92px;
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem; background:var(--ink-2);
}
.order-summary__line{ display:flex; justify-content:space-between; gap:1rem; padding:.58rem 0; border-bottom:1px solid var(--line); font-size:.84rem; color:var(--cream-2); }
.order-summary__total{ display:flex; justify-content:space-between; gap:1rem; padding-top:.9rem; margin-top:.4rem; font-family:var(--serif); font-size:1.4rem; }
.order-summary__total span:last-child{ color:var(--gold-hi); }
.cod-note{ font-size:.76rem; line-height:1.6; color:var(--cream-3); padding:.9rem 1rem; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--ink-3); }

/* ---------- 21 · CONFIRMATION ---------- */
.done{ padding-block:clamp(3rem,7vw,5.5rem); text-align:center; }
.done__mark{ width:66px; height:66px; margin:0 auto 1.5rem; display:grid; place-items:center; border-radius:50%; border:1px solid var(--gold); color:var(--gold); }
.done__mark svg{ width:28px; height:28px; }
.done__title{ font-size:clamp(1.9rem,4.6vw,2.9rem); margin-bottom:.7rem; }
.done__sub{ color:var(--cream-2); max-width:50ch; margin-inline:auto; }
.done__code{ display:inline-flex; flex-direction:column; gap:.3rem; margin:2rem auto; padding:1.1rem 2rem; border:1px solid var(--gold-line); border-radius:var(--radius-lg); background:var(--ink-2); }
.done__codeK{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-4); }
.done__codeV{ font-family:var(--serif); font-size:1.8rem; color:var(--gold-hi); letter-spacing:.08em; }
.done__panel{ max-width:520px; margin:0 auto 2rem; text-align:left; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.4rem 1.5rem; background:var(--ink-2); }
.done__steps li{ position:relative; padding-left:1.6rem; margin-bottom:.75rem; font-size:.86rem; color:var(--cream-2); line-height:1.6; }
.done__steps li::before{ content:''; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* ---------- 22 · 404 ---------- */
.nf{ min-height:62svh; display:grid; place-items:center; text-align:center; padding-block:4rem; }
.nf__code{ font-family:var(--serif); font-size:clamp(4rem,14vw,8rem); color:var(--gold-dim); line-height:1; }

/* =========================================================
   23 · MOTION SYSTEM
   Everything here is transform/opacity only — no layout
   thrash — and every rule is switched off wholesale by the
   prefers-reduced-motion block near the top of this file.
   ========================================================= */

/* staggered reveal */
.reveal, .card, .tile, .feat__item, .timeline__item{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 60ms);
}
.reveal.is-in, .card.is-in, .tile.is-in, .feat__item.is-in, .timeline__item.is-in{
  opacity:1; transform:none;
}

/* bars that fill as they enter view */
.spec__bar span, .taste__bar i, .shipbar__fill{ width:0; transition:width 1.1s var(--ease-out); }
.spec__bar span.is-in{ width:var(--w, 50%); }
.taste__bar i.is-in{ width:var(--w, 50%); }

/* ---------- MARQUEE ----------
   Two bands, opposite directions. Each track is duplicated so the
   loop is seamless; aria-hidden on the clone keeps it out of the
   accessibility tree and out of screen-reader output. */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--ink-2); padding-block:.85rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee--alt{ background:var(--ink); }
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee--alt .marquee__track{ animation-direction:reverse; animation-duration:54s; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; flex:none; }
.marquee__item{
  display:inline-flex; align-items:center; gap:.9rem; padding-inline:1.5rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3);
  white-space:nowrap;
}
.marquee__item::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-dim); }
.marquee__item b{ color:var(--gold-hi); font-weight:600; }
.marquee__gr{
  font-family:var(--greek); font-size:1.15rem; letter-spacing:.02em;
  text-transform:none; color:var(--gold-hi);
}
.marquee__gr small{
  display:inline-block; margin-left:.55rem; font-family:var(--sans);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-4);
}
@keyframes slide{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* parallax layer */
[data-parallax]{ will-change:transform; }

/* =========================================================
   24 · SALE / COUNTDOWN
   ========================================================= */
.card__badge--pct{
  background:var(--olive); border-color:var(--olive); color:#0A0C08; font-weight:800;
}
.card__was{ display:flex; align-items:baseline; gap:.35rem; font-size:.68rem; color:var(--cream-4); }
.card__was i{ font-style:normal; letter-spacing:.1em; text-transform:uppercase; font-size:.56rem; }
.card__was s{ text-decoration:line-through; }

.tile__flash{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  padding:.3rem .6rem; border-radius:2px;
  background:var(--olive); color:#0A0C08;
  font-size:.68rem; font-weight:800; letter-spacing:.06em;
  animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }

.countdown{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  padding:.75rem 1rem; margin:1rem 0;
  border:1px solid var(--olive-dim); border-radius:var(--radius);
  background:rgba(127,162,87,.07);
}
.countdown__label{ font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-hi); }
.countdown__clock{ font-family:var(--sans); font-size:.85rem; color:var(--cream); letter-spacing:.04em; }
.countdown__clock b{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-hi); font-weight:500; }
.countdown.is-over{ border-color:var(--line); background:none; }

.pdp__ref{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; margin-bottom:.4rem; font-size:.78rem; }
.pdp__refLabel{ font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-4); }
.pdp__ref s{ color:var(--cream-4); }
.pdp__save{ color:var(--olive-hi); font-weight:700; font-size:.74rem; }

.detail__ref{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem; font-size:.74rem; margin-bottom:.2rem; }
.detail__ref span{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-4); }
.detail__ref s{ color:var(--cream-4); }
.detail__ref b{ color:var(--olive-hi); }

/* =========================================================
   25 · TASTE WHEEL + ATTRIBUTES
   ========================================================= */
.radar{ width:100%; max-width:340px; margin:.5rem auto 0; display:block; overflow:visible; }
.radar__ring{ fill:none; stroke:var(--line-2); stroke-width:1; }
.radar__axis{ stroke:var(--line-2); stroke-width:1; }
.radar__area{
  fill:rgba(210,164,65,.22); stroke:var(--gold); stroke-width:1.5; stroke-linejoin:round;
  transform-origin:center; animation:radarIn 1s var(--ease-out) both;
}
.radar__dot{ fill:var(--gold-hi); }
.radar__label{ fill:var(--cream-3); font-family:var(--sans); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; }
@keyframes radarIn{ from{ transform:scale(.55); opacity:0 } to{ transform:scale(1); opacity:1 } }

.attrs{ border-top:1px solid var(--line); }
.attrs__row{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.62rem 0; border-bottom:1px solid var(--line); font-size:.82rem;
}
.attrs__row span{ color:var(--cream-4); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.attrs__row b{ color:var(--cream); font-weight:500; text-align:right; }

.use__text{ font-size:.9rem; line-height:1.78; color:var(--cream-2); }

/* =========================================================
   26 · QUICK VIEW / STICKY BUY / CROSS-SELL
   ========================================================= */

.grid--pairs{ grid-template-columns:repeat(2, 1fr); max-width:640px; }

/* =========================================================
   27 · FINDER RESULT (pairing + diet guidance)
   ========================================================= */
.finder__opt{ opacity:0; transform:translateY(10px); animation:optIn .5s var(--ease-out) both; animation-delay:calc(var(--d,0) * 70ms); }
@keyframes optIn{ to{ opacity:1; transform:none } }

.finder__picks{ display:grid; gap:.8rem; margin-bottom:1.3rem; }
@media (min-width:640px){ .finder__picks{ grid-template-columns:1fr 1fr; } }
.finder__pick{
  display:flex; gap:.9rem; align-items:center;
  padding:.9rem; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--ink-3);
}
.finder__pickMedia{
  width:72px; height:72px; flex:none; border-radius:2px; overflow:hidden;
  background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2));
}
.finder__pickMedia img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.finder__pickCat{ font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.finder__pickName{ font-family:var(--serif); font-size:1.12rem; margin:.2rem 0 .1rem; }
.finder__pickSize{ font-size:.72rem; color:var(--cream-4); }
.finder__pickPrice{ font-family:var(--serif); font-size:1.1rem; color:var(--gold-hi); margin-top:.25rem; }

/* result: the oil half TEACHES (guidance first, purchase quiet and
   secondary), the olive half RECOMMENDS a contrasting pair */
.finder__oil{
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:1.4rem 1.4rem 1.2rem; margin-bottom:1.6rem;
  background:linear-gradient(160deg, rgba(223,178,85,.06), transparent 60%);
}
.finder__oilNote{ font-size:.76rem; line-height:1.6; color:var(--cream-4); margin-top:.9rem; }
.finder__oilBuy{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line);
}
.finder__olives{ margin-bottom:.5rem; }
.finder__pickUse{ font-size:.78rem; line-height:1.65; color:var(--cream-3); margin-top:.5rem; }
.finder__pickLink{
  display:inline-block; margin-top:.55rem; font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi);
  border-bottom:1px solid var(--gold-line); padding-bottom:2px;
}
.finder__pickLink:hover{ color:var(--cream); border-bottom-color:var(--cream); }
.finder__pick{ align-items:flex-start; }

.finder__diet{
  border-left:2px solid var(--olive); padding:.2rem 0 .2rem 1.1rem; margin:1.3rem 0;
}
.finder__dietEyebrow{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--olive-hi); }
.finder__dietTitle{ font-family:var(--serif); font-size:1.3rem; margin:.35rem 0 .6rem; }
.finder__dietText{ font-size:.86rem; line-height:1.75; color:var(--cream-2); margin-bottom:.6rem; }
.finder__dietText:last-child{ margin-bottom:0; }

/* =========================================================
   27b · RESPONSIVE for the new pieces
   ========================================================= */
@media (max-width:880px){
}
@media (max-width:560px){
  .marquee__item{ font-size:.68rem; padding-inline:1rem; letter-spacing:.12em; }
  .marquee__gr{ font-size:1rem; }
  .marquee__gr small{ display:none; }
  .grid--pairs{ grid-template-columns:repeat(2,1fr); }
  .countdown{ gap:.4rem; padding:.6rem .8rem; }
  .countdown__clock b{ font-size:1rem; }
}

/* =========================================================
   27c · USE-LED ROUTING + CULINARY GUIDE (oil category)
   One brand means size is not a meaningful choice — use is.
   ========================================================= */
.usegrid{ display:grid; gap:clamp(.8rem,1.6vw,1.2rem); grid-template-columns:repeat(4,1fr); }
.usecard{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .45s var(--ease-out), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.usecard:hover{ transform:translateY(-5px); border-color:var(--gold-line); box-shadow:var(--shadow); }
.usecard__media{
  aspect-ratio:16/11; overflow:hidden;
  background:linear-gradient(165deg, var(--vitrine), var(--vitrine-2));
}
.usecard__media img{ width:100%; height:100%; object-fit:contain; padding:8%; transition:transform .7s var(--ease-out); }
.usecard:hover .usecard__media img{ transform:scale(1.06); }
.usecard__body{ display:flex; flex-direction:column; gap:.4rem; padding:1.05rem 1.1rem 1.15rem; flex:1; }
.usecard__title{ font-family:var(--serif); font-size:1.3rem; line-height:1.15; color:var(--cream); }
.usecard__line{ font-size:.82rem; line-height:1.6; color:var(--cream-2); }
.usecard__hint{ font-size:.72rem; line-height:1.5; color:var(--cream-4); }
.usecard__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--line);
}
.usecard__foot b{ font-size:.76rem; font-weight:600; color:var(--cream-2); }
.usecard__foot i{ font-family:var(--serif); font-style:normal; font-size:1.1rem; color:var(--gold-hi); }

.guide{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.guide__item{ background:var(--ink-2); padding:1.7rem 1.6rem; }
.guide__n{ font-family:var(--serif); font-size:1.6rem; color:var(--gold-dim); line-height:1; }
.guide__t{ font-family:var(--serif); font-size:1.35rem; margin:.5rem 0 .6rem; }
.guide__b{ font-size:.88rem; line-height:1.8; color:var(--cream-2); }
@media (min-width:900px){ .guide{ grid-template-columns:1fr 1fr; } }

@media (max-width:960px){ .usegrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){
  .usegrid{ grid-template-columns:1fr; }
  .usecard{ flex-direction:row; }
  .usecard__media{ width:110px; flex:none; aspect-ratio:auto; }
  .usecard__hint{ display:none; }
  .guide__item{ padding:1.3rem 1.1rem; }
}

/* =========================================================
   27d · MOBILE APP LAYER
   Bottom tab bar + full-screen sheets. Everything here is scoped
   to <=880px; desktop keeps the drawer and centred modals.
   ========================================================= */
.tabbar{ display:none; }
.cartbar{ display:none !important; }   /* superseded by the Cos tab */

@media (max-width:880px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:repeat(4,1fr);
    background:rgba(var(--ink-rgb),.96);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tabbar__item{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    padding:.55rem .3rem .5rem; min-height:56px;
    color:var(--cream-3); text-align:center;
    transition:color .25s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar__item:active{ color:var(--gold-hi); }
  .tabbar__item.has-items{ color:var(--gold-hi); }
  .tabbar__icon{ position:relative; display:grid; place-items:center; }
  .tabbar__icon svg{ width:22px; height:22px; }
  .tabbar__label{
    font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    line-height:1.15; max-width:9ch;
  }
  .tabbar__total{ font-size:.56rem; color:var(--gold-hi); font-weight:700; line-height:1; }
  .tabbar__count{
    position:absolute; top:-5px; right:-9px;
    min-width:17px; height:17px; padding:0 4px;
    display:grid; place-items:center; border-radius:100px;
    background:var(--gold); color:var(--on-gold);
    font-size:.58rem; font-weight:800; line-height:1;
    transition:transform .3s var(--ease);
  }
  .tabbar__count.is-zero{ transform:scale(0); }

  /* keep content clear of the bar */
  body.has-tabbar{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .toast{ bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .consent{ bottom:calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* ---- full-screen sheets ---- */
  .sheet__handle{
    position:absolute; top:.55rem; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:100px;
    background:var(--line-2); z-index:5; pointer-events:none;
  }

  /* the basket becomes a bottom sheet instead of a side drawer */
  .cart{
    top:auto; right:0; left:0; bottom:0; width:100%;
    max-height:92svh; height:auto;
    border-left:0; border-top:1px solid var(--gold-line);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(102%);
    transition:transform .45s var(--ease-out);
  }
  .cart.is-open{ transform:translateY(0); }
  .cart__head{ padding-top:1.6rem; }

  .modal{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .modal__body{ padding-top:.4rem; }
  .detail__info, .finder{ padding-top:1.2rem; }
  .modal__close, .cart__head .icon-btn{ width:40px; height:40px; }

  /* larger tap targets throughout */
  .filter{ padding:.68rem 1.15rem; }
  .card__sizes .card__size{ padding:.45rem .8rem; }
  .cart__qty button{ width:34px; height:34px; }
  .finder__opt{ padding:1.15rem 1.2rem; }
  .detail__size:is(button), .pdp__sizes button{ padding:.62rem 1.1rem; }
}

@media (max-width:560px){
  .tabbar__label{ font-size:.54rem; letter-spacing:.04em; }
  .tabbar__icon svg{ width:21px; height:21px; }
}

/* =========================================================
   27e · REVIEWS (inert until REVIEWS.enabled and reviews.json
   actually contains real, moderated customer reviews)
   ========================================================= */
.review{ padding:1.2rem 0; border-bottom:1px solid var(--line); }
.review:last-child{ border-bottom:0; }
.review__stars{ color:var(--gold); font-size:1rem; letter-spacing:.12em; }
.review__meta{ font-size:.74rem; color:var(--cream-4); margin:.35rem 0 .5rem; }
.review__meta b{ color:var(--cream-2); font-weight:600; }
.review__verified{
  display:inline-block; margin-left:.5rem; padding:.14rem .5rem;
  border:1px solid var(--olive-dim); border-radius:100px;
  font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive-hi);
}
.review__body{ font-size:.88rem; line-height:1.75; color:var(--cream-2); }

/* =========================================================
   28 · RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:960px){
  .nav{ display:none; }
  .menu-toggle{ display:grid; }
  .grid{ grid-template-columns:repeat(3, 1fr); }
  .feat{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:880px){
  .cartbar{ display:flex; }
  body.has-cartbar{ padding-bottom:58px; }
  body.has-cartbar .toast{ bottom:5.2rem; }
  body.has-cartbar .consent{ bottom:4.6rem; }
}

/* The topbar's three items need ~770px. Between 760 and 900 they were
   overflowing because the rule that trims them started too low. */
@media (max-width:980px){ .topbar__in{ gap:1.4rem; } }
@media (max-width:900px){
  .topbar__in{ justify-content:center; gap:.5rem; }
  .topbar__item{ display:none; }
  .topbar__item--hl{ display:flex; }
}
/* the delivery line plus the full wholesale label do not both fit on a
   phone, so the label shortens to "En-gros" rather than wrapping */
@media (max-width:620px){
  .topbar__ctaLong{ display:none; }
  .topbar__cta{ padding:.2rem .58rem; font-size:.6rem; letter-spacing:.1em; margin-left:.2rem; }
  .topbar__item--hl{ font-size:.64rem; letter-spacing:.06em; }
}

@media (max-width:760px){
  .topbar__in{ justify-content:center; gap:0; }
  .topbar__item{ display:none; }
  .topbar__item--hl{ display:flex; }
  .gate__grid{ grid-template-columns:repeat(2, 1fr); }
  .grid{ grid-template-columns:repeat(2, 1fr); }
  .timeline{ grid-template-columns:1fr; }
  .proof{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .order-summary{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  /* the checkout/confirmation header carries a wide text button that
     cannot fit beside the brand on a small phone — the logo already
     links home, so the duplicate is dropped rather than squeezed */
  .header__tools > .btn{ display:none; }
}

@media (max-width:560px){
  :root{ --chrome:100px; }
  .header__in{ height:62px; gap:.5rem; }
  .brand__logo{ width:29px; height:29px; }
  .brand__name{ font-size:1rem; letter-spacing:.12em; }
  .brand__tag{ font-size:.47rem; letter-spacing:.16em; }
  .lang__btn{ padding:.24rem .48rem; font-size:.6rem; }
  .icon-btn, .menu-toggle{ width:36px; height:36px; }
  .icon-btn svg{ width:17px; height:17px; }
  .mobile-nav{ inset:100px 0 0; }

  .gate{ min-height:auto; padding-block:2rem 2.5rem; }
  .gate__grid{ gap:.6rem; }
  .tile__body{ padding:.85rem .9rem 1rem; gap:.3rem; }
  .tile__name{ font-size:1.05rem; }
  .tile__line{ display:none; }
  .tile__kicker{ font-size:.54rem; letter-spacing:.16em; }
  .tile__count{ padding-top:.5rem; font-size:.58rem; }
  .tile__arrow{ display:none; }

  .grid{ gap:.6rem; }
  .card__body{ padding:.8rem .8rem .9rem; }
  .card__name{ font-size:1rem; }
  .card__size{ display:none; }
  .card__price{ font-size:1.12rem; }
  .card__foot{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .btn--add{ width:100%; }

  .feat{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .footer__bottom{ flex-direction:column; }
  .quote__text{ max-width:none; }
  .detail__buy{ gap:.6rem; }
  .detail__price{ width:100%; margin-right:0; }
  .detail__buy .btn{ flex:1; }
}

/* The product grid stays 2-up all the way down to 320px — a single
   column on a 375px phone wastes the fold and buries the catalogue.
   Only the category tiles, which carry more text, collapse to one. */
@media (max-width:360px){
  .brand__tag{ display:none; }
  .gate__grid{ grid-template-columns:1fr; }
  .card__foot{ gap:.45rem; }
  .btn--add, .btn--notify{ padding:.55rem .6rem; font-size:.62rem; }
  .card__price{ font-size:1.02rem; }
}

/* =========================================================
   29 · STOCK, REMINDERS AND REVIEWS
   ========================================================= */

/* --- out of stock ---------------------------------------
   The card keeps its place and its price. The photo is dimmed
   rather than greyscaled: desaturating food photography makes it
   look spoiled, which is a stronger message than "come back next
   week" and not the one we mean. */
.card--oos .card__media{ opacity:.62; }
.card--oos .card__price{ color:var(--cream-3); }
.card--oos .card__was{ display:none; }

.card__badge--oos{
  background:var(--ink-2);
  color:var(--cream-2);
  border:1px solid var(--line-2);
}

.btn--notify{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .85rem;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid var(--gold);
  background:transparent; color:var(--gold-hi);
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn--notify:hover{ background:var(--gold); color:var(--on-gold); }
.btn--notify svg{ width:15px; height:15px; flex:none; }
.btn--gold.btn--notify{ background:var(--gold); color:var(--on-gold); }
.btn--gold.btn--notify:hover{ filter:brightness(1.06); }

.pdp__stock{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  margin:0 0 1rem;
  padding:.7rem .9rem;
  border:1px solid var(--line-2);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  background:var(--ink-2);
}
.pdp__stock b{
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-hi);
}
.pdp__stock span{ font-size:.85rem; color:var(--cream-2); }

/* --- dialog ---------------------------------------------
   Named .dlg, not .modal: .modal is already the finder's sliding
   panel and inherits a transform these must not pick up.

   Centred on desktop, a bottom sheet on phones - the same shape
   the basket and the finder already take, so the shop only ever
   has one idea of what an overlay is. */
.dlg{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; }
/* superseded by the global [hidden] rule at the top of this file */
.dlg__scrim{ position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(2px); }

.dlg__panel{
  position:relative;
  width:min(440px, calc(100vw - 2rem));
  max-height:min(86vh, 720px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:1.6rem 1.5rem 1.4rem;
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  background:var(--ink-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.dlg__x{
  position:absolute; top:.55rem; right:.7rem;
  width:34px; height:34px;
  display:grid; place-items:center;
  font-size:1.4rem; line-height:1;
  border:0; border-radius:50%;
  background:transparent; color:var(--cream-3);
  cursor:pointer;
}
.dlg__x:hover{ background:var(--ink-3); color:var(--cream); }

.dlg__title{ font-family:var(--serif); font-size:1.3rem; margin:0 2rem .3rem 0; color:var(--cream); }
.dlg__lead{ font-size:.95rem; font-weight:600; color:var(--gold-hi); margin:0 0 .2rem; }
.dlg__note{ font-size:.8rem; color:var(--cream-3); margin:0 0 1.1rem; }
.dlg__fine{ font-size:.72rem; line-height:1.6; color:var(--cream-4); margin:.7rem 0 0; }
.dlg__msg{ font-size:.85rem; color:var(--gold-hi); margin:.6rem 0 0; min-height:1.2em; }
.dlg .btn{ width:100%; justify-content:center; }

/* The site's .field styles the LABEL element; these dialogs wrap the
   caption in a span so the whole row is clickable, so it needs the
   same treatment. */
.dlg .field > span{
  font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-3);
}
.dlg .field--check{
  flex-direction:row; align-items:flex-start; gap:.6rem;
  cursor:pointer;
}
.dlg .field--check > span{
  font-size:.8rem; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--cream-2); line-height:1.5;
}
.dlg .field--check input{ width:18px; height:18px; margin-top:.1rem; flex:none; accent-color:var(--gold); }

/* Honeypot. Off-screen rather than display:none - some bots skip
   hidden fields, and none of them can see this one anyway. */
.hp{
  position:absolute !important;
  left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* --- star input ------------------------------------------ */
.stars{ display:flex; gap:.15rem; }
.stars__btn{
  border:0; background:transparent; cursor:pointer;
  font-size:1.6rem; line-height:1;
  padding:.1rem .15rem;
  color:var(--cream-4);
  transition:color .14s ease, transform .14s ease;
}
.stars__btn:hover{ transform:scale(1.12); }
.stars__btn.is-on{ color:var(--gold); }
.stars__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* On a phone the dialog becomes a bottom sheet: full width, square
   top corners against the viewport edge, and padding that clears the
   home indicator. */
@media (max-width:560px){
  .dlg{ place-items:end center; }
  .dlg__panel{
    width:100%;
    max-width:none;
    max-height:90vh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom:0;
    padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));
  }
  .stars__btn{ font-size:1.9rem; padding:.2rem .25rem; }
}

/* Seven nav items instead of six. Between 960 (where the nav gives
   way to the burger) and 1180 the original 1.65rem gap runs the row
   into the basket icon, so it tightens rather than wrapping. */
@media (max-width:1180px){
  .nav{ gap:1.05rem; }
  .nav a{ font-size:.68rem; }
}
@media (max-width:1020px){
  .nav{ gap:.75rem; }
}

/* =========================================================
   30 · FULL-WIDTH DETAIL SECTION (sensory + nutrition)
   =========================================================
   The product grid is image | info. Everything below the price used
   to sit inside the info column, so the lab detail was squeezed into
   half the page as a tall ribbon of text while the space under the
   photo stayed empty. It now breaks out across both columns, which
   is what lets the sensory profile and the nutrition table sit on
   opposite sides of the page rather than opposite halves of one
   column. */
@media (min-width:880px){
  .pdp__detail{ grid-column:1 / -1; }
}

/* Full width is good for a chart and a table, and bad for prose - a
   1200px line is unreadable. The running text keeps a sane measure
   while the data blocks take the room they were given. */
.pdp__detail .use__text,
.pdp__detail .pack__note,
.pdp__detail > .detail__block > .detail__note{ max-width:68ch; }
.pdp__detail .attrs{ max-width:640px; }

.detail__pair{ display:grid; gap:1.9rem; align-items:start; }
.detail__pair > .detail__block{ margin-top:1.9rem; min-width:0; }

/* Two real halves of the page. Matches the breakpoint at which the
   product grid itself goes two-column, so the page never has one
   section split while another is stacked. */
@media (min-width:880px){
  .detail__pair--two{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem); }
  .detail__pair--two > .detail__block{ margin-top:1.9rem; }
}

/* =========================================================
   31 · GROUP SIZE SELECTOR
   =========================================================
   Five formats do not fit one row on a 320px phone, so the row
   wraps instead of pushing the page sideways. */
.pdp__sizes{ flex-wrap:wrap; }
.pdp__sizes--group button{ flex:0 0 auto; }
@media (max-width:400px){
  .pdp__sizes--group button{ padding:.45rem .7rem; font-size:.72rem; }
}

/* --- FAQ ------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ padding:1.15rem 0; border-bottom:1px solid var(--line); }
.faq__q{
  font-family:var(--serif); font-size:1.08rem; font-weight:600;
  color:var(--cream); margin:0 0 .45rem;
}
.faq__a p{ font-size:.9rem; line-height:1.8; color:var(--cream-2); margin:0; max-width:72ch; }
.faq__a strong{ color:var(--gold-hi); font-weight:600; }
.faq__a em{ font-style:italic; }

/* =========================================================
   32 · STICKY PRODUCT PHOTO
   =========================================================
   The photo column is a square; the information column beside it
   is much taller. Left alone that leaves a growing hole under the
   bottle as you read. Sticking the photo keeps the product in
   view while the description, sizes and price scroll past it.

   Only above 880px, where the two columns actually sit side by
   side - and only when the visitor has not asked for reduced
   motion, since a pinned element that slides is exactly the kind
   of movement that setting exists to stop. */
@media (min-width:880px) and (prefers-reduced-motion:no-preference){
  .pdp__media{
    position:sticky;
    top:calc(var(--headerH, 72px) + 1.25rem);
  }
}

/* =========================================================
   33 · PDP TOP ROW (photo + buy panel)
   =========================================================
   The photo and the buy panel now live in their own container so
   the sticky photo is bounded by THEM and releases the moment the
   buy panel ends. Without this the photo was free to travel down
   past "Cum se foloseste" and sit on top of the information the
   shopper had scrolled there to read. */
.pdp__top{ display:grid; gap:clamp(1.5rem,3.5vw,3rem); }
@media (min-width:880px){
  .pdp__grid{ grid-template-columns:minmax(0,1fr); }
  .pdp__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
}

/* =========================================================
   34 · SAVING STATEMENT (non-reduction)
   =========================================================
   A bundle's saving is stated in words, never as a struck-through
   price or a percentage: the figure it would compare against is
   what the contents cost separately today, which is not a former
   price of the bundle. Presenting it as a reduction is precisely
   what the Omnibus rules forbid. Styled as information, not as a
   markdown, so it does not read like a discount either. */
.card__was--sep{
  font-size:.68rem; letter-spacing:.02em; text-transform:none;
  color:var(--olive-hi); font-style:normal;
}
.card__was--sep::before{ content:none; }
.pdp__ref--sep{ margin-bottom:.35rem; }
.pdp__ref--sep .pdp__save{
  color:var(--olive-hi); font-size:.8rem; font-weight:600; letter-spacing:.01em;
}