/* ═══════════════════════════════════════════════════════════
   FLAVY — shared stylesheet
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family:'FlavyTitel'; src:url('../../fonts/Flavy/Flavy_titel/Flavy_titel.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'FlavySub';   src:url('../../fonts/Flavy/Flavy_subtitel/Flavy_subtitel.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../../fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight:200 1000; font-display:swap; }

:root {
  --brown:   #360C1D;
  --brown-2: #4a1429;
  --orange:  #E84E0F;
  --orange-d:#c93f08;
  --red:     #E52421;
  --yellow:  #FFC200;
  --green:   #A2C629;
  --dkgreen: #005C00;
  --white:   #FFFFFF;
  --ink:     #1d0610;

  --fh: 'FlavyTitel', 'Nunito', sans-serif;   /* big titles */
  --fs: 'FlavySub', 'Nunito', sans-serif;     /* subtitles, buttons, labels */
  --fb: 'Nunito', system-ui, sans-serif;      /* body */

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 22px;
  --slant-h: clamp(22px, 3.2vw, 48px);       /* softer than the old 90px slants */
  --nav-h: 52px;
  --title-size: clamp(1.9rem, 4.2vw, 3rem); /* every section title uses this */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--fb); font-weight:400; background:var(--brown); color:var(--white); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection { background:var(--orange); color:var(--white); }
:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.center { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Type ───────────────────────────────────────────────── */
.t-display { font-family:var(--fh); text-transform:uppercase; line-height:.92; letter-spacing:.02em; }
.t-title   { font-family:var(--fh); text-transform:uppercase; line-height:1; letter-spacing:.03em; font-size:var(--title-size); }
.t-sub     { font-family:var(--fs); line-height:1.1; }
.t-body    { font-size:clamp(.98rem, 1.2vw, 1.06rem); line-height:1.7; color:rgba(255,255,255,.88); }
.t-body p + p { margin-top:1em; }
.t-eyebrow { font-family:var(--fs); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fs); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; line-height:1; padding:14px 28px; min-height:46px; border-radius:12px; border:2.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease-pop), background .15s, color .15s, border-color .15s; white-space:nowrap; }
.btn:hover { transform:translateY(-3px) rotate(-1.5deg); }
.btn:active { transform:translateY(0) rotate(0); }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.btn--orange  { background:var(--orange); color:var(--white); }
.btn--orange:hover { background:var(--orange-d); }
.btn--outline { border-color:var(--orange); color:var(--orange); }
.btn--outline:hover { background:var(--orange); color:var(--white); }
.btn--white-outline { border-color:rgba(255,255,255,.85); color:var(--white); }
.btn--white-outline:hover { background:var(--white); color:var(--brown); }
.btn--green   { background:var(--green); color:var(--dkgreen); }
.btn--green:hover { background:#b4d93a; }
.btn--dkgreen { background:var(--dkgreen); color:var(--white); }
.btn--dkgreen:hover { background:#007300; }
.btn--yellow  { background:var(--yellow); color:var(--brown); }
.btn--brown   { background:var(--brown); color:var(--white); }
.btn--white   { background:var(--white); color:var(--th-bg, var(--brown)); }
/* Add to cart: one trustworthy blue everywhere, so it stands out from the brand colours */
.btn--cart    { background:#1D5FD1; color:var(--white); }
.btn--cart:hover { background:#174FB0; }
.btn--brown:hover { background:var(--brown-2); }
.btn--sm { padding:10px 18px; min-height:38px; font-size:.78rem; border-radius:10px; }
.btn--block { width:100%; }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; }
.btn-row.center { justify-content:center; }

/* ── Slanted transitions between blocks ─────────────────── */
/* <div class="slant" style="--a:#from;--b:#to"></div> — rises left→right; .slant--rev rises right→left */
.slant { height:var(--slant-h); margin:-1px 0; position:relative; z-index:2;
  background:linear-gradient(to bottom right, var(--a) calc(50% - .6px), var(--b) calc(50% + .6px)); }
.slant--rev { background:linear-gradient(to bottom left, var(--a) calc(50% - .6px), var(--b) calc(50% + .6px)); }
.slant--overlay { position:absolute; left:0; right:0; bottom:-1px; margin:0; --a:transparent; }
.slant--overlay-top { position:absolute; left:0; right:0; top:-1px; margin:0; --b:transparent; }

/* ── Icon masks (brand icons are white SVGs; tint with currentColor) ── */
.ico { display:inline-block; width:1em; height:1em; background:currentColor; -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat; flex-shrink:0; }
.ico--ig     { --src:url('../img/icons/instagram.svg'); }
.ico--tt     { --src:url('../img/icons/tiktok.svg'); }
.ico--clock  { --src:url('../img/icons/clock.svg'); }
.ico--pepper { --src:url('../img/icons/pepper.svg'); }
.ico--nsa    { --src:url('../img/icons/no-shit-added.svg'); }

/* ═══ NAV ═══════════════════════════════════════════════ */
.nav { position:fixed; top:12px; left:12px; right:12px; z-index:200; height:var(--nav-h); max-width:1400px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:0 8px 0 10px; border-radius:999px; background:var(--orange);
  box-shadow:0 10px 30px rgba(0,0,0,.22); transition:transform .35s var(--ease-out); }
.nav.is-hidden { transform:translateY(calc(-100% - 20px)); }
.nav-menu { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:999px; font-family:var(--fs); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; transition:background .15s; }
.nav-menu:hover { background:rgba(0,0,0,.12); }
.burger { width:22px; display:flex; flex-direction:column; gap:4px; }
.burger i { display:block; height:2.5px; border-radius:2px; background:currentColor; }
.nav-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:opacity .3s; }
.nav-logo img { height:24px; width:auto; }
.nav--home:not(.is-scrolled) .nav-logo { opacity:0; pointer-events:none; }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:4px; list-style:none; font-family:var(--fs); font-size:.9rem; }
.nav-links li + li::before { content:'-'; margin:0 6px 0 2px; opacity:.85; }
.nav-links a { padding:6px 4px; transition:color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--brown); }
.nav-tools { display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-lang { font-family:var(--fs); font-size:.8rem; letter-spacing:.06em; height:40px; min-width:40px; border-radius:999px; transition:background .15s; }
.nav-lang:hover { background:rgba(0,0,0,.12); }
.nav-cart { position:relative; width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background:var(--brown); transition:transform .25s var(--ease-pop); }
.nav-cart:hover { transform:scale(1.08) rotate(-4deg); }
.nav-cart svg { width:20px; height:20px; }
.nav-cart .ico { font-size:25px; color:var(--white); }
.cart-count { position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--yellow); color:var(--brown); font-family:var(--fs); font-size:.7rem; display:grid; place-items:center; transform:scale(0); transition:transform .3s var(--ease-pop); }
.cart-count.has-items { transform:scale(1); }
.cart-count.bump { animation:bump .4s var(--ease-pop); }
@keyframes bump { 50% { transform:scale(1.4); } }

/* .nav--compact is set by site.js when the links would run into the centred logo */
.nav--compact .nav-links { display:none; }
.nav--compact .nav-tools { margin-left:auto; }
@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav-tools { margin-left:auto; }
  .nav-menu > span:last-child { display:none; }
  .nav-menu { padding:0 10px; }
}

/* ── Full-screen menu ── */
.menu { position:fixed; inset:0; z-index:300; background:var(--brown); display:flex; flex-direction:column; padding:84px var(--gutter) 32px; overflow-y:auto;
  clip-path:circle(0 at 40px 38px); visibility:hidden; transition:clip-path .55s var(--ease-out), visibility 0s .55s; }
.menu.is-open { clip-path:circle(150% at 40px 38px); visibility:visible; transition:clip-path .6s var(--ease-out); }
.menu-close { position:absolute; top:18px; left:18px; height:44px; padding:0 16px; border-radius:999px; background:var(--orange); font-family:var(--fs); text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; display:flex; align-items:center; gap:10px; }
.menu-close b { font-size:1.2rem; line-height:1; }
.menu-inner { width:100%; max-width:var(--wrap); margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.menu-links { list-style:none; display:flex; flex-direction:column; gap:4px; }
.menu-links a { font-family:var(--fh); text-transform:uppercase; font-size:clamp(2.4rem, 7vw, 4.6rem); line-height:1.05; color:var(--white); display:inline-block; transition:color .15s, transform .3s var(--ease-pop); }
.menu-links a:hover { color:var(--orange); transform:translateX(8px) rotate(-1.5deg); }
.menu-flavors { display:grid; gap:12px; }
.menu-flavor { display:flex; align-items:center; gap:16px; padding:10px; border-radius:18px; background:rgba(255,255,255,.06); transition:background .2s, transform .3s var(--ease-pop); }
.menu-flavor:hover { background:rgba(255,255,255,.12); transform:translateX(-6px); }
.menu-flavor img { width:72px; height:72px; object-fit:cover; border-radius:12px; }
.menu-flavor strong { font-family:var(--fh); text-transform:uppercase; font-size:1.3rem; display:block; line-height:1; }
.menu-flavor small { font-size:.85rem; color:rgba(255,255,255,.6); }
.menu-foot { max-width:var(--wrap); width:100%; margin:32px auto 0; display:flex; gap:20px; align-items:center; font-family:var(--fs); font-size:.85rem; color:rgba(255,255,255,.7); }
.menu-foot a { display:flex; align-items:center; gap:8px; }
.menu-foot .ico { font-size:1.4rem; }
@media (max-width: 760px) {
  .menu-inner { grid-template-columns:1fr; gap:32px; margin:0; }
}

/* ── Cart drawer (cosmetic for now — see assets/js/cart.js) ── */
.drawer-backdrop { position:fixed; inset:0; z-index:400; background:rgba(20,4,10,.55); opacity:0; pointer-events:none; transition:opacity .3s; }
.drawer-backdrop.is-open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:401; width:min(420px, 100%); background:var(--brown); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s var(--ease-out); box-shadow:-20px 0 60px rgba(0,0,0,.35); }
.drawer.is-open { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-head h2 { font-family:var(--fh); text-transform:uppercase; font-size:1.7rem; color:var(--orange); line-height:1; }
.drawer-x { width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.08); font-size:1.1rem; }
.drawer-body { flex:1; overflow-y:auto; padding:8px 20px; }
.drawer-empty { text-align:center; padding:56px 8px; color:rgba(255,255,255,.65); }
.drawer-empty img { width:140px; margin:0 auto 18px; opacity:.95; }
.drawer-empty .btn { margin-top:18px; }
.c-line { display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.c-thumb { width:72px; height:72px; border-radius:14px; display:block; padding:7px; overflow:hidden; }
.c-thumb img { width:100%; height:100%; object-fit:contain; }
.c-name { font-family:var(--fs); font-size:1rem; line-height:1.15; }
.c-meta { font-size:.82rem; color:rgba(255,255,255,.6); }
.c-price { font-family:var(--fs); }
.qty { display:inline-flex; align-items:center; border:2px solid rgba(255,255,255,.25); border-radius:10px; height:36px; margin-top:6px; }
.qty button { width:32px; height:100%; font-size:1.05rem; }
.qty output { min-width:24px; text-align:center; font-family:var(--fs); font-size:.9rem; }
.drawer-foot { padding:18px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.12); }
.drawer-total { display:flex; justify-content:space-between; font-family:var(--fs); font-size:1.1rem; margin-bottom:12px; }
.drawer-note { font-size:.8rem; color:rgba(255,255,255,.55); text-align:center; margin-top:10px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:500; transform:translate(-50%, 140%); background:var(--yellow); color:var(--brown); font-family:var(--fs); padding:12px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .4s var(--ease-pop); white-space:nowrap; }
.toast.is-on { transform:translate(-50%, 0); }

/* ═══ SHARED SECTIONS ═══════════════════════════════════ */
.section { padding:clamp(56px, 8vw, 100px) 0; position:relative; }
.section-head { text-align:center; margin-bottom:clamp(28px, 4vw, 48px); }
.bg-brown  { background:var(--brown); }
.bg-orange { background:var(--orange); }
.bg-red    { background:var(--red); }
.bg-dkgreen{ background:var(--dkgreen); }
.c-orange { color:var(--orange); } .c-yellow { color:var(--yellow); } .c-green { color:var(--green); } .c-brown { color:var(--brown); }

/* Cards (flavor / recipe cards, as in the sketch: photo on top, orange body) */
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 24px); }
.card { display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--orange); transition:transform .45s var(--ease-pop), box-shadow .45s; }
.card:hover { transform:translateY(-10px) rotate(-1deg); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.card-photo { aspect-ratio:1/1; overflow:hidden; background:var(--brown-2); }
.card-photo img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.card:hover .card-photo img { transform:scale(1.06); }
.card-body { padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--fh); text-transform:uppercase; font-size:clamp(1.3rem, 2vw, 1.65rem); line-height:1; margin-bottom:10px; }
.card-title::after { content:''; width:10px; height:10px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(-45deg); flex-shrink:0; transition:transform .3s; }
.card:hover .card-title::after { transform:translateX(4px) rotate(-45deg); }
/* time + product always sit at the bottom of the card, whatever the description length */
.card-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-family:var(--fs); font-size:.8rem; opacity:.85; margin-top:auto; padding-top:12px; }
.card-text { font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.92); }
@media (max-width: 860px) {
  .card-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .card { flex-direction:row; }
  .card-photo { width:38%; aspect-ratio:auto; flex-shrink:0; }
  .card-body { padding:16px 16px 18px; }
  .card-text { font-size:.86rem; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
}

/* Marquee strip */
.strip { background:var(--orange); overflow:hidden; padding:14px 0; position:relative; z-index:3; }
.strip-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
.strip-track span { font-family:var(--fh); text-transform:uppercase; font-size:clamp(.95rem, 1.6vw, 1.2rem); letter-spacing:.04em; padding:0 22px; white-space:nowrap; display:flex; align-items:center; gap:44px; }
.strip-track span::after { content:'•'; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* Follow the flavor */
.follow { background:var(--fl-bg, var(--red)); color:var(--fl-ink, var(--white)); text-align:center; }
.follow .t-title { color:var(--fl-title, var(--yellow)); }
.ig-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(12px, 2vw, 24px); margin:clamp(28px, 4vw, 44px) 0; }
.ig-post { background:var(--white); color:#222; border-radius:16px; padding:10px 10px 14px; text-align:left; box-shadow:0 18px 40px rgba(0,0,0,.18); transition:transform .4s var(--ease-pop); }
.ig-post:nth-child(odd)  { transform:rotate(-1.5deg); }
.ig-post:nth-child(even) { transform:rotate(1.2deg) translateY(10px); }
.ig-post:hover { transform:rotate(0) translateY(-8px) scale(1.03); }
.ig-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--fs); font-size:.78rem; }
.ig-head i { width:24px; height:24px; border-radius:50%; background:var(--orange) url('../img/icons/favicon.png') center/70% no-repeat; }
.ig-photo { aspect-ratio:4/5; border-radius:8px; overflow:hidden; }
.ig-photo img { width:100%; height:100%; object-fit:cover; }
.ig-actions { display:flex; gap:10px; margin:9px 2px 6px; }
.ig-actions svg { width:18px; height:18px; }
.ig-actions svg:last-child { margin-left:auto; }
.ig-cap { font-size:.76rem; line-height:1.4; color:#333; }
.ig-cap b { font-weight:800; }
.follow-text { max-width:520px; margin:0 auto 22px; color:var(--fl-ink, var(--white)); }
.follow-socials { display:flex; justify-content:center; gap:26px; color:var(--fl-title, var(--yellow)); font-family:var(--fs); font-size:1.15rem; }
.follow-socials a { display:flex; align-items:center; gap:8px; transition:transform .25s var(--ease-pop); }
.follow-socials a:hover { transform:translateY(-3px) rotate(-2deg); }
.follow-socials .ico { font-size:1.8rem; }
@media (max-width: 760px) {
  .ig-grid { grid-template-columns:repeat(2, 1fr); }
  .ig-post:nth-child(n+3) { display:none; }
}

/* CTA photo banner */
.cta-banner { position:relative; min-height:clamp(340px, 46vw, 560px); display:flex; align-items:center; overflow:hidden; }
.cta-banner > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-banner::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(20,4,10,.6) 0%, rgba(20,4,10,.25) 50%, rgba(20,4,10,0) 75%); }
.cta-banner .wrap { position:relative; z-index:2; width:100%; }
.cta-banner h2 { font-family:var(--fh); text-transform:uppercase; color:var(--orange); font-size:var(--title-size); line-height:1; max-width:11ch; margin-bottom:24px; text-shadow:0 2px 30px rgba(0,0,0,.25); }
@media (max-width: 640px) {
  .cta-banner { align-items:flex-end; min-height:500px; padding-bottom:calc(var(--slant-h) + 36px); }
  .cta-banner::before { background:linear-gradient(0deg, rgba(20,4,10,.9) 0%, rgba(20,4,10,.6) 45%, rgba(20,4,10,0) 80%); }
}

/* Footer */
.footer { background:var(--brown); padding:clamp(48px, 7vw, 80px) 0 28px; }
.foot-grid { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px; align-items:start; }
.foot-logo img { width:clamp(150px, 18vw, 220px); }
.foot-col { font-size:.92rem; line-height:1.9; }
.foot-col h3 { font-family:var(--fs); font-size:.95rem; font-weight:400; margin-bottom:4px; color:var(--white); }
.foot-col a { color:rgba(255,255,255,.72); transition:color .15s; }
.foot-col a:hover { color:var(--orange); }
.foot-news { margin-top:40px; padding:22px; border-radius:var(--radius); background:rgba(255,255,255,.05); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.foot-news h3 { font-family:var(--fh); text-transform:uppercase; color:var(--orange); font-size:1.4rem; line-height:1; }
.foot-news p { font-size:.88rem; color:rgba(255,255,255,.6); }
.foot-news form { display:flex; gap:8px; flex:1; max-width:440px; min-width:260px; }
.input { flex:1; min-width:0; height:46px; padding:0 16px; border-radius:12px; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--white); font:inherit; outline:none; transition:border-color .15s; }
.input:focus { border-color:var(--orange); }
.input::placeholder { color:rgba(255,255,255,.4); }
.foot-bottom { margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.4); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-logo { grid-column:1 / -1; }
}

/* Chips (filters, tags) */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips.center { justify-content:center; }
.chip { font-family:var(--fs); font-size:.82rem; letter-spacing:.03em; height:38px; padding:0 16px; border-radius:999px; border:2px solid rgba(255,255,255,.22); color:var(--white); display:inline-flex; align-items:center; gap:6px; transition:all .2s; white-space:nowrap; }
.chip:hover { border-color:var(--orange); }
.chip.is-active { background:var(--orange); border-color:var(--orange); }
.chips--scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px var(--gutter); margin:0 calc(var(--gutter) * -1); }
.chips--scroll::-webkit-scrollbar { display:none; }
.tag { display:inline-flex; align-items:center; font-family:var(--fs); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; line-height:1; }
.tag--chipotle { background:var(--orange); color:var(--white); }
.tag--basil    { background:var(--green); color:var(--dkgreen); }
.tag--sichuan  { background:var(--yellow); color:var(--brown); }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }

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

/* Spacer so content isn't hidden under the floating nav on pages without a hero */
.page-top { padding-top:calc(var(--nav-h) + 40px); }

/* Instagram video posts */
.ig-photo { position:relative; }
.ig-photo video { width:100%; height:100%; object-fit:cover; }
.ig-play { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.45); }
.ig-play::before { content:''; position:absolute; left:8px; top:6px; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }

/* Newsletter popup */
.nl-backdrop { position:fixed; inset:0; z-index:600; background:rgba(20,4,10,.65); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .35s; }
.nl-backdrop.is-open { opacity:1; }
.nl-box { position:relative; width:100%; max-width:460px; background:var(--brown); border-radius:var(--radius); padding:44px 32px 30px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:translateY(24px) scale(.97); transition:transform .45s var(--ease-pop); }
.nl-backdrop.is-open .nl-box { transform:none; }
.nl-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.nl-close:hover { color:var(--white); }
.nl-logo { height:38px; width:auto; margin:0 auto 22px; }
.nl-title { font-family:var(--fh); text-transform:uppercase; color:var(--orange); font-size:clamp(1.8rem, 6vw, 2.4rem); line-height:.95; margin-bottom:14px; }
.nl-sub { font-size:.95rem; color:rgba(255,255,255,.7); margin-bottom:24px; }
.nl-form { display:flex; flex-direction:column; gap:10px; }
.nl-form .input { flex:none; }
.nl-skip { margin-top:14px; font-family:var(--fs); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); }
.nl-skip:hover { color:rgba(255,255,255,.7); }

/* Brand icons from the product label */
.ico--allergen { --src:url('../img/icons/allergen-free.png'); }
.ico--plant    { --src:url('../img/icons/plant-based.png'); }
.ico--cart     { --src:url('../img/icons/cart.png'); }
.ico--profile  { --src:url('../img/icons/profile.png'); }
.ico--time     { --src:url('../img/icons/time.png'); }
.ico--home     { --src:url('../img/icons/home.svg'); }
.ico--delivery { --src:url('../img/icons/delivery.svg'); }
.ico--recycle  { --src:url('../img/icons/recycle.png'); }
.ico--chipotle { --src:url('../img/icons/flavor-chipotle.png'); }
.ico--basil    { --src:url('../img/icons/flavor-basil.png'); }
.ico--sichuan  { --src:url('../img/icons/flavor-sichuan.png'); }

/* Add-to-cart feedback */
.btn--cart.is-added { background:#174FB0; }
.fly-item { position:fixed; z-index:700; pointer-events:none; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)); will-change:transform; }
.nav-cart.is-hit { animation:cartHit .7s var(--ease-pop); }
.nav-cart.is-hit::after { content:''; position:absolute; inset:0; border-radius:50%; border:3px solid #1D5FD1; animation:cartRing .7s ease-out forwards; pointer-events:none; }
@keyframes cartHit { 0% { transform:scale(1); } 30% { transform:scale(1.35) rotate(-12deg); background:#1D5FD1; } 60% { transform:scale(.92) rotate(6deg); } 100% { transform:none; } }
@keyframes cartRing { from { transform:scale(1); opacity:1; } to { transform:scale(2.3); opacity:0; } }

/* Discounted price: old price struck through */
s.was { opacity:.6; font-size:.8em; margin-right:2px; text-decoration-thickness:2px; }

/* "Liever naar de winkel?" link to the store finder */
.store-link { display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:16px; background:rgba(255,255,255,.12); font-family:var(--fs); font-size:.92rem; line-height:1.2; transition:background .2s, transform .25s var(--ease-pop); }
.store-link:hover { background:rgba(255,255,255,.2); transform:translateX(4px); }
.store-link-pin { width:36px; height:36px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; flex-shrink:0; }
.store-link-pin svg { width:18px; height:18px; color:var(--brown); }
.store-link small { display:block; font-family:var(--fb); font-size:.8rem; opacity:.8; }

/* CTA banner variants */
.cta-banner--plain::before { display:none; }
.cta-banner--plain h2 { text-shadow:none; }
.cta-banner--right { align-items:flex-end; padding-bottom:calc(var(--slant-h) + 28px); min-height:clamp(420px, 52vw, 720px); }
.cta-banner--right h2 { max-width:16ch; margin-bottom:18px; }
.cta-banner--right .wrap { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.btn--red { background:var(--red); color:var(--white); }
.btn--red:hover { background:#c91e1b; }
@media (max-width: 640px) {
  .cta-banner--plain { min-height:640px; }
  .cta-banner--plain > img { object-position:var(--cta-mpos, 15% 0) !important; height:62%; }
  .cta-banner--plain::before { display:block; background:linear-gradient(0deg, var(--cta-fade, #FFC200) 0%, var(--cta-fade, #FFC200) 38%, transparent 46%); }
  .cta-banner--right .wrap { align-items:flex-start; text-align:left; }
}

/* ── Cart extras: free-shipping bar, remove link ── */
.ship-bar p { font-size:.86rem; margin-bottom:6px; }
.ship-bar b { font-family:var(--fs); font-weight:400; color:var(--yellow); }
.ship-track { height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.ship-track i { display:block; height:100%; border-radius:inherit; background:var(--yellow); transition:width .6s var(--ease-out); }
.ship-bar.is-free .ship-track i { background:#22c55e; }
.ship-bar.is-free b { color:#4ade80; }
.drawer-ship { padding:14px 20px 4px; }
.c-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.c-remove { font-size:.75rem; color:rgba(255,255,255,.5); text-decoration:underline; text-underline-offset:2px; }
.c-remove:hover { color:var(--white); }
.drawer-link { display:block; text-align:center; margin-top:12px; font-family:var(--fs); font-size:.85rem; text-decoration:underline; text-underline-offset:3px; color:rgba(255,255,255,.8); }
.drawer-link:hover { color:var(--white); }

/* Checkout: focused header + slim footer */
.nav--checkout .nav-logo { opacity:1 !important; pointer-events:auto !important; }
.nav--checkout .nav-tools { margin-left:auto; }
.nav-secure { display:flex; align-items:center; gap:6px; font-family:var(--fs); font-size:.8rem; padding:0 10px; }
.nav-secure svg { width:16px; height:16px; }
.footer--slim { padding:22px 0; }
.footer--slim a { text-decoration:underline; }
@media (max-width: 480px) { .nav-secure span, .nav-secure { font-size:0; gap:0; } .nav-secure svg { width:20px; height:20px; } }

/* Toolkit flavour icons in filter chips and titles */
.chip .ico { font-size:20px; margin-left:-4px; }
.story-ico { display:block; font-size:64px; margin-bottom:10px; color:var(--th-title); }

/* ── Docked cart: a column next to the page on wide screens ── */
:root { --dock-w: 380px; }
body { transition:padding-right .45s var(--ease-out); }
body.cart-docked { padding-right:var(--dock-w); }
body.cart-docked .nav { right:calc(var(--dock-w) + 12px); }
.nav { transition:transform .35s var(--ease-out), right .45s var(--ease-out); }
.drawer.is-docked { width:var(--dock-w); box-shadow:-1px 0 0 rgba(255,255,255,.08), -20px 0 40px rgba(0,0,0,.18); }
.drawer.no-anim { transition:none; }
body.cart-docked .toast { left:calc(50% - var(--dock-w) / 2); }

/* ── Mini cart bar (small screens) ── */
.minicart { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:140; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 10px; border-radius:18px;
  background:var(--white); color:var(--brown); box-shadow:0 12px 34px rgba(0,0,0,.35); transform:translateY(160%); transition:transform .45s var(--ease-pop); }
.minicart.is-on { transform:none; }
.minicart-view { flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; color:var(--brown); }
.minicart-thumbs { display:flex; }
.minicart-thumbs span { width:38px; height:38px; border-radius:10px; padding:4px; border:2px solid #fff; margin-left:-10px; }
.minicart-thumbs span:first-child { margin-left:0; }
.minicart-thumbs img { width:100%; height:100%; object-fit:contain; }
.minicart-sum { font-size:.88rem; line-height:1.2; }
.minicart-sum b { display:block; font-family:var(--fs); font-weight:400; }
body.has-minicart { padding-bottom:84px; }
body.has-minicart .buybar { bottom:calc(84px + env(safe-area-inset-bottom)); }
body.has-minicart .toast { bottom:calc(92px + env(safe-area-inset-bottom)); }
.ico--lock { --src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* Product page buy bar: fully out of view when hidden, also above the mini cart */
.buybar:not(.is-on) { transform:translateY(calc(100% + 120px)) !important; }