/* ============================================================
   La Selezione — stylesheet (packaging-led edition)
   The striped meal-kit boxes lead the visuals. Colours are
   sampled straight from the box art and used as BIG SOLID
   FIELDS, with the candy stripe kept only as an accent edge.
   Each flavour carries its own INK (the type colour printed
   on that box): navy on turquoise, green on pink, red on yellow.
   Display Lora · body Montserrat · script Parisienne.
   ============================================================ */

:root{
  /* base */
  --panna:      #FCF7EE;   /* cream background          */
  --panna-2:    #F5ECD8;   /* warm parchment band       */
  --notte:      #16306B;   /* brand navy                */
  --notte-deep: #0F2247;   /* dramatic dark act         */
  --oro:        #B08D57;   /* gold                      */
  --oro-soft:   #CBA86F;
  --ink:        #45413A;   /* warm body text            */
  --line:       #E6DAC0;   /* hairline on parchment     */
  --white-soft: #FFFDF7;

  /* ---- PACKAGING COLOURS (sampled from the boxes) ----
     FIELD = the box's solid stripe colour, used as big colour fields
     INK   = the type colour printed on that box                      */
  --carbonara:        #0E8A90;   /* deep teal — accent on neutral bg */
  --carbonara-field:  #74CFD0;   /* turquoise field   */
  --carbonara-ink:    #233A80;   /* navy type (box)   */
  --carbonara-deep:   #0B6E73;

  --bolognese:        #2A5236;   /* forest-green type (box) */
  --bolognese-field:  #F0CEDA;   /* candy-pink field  */
  --bolognese-ink:    #2A5236;
  --bolognese-deep:   #1F4B30;

  --pomodoro:         #B81E22;   /* tomato-red type (box) */
  --pomodoro-field:   #F4D24A;   /* sunny-yellow field */
  --pomodoro-ink:     #B81E22;
  --pomodoro-deep:    #9A1A1E;

  /* active flavour (overridden per section/page) */
  --accent: var(--carbonara);
  --field:  var(--carbonara-field);
  --field-deep: var(--carbonara-deep);

  --display: "Lora", Georgia, serif;
  --body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --script: "Parisienne", "Lora", cursive;

  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --stripe-w: 30px;   /* candy-stripe band width */
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--panna); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{   /* paper grain over everything */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("assets/grain.png"); background-size:160px; opacity:.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* branded text selection + scrollbar */
::selection{ background:var(--carbonara-field); color:var(--notte-deep); }
html{ scrollbar-color:var(--oro-soft) var(--panna-2); }
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--panna-2); }
::-webkit-scrollbar-thumb{ background:var(--oro-soft); border-radius:6px; border:3px solid var(--panna-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--oro); }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-family:var(--display); color:var(--notte); font-weight:600; line-height:1.04; }
em{ font-style:italic; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }

/* ---------- shared bits ---------- */
.eyebrow{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--oro); font-weight:700; margin:0 0 1.1rem; }
.eyebrow--light{ color:var(--oro-soft); }
.eyebrow--field{ color:var(--field-deep); }
.section-title{ font-size:clamp(2rem,5vw,3.4rem); margin-bottom:.4em; }
.section-title em{ color:var(--accent); }
.section-sub{ max-width:48ch; color:var(--ink); opacity:.9; margin:0 0 2rem; font-size:1.04rem; }

.btn{ font-family:var(--body); font-weight:700; cursor:pointer; border:none; }
.btn--pill{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5em; padding:.9em 1.8em; border-radius:999px; font-size:.92rem; letter-spacing:.02em; transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
/* light sweep across every pill on hover */
.btn--pill::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-20deg); pointer-events:none; }
.btn--pill:hover::after{ animation:sheen .7s var(--ease); }
@keyframes sheen{ from{ left:-60%; } to{ left:130%; } }
.btn--pill:active{ transform:translateY(0) scale(.97); }
.btn--solid{ background:var(--notte); color:var(--panna); box-shadow:0 12px 26px -12px rgba(22,48,107,.7); }
.btn--solid:hover{ transform:translateY(-2px); background:var(--accent); box-shadow:0 16px 30px -12px rgba(0,0,0,.4); }
.btn--solid:active{ transform:translateY(0); }
.btn--field{ background:var(--field-deep); color:#fff; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
.btn--field:hover{ transform:translateY(-2px); filter:brightness(1.06); }

.link-arrow{ font-weight:700; color:var(--notte); position:relative; padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease); }
.link-arrow::after{ content:" →"; color:var(--accent); display:inline-block; transition:transform .3s var(--ease); }
.link-arrow:hover{ background-size:100% 2px; }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ---- the candy ribbon: a thin tri-colour accent edge ---- */
.ribbon{
  height:10px;
  background:repeating-linear-gradient(90deg,
    var(--carbonara-field) 0 46px,
    var(--bolognese-field)  46px 92px,
    var(--pomodoro-field)   92px 138px);
  animation:ribbon-drift-138 18s linear infinite;
}
.ribbon--thin{ height:6px; }

/* the candy stripes drift slowly — one full period, so the loop is seamless */
@keyframes ribbon-drift-138{ to{ background-position-x:138px; } }
@keyframes ribbon-drift-120{ to{ background-position-x:120px; } }
@keyframes ribbon-drift-180{ to{ background-position-x:180px; } }

/* a full candy-stripe surface (vertical, like the box) — used sparingly */
.candy{
  background:repeating-linear-gradient(90deg,
    var(--field) 0 var(--stripe-w),
    var(--white-soft) var(--stripe-w) calc(var(--stripe-w) * 2));
}

/* ============================================================ HEADER */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease); }
.site-header.is-hidden{ transform:translateY(-100%); }
/* reading-progress hairline along the header's bottom edge */
.scroll-progress{ position:absolute; left:0; bottom:-3px; height:3px; width:100%; background:linear-gradient(90deg, var(--oro), var(--oro-soft)); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
.header-top{ height:6px;
  background:repeating-linear-gradient(90deg,
    var(--carbonara-field) 0 40px,
    var(--bolognese-field)  40px 80px,
    var(--pomodoro-field)   80px 120px);
  animation:ribbon-drift-120 16s linear infinite; }
.header-inner{ max-width:var(--maxw); margin-inline:auto; padding:14px clamp(20px,5vw,48px); display:flex; align-items:center; gap:22px; }
.site-header.is-scrolled{ background:rgba(252,247,238,.92); -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px); box-shadow:0 1px 0 var(--line); }
/* interior pages: keep the header readable from the top (the home hero stays transparent until scroll) */
body:not([data-page="home"]) .site-header{ background:rgba(252,247,238,.94); -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px); box-shadow:0 1px 0 var(--line); }

.wordmark{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.wordmark__name{ font-family:var(--display); font-style:italic; font-weight:600; font-size:1.55rem; color:var(--notte); }
.wordmark__sub{ font-family:var(--script); font-size:1.1rem; color:var(--oro); margin-top:.1em; line-height:1; }

.nav{ display:flex; gap:26px; }
.nav a{ font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--notte); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--carbonara-field); transition:width .3s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after{ width:100%; }
.nav a.is-current{ color:var(--carbonara); }
.nav a.is-current::after{ width:100%; background:var(--carbonara); }
.nav__account.is-authed{ color:var(--carbonara); }
.header-inner .nav__account{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lang{ display:inline-flex; align-items:center; gap:7px; color:var(--notte); }
/* the language switch sits apart from the nav, behind its own divider */
.lang--split{ border-left:1.5px solid var(--line); padding-left:18px; }

/* ---- the header language switch is a small dropdown ---- */
.lang-menu{ position:relative; }
.lang-menu__btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:var(--body); font-weight:700; font-size:.78rem; letter-spacing:.06em; color:var(--notte); padding:6px 2px; }
.lang-menu__btn svg{ opacity:.55; transition:transform .25s var(--ease); }
.lang-menu.is-open .lang-menu__btn svg{ transform:rotate(180deg); }
.lang-menu__list{ position:absolute; top:calc(100% + 10px); right:0; min-width:150px; background:var(--white-soft); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -24px rgba(14,40,80,.45); padding:6px; z-index:70; animation:fadeUp .25s var(--ease); }
.lang-menu__list[hidden]{ display:none; }
.lang-menu__list .lang__btn{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px; font-size:.8rem; letter-spacing:.03em; opacity:.75; text-decoration:none; }
.lang-menu__list .lang__btn:hover{ background:var(--panna-2); opacity:1; }
.lang-menu__list .lang__btn.is-active{ opacity:1; background:var(--panna-2); text-decoration:none; }
.lang-menu__list .lang__btn.is-active::after{ content:"✓"; float:right; color:var(--oro); }
.lang span{ opacity:.3; }
.lang__btn{ background:none; border:none; cursor:pointer; color:var(--notte); opacity:.42; font-family:var(--body); font-weight:700; font-size:.78rem; letter-spacing:.06em; padding:2px; transition:opacity .2s; }
.lang__btn:hover{ opacity:.8; }
.lang__btn.is-active{ opacity:1; text-decoration:underline; text-decoration-color:var(--oro); text-underline-offset:4px; text-decoration-thickness:2px; }

.nav__cta{ background:transparent; color:var(--notte); border:2px solid var(--notte); }
.nav__cta:hover{ background:var(--notte); color:var(--panna); transform:translateY(-2px); }
/* the pill doubles as the account button */
.nav__cta.is-authed{ border-color:var(--carbonara); color:var(--carbonara); }
.nav__cta.is-authed:hover{ background:var(--carbonara); color:#fff; }
.nav__cta.is-current{ background:var(--notte); color:var(--panna); }
.nav__cta.is-current.is-authed{ background:var(--carbonara); color:#fff; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; padding:8px; border:none; cursor:pointer; }
.nav-toggle span{ width:26px; height:2.5px; background:var(--notte); transition:transform .3s, opacity .3s; border-radius:2px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.mobile-nav{ position:fixed; inset:0; z-index:55; background:var(--panna); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; transform:translateY(-100%); transition:transform .45s var(--ease); }
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--display); font-size:2rem; color:var(--notte); padding:.3em; }
.mobile-nav a.is-current{ color:var(--carbonara); }
.lang--drawer{ margin-top:22px; }
.lang--drawer .lang__btn{ font-size:1.05rem; }

/* page-load fade for main */
main{ animation:pageIn .5s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ============================================================ HERO (home) */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden; }
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%; padding-inline:clamp(20px,5vw,48px); display:grid; grid-template-columns:1.02fr 1.05fr; gap:40px; align-items:center; }
.hero__title{ font-size:clamp(2.8rem,7vw,5.4rem); letter-spacing:-.01em; margin:.1em 0 .4em; }
.hero__title em{ color:var(--carbonara); }
.hero__lead{ font-size:1.1rem; max-width:42ch; color:var(--ink); opacity:.95; margin:0 0 2.2rem; }
.hero__actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* bold solid panel behind the boxes — the three flavour fields, side by side */
.hero__stage{ position:relative; height:clamp(360px,46vw,560px); display:flex; justify-content:center; align-items:flex-end; perspective:1200px; }
.hero__panel{ position:absolute; inset:6% 2% 10% 2%; border-radius:26px;
  background:linear-gradient(90deg,
    var(--carbonara-field) 0 33.34%,
    var(--bolognese-field) 33.34% 66.67%,
    var(--pomodoro-field) 66.67% 100%);
  box-shadow:0 40px 70px -38px rgba(14,48,90,.55); overflow:hidden; }
.hero__panel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
.hero__panel-ribbon{ position:absolute; left:0; right:0; bottom:0; height:14px; z-index:1;
  background:repeating-linear-gradient(90deg,
    var(--carbonara-field) 0 40px, var(--bolognese-field) 40px 80px, var(--pomodoro-field) 80px 120px);
  opacity:.95; animation:ribbon-drift-120 16s linear infinite; }
.box{ position:absolute; bottom:6%; width:clamp(180px,25vw,300px); filter:drop-shadow(0 30px 40px rgba(14,40,80,.34)); transition:transform .6s var(--ease), filter .4s var(--ease); will-change:transform; cursor:grab; z-index:2; }
.box img{ width:100%; }
.box--bolognese{ z-index:4; transform:translateZ(60px) rotate(-1deg); }
.box--carbonara{ z-index:3; left:6%;  transform:translateX(-44%) rotate(-8deg) scale(.9); }
.box--pomodoro{  z-index:3; right:6%; transform:translateX(44%)  rotate(8deg)  scale(.9); }
.box:hover{ filter:drop-shadow(0 40px 52px rgba(14,40,80,.42)); }
.box.is-dragging{ cursor:grabbing; transition:none; }

.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--carbonara); }
.scroll-cue svg{ animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* ============================================================ VALUES (dark navy band — a rest between colour fields) */
.values{ position:relative; background:var(--notte); color:#EAF6F6; padding:clamp(60px,8vw,100px) 0; overflow:hidden; }
.values .ribbon{ position:absolute; top:0; left:0; right:0; }
.values__grid{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; }
.value{ padding:10px clamp(18px,3vw,40px); position:relative; }
.value + .value{ border-left:1px solid rgba(255,255,255,.16); }
.value__num{ font-family:var(--display); font-size:1.2rem; font-weight:700; display:block; margin-bottom:.7rem; letter-spacing:.06em; }
.value:nth-child(1) .value__num{ color:var(--carbonara-field); }
.value:nth-child(2) .value__num{ color:var(--bolognese-field); }
.value:nth-child(3) .value__num{ color:var(--pomodoro-field); }
.value h3{ font-size:1.4rem; margin-bottom:.4rem; color:#fff; }
.value p{ margin:0; opacity:.86; font-size:.98rem; }
.value strong{ color:var(--pomodoro-field); font-weight:700; }

/* ============================================================ TEASER: meet the three (home) — bold colour-field cards */
.trio{ padding:clamp(64px,9vw,120px) 0; }
.trio__head{ text-align:center; margin-bottom:2.6rem; }
.trio__head .section-sub{ margin-inline:auto; }
.trio__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.flavour-card{ position:relative; display:block; border-radius:22px; overflow:hidden; background:var(--white-soft); border:1px solid var(--line); box-shadow:0 24px 48px -34px rgba(14,40,80,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.flavour-card:hover{ transform:translateY(-8px); box-shadow:0 36px 60px -34px rgba(14,40,80,.6); }
.flavour-card__top{ position:relative; height:300px; display:flex; align-items:flex-end; justify-content:center;
  background:var(--field); overflow:hidden; }
.flavour-card__top::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.flavour-card__top::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px;
  background:repeating-linear-gradient(90deg,var(--carbonara-field) 0 26px,var(--bolognese-field) 26px 52px,var(--pomodoro-field) 52px 78px); }
.flavour-card__top img{ width:80%; filter:drop-shadow(0 18px 24px rgba(14,40,80,.3)); transform:translateY(4%); transition:transform .5s var(--ease); position:relative; z-index:1; }
.flavour-card:hover .flavour-card__top img{ transform:translateY(0) scale(1.04); }
.flavour-card__body{ padding:22px 24px 26px; }
.flavour-card__over{ font-family:var(--display); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700; color:var(--accent); margin:0 0 .3rem; }
.flavour-card__name{ font-size:1.7rem; margin:0 0 .5rem; color:var(--accent); }
.flavour-card__desc{ margin:0 0 1rem; font-size:.95rem; opacity:.88; }
.flavour-card__cta{ font-weight:700; font-size:.86rem; color:var(--accent); }
.flavour-card__cta::after{ content:" →"; }
.flavour-card[data-accent="carbonara"]{ --accent:var(--carbonara-ink); --field:var(--carbonara-field); }
.flavour-card[data-accent="bolognese"]{ --accent:var(--bolognese-ink); --field:var(--bolognese-field); }
.flavour-card[data-accent="pomodoro"]{ --accent:var(--pomodoro-ink); --field:var(--pomodoro-field); }

/* ============================================================ CTA strip */
.cta-strip{ position:relative; background:var(--panna-2); padding:clamp(54px,7vw,84px) 0; text-align:center; overflow:hidden; }
.cta-strip .ribbon{ position:absolute; top:0; left:0; right:0; }
.cta-strip .ribbon--b{ top:auto; bottom:0; }
.cta-strip h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin:0 0 .4em; }
.cta-strip h2 em{ color:var(--pomodoro); }
.cta-strip p{ max-width:46ch; margin:0 auto 1.8rem; opacity:.9; }

/* ============================================================ PAGE HEADER (interior pages) — solid flavour field */
.page-head{ position:relative; padding:160px 0 56px; overflow:hidden; background:var(--field); }
.page-head .candy{ position:absolute; inset:0; opacity:.14; }
.page-head__inner{ position:relative; z-index:2; }
.page-head .eyebrow{ color:var(--accent); }
.page-head h1{ font-size:clamp(2.4rem,6vw,4rem); margin:.1em 0 .3em; color:var(--accent); }
.page-head h1 em{ color:var(--accent); }
.page-head p{ max-width:52ch; opacity:.92; font-size:1.06rem; color:var(--ink); }
.page-head[data-accent="carbonara"]{ --accent:var(--carbonara-ink); --field:var(--carbonara-field); --field-deep:var(--carbonara-deep); }
.page-head[data-accent="bolognese"]{ --accent:var(--bolognese-ink); --field:var(--bolognese-field); --field-deep:var(--bolognese-deep); }
.page-head[data-accent="pomodoro"]{ --accent:var(--pomodoro-ink); --field:var(--pomodoro-field); --field-deep:var(--pomodoro-deep); }

/* ============================================================ STORY (dark dramatic act) */
.story{ position:relative; background:var(--notte-deep); color:#E9E2D2; padding:clamp(130px,15vw,180px) 0 clamp(72px,11vw,140px); overflow:hidden; }
.story .ribbon{ position:absolute; top:0; left:0; right:0; }
.story__stripes{ position:absolute; inset:0 auto 0 0; width:46%; pointer-events:none; opacity:.07;
  background:repeating-linear-gradient(90deg,#fff 0 3px, transparent 3px 30px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent); mask-image:linear-gradient(90deg,#000,transparent); }
.story__inner{ position:relative; z-index:2; padding-top:18px; }
.story__title{ color:var(--panna); font-size:clamp(2.2rem,5.5vw,3.8rem); }
.story__cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:2.6rem 0; max-width:920px; }
.story__cols p{ margin:0; color:#D7D0BF; font-size:1.04rem; }
.pull-quote{ font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,3.5vw,2.4rem); color:var(--panna); margin:2.4rem 0 2.8rem; max-width:26ch; line-height:1.3; padding-left:26px; border-left:3px solid var(--oro); }
.pull-quote cite{ display:block; font-style:normal; font-family:var(--body); font-size:.8rem; letter-spacing:.04em; color:var(--oro-soft); margin-top:1rem; }
.timeline{ display:flex; flex-wrap:wrap; gap:14px; }
.timeline li{ display:flex; flex-direction:column; gap:.2em; font-size:.82rem; color:#C9C2B0; padding:16px 24px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(203,168,111,.3); transition:transform .3s var(--ease), border-color .3s, background .3s; }
.timeline li:hover{ transform:translateY(-4px); border-color:var(--oro); background:rgba(255,255,255,.08); }
.timeline li em{ font-style:normal; }
.timeline li:nth-child(1) span{ color:var(--carbonara-field); }
.timeline li:nth-child(2) span{ color:var(--bolognese-field); }
.timeline li:nth-child(3) span{ color:var(--pomodoro-field); }
.timeline span{ font-family:var(--display); font-size:1.3rem; }

/* ============================================================ PRODUCTS (solid flavour field per selection) */
.lineup{ position:relative; padding:clamp(40px,6vw,72px) 0 clamp(64px,10vw,120px);
  --accent:var(--carbonara-ink); --field:var(--carbonara-field); --field-deep:var(--carbonara-deep); }
.lineup[data-accent="carbonara"]{ --accent:var(--carbonara-ink); --field:var(--carbonara-field); --field-deep:var(--carbonara-deep); }
.lineup[data-accent="bolognese"]{ --accent:var(--bolognese-ink); --field:var(--bolognese-field); --field-deep:var(--bolognese-deep); }
.lineup[data-accent="pomodoro"]{ --accent:var(--pomodoro-ink); --field:var(--pomodoro-field); --field-deep:var(--pomodoro-deep); }

.lineup__tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:2.6rem; }
.tab{ background:var(--white-soft); font-family:var(--body); font-weight:700; font-size:.95rem; color:var(--notte); padding:.72em 1.6em; border-radius:999px; border:2px solid var(--line); cursor:pointer; transition:all .3s var(--ease); }
.tab:hover{ transform:translateY(-2px); }
.tab:active{ transform:translateY(0) scale(.97); }
.tab[data-target="p-carbonara"]:hover{ border-color:var(--carbonara); color:var(--carbonara); }
.tab[data-target="p-bolognese"]:hover{ border-color:var(--bolognese); color:var(--bolognese); }
.tab[data-target="p-pomodoro"]:hover{ border-color:var(--pomodoro); color:var(--pomodoro); }
.tab.is-active{ color:#fff; border-color:transparent; }
.tab[data-target="p-carbonara"].is-active{ background:var(--carbonara); }
.tab[data-target="p-bolognese"].is-active{ background:var(--bolognese); }
.tab[data-target="p-pomodoro"].is-active{ background:var(--pomodoro); }

.lineup__stage{ border-radius:28px; padding:clamp(28px,4vw,56px); position:relative; overflow:hidden;
  background:var(--field); border:1px solid rgba(255,255,255,.45);
  box-shadow:0 40px 80px -50px rgba(14,40,80,.5); transition:background .5s var(--ease); }
.lineup__stage::before{ content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:repeating-linear-gradient(90deg, var(--carbonara-field) 0 30px, var(--bolognese-field) 30px 60px, var(--pomodoro-field) 60px 90px); opacity:.95; }

.product{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(24px,4vw,56px); align-items:center; }
.product[hidden]{ display:none; }
.product.is-active{ animation:fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.product__media{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:clamp(320px,34vw,420px); }
.product__panel{ position:absolute; inset:6% 8% 6% 8%; border-radius:22px;
  background:rgba(255,255,255,.42);
  box-shadow:0 28px 54px -30px rgba(14,40,80,.5); overflow:hidden; }
.product__panel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:repeating-linear-gradient(90deg, var(--carbonara-field) 0 30px, var(--bolognese-field) 30px 60px, var(--pomodoro-field) 60px 90px); opacity:.92; }
.product__media img{ width:min(340px,82%); filter:drop-shadow(0 26px 34px rgba(14,40,80,.32)); position:relative; z-index:2; }

.product__over{ font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; font-weight:700; color:var(--accent); margin:0 0 .5rem; transition:color .5s var(--ease); }
.product__name{ font-size:clamp(2rem,4.5vw,3rem); margin:0 0 .7rem; color:var(--accent); transition:color .5s var(--ease); }
.product__desc{ margin:0 0 1.6rem; max-width:46ch; color:var(--ink); }
.product__heart{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .8rem; opacity:.85; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.8rem; }
.chips li{ font-size:.84rem; font-weight:600; padding:.45em 1em; border-radius:999px; background:#fff; border:1.5px solid rgba(255,255,255,.9); color:var(--notte); display:inline-flex; align-items:center; gap:.5em; box-shadow:0 6px 16px -10px rgba(14,40,80,.4); }
.chips li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); transition:background .5s var(--ease); }
.badges{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.badges li{ font-size:.74rem; letter-spacing:.04em; color:var(--ink); position:relative; padding-left:18px; }
.badges li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--accent); transition:background .5s var(--ease); }

/* ---- order buttons (products page → shop) ---- */
.btn-order{ display:inline-flex; align-items:center; gap:.55em; margin-top:1.8rem; padding:.78em 1.6em; border-radius:999px; color:#fff; background:var(--accent); font-family:var(--body); font-weight:700; font-size:.88rem; transition:transform .25s var(--ease), filter .25s, background .5s var(--ease); box-shadow:0 12px 24px -14px rgba(0,0,0,.6); }
.btn-order:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-order:active{ transform:translateY(0) scale(.97); }
.btn-order svg{ transition:transform .3s var(--ease); }
.btn-order:hover svg{ transform:translateY(-2px) rotate(-8deg); }
.btn-order svg{ flex:0 0 auto; }
.page-head__cta{ margin-top:1.4rem; }

/* ============================================================ SHOP */
.shop{ padding:clamp(40px,6vw,72px) 0 clamp(64px,10vw,128px); }
.shop__inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start; }
.shop__cards{ display:grid; gap:clamp(18px,2.4vw,28px); }

.shop-card{ display:grid; grid-template-columns:.82fr 1.18fr; border-radius:22px; overflow:hidden; background:var(--white-soft); border:1px solid var(--line); box-shadow:0 24px 48px -34px rgba(14,40,80,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  --accent:var(--carbonara-ink); --field:var(--carbonara-field); }
.shop-card[data-accent="bolognese"]{ --accent:var(--bolognese-ink); --field:var(--bolognese-field); }
.shop-card[data-accent="pomodoro"]{ --accent:var(--pomodoro-ink); --field:var(--pomodoro-field); }
.shop-card:hover{ transform:translateY(-4px); box-shadow:0 36px 60px -34px rgba(14,40,80,.6); }
.shop-card.is-flash{ outline:3px solid var(--accent); outline-offset:3px; }

.shop-card__media{ position:relative; display:flex; align-items:flex-end; justify-content:center; background:var(--field); min-height:210px; overflow:hidden; }
.shop-card__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.shop-card__media img{ width:76%; filter:drop-shadow(0 16px 22px rgba(14,40,80,.3)); transform:translateY(5%); position:relative; z-index:1; transition:transform .5s var(--ease); }
.shop-card:hover .shop-card__media img{ transform:translateY(2%) scale(1.03); }

.shop-card__body{ padding:20px 24px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
.shop-card__over{ font-family:var(--display); text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; font-weight:700; color:var(--accent); margin:0; }
.shop-card__name{ font-size:1.65rem; margin:0; color:var(--accent); }
.shop-card__price{ margin:.2rem 0 .9rem; font-family:var(--display); font-size:1.25rem; font-weight:700; color:var(--notte); }
.shop-card__price span{ font-family:var(--body); font-size:.76rem; font-weight:600; opacity:.65; margin-left:.35em; }

.qty{ display:inline-flex; align-items:center; gap:14px; border:2px solid var(--line); border-radius:999px; padding:5px 8px; background:#fff; }
.qty__btn{ width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:1.2rem; line-height:1; font-weight:700; cursor:pointer; transition:filter .2s, transform .2s; display:grid; place-items:center; touch-action:manipulation; }
.qty__btn:hover{ filter:brightness(1.1); transform:scale(1.06); }
.qty__btn:active{ transform:scale(.94); }
.qty__val{ min-width:2ch; text-align:center; font-weight:700; font-size:1.05rem; color:var(--notte); }
.qty__val.pop{ animation:bump .35s var(--ease); }

.shop-summary{ position:sticky; top:110px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,36px); box-shadow:0 36px 70px -40px rgba(14,40,80,.4); overflow:hidden; }
.shop-summary::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,var(--carbonara-field) 0 22px,var(--bolognese-field) 22px 44px,var(--pomodoro-field) 44px 66px); }
.shop-summary__list{ display:grid; gap:8px; margin:0 0 1.1rem; }
.shop-summary__list li{ display:flex; justify-content:space-between; gap:14px; font-size:.95rem; color:var(--notte); padding:8px 0; border-bottom:1px solid var(--line); }
.shop-summary__list li em{ font-style:normal; font-weight:700; }
.shop-summary__empty{ opacity:.65; font-size:.9rem; border-bottom:none !important; }
.shop-summary__total{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 1.4rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); font-weight:700; }
.shop-summary__total strong{ display:inline-block; font-family:var(--display); font-size:1.7rem; letter-spacing:0; color:var(--notte); }
.shop-summary__total strong.bump{ animation:bump .4s var(--ease); }
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.14);} 100%{ transform:scale(1);} }
.shop-summary label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; font-weight:700; }
.shop-summary input{ width:100%; margin-top:7px; font-family:var(--body); font-size:1rem; color:var(--notte); padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--panna); transition:border-color .25s, box-shadow .25s; }
.shop-summary input:hover{ border-color:var(--oro-soft); }
.shop-summary input:focus{ outline:none; border-color:var(--carbonara); box-shadow:0 0 0 3px rgba(116,207,208,.3); }
.shop-summary .btn{ margin-top:6px; width:100%; justify-content:center; }
.shop-summary .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.shop-summary__hint{ font-size:.8rem; opacity:.7; margin:1.1rem 0 0; }

/* ============================================================ EXPERIENCE / VIDEOS */
.experience{ position:relative; background:var(--panna-2); padding:clamp(64px,10vw,120px) 0; overflow:hidden; }
.experience .ribbon{ position:absolute; top:0; left:0; right:0; }
.experience__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,72px); align-items:center; }
.steps{ display:flex; flex-direction:column; gap:18px; margin-top:1rem; }
.steps li{ display:flex; align-items:flex-start; gap:16px; font-size:1.04rem; color:var(--ink); }
.steps li em{ font-style:normal; }
.steps span{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; color:#fff; font-size:1rem; }
.steps li:nth-child(1) span{ background:var(--carbonara); }
.steps li:nth-child(2) span{ background:var(--bolognese); }
.steps li:nth-child(3) span{ background:var(--pomodoro); }
.experience__qr{ display:flex; justify-content:center; }
.qr-card{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; text-align:center; box-shadow:0 36px 70px -34px rgba(14,40,80,.45); transform:rotate(2deg); transition:transform .4s var(--ease); }
.qr-card::before{ content:""; display:block; height:10px; border-radius:5px; margin:-8px -8px 18px;
  background:repeating-linear-gradient(90deg,var(--carbonara-field) 0 22px,var(--bolognese-field) 22px 44px,var(--pomodoro-field) 44px 66px); }
.qr-card:hover{ transform:rotate(0); }
.qr-card img{ width:208px; height:208px; margin:0 auto 14px; }
.qr-card p{ margin:0; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oro); font-weight:700; }

/* ---- videos section (bottom of the products page) ---- */
#videos{ scroll-margin-top:92px; }
.exp-head{ text-align:center; margin-bottom:clamp(2rem,4vw,2.8rem); }
.exp-head .section-sub{ margin-inline:auto; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-bottom:clamp(40px,6vw,64px); }
.video-card{ font-family:var(--body); cursor:pointer; padding:0; text-align:left; background:var(--white-soft); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 24px 48px -34px rgba(14,40,80,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  --accent:var(--carbonara-ink); --field:var(--carbonara-field); }
.video-card[data-accent="bolognese"]{ --accent:var(--bolognese-ink); --field:var(--bolognese-field); }
.video-card[data-accent="pomodoro"]{ --accent:var(--pomodoro-ink); --field:var(--pomodoro-field); }
.video-card:hover{ transform:translateY(-6px); box-shadow:0 36px 60px -34px rgba(14,40,80,.6); }
.video-card__media{ position:relative; display:flex; align-items:flex-end; justify-content:center; height:210px; background:var(--field); overflow:hidden; }
.video-card__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.video-card__media img{ width:64%; filter:drop-shadow(0 16px 22px rgba(14,40,80,.3)); transform:translateY(6%); position:relative; z-index:1; transition:transform .5s var(--ease); }
.video-card:hover .video-card__media img{ transform:translateY(2%) scale(1.04); }
.video-card__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; box-shadow:0 12px 26px -8px rgba(0,0,0,.45); transition:transform .25s var(--ease); }
.video-card__play::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.85); opacity:0; }
.video-card:hover .video-card__play{ transform:translate(-50%,-50%) scale(1.09); }
.video-card:hover .video-card__play::after{ animation:ping 1.2s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(1.55); opacity:0; } }
.video-card__play svg{ margin-left:3px; color:var(--accent); }
.video-card__label{ display:block; font-family:var(--display); font-size:1.3rem; color:var(--accent); padding:14px 20px 18px; }

/* ============================================================ CONTACT */
.contact{ padding:clamp(40px,6vw,72px) 0 clamp(64px,10vw,128px); }
.contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); }
.contact__details{ margin-top:1.4rem; display:grid; gap:2px; }
.contact__details > div{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:14px 0; border-bottom:1px solid var(--line); }
.contact__details dt{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); width:150px; padding-top:5px; font-weight:700; }
.contact__details dd{ margin:0; font-size:1.12rem; color:var(--notte); font-family:var(--display); }
.contact__details a{ transition:color .25s; }
.contact__details a:hover{ color:var(--carbonara); }
.contact__form{ position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,40px); box-shadow:0 36px 70px -40px rgba(14,40,80,.4); overflow:hidden; }
.contact__form::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,var(--carbonara-field) 0 22px,var(--bolognese-field) 22px 44px,var(--pomodoro-field) 44px 66px); }
.form-eyebrow{ font-family:var(--script); font-size:1.9rem; color:var(--notte); margin:.4rem 0 1.2rem; }
.contact__form label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; font-weight:700; }
.contact__form input, .contact__form textarea{ width:100%; margin-top:7px; font-family:var(--body); font-size:1rem; color:var(--notte); padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--panna); transition:border-color .25s, box-shadow .25s; }
.contact__form input:hover, .contact__form textarea:hover{ border-color:var(--oro-soft); }
.contact__form input:focus, .contact__form textarea:focus{ outline:none; border-color:var(--carbonara); box-shadow:0 0 0 3px rgba(116,207,208,.3); }
.contact__form textarea{ resize:vertical; }
.contact__form .btn{ margin-top:6px; width:100%; justify-content:center; }
.form-note{ font-size:.85rem; margin:1rem 0 0; min-height:1.2em; color:var(--bolognese); font-weight:600; }

/* ============================================================ FOOTER */
.site-footer{ background:var(--notte-deep); color:#D0C9B7; }
.footer-stripe{ height:6px;
  background:repeating-linear-gradient(90deg, var(--carbonara-field) 0 60px, var(--bolognese-field) 60px 120px, var(--pomodoro-field) 120px 180px);
  animation:ribbon-drift-180 22s linear infinite; }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 40px; padding-top:48px; padding-bottom:20px; }
.footer__brand{ display:flex; flex-direction:column; line-height:1; }
.footer__brand .wordmark__name{ color:var(--panna); font-size:1.5rem; font-family:var(--display); font-style:italic; }
.footer__brand .wordmark__sub{ font-family:var(--script); color:var(--oro-soft); font-size:1.15rem; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer__nav a{ font-size:.82rem; letter-spacing:.04em; color:#C9C2B0; transition:color .25s; }
.footer__nav a:hover{ color:var(--carbonara-field); }
.footer__tag{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:#E9E2D2; margin:0 auto 0 0; }
.footer__social{ display:flex; gap:24px; }
.footer__social a{ font-size:.82rem; letter-spacing:.06em; transition:color .25s; }
.footer__social a:hover{ color:var(--oro-soft); }
.footer__legal{ font-size:.74rem; letter-spacing:.06em; color:#8F8A78; padding-bottom:32px; margin:0 auto; }

/* ============================================================ VIDEO MODAL */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(10,18,38,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.modal__panel{ position:relative; z-index:1; width:min(560px,100%); background:#000; border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); animation:fadeUp .35s var(--ease); }
.modal__panel video{ width:100%; display:block; max-height:82vh; background:#000; }
.modal__close{ position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.94); color:var(--notte-deep); font-size:1.6rem; line-height:1; cursor:pointer; transition:transform .2s; }
.modal__close:hover{ transform:scale(1.08) rotate(90deg); }

/* ============================================================ REVEAL */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* staggered reveal for card grids: children follow one another in */
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.24s; }
.reveal-stagger.is-visible > *:nth-child(n+4){ transition-delay:.36s; }

/* ============================================================ RESPONSIVE */
/* mid widths: compact the header so nav + account pill + language all fit */
@media (max-width:1080px){
  .header-inner{ gap:16px; }
  .nav{ gap:18px; }
  .nav__cta{ padding:.7em 1.25em; font-size:.85rem; }
  .lang--split{ padding-left:13px; }
}
/* below 760px the header collapses into the drawer */
@media (max-width:760px){
  .nav, .nav__cta, .header-inner > .lang{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:920px){
  .hero__inner{ grid-template-columns:1fr; gap:10px; }
  .hero{ padding-top:130px; min-height:auto; }
  .hero__stage{ height:clamp(330px,72vw,460px); margin-top:14px; }
  .story__cols{ grid-template-columns:1fr; gap:18px; }
  .trio__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .video-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .product{ grid-template-columns:1fr; text-align:center; }
  .product__media{ min-height:auto; }
  .product__desc, .lineup__head .section-sub{ margin-inline:auto; }
  .chips, .badges{ justify-content:center; }
  .shop__inner{ grid-template-columns:1fr; }
  .shop-summary{ position:static; }
  .experience__inner, .contact__inner{ grid-template-columns:1fr; }
  .contact__details dt{ width:auto; }
}
@media (max-width:680px){
  .values__grid{ grid-template-columns:1fr; gap:4px; }
  .value + .value{ border-left:none; border-top:1px solid rgba(255,255,255,.16); padding-top:24px; margin-top:8px; }
  .box{ width:clamp(150px,46vw,210px); }
  .box--carbonara{ transform:translateX(-38%) rotate(-8deg) scale(.84); }
  .box--pomodoro{ transform:translateX(38%) rotate(8deg) scale(.84); }
  .hero__title{ font-size:clamp(2.6rem,12vw,3.6rem); }
  .shop-card{ grid-template-columns:1fr; }
  .shop-card__media{ min-height:180px; }
  .shop-card__body{ align-items:center; text-align:center; }
}

/* small phones (≤420px): tighter chrome, same hierarchy */
@media (max-width:420px){
  .container{ padding-inline:16px; }
  .header-inner{ padding:12px 16px; gap:14px; }
  .wordmark__name{ font-size:1.35rem; }
  .wordmark__sub{ font-size:.95rem; }
  .page-head{ padding:128px 0 44px; }
  .lineup__stage{ padding:22px 16px; border-radius:20px; }
  .tab{ font-size:.85rem; padding:.65em 1.2em; }
  .qr-card{ padding:20px; }
  .qr-card img{ width:164px; height:164px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer__tag{ margin:0; }
  .shop-summary{ padding:20px 16px; }
  .btn-order{ width:100%; justify-content:center; }
}

/* short landscape phones: don't let fixed chrome eat the screen */
@media (max-height:540px) and (orientation:landscape){
  .hero{ min-height:auto; padding:120px 0 60px; }
  .page-head{ padding:118px 0 36px; }
  .mobile-nav{ gap:0; }
  .mobile-nav a{ font-size:1.4rem; padding:.2em; }
  .lang--drawer{ margin-top:12px; }
}

/* notched devices: keep content clear of the safe areas */
@supports (padding: env(safe-area-inset-left)){
  .header-inner{ padding-left:calc(clamp(20px,5vw,48px) + env(safe-area-inset-left)); padding-right:calc(clamp(20px,5vw,48px) + env(safe-area-inset-right)); }
  .container{ padding-left:calc(clamp(20px,5vw,48px) + env(safe-area-inset-left)); padding-right:calc(clamp(20px,5vw,48px) + env(safe-area-inset-right)); }
  .mobile-nav{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
}

/* touch screens: no lift-on-hover states left "stuck" after a tap */
@media (hover:none){
  .flavour-card:hover, .video-card:hover, .shop-card:hover{ transform:none; box-shadow:0 24px 48px -34px rgba(14,40,80,.5); }
  .tab:hover{ transform:none; }
  .qty__btn:hover{ transform:none; filter:none; }
  .timeline li:hover{ transform:none; }
  .video-card:hover .video-card__play::after{ animation:none; }
  .flavour-card:hover .flavour-card__top img{ transform:translateY(4%); }
  .video-card:hover .video-card__media img{ transform:translateY(6%); }
  .shop-card:hover .shop-card__media img{ transform:translateY(5%); }
  .video-card:hover .video-card__play{ transform:translate(-50%,-50%); }
  .qr-card:hover{ transform:rotate(2deg); }
  .box:hover{ filter:drop-shadow(0 30px 40px rgba(14,40,80,.34)); }
}

/* ============================================================ MOTION / A11Y */
:focus-visible{ outline:2px solid var(--carbonara); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:1; transform:none; }
  .site-header.is-hidden{ transform:none; }
  .scroll-cue svg{ animation:none; }
  main{ animation:none; }
}