/* Omea — design tokens and styles.
   Palette comes from the real brand assets: logo gold #BC9A5C (sampled), deep navy from the marble banner.
   Gold is used for the logo, hairlines and large figures; text on ivory uses the darker --gold-ink for contrast. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Extended Cyrillic (Ѣ ѣ etc.) for the cake name "ОМЕА - Бял Шоколадов Блѣнъ"; the files are only downloaded on pages that use those letters */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-ext-500-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-ext-600-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-sans-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-display-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-serif-display-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-serif-display-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* colour */
  --navy:#0D1424; --navy-raised:#161F36; --gold:#BC9A5C; --gold-ink:#7A5B22;
  --ivory:#F4EFE6; --paper:#FBF8F2; --ink:#0D1424; --ink-soft:#4A5367;
  --line:rgba(13,20,36,.18); --line-light:rgba(244,239,230,.24);
  /* type */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-0:clamp(.95rem,.92rem + .15vw,1.05rem);
  --fs-1:clamp(1.1rem,1rem + .5vw,1.3rem);
  --fs-2:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  --fs-3:clamp(2.2rem,1.4rem + 3.4vw,4rem);
  --fs-4:clamp(2.9rem,1.5rem + 6vw,6.2rem);
  --label:.72rem;
  /* space + layout */
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:clamp(4rem,9vw,8rem);
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --gutter:clamp(16px,4vw,48px); --max:1280px; --header:64px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.45s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 var(--fs-0)/1.6 var(--ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.site-header :focus-visible,.hero :focus-visible,.section--dark :focus-visible,.site-footer :focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--ivory);color:var(--ink);padding:.6rem 1rem;z-index:50}
.skip:focus{top:.5rem}
.eyebrow,.field__label,.lbl,.crumb,dt{font:700 var(--label)/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.note{font-size:.88rem;color:var(--ink-soft)}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--navy);color:var(--ivory);border-bottom:1px solid var(--line-light)}
.site-header__in{display:flex;align-items:center;gap:clamp(12px,3vw,40px);min-height:var(--header)}
.brand{display:inline-flex;flex:none}
.brand__logo{height:34px;width:auto}
.nav{display:flex;gap:clamp(12px,2.4vw,32px);margin-left:auto;font:600 .8rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;padding:.9rem 0;border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav a:hover,.nav a[aria-current]{border-color:var(--gold);color:var(--gold)}
.count{display:inline-block;min-width:1.35em;margin-left:.4em;padding:.15em .35em;border:1px solid var(--gold);border-radius:99px;color:var(--gold);font-size:.7rem;line-height:1.2;text-align:center;letter-spacing:0}
.count[hidden]{display:none}
.lang{display:flex;gap:.35rem;font:700 .72rem/1 var(--ui);letter-spacing:.1em}
.lang a{text-decoration:none;color:var(--gold)}
.lang a:hover{text-decoration:underline}
.lang [aria-current]{color:var(--ivory)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.5rem;font:700 .78rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:0;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--ivory)}
.btn--ghost-light{border-color:var(--line-light);color:var(--ivory)}
.btn--ghost-light:hover{border-color:var(--gold);color:var(--gold)}
.btn--navy{background:var(--navy);color:var(--ivory)}
.btn--navy:hover{background:var(--navy-raised)}
.btn--line{border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--ivory)}
.btn--disabled{background:transparent;border-color:var(--line);color:var(--ink-soft);cursor:not-allowed}

/* hero: brand marble behind the gold wordmark, headline left, the cakes orbiting the wordmark (JS places them; without JS they are a plain row) */
.hero{position:relative;isolation:isolate;background:var(--navy);color:var(--ivory);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}
.hero__art{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.hero__art img{width:100%;height:auto}
.hero__shine{position:absolute;inset:-20%;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(255,222,150,.5) 50%,transparent 60%) 130% 0/250% 100%;mix-blend-mode:soft-light}
.hero__txt{position:relative;z-index:50;margin-top:calc(var(--s3) * -1);padding-bottom:var(--s4);pointer-events:none}
.hero__txt a{pointer-events:auto}
.hero h1{font-size:clamp(2rem,1.1rem + 2.6vw,3.4rem);margin-top:var(--s2);max-width:14em;line-height:1.04}
.eyebrow{color:var(--gold)}
.hero__sub{font-size:var(--fs-1);margin-top:var(--s2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* orbit: default (no JS) = a scrollable row of round photos */
.orbit{position:relative;z-index:10;margin:0;padding:0 var(--gutter) var(--s4);list-style:none;display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:thin;align-self:end}
.orbit li{flex:none}
.disc{display:block;width:clamp(96px,26vw,140px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--gold),0 0 0 6px rgba(13,20,36,.55),0 24px 50px rgba(0,0,0,.55)}
.disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.disc:focus-visible{outline:3px solid var(--ivory);outline-offset:4px}
/* with JS: absolutely placed on a tilted ellipse */
.has-orbit .orbit{position:absolute;inset:0;display:block;height:auto;margin:0;padding:0;overflow:visible;align-self:stretch;pointer-events:none}
.has-orbit .orbit li{position:absolute;left:0;top:0;will-change:transform}
.has-orbit .disc{pointer-events:auto}
.has-orbit.hero{padding-bottom:4.5rem}
.has-orbit .disc{width:100%;transition:box-shadow .4s}
.has-orbit .disc:hover{box-shadow:0 0 0 2px var(--ivory),0 24px 60px rgba(0,0,0,.6)}
/* phone / tablet: banner + ring form one centred stage above the text; the top edge fades so the marble never shows a hard line */
@media(max-width:1199px){.hero__art{max-width:640px;margin-inline:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 68%,transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 68%,transparent)}}
@media(min-width:1200px){
  .has-orbit.hero{padding-bottom:0}
  .hero{min-height:min(calc(100svh - var(--header)),880px);grid-template-rows:auto 1fr}
  /* a navy veil under the headline column: the marble fades out before it reaches the text, on any screen width.
     --txt-end = where the text column ends (wrap offset + gutter + text width). Sits under the cakes (z 10) and the text (z 50). */
  /* --shift: optional pull of the text column to the left on wide screens (0 = aligned with the header logo) */
  .hero{--shift:0px;--txt-end:calc(max(0px,(100vw - var(--max)) / 2) - var(--shift) + var(--gutter) + 30rem)}
  .hero__txt{transform:translateX(calc(-1 * var(--shift)))}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,20,36,.97) 0,rgba(13,20,36,.9) var(--txt-end),rgba(13,20,36,0) calc(var(--txt-end) + 7rem)),radial-gradient(120% 90% at 100% 0,transparent 40%,rgba(8,13,26,.55))}
  .hero__txt h1,.hero__sub{text-shadow:0 1px 18px rgba(13,20,36,.9)}
  .hero__art{position:absolute;top:0;right:0;width:74%;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 32%),linear-gradient(to bottom,#000 72%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 32%),linear-gradient(to bottom,#000 72%,transparent);mask-composite:intersect}
  .hero__txt{margin-top:0;padding-block:var(--s4) var(--s3);max-width:calc(var(--max) + var(--gutter) * 2)}
  .hero__txt>*{max-width:40rem}
  .hero__txt>.hero__sub{max-width:25rem;text-wrap:balance} /* wraps to two lines so it never reaches the wordmark */
  .orbit{position:absolute;inset:0;padding:0;align-self:stretch;overflow:visible}
  .has-orbit .orbit{position:absolute;inset:0;height:auto;margin:0}
}
@media(prefers-reduced-motion:no-preference){.hero__shine{opacity:1;animation:shine 10s ease-in-out infinite}}
@keyframes shine{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}

/* sections */
.section{padding-block:var(--s6)}
.section__head{display:grid;gap:var(--s2);margin-bottom:var(--s5);max-width:46rem}
.section__head h1,.section__head h2{font-size:var(--fs-3)}
.section__head p{color:var(--ink-soft);font-size:var(--fs-1)}
.section--dark{background:var(--navy);color:var(--ivory)}
.section--dark .section__head p{color:var(--ivory)}

/* carte index (home) */
.carte__grid{display:grid;gap:var(--s4)}
.rows{display:grid;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:2.2rem 1fr auto;gap:var(--s2);align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding var(--dur) var(--ease),color var(--dur) var(--ease)}
.row__n{font:600 .75rem var(--ui);letter-spacing:.1em;color:var(--gold-ink)}
.row__name{font:500 var(--fs-2)/1.1 var(--display)}
.row__thumb{width:56px;height:56px;object-fit:cover}
.row:hover,.row:focus-visible{padding-left:.6rem;color:var(--gold-ink)}
.carte__preview{display:none}
@media(min-width:900px){
  .carte__grid{grid-template-columns:1fr minmax(320px,.8fr);gap:var(--s5);align-items:start}
  .row__thumb{display:none}
  .row{grid-template-columns:2.2rem 1fr}
  .carte__preview{display:block;position:sticky;top:calc(var(--header) + 24px);aspect-ratio:1;background:var(--navy)}
  .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
  .preview.is-active{opacity:1}
}

/* plates (collection) */
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s2)}
.plate{display:block;text-decoration:none}
.plate figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--navy)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.plate:hover img{transform:scale(1.03)}
.plate h3{font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);line-height:1.1;margin-top:var(--s2);transition:color var(--dur) var(--ease)}
.plate:hover h3{color:var(--gold-ink)}
@media(min-width:900px){.plates{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s3)}}

/* placeholder for cakes without a photo yet */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;aspect-ratio:1;background:var(--navy);color:var(--gold);font:700 var(--label) var(--ui);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.ph img,.plate .ph img{width:34%;height:auto;object-fit:contain;opacity:.6}
.ph--fill{width:100%;height:100%}

/* facts */
.facts__list{display:grid;gap:0;margin:0 0 var(--s4)}
.facts__list>div{display:grid;gap:.4rem;padding:var(--s3) 0;border-top:1px solid var(--line-light)}
.facts dt{order:2;font:400 var(--fs-0)/1.5 var(--ui);letter-spacing:0;text-transform:none}
.facts dt,.facts dd{margin:0}
.facts__list dt{font:500 var(--fs-3)/1 var(--display);letter-spacing:0;text-transform:none;color:var(--gold);order:0}
.facts__list dd{max-width:30ch}
@media(min-width:900px){.facts__list{grid-template-columns:repeat(3,1fr);gap:var(--s3)}.facts__list>div{padding-right:var(--s2)}}

/* product */
.product__in{display:grid;gap:var(--s4)}
.product__media{aspect-ratio:1;background:var(--navy);overflow:hidden}
.product__media img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.product__info{display:grid;gap:var(--s3);align-content:start}
.crumb a{text-decoration:none;color:var(--ink-soft)}
.crumb a:hover{color:var(--gold-ink)}
.product h1{font-size:var(--fs-3)}
.product__desc{font-size:var(--fs-1);max-width:34rem}
.field{display:grid;gap:var(--s1)}
.field__label{color:var(--ink-soft)}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.size{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;padding:1rem 1.1rem;background:transparent;border:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.size__n{font:700 .72rem var(--ui);letter-spacing:.12em;text-transform:uppercase}
.size__p{font:500 var(--fs-2)/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.size:hover{border-color:var(--ink)}
.size[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.variants{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vbtn{display:flex;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .4rem;background:transparent;border:1px solid var(--line);font:600 .85rem var(--ui);color:var(--ink);cursor:pointer;transition:border-color var(--dur) var(--ease)}
.vbtn img{width:44px;height:44px;object-fit:cover}
.vbtn[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold-ink)}
.buy{display:flex;flex-wrap:wrap;gap:var(--s2)}
.buy__after a{font-weight:700;color:var(--gold-ink)}
/* one-screen buying: tight section spacing, and on phones/tablets the size picker + Add button stay pinned to the bottom edge */
.section.product{padding-block:var(--s3) var(--s4)}
.product__buy{display:grid;gap:var(--s2)}
.buy__call-m{margin:0}
.buy__call-m a{color:var(--ink-soft);font-weight:600}
@media(max-width:899px){
  .product__info{gap:var(--s2)}
  .product h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,2.6rem)}
  .product__desc{font-size:var(--fs-0)}
  .product__buy{position:sticky;bottom:var(--cookie-h,0px);z-index:5;background:var(--ivory);border-top:1px solid var(--line);margin-inline:calc(var(--gutter)*-1);padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom,0px));gap:.6rem;box-shadow:0 -10px 24px rgba(13,20,36,.08)}
  .product__buy .field{gap:.35rem}
  .product__buy .size{padding:.55rem .9rem;flex-direction:row;align-items:baseline;justify-content:space-between;gap:.6rem}
  .product__buy .size__p{font-size:1.35rem}
  .product__buy .buy{display:block}
  .product__buy .buy .btn--navy{width:100%}
  .buy__call{display:none}
}
@media(min-width:900px){
  .product__in{grid-template-columns:1.1fr 1fr;gap:var(--s4);align-items:start}
  .product__media{position:sticky;top:calc(var(--header) + 16px)}
  .product__info{gap:var(--s2)}
  .product h1{font-size:clamp(2rem,1.2rem + 2.2vw,3rem)}
  .product__desc{font-size:var(--fs-0)}
  .buy__call-m{display:none}
}

/* order + contact */
.order__grid{display:grid;gap:var(--s5)}
.order h2{font-size:var(--fs-2)}
.order__list{display:grid;gap:var(--s2);align-content:start}
.line{display:grid;grid-template-columns:1fr auto;gap:.4rem var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.line__name{font:500 var(--fs-1)/1.2 var(--display)}
.line__size{font-size:.85rem;color:var(--ink-soft)}
.line__price{font:500 var(--fs-1) var(--display);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.line__ctl{display:flex;align-items:center;gap:.5rem;grid-column:1/-1}
.line__ctl button{width:40px;height:40px;border:1px solid var(--line);background:transparent;font:600 1.1rem var(--ui);color:var(--ink);cursor:pointer}
.line__ctl button:hover{border-color:var(--ink)}
.line__ctl output{min-width:2ch;text-align:center;font-weight:700}
.line__rm{margin-left:auto;width:auto!important;padding:0 .9rem;font:600 .78rem var(--ui)!important;letter-spacing:.06em;border-color:transparent!important;text-decoration:underline;color:var(--ink-soft)!important}
.order__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:var(--s2)}
.order__total span{font:700 var(--label) var(--ui);letter-spacing:.14em;text-transform:uppercase}
.order__total b{font:500 var(--fs-2)/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.order__empty a{font-weight:700;color:var(--gold-ink)}
.order__ways{display:grid;gap:var(--s3);align-content:start}
.way{display:grid;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);background:var(--paper)}
.way--soon{background:transparent}
.way h2{font-size:var(--fs-2)}
.way__btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* one-screen ordering: compact heading and lines; on phones/tablets the total + call button are pinned to the bottom edge */
.order-page{padding-block:var(--s3) var(--s4)}
.order-page .section__head{gap:.4rem;margin-bottom:var(--s3)}
.order-page .section__head h1{font-size:clamp(2rem,1.4rem + 2vw,2.8rem)}
.order-page .section__head p{font-size:var(--fs-0)}
.order-page .order h2,.order-page .way h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.order__bar{display:grid;gap:.6rem}
.order__bar-call{display:none}
.line{padding:.7rem 0}
.line__ctl button{width:36px;height:36px}
@media(max-width:899px){
  .order__grid{gap:var(--s2)}
  .order__list{display:contents}
  .order__ways{order:5}
  .order__ways .way__btns{display:none}
  .order__bar{order:9;position:sticky;bottom:var(--cookie-h,0px);z-index:5;background:var(--ivory);border-top:1px solid var(--line);margin-inline:calc(var(--gutter)*-1);padding:.8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 24px rgba(13,20,36,.08)}
  .order__bar-call{display:inline-flex;width:100%}
  .order__bar .order__total{border-top:0;padding-top:0}
  .way{padding:var(--s2)}
}
@media(min-width:900px){
  .order__grid{grid-template-columns:1.1fr 1fr;gap:var(--s4)}
  #order-items{max-height:calc(100svh - 360px);min-height:4rem;overflow-y:auto}
  .order__bar{margin-top:var(--s1)}
}
@media(min-width:1100px){
  .line{grid-template-columns:1fr auto auto;grid-template-areas:"n c p";align-items:center}
  .line>div:first-child{grid-area:n}
  .line__ctl{grid-area:c;grid-column:auto}
  .line__price{grid-area:p;min-width:5.5rem}
  .line__rm{margin-left:.4rem}
}
.contact__list{display:grid;margin:0 0 var(--s4);max-width:46rem}
.contact__list>div{display:grid;gap:.3rem;padding:var(--s2) 0;border-top:1px solid var(--line)}
.contact__list dt{color:var(--ink-soft)}
.contact__list dd{margin:0;font:500 var(--fs-1)/1.3 var(--display);font-size:var(--fs-2)}
.contact__list a{text-decoration:none}
.contact__list a:hover{color:var(--gold-ink)}
@media(min-width:700px){.contact__list>div{grid-template-columns:14rem 1fr;align-items:baseline}}

/* footer */
.site-footer{background:var(--navy);color:var(--ivory);padding-block:var(--s5)}
.site-footer__in{display:grid;gap:var(--s2)}
.footer-contact{display:flex;flex-wrap:wrap;gap:.4rem var(--s3)}
.footer-contact a{text-decoration:none}
.footer-contact a:hover{color:var(--gold)}
.footer-note,.footer-rights{font-size:.85rem;opacity:.75}

/* motion: restrained reveal, only when JS runs and motion is allowed */
@media(prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
  .js .reveal.is-in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-width:420px){.brand__logo{height:28px}.nav{font-size:.72rem;gap:10px}}

/* ===== soft shape language: rounded, calmer buttons and surfaces ===== */
.btn{border-radius:var(--r-pill);padding:.8rem 1.9rem;font-weight:600;font-size:.88rem;letter-spacing:.03em;text-transform:none}
.btn--gold{box-shadow:0 6px 22px -8px rgba(188,154,92,.7)}
.nav{letter-spacing:.09em}
.eyebrow,.field__label,.lbl,.crumb{letter-spacing:.11em}
.size{border-radius:var(--r-md)}
.vbtn{border-radius:var(--r-pill);padding-right:1.1rem}.vbtn img{border-radius:50%}
.line__ctl button{border-radius:50%}
.way{border-radius:var(--r-lg)}
.product__media,.carte__preview,.plate figure{border-radius:var(--r-lg)}
.plate .ph,.preview{border-radius:var(--r-lg)}
.row__thumb{border-radius:50%}
.row:hover{border-radius:var(--r-md)}
.count{border-radius:var(--r-pill)}
:focus-visible{border-radius:var(--r-sm)}

/* ===== type test variants (preview switcher sets html[data-font]); A = current ===== */
html[data-font="b"]{--display:"Playfair Display",Georgia,serif;--ui:"Nunito Sans",system-ui,sans-serif}
html[data-font="b"] h1,html[data-font="b"] h2,html[data-font="b"] h3{font-weight:400;letter-spacing:-.01em;line-height:1.12}
html[data-font="c"]{--display:"Noto Serif Display",Georgia,serif;--ui:"Onest",system-ui,sans-serif}
html[data-font="c"] h1,html[data-font="c"] h2,html[data-font="c"] h3{font-weight:400;line-height:1.12}
html[data-font="d"]{--display:"Jost",system-ui,sans-serif;--ui:"Jost",system-ui,sans-serif}
html[data-font="d"] h1,html[data-font="d"] h2,html[data-font="d"] h3{font-weight:400;letter-spacing:-.015em;line-height:1.08}
html[data-font="b"] .hero h1,html[data-font="c"] .hero h1{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.4rem)}
html[data-font="d"] .hero h1{font-size:clamp(2rem,1.1rem + 2.9vw,3.7rem)}

/* ===== polished home sections: gold inlay frame (the hero's ring language), gold rules, calm hover ===== */
.carte__preview{outline:1px solid var(--gold);outline-offset:10px;margin:10px;overflow:hidden}
.preview{border-radius:0;transform:scale(1.05);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.preview.is-active{transform:none}
.carte .section__head h2::before,.facts .section__head h2::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-bottom:var(--s2)}
.row{position:relative;padding-inline:.8rem;transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.row:hover,.row:focus-visible{background:rgba(188,154,92,.1)}
.row::after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .35s var(--ease)}
.row:hover::after,.row:focus-visible::after{transform:scale(1)}
.facts__list>div{border-top:0;position:relative}
.facts__list>div::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gold);transform-origin:left}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){.facts__list>div::before{animation:rule linear both;animation-timeline:view();animation-range:entry 10% cover 40%}}
}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the slogan under the headline: set in the display face, quieter than the headline but readable */
.hero__sub{font:500 var(--fs-1)/1.35 var(--display);letter-spacing:.01em;color:rgba(244,239,230,.88);margin-top:var(--s2)}

/* allergen icons (product pages): one quiet horizontal line — small gold ring + label, side by side */
.allergens{display:grid;gap:.6rem}
.allergens__list{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.5rem;margin:0;padding:0;list-style:none}
.allergens__list li{display:inline-flex;align-items:center;gap:.5rem}
.allergen__ico{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid rgba(188,154,92,.7);color:var(--gold-ink)}
.allergen__txt{font:500 .9rem/1 var(--ui);color:var(--ink)}
.allergens .note{margin:0;font-size:.85rem;color:var(--ink-soft)}
/* contact */
.contact__grid{display:grid;gap:var(--s5)}
@media(min-width:900px){.contact__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--s6);align-items:start}}
.cform{display:grid;gap:var(--s3);padding-top:var(--s2);border-top:1px solid var(--ink)}
.cform__title{font-size:var(--fs-2);margin:0 0 var(--s1)}
.cform__row{display:grid;gap:var(--s3)}
@media(min-width:600px){.cform__row{grid-template-columns:1fr 1fr}}
.cfield{display:grid;gap:.35rem}
.cfield label{font:700 var(--label)/1.3 var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.cfield .opt{font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.8}
.cfield input,.cfield textarea{width:100%;font:400 1.05rem/1.5 var(--ui);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.55rem 0;min-height:44px;transition:border-color .2s}
.cfield textarea{min-height:7.5rem;resize:vertical}
.cfield input:hover,.cfield textarea:hover{border-bottom-color:rgba(13,20,36,.4)}
.cfield input:focus,.cfield textarea:focus{outline:none;border-bottom:1px solid var(--gold-ink);box-shadow:0 1px 0 var(--gold-ink)}
.cfield input:focus-visible,.cfield textarea:focus-visible{outline:2px solid transparent}
.cfield [aria-invalid="true"]{border-bottom-color:#9B2C2C;box-shadow:0 1px 0 #9B2C2C}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__foot{display:grid;gap:var(--s2);align-items:center;margin-top:var(--s1)}
@media(min-width:600px){.cform__foot{grid-template-columns:auto 1fr;gap:var(--s3)}}
.cform__foot .btn{justify-self:start}
.cform__foot .btn[disabled]{opacity:.6;cursor:progress}
.cform__note{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.cform__note a{color:var(--gold-ink)}
.cform__status{margin:0;padding:var(--s2) 0 0;border-top:1px solid var(--line);font:500 var(--fs-1)/1.35 var(--display)}
.cform__status.is-ok{color:var(--gold-ink)}
.cform__status.is-err{color:#9B2C2C}

/* legal pages + footer links */
.legal{max-width:46rem;display:grid;gap:var(--s4)}
.legal h2{font-size:var(--fs-2);margin-bottom:var(--s1)}
.legal p,.legal li{font-size:var(--fs-0);line-height:1.7}
.legal p{margin:0 0 .8rem}
.legal ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem;list-style:disc}
.legal li::marker{color:var(--gold-ink)}
.footer-legal{display:flex;flex-wrap:wrap;gap:.3rem var(--s3);margin:0;font-size:.85rem}
.footer-legal a{text-decoration:none;color:rgba(244,239,230,.8)}
.footer-legal a:hover{color:var(--gold)}

/* ===== cookie consent banner: fixed to the bottom, Accept and Reject styled identically on purpose ===== */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--navy);color:var(--ivory);border-top:1px solid var(--gold);box-shadow:0 -12px 40px rgba(0,0,0,.35);padding-block:var(--s3);max-height:80vh;overflow:auto}
.cookie[hidden]{display:none}
.cookie__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4)}
.cookie__txt{flex:1 1 32rem;max-width:56rem;display:grid;gap:.4rem}
.cookie__t{font:500 var(--fs-1)/1.2 var(--display)}
.cookie__txt p:last-child{font-size:.9rem;line-height:1.55;color:rgba(244,239,230,.88)}
.cookie__txt a{color:var(--gold);text-underline-offset:3px}
.cookie__txt a:hover{color:var(--ivory)}
.cookie__btns{display:flex;gap:var(--s2);flex:none}
.btn--cookie{background:transparent;border:1px solid var(--gold);color:var(--ivory);min-height:46px;min-width:9.5rem;padding:.65rem 1.7rem}
.btn--cookie:hover{background:var(--gold);color:var(--navy)}
.cookie :focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
html.has-cookie body{padding-bottom:var(--cookie-h,0px)}
@media(max-width:699px){
  .cookie__btns{width:100%}
  .cookie__btns .btn{flex:1}
}
@media(prefers-reduced-motion:no-preference){.cookie{animation:cookie-in .5s var(--ease)}}
@keyframes cookie-in{from{transform:translateY(100%)}}
/* footer button that reopens the banner */
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:rgba(244,239,230,.8);cursor:pointer;text-decoration:none}
.linklike:hover{color:var(--gold)}
.linklike[hidden]{display:none}

.facts .section__head{margin-bottom:var(--s2)}
.facts__slogan{font:500 var(--fs-1)/1.4 var(--display);color:var(--gold);max-width:60ch;margin:0 0 var(--s4)}
.company{display:grid;gap:.5rem;margin:0 0 var(--s4);max-width:46rem}
.company>div{display:grid;gap:.15rem;padding:.6rem 0;border-top:1px solid var(--line)}
.company dt{color:var(--ink-soft)}
.company dd{margin:0;font:500 var(--fs-1)/1.35 var(--display)}
@media(min-width:700px){.company>div{grid-template-columns:16rem 1fr;align-items:baseline}}
@media(max-width:480px){.allergens__list{gap:.5rem 1rem}.allergens__list li{gap:.4rem}.allergen__ico{width:28px;height:28px}.allergen__txt{font-size:.85rem}}
