@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,opsz,wght@0,6..72,100..900;1,6..72,100..900&family=Italiana&family=Jost:ital,wght@0,200..900;1,200..900&family=Noto+Sans+Thai:wght@200..800&family=Noto+Sans+SC:wght@200..800&display=swap');

/* ============================================================ base */
:root{
  --void:#0A0A0B; --void-2:#131316; --line:rgba(255,255,255,.14);
  --gold:#C69214; --gold-lt:#E3B84A; --cream:#F7F1E3;
  --amber:rgba(232,163,61,.62);
  --pistachio:#006873; --raspberry:#B51B5B; --cotton:#F7BAC2; --cotton-ink:#5A1B22;
  --fuchsia:#E91D72; --red:#E40234; --jade:#479D78;
  --pad: clamp(18px, 4vw, 56px);
  /* Rythme vertical unique. Chaque section porte son espace SUPERIEUR et rien
     en bas : l'ecart entre deux sections vaut donc toujours exactement --sec-y,
     sans addition de paddings qui creait des trous deux fois trop grands. */
  --sec-y: clamp(104px, 13vw, 176px);
  /* espace interne : titre de section -> contenu (plus serre que --sec-y :
     le titre appartient a son contenu, il ne doit pas flotter entre deux) */
  --head-gap: clamp(28px, 3.6vw, 48px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* le header est fixe : les ancres doivent s'arreter en dessous */
section[id]{ scroll-margin-top:82px; }
#top{ scroll-margin-top:0; }
body{
  margin:0; background:var(--void); color:var(--cream);
  font-family:'Jost',system-ui,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.display{
  font-family:'Archivo',system-ui,sans-serif; font-weight:900;
  letter-spacing:-.045em; line-height:.84; text-transform:uppercase;
}
.eyebrow{
  display:flex; align-items:center; gap:14px;
  /* 11px a .3em d'interlettrage etait a la limite du lisible en or sur noir */
  font-size:13px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-lt);
  /* c'est un <p> : sans reset, la marge haute du navigateur ajoute ~16px
     invisibles au-dessus de chaque surtitre */
  margin:0 0 24px;
}
.eyebrow::before{ content:''; width:46px; height:1px; background:currentColor; flex:none; }

/* --- typographie par langue : le thai et le chinois ne se mettent pas en capitales,
       et Archivo ne couvre pas ces ecritures.
       Les piles de secours sont explicites car Google Fonts est bloque en Chine
       continentale : sans elles, le chinois retomberait sur une serif systeme
       quelconque au lieu des polices d'interface natives. --- */
html[lang="th"] body{
  font-family:'Noto Sans Thai','Sarabun','Leelawadee UI','Thonburi',
              'Jost',system-ui,sans-serif;
}
html[lang="zh"] body{
  font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
              'Heiti SC','Jost',system-ui,sans-serif;
}
html[lang="th"] .display,
html[lang="zh"] .display{ text-transform:none; letter-spacing:-.01em; line-height:1.14; font-weight:800; }
html[lang="th"] .display{ font-family:'Noto Sans Thai',sans-serif; }
html[lang="zh"] .display{ font-family:'Noto Sans SC',sans-serif; }
html[lang="th"] .eyebrow,
html[lang="zh"] .eyebrow{ text-transform:none; letter-spacing:.14em; }

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
html[lang="th"] .btn, html[lang="zh"] .btn{ text-transform:none; letter-spacing:.06em; font-size:13px; }
.btn--fill{ background:var(--cream); color:var(--void); }
.btn--fill:hover{ background:var(--gold); }
.btn--ghost{ border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--cream); }
/* Le logotype Grab tient la place d'un mot dans le bouton : il se cale sur la
   hauteur d'x du texte, pas sur la capitale, sinon il parait trop gros. */
.btn__grab{ height:15px; width:auto; flex:none; transform:translateY(-1px); }
html[lang="th"] .btn__grab, html[lang="zh"] .btn__grab{ height:17px; }

/* ============================================================ header */
.bar{
  position:fixed; z-index:60; inset:0 0 auto 0; display:flex; align-items:center;
  gap:clamp(14px,3vw,32px); padding:20px var(--pad);
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.bar.is-stuck{ background:rgba(10,10,11,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.bar__mark{ font-family:'Italiana',serif; font-size:26px; margin-right:auto; white-space:nowrap; letter-spacing:.01em; }
.bar nav{ display:flex; gap:26px; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; }
html[lang="th"] .bar nav, html[lang="zh"] .bar nav{ text-transform:none; letter-spacing:.04em; font-size:14px; }
.bar nav a{ opacity:.72; transition:opacity .2s ease; }
.bar nav a:hover{ opacity:1; }
@media(max-width:1080px){ .bar nav{ display:none; } }

.lang{
  display:flex; gap:2px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:3px; flex:none;
}
.lang button{ font-size:11px; letter-spacing:.06em; padding:5px 10px; border-radius:999px; opacity:.7; transition:.2s; }
.lang button:hover{ opacity:1; }
.lang button[aria-current="true"]{ background:var(--cream); color:var(--void); opacity:1; font-weight:600; }

/* ============================================================ hero */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 44%; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.76) 0%,rgba(10,10,11,.16) 32%,rgba(10,10,11,.6) 66%,var(--void) 100%);
}
.hero__glow{
  position:absolute; z-index:2; width:62vw; height:62vw; max-width:740px; max-height:740px;
  border-radius:50%; left:-16vw; bottom:-18vw; opacity:.4; filter:blur(30px);
  background:radial-gradient(circle,var(--fuchsia),transparent 66%); pointer-events:none;
}
/* Le padding haut reserve la hauteur du header fixe. Sur un ecran assez grand
   le contenu reste cale en bas et cette reserve est invisible ; sur un ecran
   court, ou dans une langue plus longue que l'anglais, elle empeche le bloc de
   remonter sous le header au lieu de faire grandir le hero. */
.hero__inner{ position:relative; z-index:10; padding:86px var(--pad) clamp(64px,8vw,110px); }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid var(--line); backdrop-filter:blur(10px);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:26px;
}
html[lang="th"] .badge, html[lang="zh"] .badge{ text-transform:none; letter-spacing:.04em; font-size:13px; }
.badge i{
  width:7px; height:7px; border-radius:50%; background:var(--red); font-style:normal; flex:none;
  box-shadow:0 0 0 0 rgba(228,2,52,.7); animation:pulse 2s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 11px rgba(228,2,52,0); } 100%{ box-shadow:0 0 0 0 rgba(228,2,52,0); } }
.hero h1{ font-size:clamp(54px,11vw,190px); }
/* Le thai et le chinois demandent un interligne de 1.14 la ou le latin tient a
   0.84 : a corps egal leur titre est ~35% plus haut et faisait deborder le hero
   sur les ecrans courts. Corps reduit pour retrouver la meme hauteur de bloc. */
html[lang="th"] .hero h1,
html[lang="zh"] .hero h1{ font-size:clamp(40px,8vw,138px); }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--fuchsia),var(--red) 46%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--line);
}
.hero__foot p{ margin:0; max-width:36ch; font-size:15px; line-height:1.68; opacity:.8; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================ le film */
.film{ padding:var(--sec-y) var(--pad) 0; }
.film__card{
  display:block; position:relative; width:100%; max-width:1320px; margin:0 auto;
  border-radius:18px; overflow:hidden; padding:0; text-align:left; cursor:pointer;
  border:1px solid var(--line); background:var(--void-2);
  transition:border-color .3s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.film__card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.film__poster{ width:100%; height:clamp(190px,26vw,330px); object-fit:cover; object-position:50% 42%; }
.film__shade{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.55) 46%,rgba(10,10,11,.15) 100%);
}
.film__body{
  position:absolute; inset:0; display:flex; align-items:center; gap:clamp(16px,2.4vw,28px);
  padding:0 clamp(20px,3.4vw,48px);
}
.film__play{
  flex:none; width:clamp(54px,5.6vw,74px); height:clamp(54px,5.6vw,74px); border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px); display:grid; place-items:center;
  transition:background .3s ease, border-color .3s ease;
}
.film__play::before{
  content:''; border-left:16px solid var(--cream);
  border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px;
}
.film__card:hover .film__play{ background:var(--gold); border-color:var(--gold); }
.film__card:hover .film__play::before{ border-left-color:#2A1206; }
.film__txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.film__kicker{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-lt); }
html[lang="th"] .film__kicker, html[lang="zh"] .film__kicker{ text-transform:none; letter-spacing:.08em; font-size:12px; }
.film__title{
  font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1.02;
  text-transform:uppercase; font-size:clamp(21px,3.1vw,44px);
}
html[lang="th"] .film__title{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; letter-spacing:0; line-height:1.24; }
html[lang="zh"] .film__title{ font-family:'Noto Sans SC',sans-serif; text-transform:none; letter-spacing:0; line-height:1.24; }
.film__meta{ font-size:13px; opacity:.6; }

/* ------------------------------------------------ lecteur plein ecran */
.player{
  position:fixed; inset:0; z-index:200; background:rgba(6,6,7,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.player[hidden]{ display:none; }
.player.is-open{ opacity:1; }
.player__video{ width:100%; height:100%; max-width:1600px; object-fit:contain; background:#000; }
.player__close{
  position:absolute; top:16px; right:20px; z-index:3; width:44px; height:44px; border-radius:50%;
  font-size:26px; line-height:1; background:rgba(255,255,255,.1); border:1px solid var(--line);
  backdrop-filter:blur(10px); display:grid; place-items:center; transition:.25s;
}
.player__close:hover{ background:var(--gold); color:#2A1206; border-color:var(--gold); }
.player__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:18px clamp(18px,4vw,40px) 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(6,6,7,.85));
}
.player__dots{ display:flex; gap:7px; flex:1; min-width:140px; }
.player__dots li{
  flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.2); overflow:hidden; position:relative;
}
.player__dots li::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0; background:var(--gold);
}
.player__dots li.is-done::after{ width:100%; }
.player__dots li.is-live::after{ width:var(--clip-progress,0%); }
.player__label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.66; }
html[lang="th"] .player__label, html[lang="zh"] .player__label{ text-transform:none; letter-spacing:.04em; font-size:13px; }

@media(max-width:700px){
  .film__body{ align-items:flex-end; padding-bottom:clamp(16px,4vw,26px); }
  .film__shade{ background:linear-gradient(180deg,rgba(10,10,11,.2),rgba(10,10,11,.9)); }
}

/* --------------------------------------------- indicateur de scroll du hero */
.hero__scroll{
  position:absolute; z-index:12; left:50%; bottom:16px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  opacity:.65; transition:opacity .3s ease;
}
.hero__scroll:hover{ opacity:1; }
.hero__scroll::before{
  content:''; width:11px; height:11px; margin-top:-4px;
  border-right:2px solid var(--cream); border-bottom:2px solid var(--cream);
  transform:rotate(45deg); animation:dip 2.2s ease-in-out infinite;
}
@keyframes dip{ 0%,100%{ transform:translateY(0) rotate(45deg); } 50%{ transform:translateY(6px) rotate(45deg); } }
@media(prefers-reduced-motion:reduce){ .hero__scroll::before{ animation:none; } }

/* ============================================================ star product */
.star{ position:relative; padding:var(--sec-y) var(--pad) 0; overflow:hidden; }
.star::before{
  content:''; position:absolute; z-index:0; width:54vw; height:54vw; max-width:640px; max-height:640px;
  border-radius:50%; right:-14vw; top:-10vw; opacity:.26; filter:blur(30px);
  background:radial-gradient(circle,var(--red),transparent 66%);
}
.star__inner{
  position:relative; z-index:5; display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(40px,5vw,84px); align-items:center; max-width:1320px; margin:0 auto;
}
.star__photo{ position:relative; }
.star__photo figure{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/5; }
.star__photo img{ width:100%; height:100%; object-fit:cover; }
.bestseller{
  position:absolute; z-index:6; left:-14px; top:22px; display:flex; align-items:center; gap:9px;
  background:var(--gold); color:#2A1206; font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  font-weight:700; padding:10px 18px; border-radius:999px; box-shadow:0 14px 40px rgba(0,0,0,.5);
}
html[lang="th"] .bestseller, html[lang="zh"] .bestseller{ text-transform:none; letter-spacing:.04em; font-size:12px; }
.star h2{ font-size:clamp(38px,5.4vw,88px); }
.star h2 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--fuchsia),var(--red) 52%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.star__lede{ margin:26px 0 0; max-width:46ch; font-size:16px; line-height:1.74; opacity:.84; }

.variants{ margin-top:clamp(36px,4vw,48px); display:grid; gap:14px; }
.variant{
  display:flex; align-items:center; gap:20px; padding:20px 22px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:border-color .3s ease, background .3s ease;
}
.variant:hover{ border-color:var(--gold); background:rgba(198,146,20,.08); }
.variant__name{ flex:1; min-width:0; }
.variant__name b{ display:block; font-family:'Archivo',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.015em; text-transform:uppercase; }
html[lang="th"] .variant__name b{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; }
html[lang="zh"] .variant__name b{ font-family:'Noto Sans SC',sans-serif; text-transform:none; }
.variant__name span{ font-size:13px; opacity:.62; }
.variant__price{ display:flex; gap:18px; text-align:right; flex:none; }
.variant__price span{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.52; }
html[lang="th"] .variant__price span, html[lang="zh"] .variant__price span{ text-transform:none; letter-spacing:.02em; font-size:11px; }
.variant__price b{ font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; letter-spacing:-.02em; }
.crosssell{ margin-top:clamp(26px,3vw,36px); display:inline-flex; align-items:center; gap:12px; font-size:13.5px; opacity:.7; }
.crosssell img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
@media(max-width:900px){ .star__inner{ grid-template-columns:1fr; } .star__photo{ max-width:460px; } }

/* ================================================ sceau : parallax zoom-out
   La section est haute ; le contenu reste colle pendant que le logo retrecit,
   puis le scroll reprend normalement. Les variables sont pilotees par main.js. */
/* marge et non padding : le padding entrerait dans offsetHeight et faussererait
   le calcul de course du parallax, la marge non. */
.seal{ position:relative; height:280vh; margin-top:var(--sec-y); background:var(--void); }
.seal__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,34px);
}
.seal__glow{
  position:absolute; z-index:0; width:82vmin; height:82vmin; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(198,146,20,.20),transparent 68%);
  filter:blur(40px); opacity:var(--seal-glow,0);
}
.seal__logo{
  position:relative; z-index:2; width:clamp(148px,21vmin,232px); height:auto;
  /* --seal-shift recentre le logo agrandi dans l'ecran : sans lui, il grossit
     autour du centre de sa boite de mise en page, qui est plus haut que le
     centre du conteneur (le texte occupe le bas), et il vient toucher le
     bord superieur. La translation s'annule quand le logo reprend sa taille. */
  transform:translateY(var(--seal-shift,0px)) scale(var(--seal-scale,1));
  transform-origin:center center;
  will-change:transform;
}
.seal__text{
  position:relative; z-index:2; text-align:center; max-width:min(90vw,44rem);
  opacity:var(--seal-text,0);
  transform:translateY(calc((1 - var(--seal-text,0)) * 20px));
  will-change:opacity,transform;
}
.seal__tagline{
  margin:0; font-family:'Italiana',serif; font-weight:400; line-height:1.22;
  font-size:clamp(23px,3.4vw,46px); letter-spacing:.02em;
  /* les retours a la ligne viennent du texte traduit : chaque langue place sa coupe */
  white-space:pre-line;
}
html[lang="th"] .seal__tagline{ font-family:'Noto Sans Thai',sans-serif; font-weight:300; line-height:1.4; }
html[lang="zh"] .seal__tagline{ font-family:'Noto Sans SC',sans-serif; font-weight:300; line-height:1.4; }
html[lang="ru"] .seal__tagline{ font-family:'Jost',sans-serif; font-weight:300; }
.seal__addr{
  margin:clamp(12px,1.6vw,20px) 0 0; color:var(--gold-lt);
  font-size:clamp(10.5px,1.05vw,13px); letter-spacing:.24em; text-transform:uppercase;
}
html[lang="th"] .seal__addr,
html[lang="zh"] .seal__addr{ text-transform:none; letter-spacing:.06em; font-size:13px; }

/* 280vh au pouce, cela fait presque trois ecrans a faire defiler pour un seul
   zoom de logo : on raccourcit la course sur mobile. */
@media(max-width:900px){
  .seal{ height:185vh; }
}

@media(prefers-reduced-motion:reduce){
  .seal{ height:auto; padding:clamp(64px,9vw,120px) var(--pad); }
  .seal__sticky{ position:static; height:auto; }
  .seal__logo{ transform:none; }
  .seal__text{ opacity:1; transform:none; }
  .seal__glow{ opacity:1; }
}

/* ============================================================ bars */
.bars{ position:relative; padding-top:var(--sec-y); }
.sechead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px 32px; flex-wrap:wrap;
  padding:0 var(--pad); margin-bottom:var(--head-gap);
}
.sechead h2{ font-size:clamp(34px,5vw,82px); }
.sechead h2 em{ font-style:normal; color:var(--gold); }
.sechead p{ margin:0; max-width:34ch; font-size:14.5px; line-height:1.68; opacity:.66; }

.block{ display:flex; width:100%; }
.pan{
  position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; color:var(--cream);
  transition:flex-grow .55s cubic-bezier(.2,.7,.3,1); overflow:hidden;
}
.pan:hover{ flex-grow:1.45; }
.pan figure{ margin:0; aspect-ratio:4/5; overflow:hidden; }
.pan figure img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.pan:hover figure img{ transform:scale(1.06); }
.pan__body{ padding:22px clamp(16px,1.6vw,28px) 28px; display:flex; flex-direction:column; gap:7px; flex:1; }
.pan__body h3{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(16px,1.35vw,21px);
  letter-spacing:-.02em; text-transform:uppercase; line-height:1.08;
}
html[lang="th"] .pan__body h3{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; }
html[lang="zh"] .pan__body h3{ font-family:'Noto Sans SC',sans-serif; text-transform:none; }
.pan__th{ font-family:'Noto Sans Thai',sans-serif; font-size:12.5px; opacity:.66; }
.pan__price{
  margin-top:auto; padding-top:16px; display:flex; gap:14px; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; border-top:1px solid rgba(255,255,255,.24);
}
html[lang="th"] .pan__price, html[lang="zh"] .pan__price{ text-transform:none; letter-spacing:0; }
.pan__price b{ font-weight:700; }
.pan__chip{
  position:absolute; z-index:5; top:12px; left:12px; background:rgba(10,10,11,.72); backdrop-filter:blur(8px);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:5px 10px; border-radius:999px;
}
html[lang="th"] .pan__chip, html[lang="zh"] .pan__chip{ text-transform:none; letter-spacing:.02em; font-size:11px; }
.p1{ background:var(--pistachio); }
.p2{ background:var(--raspberry); }
.p3{ background:var(--cotton); color:var(--cotton-ink); }
.p3 .pan__price{ border-color:rgba(90,27,34,.28); }
.p3 .pan__chip{ background:rgba(90,27,34,.82); color:var(--cream); }

.pan--soon{
  flex:0 0 clamp(200px,19%,280px); background:var(--void-2); border-left:1px solid var(--line);
  justify-content:center; align-items:center; text-align:center; padding:36px 22px; gap:14px;
}
.pan--soon:hover{ flex-grow:0; }
.pan--soon .ring{
  width:74px; height:74px; border-radius:50%; border:1px dashed rgba(198,146,20,.55);
  display:grid; place-items:center; color:var(--gold); font-size:26px; font-family:'Italiana',serif;
}
.pan--soon b{ font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:-.015em; line-height:1.14; }
html[lang="th"] .pan--soon b{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; }
html[lang="zh"] .pan--soon b{ font-family:'Noto Sans SC',sans-serif; text-transform:none; }
.pan--soon span{ font-size:12.5px; opacity:.6; max-width:24ch; line-height:1.62; }
.pan--soon .note{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); opacity:.9; }
html[lang="th"] .pan--soon .note, html[lang="zh"] .pan--soon .note{ text-transform:none; letter-spacing:.02em; font-size:12px; }

/* Sous 900px l'accordeon n'a plus de sens et une barre de scroll horizontale
   est desagreable au doigt : la section se colle et les tablettes defilent
   lateralement au rythme du scroll vertical. Pilote par main.js. */
@media(max-width:900px){
  .bars__rail{ position:relative; height:var(--rail-h,300vh); }
  /* Le conteneur collant ne fait plus toute la hauteur d'ecran : centrees dans
     812px, les cartes laissaient 200px de vide sous le titre. Il se cale sous
     le header (top:68px) et se limite a 500px, ce qui ramene l'ecart a ~44px
     tout en empechant les cartes de passer sous le header une fois collees. */
  /* flex-start : centrees, les cartes laissaient un trou sous le titre */
  .bars__pin{
    position:sticky; top:68px; height:min(calc(100svh - 68px), 500px);
    display:flex; align-items:flex-start; overflow:hidden;
  }
  .block{
    width:max-content; padding:0 var(--pad); gap:14px;
    transform:translate3d(var(--bars-x,0px),0,0); will-change:transform;
  }
  .pan{
    flex:0 0 min(74vw,320px); border-radius:12px;
    max-height:min(70svh,540px);
  }
  .pan:hover{ flex-grow:0; }
  .pan figure{ aspect-ratio:1/1; }
  .pan--soon{
    flex:0 0 min(58vw,240px); border-left:0; border:1px solid var(--line);
    max-height:min(70svh,540px);
  }
}

/* ============================================================ chef */
/* Encadre comme Central Festival : filet ambre, coins 18px, fond un ton plus
   clair a l'interieur. L'espace avant la section passe en marge (le padding
   interne appartient a la carte, pas au rythme de page). */
.chef{
  position:relative; margin-top:var(--sec-y); margin-inline:var(--pad);
  border:1px solid var(--amber); border-radius:18px; overflow:hidden;
  background:var(--void-2);
  padding:clamp(44px,5.5vw,76px) var(--pad);
}
.highlights{ background:var(--void-2); }

/* sur mobile la section chef est entierement centree, et la photo se
   rapproche du texte qui la suit */
.chef__inner{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(44px,5.5vw,92px);
  align-items:center; max-width:1240px; margin:0 auto;
}
.portrait{ position:relative; }
.portrait figure{
  margin:0; border-radius:50% 50% 8px 8px / 40% 40% 8px 8px; overflow:hidden;
  border:1px solid rgba(198,146,20,.45); aspect-ratio:4/5;
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:52% 20%; }
.medal{
  position:absolute; right:-14px; bottom:24px; background:var(--pistachio); color:var(--cream);
  padding:14px 20px; border-radius:4px; max-width:200px; box-shadow:0 14px 38px rgba(0,0,0,.45);
}
.medal b{ display:block; font-family:'Italiana',serif; font-size:26px; color:var(--gold-lt); line-height:1; }
.medal span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.86; }
html[lang="th"] .medal span, html[lang="zh"] .medal span{ text-transform:none; letter-spacing:.02em; font-size:12px; }
/* Le surtitre du chef descend et vient presque toucher son nom : allege en
   graisse, decale vers le bas, et l'ecart sous lui reduit au minimum. */
.chef .eyebrow{ font-weight:400; margin-top:22px; margin-bottom:6px; }
.chef h2{ font-size:clamp(36px,4.8vw,76px); }
.chef h2 em{ font-style:normal; color:var(--gold); }
/* :not(.eyebrow) — le surtitre est aussi un <p> et heritait d'ici sa taille
   de texte et une marge haute de 26px qui n'etaient pas voulues */
.chef p:not(.eyebrow){ font-size:16px; line-height:1.76; opacity:.84; max-width:54ch; margin:26px 0 0; }
.creds{ margin-top:clamp(38px,4vw,48px); border-top:1px solid var(--line); }
.creds li{ display:flex; gap:22px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); }
/* Les millesimes etaient en Italiana : un didone tres fin, illisible a cette
   taille. Sans serif compact et or clair, bien plus net sur fond sombre. */
/* Les libelles sont devenus des noms propres ("Le Cordon Bleu") et non plus
   des millesimes : colonne fixe, capitales, corps reduit pour qu'ils tiennent
   sur une ou deux lignes sans pousser la description. */
.creds b{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
  color:var(--gold-lt); flex:0 0 124px;
}
.creds span{ font-size:15px; line-height:1.6; opacity:.86; }
/* Mobile : une seule colonne, tout centre, et la photo se rapproche nettement
   du texte qui la suit (les regles sont ici, apres .chef__inner, sinon la
   valeur de base l'emporte a specificite egale). */
@media(max-width:900px){
  .chef__inner{ grid-template-columns:1fr; gap:12px; text-align:center; }
  .portrait{ max-width:380px; margin-inline:auto; }
  .chef .eyebrow{ justify-content:center; }
  /* le grand filet du surtitre n'a pas de sens quand le texte est centre */
  .chef .eyebrow::before{ display:none; }
  .chef p{ margin-inline:auto; }
  /* le libelle passe au-dessus de sa description : cote a cote, "Le Cordon
     Bleu" laissait une colonne de texte trop etroite sur un ecran de telephone */
  .creds li{ flex-direction:column; align-items:center; gap:7px; }
  .creds b{ flex:none; }
}

/* ============================================================ visit */
/* marge : la photo est en pleine largeur, elle ne doit pas toucher la section
   precedente (les affiches Highlights la jouxtaient sans aucun espace).
   Bordure ambre : la section devient un cadre, donc elle est mise en retrait des
   bords de l'ecran (sinon le filet se collerait au bord et ne se lirait pas
   comme un encadrement) et recoit un espace interne sous son contenu. */
.visit{
  position:relative; margin-top:var(--sec-y); margin-inline:var(--pad);
  border:1px solid var(--amber); border-radius:18px; overflow:hidden;
  padding-bottom:clamp(44px,5vw,68px);
}
.visit__photo{ position:relative; }
.visit__photo img{ width:100%; height:clamp(300px,46vh,540px); object-fit:cover; }
.visit__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--void) 0%,rgba(10,10,11,.15) 34%,rgba(10,10,11,.55) 72%,var(--void) 100%);
}
.visit__inner{
  position:relative; z-index:5; margin-top:clamp(-160px,-14vw,-80px);
  padding:0 var(--pad); max-width:1240px; margin-left:auto; margin-right:auto;
}
.visit h2{ font-size:clamp(34px,4.8vw,76px); }
.visit h2 em{ font-style:normal; color:var(--gold); }
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3vw,36px); margin:clamp(40px,4.5vw,56px) 0 clamp(36px,4vw,44px);
}
.fact dt{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.52; margin-bottom:8px; }
html[lang="th"] .fact dt, html[lang="zh"] .fact dt{ text-transform:none; letter-spacing:.04em; font-size:12px; }
.fact dd{ margin:0; font-size:15px; line-height:1.62; }

/* ====================================================== seen on your feed */
.feed{ padding:var(--sec-y) 0 0; }
/* rose Instagram sur le mot « feed », au lieu de l'or du reste du site */
.feed .sechead h2 em{ color:#E1306C; }
.rail{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--pad) 26px; scrollbar-width:thin;
  scrollbar-color:rgba(198,146,20,.5) transparent;
  /* Sans cela, scroll-snap cale le bord de la premiere carte sur le bord du
     conteneur et annule le padding gauche : la carte collait au bord de
     l'ecran au lieu d'etre decalee comme celles de Three bars. */
  scroll-padding-inline:var(--pad);
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:3px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(198,146,20,.5); border-radius:3px; }

/* liseré degrade Instagram : adoucit la rupture entre l'embed clair et la page
   sombre, et signe la provenance des cartes */
.reel{
  position:relative; flex:0 0 clamp(300px,80vw,340px); scroll-snap-align:start;
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(var(--void-2),var(--void-2)) padding-box,
    linear-gradient(160deg,rgba(245,133,41,.55),rgba(221,42,123,.6) 48%,rgba(81,91,212,.45)) border-box;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.reel:hover{
  transform:translateY(-4px);
  background:
    linear-gradient(var(--void-2),var(--void-2)) padding-box,
    linear-gradient(160deg,#F58529,#DD2A7B 48%,#515BD4) border-box;
}
.reel--star{
  background:
    linear-gradient(var(--void-2),var(--void-2)) padding-box,
    linear-gradient(160deg,#F58529,#DD2A7B 48%,#8134AF) border-box;
}

/* l'embed Instagram impose sa propre hauteur : on lui reserve une fenetre fixe */
.reel__frame{ position:relative; height:clamp(500px,64vh,620px); background:#fff; }
.reel__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Facade : ce qui s'affiche AVANT que l'iframe Instagram n'existe. Le fond
   reste celui du site tant qu'on n'a pas demande la video — plus de rectangle
   blanc, et plus aucun appel a Instagram sur une visite qui ne clique pas. */
.reel__frame{ background:var(--void-2); }
.reel__frame--live{ background:#fff; }

/* Le fond est pose en JS : c'est la vignette du reel, assombrie par un
   degrade pour que le bouton et le libelle restent lisibles quelle que soit
   l'image. Si data-poster manque, on retombe sur le fond sombre du site. */
.reel__poster{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  cursor:pointer; background-color:var(--void-2);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.reel__poster::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(221,42,123,.22), transparent 64%);
  opacity:0; transition:opacity .35s ease;
}
.reel__poster:hover{ transform:scale(1.04); }
.reel__poster:hover::after{ opacity:1; }
.reel__poster-ico,.reel__poster-txt{ position:relative; z-index:2; }
.reel__poster-ico{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px); transition:.3s;
}
.reel__poster-ico::before{
  content:''; border-left:20px solid var(--cream);
  border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:6px;
}
.reel__poster:hover .reel__poster-ico{ background:#DD2A7B; border-color:#DD2A7B; }
.reel__poster-txt{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--gold-lt);
}
html[lang="th"] .reel__poster-txt,
html[lang="zh"] .reel__poster-txt{ text-transform:none; letter-spacing:.05em; font-size:13.5px; }

.reel__badge{
  position:absolute; z-index:4; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gold); color:#2A1206; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; padding:6px 12px; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
html[lang="th"] .reel__badge, html[lang="zh"] .reel__badge{ text-transform:none; letter-spacing:.03em; font-size:12px; }

.reel__meta{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.reel__meta b{ font-family:'Archivo',sans-serif; font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
.reel__meta span{ font-size:13px; opacity:.66; line-height:1.55; }
.reel__meta a{
  margin-top:auto; padding-top:12px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lt); font-weight:600;
}
html[lang="th"] .reel__meta a, html[lang="zh"] .reel__meta a{ text-transform:none; letter-spacing:.04em; font-size:13px; }
.reel__meta a:hover{ color:var(--cream); }

/* derniere carte : renvoi vers le compte */
.reel--follow{
  justify-content:center; align-items:center; text-align:center; gap:12px;
  padding:36px 26px; flex:0 0 clamp(220px,60vw,250px);
  background:
    linear-gradient(160deg,rgba(233,29,114,.14),var(--void-2) 60%) padding-box,
    linear-gradient(160deg,rgba(245,133,41,.55),rgba(221,42,123,.6) 48%,rgba(81,91,212,.45)) border-box;
}
.reel--follow .reel__ring{
  width:66px; height:66px; border-radius:50%; border:1px dashed rgba(198,146,20,.55);
  display:grid; place-items:center; color:var(--gold); font-size:22px;
}
.reel--follow b{ font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:-.015em; }
html[lang="th"] .reel--follow b{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; }
html[lang="zh"] .reel--follow b{ font-family:'Noto Sans SC',sans-serif; text-transform:none; }
.reel--follow span{ font-size:12.5px; opacity:.6; max-width:22ch; line-height:1.55; }
.reel__handle{ font-size:11px !important; letter-spacing:.18em; color:var(--gold-lt); opacity:1 !important; }

@media(max-width:520px){
  .reel__frame{ height:clamp(440px,58vh,540px); }
}

/* ============================================================ highlights */
.highlights{ padding:var(--sec-y) var(--pad) 0; }
.hl__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,34px);
  max-width:1240px; margin:0 auto;
}
.hl__item{ margin:0; }
.hl__item img{
  width:100%; height:auto; border-radius:18px;
  border:1px solid rgba(198,146,20,.26);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), border-color .4s ease;
}
.hl__item:hover img{ transform:translateY(-5px); border-color:var(--gold); }
.hl__item figcaption{
  margin-top:15px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
}
html[lang="th"] .hl__item figcaption,
html[lang="zh"] .hl__item figcaption{ text-transform:none; letter-spacing:.05em; font-size:13px; }
@media(max-width:760px){ .hl__grid{ grid-template-columns:1fr; gap:44px; } }

/* ============================================================ galerie masonry
   CSS multi-colonnes : les tuiles gardent leur hauteur naturelle et se rangent
   colonne par colonne, sans script ni hauteur imposee. */
/* derniere section avant le footer : elle porte aussi son espace inferieur */
.gallery{ padding:var(--sec-y) var(--pad); }
.masonry{ columns:4; column-gap:14px; max-width:1400px; margin:0 auto; }
.tile{
  display:block; width:100%; margin:0 0 14px; padding:0; break-inside:avoid;
  border:0; border-radius:12px; overflow:hidden; background:var(--void-2);
  position:relative; cursor:zoom-in; -webkit-appearance:none; appearance:none;
}
.tile img{
  width:100%; height:auto; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.tile:hover img{ transform:scale(1.05); }
.tile::after{
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .3s ease;
}
.tile:hover::after{ box-shadow:inset 0 0 0 1px rgba(198,146,20,.55); }

/* ------------------------------------------------------------- lightbox */
.lb{
  position:fixed; inset:0; z-index:220; background:rgba(6,6,7,.96);
  display:grid; place-items:center; padding:clamp(44px,6vw,72px) clamp(56px,8vw,110px);
  opacity:0; transition:opacity .28s ease;
  /* Zone de taille definie : sans cela le max-height:100% de l'image se resout
     contre une piste auto (reference circulaire) et l'image sort a sa taille
     naturelle en debordant du cadre. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  min-width:0; min-height:0; object-fit:contain;
  border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb__close{
  position:absolute; top:16px; right:20px; z-index:3; width:44px; height:44px; border-radius:50%;
  font-size:26px; line-height:1; background:rgba(255,255,255,.1); border:1px solid var(--line);
  backdrop-filter:blur(10px); display:grid; place-items:center; transition:.25s;
}
.lb__close:hover{ background:var(--gold); color:#2A1206; border-color:var(--gold); }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.09);
  border:1px solid var(--line); backdrop-filter:blur(10px); display:grid; place-items:center;
  transition:.25s;
}
.lb__nav:hover{ background:var(--gold); border-color:var(--gold); }
.lb__nav::before{
  content:''; width:10px; height:10px; border-top:2px solid var(--cream); border-right:2px solid var(--cream);
}
.lb__nav:hover::before{ border-color:#2A1206; }
.lb__nav--prev{ left:clamp(10px,2vw,26px); }
.lb__nav--prev::before{ transform:rotate(-135deg); margin-left:-2px; }
.lb__nav--next{ right:clamp(10px,2vw,26px); }
.lb__nav--next::before{ transform:rotate(45deg); margin-right:-2px; }
.lb__count{
  position:absolute; bottom:18px; left:0; right:0; text-align:center; margin:0;
  font-size:11.5px; letter-spacing:.2em; opacity:.55;
}
@media(max-width:600px){
  .lb{ padding:60px 12px 56px; }
  .lb__nav{ top:auto; bottom:14px; transform:none; }
  .lb__nav--prev{ left:calc(50% - 60px); }
  .lb__nav--next{ right:calc(50% - 60px); }
  .lb__count{ bottom:70px; }
}
/* le sticker de parfum est transparent : on lui donne une boite pour se poser */
.tile--sticker{ padding:clamp(16px,1.8vw,30px); border:1px solid rgba(198,146,20,.24); }
.tile--sticker:hover img{ transform:scale(1.04) rotate(-4deg); }

@media(max-width:1100px){ .masonry{ columns:3; } }
@media(max-width:700px){ .masonry{ columns:2; column-gap:10px; } .tile{ margin-bottom:10px; } }

/* ============================================================ footer */
.foot{ border-top:1px solid var(--line); padding:clamp(64px,8vw,104px) var(--pad) 40px; }
.foot__top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.foot__seal{ width:60px; height:60px; margin-bottom:14px; opacity:.92; }
.foot__mark{ font-family:'Italiana',serif; font-size:30px; }
.foot__tag{ margin:10px 0 0; font-size:14px; opacity:.62; max-width:34ch; }
.foot__label{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.5; margin-bottom:12px; }
html[lang="th"] .foot__label, html[lang="zh"] .foot__label{ text-transform:none; letter-spacing:.04em; font-size:12px; }
.socials{ display:flex; gap:10px; }
.socials a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; transition:.25s;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold); }
.socials svg{ width:18px; height:18px; fill:currentColor; }
.foot__bottom{
  margin-top:clamp(32px,4vw,52px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; opacity:.5;
}

/* Le sous-titre thai fait doublon quand le site est deja en thai. */
html[lang="th"] .pan__th,
html[lang="th"] .mitem__th{ display:none; }

/* ============================================================ menu QR */
.menu-page{ background:var(--void); }
.mbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px;
  padding:14px var(--pad); background:rgba(10,10,11,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.mbar__mark{ font-family:'Italiana',serif; font-size:23px; margin-right:auto; }

.menu{ max-width:760px; margin:0 auto; padding:clamp(26px,5vw,44px) var(--pad) 64px; }
.menu__kicker{
  margin:0 0 clamp(22px,4vw,34px); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-lt);
}
html[lang="th"] .menu__kicker, html[lang="zh"] .menu__kicker{ text-transform:none; letter-spacing:.1em; font-size:13px; }

.mgroup{ margin-bottom:clamp(30px,5vw,48px); }
.mgroup__title{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(19px,3.2vw,25px);
  letter-spacing:-.02em; text-transform:uppercase; padding-bottom:12px; margin-bottom:6px;
  border-bottom:1px solid var(--gold); color:var(--gold-lt);
}
html[lang="th"] .mgroup__title{ font-family:'Noto Sans Thai',sans-serif; text-transform:none; }
html[lang="zh"] .mgroup__title{ font-family:'Noto Sans SC',sans-serif; text-transform:none; }

.mitem{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.mitem:last-child{ border-bottom:0; }
.mitem__pic{ width:66px; height:66px; border-radius:12px; object-fit:cover; flex:none; }
.mitem__body{ flex:1; min-width:0; }
.mitem__body h3{ font-size:16.5px; font-weight:500; letter-spacing:.01em; }
.mitem__th{ margin:2px 0 0; font-family:'Noto Sans Thai',sans-serif; font-size:12.5px; opacity:.55; }
.mitem__desc{ margin:5px 0 0; font-size:13px; opacity:.66; line-height:1.5; }
.mitem__price{ flex:none; text-align:right; display:grid; gap:3px; font-size:14px; font-weight:500; }
.mitem__price i{
  font-style:normal; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.45; margin-right:7px;
}
html[lang="th"] .mitem__price i, html[lang="zh"] .mitem__price i{ text-transform:none; letter-spacing:.02em; font-size:11px; }

.tag{
  display:inline-block; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; padding:4px 9px; border-radius:999px;
}
html[lang="th"] .tag, html[lang="zh"] .tag{ text-transform:none; letter-spacing:.02em; font-size:11px; }
.tag--dubai{ background:var(--pistachio); color:var(--cream); }
.tag--thai{ background:var(--cotton); color:var(--cotton-ink); }

.menu__note{ margin:26px 0 0; font-size:12.5px; opacity:.45; }
.menu__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

@media(max-width:420px){
  .mitem{ gap:12px; }
  .mitem__pic{ width:56px; height:56px; }
  .mitem__price{ font-size:13px; }
}

/* ============================================================ reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .badge i{ animation:none; }
  .pan,.pan figure img{ transition:none; }
}