/* =========================================================
   Fruit Factory v9 — Site styles
   Palette derived from the brand logo + the product photography
   (warm cream marble backgrounds, plum outlines, pink/green/mango pops)
   ========================================================= */
:root{
  --plum-950:#160C33;
  --plum-900:#1E1244;
  --plum-800:#2B1B5C;
  --plum-700:#3A2778;
  --pink:#F0197A;
  --pink-soft:#FF5FA8;
  --green:#23A85F;
  --green-bright:#4FE08F;
  --mango:#FFB13C;
  --mango-deep:#F08A00;
  --brown:#8A5A33;
  --cream:#FAF1E2;
  --cream-deep:#F3E6D0;
  --card:#FFFBF4;
  --ink:#241338;
  --ink-soft:#6E6188;
  --ink-faint:#9C92B4;
  --line:rgba(36,19,56,.10);
  --line-strong:rgba(36,19,56,.18);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 10px 30px -12px rgba(36,19,56,.22);
  --shadow-pop:0 18px 50px -16px rgba(36,19,56,.35);
  --nav-h:118px;
  --nav-compact:82px;
  --font-display:'Baloo Bhaijaan 2', 'Alexandria', system-ui, sans-serif;
  --font-body:'Alexandria', 'Baloo Bhaijaan 2', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }
#menu,#about,#process,#branches{ scroll-margin-top:104px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
::selection{ background:var(--mango); color:var(--plum-950); }

.container{ width:min(1540px, calc(100vw - max(32px, 6vw))); margin-inline:auto; }

h1,h2,h3,.display{ font-family:var(--font-display); line-height:1.25; margin:0; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   NAV — topline + floating glass pill
   ========================================================= */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:60;
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.topline{
  background:linear-gradient(90deg, var(--plum-900), var(--plum-700) 45%, var(--plum-900));
  background-size:200% 100%;
  animation:tlshift 9s linear infinite alternate;
  color:#D9CFF2;
  overflow:hidden;
  max-height:40px;
  transition:max-height .4s var(--ease), opacity .3s;
}
@keyframes tlshift{ to{ background-position:100% 0; } }
.nav.scrolled .topline{ max-height:0; opacity:0; }
.topline-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:.8rem; font-weight:500; padding:9px 0;
}
.tl-item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.tl-item i{ width:7px; height:7px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 0 4px rgba(79,224,143,.15); animation:pulse 2.2s infinite; }
.tl-wa{ color:var(--mango); font-weight:700; transition:color .25s; }
.tl-wa:hover{ color:#fff; }
.pillnav{
  display:flex; align-items:center; gap:16px;
  margin-top:12px;
  background:rgba(22,12,51,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:9px 12px 9px 20px;
  box-shadow:0 14px 44px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), margin .35s var(--ease), padding .35s var(--ease);
}
[dir="rtl"] .pillnav{ padding:9px 20px 9px 12px; }
.nav.scrolled .pillnav{
  margin-top:10px;
  background:rgba(22,12,51,.88);
  box-shadow:0 16px 46px -16px rgba(0,0,0,.65);
}
.nav .logo-img{ height:52px; width:auto; transition:height .35s var(--ease); }
.nav.scrolled .logo-img{ height:46px; }
.nav-links{ display:flex; align-items:center; gap:0; margin-inline-start:4px; }
.nav-links a{
  position:relative;
  color:#EDE6FF; font-weight:500; font-size:.86rem;
  padding:9px 11px; border-radius:999px; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; inset-inline:15px; bottom:5px; height:2.5px;
  border-radius:3px; background:linear-gradient(90deg, var(--mango), var(--pink));
  transform:scaleX(0); transform-origin:var(--tx-o, left);
  transition:transform .35s var(--ease);
}
[dir="rtl"] .nav-links a::after{ --tx-o:right; }
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-spacer{ flex:1; }
.lang-btn{
  color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.04em;
  border:1.5px solid rgba(255,255,255,.35); border-radius:999px;
  padding:7px 16px;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lang-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
.nav-action{
  position:relative; flex:none; width:42px; height:42px;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.2);
  border-radius:50%; color:#fff; background:rgba(255,255,255,.07);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.nav-action:hover{ transform:translateY(-2px); background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.38); }
.nav-action svg{ width:19px; height:19px; }
.nav-action b{
  position:absolute; top:-5px; inset-inline-end:-5px; min-width:20px; height:20px;
  display:grid; place-items:center; padding:0 5px; border:2px solid var(--plum-950);
  border-radius:999px; color:#fff; background:var(--pink); font-size:.65rem; line-height:1;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:13px 26px; border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:active{ transform:scale(.96); }
.btn-mango{ background:linear-gradient(135deg, #FFC670, var(--mango) 55%, var(--mango-deep)); color:var(--plum-950); box-shadow:0 10px 26px -10px rgba(240,138,0,.65); }
.btn-mango:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(240,138,0,.75); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-wa{ background:linear-gradient(135deg, #4AE58A, #25D366 60%, #17A94E); color:#06301A; box-shadow:0 10px 26px -10px rgba(37,211,102,.55); }
.btn-wa:hover{ transform:translateY(-2px); }
.nav .btn{ padding:10px 20px; font-size:.92rem; }
.ic{ width:1.15em; height:1.15em; flex:none; }

/* shine sweep on key CTAs */
.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
  content:""; position:absolute; top:-40%; bottom:-40%; width:34%;
  inset-inline-start:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:shine 3.8s var(--ease) infinite;
}
@keyframes shine{ 0%, 55%{ inset-inline-start:-60%; } 90%, 100%{ inset-inline-start:130%; } }

.burger{ display:none; width:44px; height:44px; border-radius:12px; color:#fff; align-items:center; justify-content:center; }
.burger svg{ width:26px; height:26px; }

/* Mobile sheet */
.sheet{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(22,12,51,.55); backdrop-filter:blur(4px);
}
.sheet.open{ display:block; }
.sheet-panel{
  position:absolute; top:0; inset-inline-end:0; height:100%;
  width:min(320px, 84vw);
  background:var(--plum-950); color:#fff;
  padding:26px 24px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(calc(var(--flip,1) * 100%));
  animation:sheetIn .35s var(--ease) forwards;
}
[dir="ltr"] .sheet-panel{ --flip:1; }
[dir="rtl"] .sheet-panel{ --flip:-1; }
@keyframes sheetIn{ to{ transform:none; } }
.sheet-panel a{ padding:14px 10px; font-family:var(--font-display); font-weight:600; font-size:1.15rem; border-bottom:1px solid rgba(255,255,255,.08); }
.sheet-close{ align-self:flex-end; color:#fff; width:42px; height:42px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(700px 420px at 12% -8%, rgba(240,25,122,.28), transparent 60%),
    radial-gradient(640px 420px at 95% 12%, rgba(255,177,60,.20), transparent 60%),
    radial-gradient(700px 500px at 55% 118%, rgba(43,184,106,.22), transparent 60%),
    var(--plum-950);
  color:#fff;
  padding:calc(var(--nav-h) + 54px) 0 0;
  overflow:hidden;
}
.hero::before{ /* faint fruit-dot texture */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1.3px, transparent 1.3px);
  background-size:26px 26px;
  mask-image:linear-gradient(#000 55%, transparent);
  pointer-events:none;
}
.hero-grid{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:44px; align-items:center; padding-bottom:70px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:.9rem; color:var(--mango);
  background:rgba(255,177,60,.12); border:1px solid rgba(255,177,60,.35);
  padding:7px 16px; border-radius:999px;
}
.eyebrow i{ width:8px; height:8px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 0 4px rgba(79,224,143,.18); animation:pulse 2.2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(79,224,143,.05);} }

.hero h1{
  font-size:clamp(2.5rem, 5.4vw, 4.1rem);
  font-weight:800; line-height:1.22;
  margin:22px 0 18px;
  letter-spacing:.005em;
}
.hero-title-accent{ color:var(--mango); }
.ticker{
  display:inline-grid; vertical-align:bottom;
  height:1.32em; overflow:hidden;
  border-bottom:5px solid currentColor; border-radius:3px;
}
.ticker > span{
  grid-area:1/1; display:block; line-height:1.32;
  transform:translateY(110%); opacity:0;
  transition:transform .55s var(--ease), opacity .4s;
  white-space:nowrap;
}
.ticker > span.on{ transform:none; opacity:1; }
.ticker > span.out{ transform:translateY(-110%); opacity:0; }
.t-orange{ color:var(--mango); }
.t-pink{ color:var(--pink-soft); }
.t-green{ color:var(--green-bright); }
.t-red{ color:#FF6B6B; }
.t-purple{ color:#C9A6FF; }

.hero p.lead{ color:#D9CFF2; font-size:1.08rem; max-width:46ch; margin:0 0 30px; font-weight:300; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:30px; margin-top:40px; flex-wrap:wrap; }
.hstat{ display:flex; flex-direction:column; gap:2px; }
.hstat b{ font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--mango); line-height:1; }
.hstat span{ font-size:.85rem; color:#B7ABDA; font-weight:500; }

/* Photo fan */
.hero-fan{ position:relative; height:520px; }
.fan-card{
  position:absolute; width:min(300px, 30vw); aspect-ratio:1;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-pop);
  border:5px solid rgba(255,255,255,.9);
  will-change:transform;
  transition:transform .5s var(--ease);
}
.fan-card img{ width:100%; height:100%; object-fit:cover; }
.fan-1{ top:6%;  inset-inline-start:2%;  transform:rotate(-7deg); z-index:1; }
.fan-2{ top:26%; inset-inline-start:36%; transform:rotate(4deg);  z-index:3; }
.fan-3{ top:54%; inset-inline-start:8%;  transform:rotate(-3deg); z-index:2; }
.fan-card:hover{ z-index:5; transform:rotate(0) scale(1.04) !important; }
.fan-sticker{
  position:absolute; z-index:6; top:16%; inset-inline-end:2%;
  background:var(--pink); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  padding:10px 22px; border-radius:999px; transform:rotate(8deg);
  box-shadow:0 12px 28px -8px rgba(240,25,122,.6);
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:rotate(8deg) translateY(-9px);} }

/* Marquee */
.marquee{ position:relative; padding:0 0 0; background:transparent; }
.marquee-track{
  display:flex; gap:16px; width:max-content;
  animation:marq 46s linear infinite;
  padding-bottom:56px;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee img{
  width:190px; height:190px; object-fit:cover;
  border-radius:var(--r-md);
  border:4px solid rgba(255,255,255,.85);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
  transition:transform .4s var(--ease);
}
.marquee img:hover{ transform:translateY(-8px) rotate(-1.5deg); }
@keyframes marq{ to{ transform:translateX(calc(var(--dirn,-1) * 50%)); } }
[dir="rtl"] .marquee-track{ --dirn:1; }
.hero .wave{ display:block; width:100%; margin-top:-2px; }

/* =========================================================
   CATEGORY RAIL
   ========================================================= */
.cat-rail{
  position:sticky; top:var(--nav-compact); z-index:50;
  background:rgba(250,241,226,.97);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  padding:9px 0;
}
.cat-scroll{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px; padding:2px 4px;
}
.cat-scroll::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:.8rem; color:var(--ink-soft);
  background:#fff; border:1.5px solid var(--line);
  padding:6px 13px; border-radius:999px;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.chip small{ font-size:.68rem; color:var(--ink-faint); font-weight:600; }
.chip:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.chip.on{ background:var(--plum-950); border-color:var(--plum-950); color:#fff; }
.chip.on small{ color:var(--mango); }

/* =========================================================
   MENU
   ========================================================= */
.menu{
  position:relative; isolation:isolate; overflow:hidden;
  padding:70px 0 90px;
}
.menu::before,.branches::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/deco/artwork-fruit.webp") repeat;
  background-size:760px auto;
  opacity:.115; mix-blend-mode:multiply;
}
.menu > .container,.branches > .container{ position:relative; z-index:1; }
.section-head{ margin-bottom:34px; }
.section-head .kicker{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--pink); font-weight:700; font-size:.9rem;
}
.section-head .kicker::before{ content:""; width:26px; height:3px; border-radius:3px; background:var(--pink); }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:800; margin-top:10px; }
.section-head p{ color:var(--ink-soft); margin:8px 0 0; max-width:60ch; }

.menu-tools{ display:flex; gap:14px; align-items:center; margin:26px 0 10px; flex-wrap:wrap; }
.search-box{
  flex:1; min-width:260px; display:flex; align-items:center; gap:11px;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:14px 22px;
  box-shadow:0 6px 22px -14px rgba(36,19,56,.25);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.search-box:focus-within{
  border-color:var(--pink);
  box-shadow:0 0 0 5px rgba(240,25,122,.10), 0 12px 30px -14px rgba(240,25,122,.35);
  transform:translateY(-1px);
}
.search-box svg{ width:20px; height:20px; color:var(--ink-faint); flex:none; transition:color .3s; }
.search-box:focus-within svg{ color:var(--pink); }
.search-clear{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream-deep); color:var(--ink-soft);
  transition:all .2s var(--ease);
}
.search-clear:hover{ background:var(--pink); color:#fff; transform:rotate(90deg); }
.skbd{
  flex:none; font-family:var(--font-body); font-size:.72rem; font-weight:700;
  color:var(--ink-faint); border:1.5px solid var(--line); border-bottom-width:3px;
  border-radius:7px; padding:2px 9px; user-select:none;
}
@media (hover:none){ .skbd{ display:none; } }
.search-box input{
  border:0; outline:0; background:none; width:100%;
  font-size:.98rem; color:var(--ink);
}
.search-box input::placeholder{ color:var(--ink-faint); }
.result-count{ font-size:.88rem; color:var(--ink-faint); font-weight:500; }

.cat-block{ margin-top:44px; }
.cat-title{
  display:flex; align-items:baseline; gap:14px; margin-bottom:20px;
  padding-bottom:12px; border-bottom:2px dashed var(--line-strong);
}
.cat-title h3{ font-size:1.45rem; font-weight:800; }
.cat-title .en{ color:var(--ink-faint); font-weight:500; font-size:.95rem; }
.cat-title .cnt{
  margin-inline-start:auto;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--plum-800); background:#fff; border:1.5px solid var(--line);
  padding:3px 13px; border-radius:999px;
}

.grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}

/* ---- Product card: clean image, details appear on hover ---- */
.pcard{
  position:relative; min-width:0; overflow:hidden;
  border:1px solid var(--line); border-radius:24px;
  background:var(--card); box-shadow:0 8px 24px -14px rgba(36,19,56,.28);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.pcard:hover, .pcard:focus-within{ transform:translateY(-7px); border-color:rgba(240,25,122,.22); box-shadow:var(--shadow-card); outline:0; }
.pcard-media{ position:relative; aspect-ratio:1.08 / 1; overflow:hidden; background:var(--cream-deep); }
.pcard .bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.pcard:hover .bg{ transform:scale(1.06); }
.pcard .bgph{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.pcard .bgph span{
  font-family:var(--font-display); font-weight:800; font-size:5.2rem;
  color:rgba(36,19,56,.14); transform:translateY(-16%);
}
.ph-orange{ background:linear-gradient(150deg,#FFE9C8,#FFCE8A); }
.ph-green{  background:linear-gradient(150deg,#DCF5E4,#AEE5C1); }
.ph-pink{   background:linear-gradient(150deg,#FFE1EE,#FFBDD9); }
.ph-purple{ background:linear-gradient(150deg,#E9E1FF,#CDBCF4); }
.ph-brown{  background:linear-gradient(150deg,#F3E2CE,#E0C39C); }

.cat-badge{
  position:absolute; top:14px; inset-inline-start:14px; z-index:4;
  background:rgba(255,251,244,.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.65);
  color:var(--ink); font-weight:600; font-size:.76rem;
  padding:5px 14px; border-radius:999px;
  box-shadow:0 4px 14px -6px rgba(36,19,56,.25);
}
.badge-new{
  position:absolute; top:54px; inset-inline-end:14px; z-index:4;
  background:var(--pink); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  padding:5px 15px; border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(240,25,122,.55);
}

.fav-button{
  position:absolute; top:13px; inset-inline-end:13px; z-index:5;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.75); border-radius:12px;
  color:transparent; background:rgba(255,251,244,.84);
  box-shadow:0 8px 18px -9px rgba(36,19,56,.38); backdrop-filter:blur(10px);
  transition:transform .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.fav-button svg{ width:20px; height:20px; stroke:var(--plum-800); }
.fav-button:hover{ transform:scale(1.08); background:#fff; }
.fav-button.on{ color:var(--pink); background:#fff; }
.fav-button.on svg{ stroke:var(--pink); }
.quick-panel{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; color:#fff;
  background:linear-gradient(180deg, rgba(22,12,51,.08) 8%, rgba(22,12,51,.78) 64%, rgba(22,12,51,.96) 100%);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.pcard:hover .quick-panel, .pcard:focus-within .quick-panel, .pcard.is-open .quick-panel{ opacity:1; transform:none; pointer-events:auto; }
.quick-label{ font-family:var(--font-display); font-size:1rem; font-weight:700; }
.quick-hint{ margin-top:10px; color:rgba(255,255,255,.68); font-size:.7rem; }
.pcard-info{ min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 19px 18px; }
.pcard-info > div{ min-width:0; }
.pname{ overflow:hidden; font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.35; color:var(--plum-950); text-overflow:ellipsis; white-space:nowrap; }
.pname-en{
  overflow:hidden; margin-top:3px; color:var(--ink-soft); font-size:.76rem; font-weight:500;
  text-overflow:ellipsis; white-space:nowrap;
}
.pcard-arrow{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--plum-800); background:var(--cream-deep); transition:all .25s var(--ease); }
.pcard:hover .pcard-arrow{ color:#fff; background:var(--pink); transform:rotate(12deg); }
.pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(255,255,255,.82); background:rgba(255,255,255,.94);
  border-radius:999px; padding:7px 11px;
  font-size:.84rem; font-weight:600; color:var(--ink);
  box-shadow:0 3px 10px -5px rgba(36,19,56,.22);
  transition:all .22s var(--ease);
  position:relative;
}
.pill b{ font-family:var(--font-display); color:var(--plum-800); font-weight:700; }
.pill b em{ font-family:var(--font-body); font-style:normal; font-size:.58rem; color:var(--ink-faint); }
.pill small{ color:var(--ink-faint); font-weight:600; font-size:.76rem; }
.pill:hover{ background:#F1FBF4; border-color:var(--green); transform:translateY(-2px); }
.pill:hover .padd{ background:var(--green); color:#fff; }
.padd{
  width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream-deep); color:var(--ink-soft);
  font-weight:800; font-size:.85rem; line-height:1;
  transition:all .22s var(--ease);
}
.pill.zap{ animation:zap .45s var(--ease); border-color:var(--green); }
@keyframes zap{ 40%{ transform:scale(.92);} 70%{ transform:scale(1.06);} }

.empty-menu{
  text-align:center; padding:70px 20px; color:var(--ink-faint);
}
.empty-menu b{ font-family:var(--font-display); font-size:1.3rem; color:var(--ink-soft); display:block; margin-bottom:6px; }

/* =========================================================
   ABOUT BAND
   ========================================================= */
.about{
  background:
    radial-gradient(600px 400px at 88% 0%, rgba(240,25,122,.20), transparent 60%),
    radial-gradient(600px 400px at 6% 100%, rgba(255,177,60,.16), transparent 60%),
    var(--plum-950);
  color:#fff; padding:86px 0;
  position:relative; overflow:hidden;
}
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.about h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); font-weight:800; margin:12px 0 18px; }
.about p{ color:#D9CFF2; font-weight:300; font-size:1.05rem; }
.about .accent{ color:var(--mango); font-weight:600; }
.feat-list{ display:grid; gap:16px; }
.feat{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md); padding:18px 20px;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.feat:hover{ transform:translateX(calc(var(--flip,1) * -6px)); background:rgba(255,255,255,.08); }
[dir="rtl"] .feat{ --flip:-1; }
.feat-ic{
  flex:none; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; color:var(--plum-950);
}
.feat-ic svg{ width:24px; height:24px; }
.fi-mango{ background:var(--mango); }
.fi-green{ background:var(--green-bright); }
.fi-pink{ background:var(--pink-soft); }
.feat b{ font-family:var(--font-display); font-size:1.06rem; display:block; }
.feat span{ color:#C4B8E6; font-size:.9rem; font-weight:300; }

/* =========================================================
   BRANCHES
   ========================================================= */
.branches{
  position:relative; isolation:isolate; overflow:hidden;
  padding:86px 0;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(243,230,208,.28));
}
.branch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
.branch{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 4px 16px -10px rgba(36,19,56,.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.branch:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.branch .num{
  font-family:var(--font-display); font-weight:800; color:var(--mango-deep);
  font-size:.9rem; letter-spacing:.06em;
}
.branch h3{ font-size:1.5rem; font-weight:800; }
.branch .city{ color:var(--ink-soft); font-size:.95rem; }
.branch .map-link{
  margin-top:14px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-family:var(--font-display); color:var(--plum-800);
  border:2px solid var(--plum-800); border-radius:999px; padding:10px 22px;
  transition:all .25s var(--ease);
}
.branch .map-link:hover{ background:var(--plum-800); color:#fff; }

/* =========================================================
   CART
   ========================================================= */
.cart-bar{
  position:fixed; z-index:65; inset-inline:0; bottom:18px;
  display:flex; justify-content:center; pointer-events:none;
  transform:translateY(120px); transition:transform .45s var(--ease);
}
.cart-bar.show{ transform:none; }
.cart-bar-inner{
  pointer-events:auto;
  display:flex; align-items:center; gap:18px;
  background:var(--plum-950); color:#fff;
  border-radius:999px; padding:12px 14px 12px 26px;
  box-shadow:0 20px 50px -14px rgba(22,12,51,.6);
  border:1px solid rgba(255,255,255,.14);
}
[dir="ltr"] .cart-bar-inner{ padding:12px 26px 12px 14px; }
.cart-sum{ display:flex; flex-direction:column; line-height:1.3; }
.cart-sum b{ font-family:var(--font-display); font-size:1.02rem; }
.cart-sum span{ font-size:.8rem; color:#B7ABDA; }
.cart-bar .btn{ padding:11px 22px; font-size:.95rem; }

.drawer-wrap{ position:fixed; inset:0; z-index:80; display:none; }
.drawer-wrap.open{ display:block; }
.drawer-bg{ position:absolute; inset:0; background:rgba(22,12,51,.6); }
.drawer{
  position:absolute; bottom:0; inset-inline:0; margin-inline:auto;
  width:min(560px, 100%);
  background:var(--cream); border-radius:26px 26px 0 0;
  max-height:88vh; display:flex; flex-direction:column;
  animation:drawerUp .22s ease-out; will-change:transform;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
}
@keyframes drawerUp{ from{ transform:translateY(40px); opacity:0; } }
.drawer-head{
  display:flex; align-items:center; gap:12px;
  padding:20px 26px 14px; border-bottom:1.5px dashed var(--line-strong);
}
.drawer-head h3{ font-size:1.3rem; font-weight:800; flex:1; }
.drawer-close{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); }
.drawer-body{ padding:16px 26px; overflow-y:auto; flex:1; }
.citem{
  display:flex; align-items:center; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.citem img, .citem .cth{
  width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none;
  background:var(--cream-deep);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:rgba(36,19,56,.25);
}
.citem-info{ flex:1; min-width:0; }
.citem-info b{ font-family:var(--font-display); font-weight:700; display:block; font-size:.98rem; }
.citem-info span{ font-size:.8rem; color:var(--ink-faint); font-weight:500; }
.qty{ display:flex; align-items:center; gap:2px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:3px; }
.qty button{ width:28px; height:28px; border-radius:50%; font-weight:800; font-size:1rem; display:grid; place-items:center; color:var(--plum-800); }
.qty button:hover{ background:var(--cream-deep); }
.qty b{ min-width:24px; text-align:center; font-family:var(--font-display); font-size:.95rem; }
.citem-price{ font-family:var(--font-display); font-weight:700; color:var(--plum-800); font-size:.95rem; white-space:nowrap; }

.drawer-fields{ display:grid; gap:10px; margin-top:16px; }
.field input, .field textarea{
  width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  background:#fff; padding:12px 16px; font-size:.95rem; color:var(--ink); outline:0;
  transition:border-color .25s;
  resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--plum-800); }
.drawer-foot{
  padding:16px 26px 24px; border-top:1.5px dashed var(--line-strong);
  display:flex; align-items:center; gap:16px;
}
.total{ flex:1; }
.total span{ font-size:.82rem; color:var(--ink-faint); font-weight:600; display:block; }
.total b{ font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--plum-950); }
.fly-dot{
  position:fixed; z-index:90; width:14px; height:14px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(35,168,95,.25);
  pointer-events:none;
}

/* Investment info modal */
.info-drawer{ width:min(680px, 100%); }
.info-lead{ font-size:1rem; font-weight:600; color:var(--plum-950); line-height:1.7; margin-bottom:16px; }
.info-drawer p{ font-size:.92rem; color:var(--ink-soft); line-height:1.85; margin:0 0 14px; }
.invest-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:18px 0; }
.invest-card{ background:var(--cream-deep); border:1px solid var(--line); border-radius:18px; padding:16px 18px; }
.invest-card b{ display:block; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--plum-950); margin-bottom:6px; }
.invest-card span{ font-size:.85rem; color:var(--ink-soft); line-height:1.7; }
@media (max-width: 560px){ .invest-cards{ grid-template-columns:1fr; } }
.invest-cta{ width:100%; justify-content:center; margin-top:6px; }

/* Success-story lead form modal reuses .order-drawer / .order-form styles below */

/* Order-info modal */
.order-drawer{ width:min(520px, 100%); }
.order-form{ display:grid; gap:16px; }
.order-form .field{ display:grid; gap:6px; }
.order-form .field[hidden], .branch-badge[hidden]{ display:none !important; }
.field-label{ font-size:.85rem; font-weight:700; color:var(--plum-950); }
.field-hint{ font-size:.78rem; color:var(--ink-faint); }
.order-form select{
  width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  background:#fff; padding:12px 16px; font-size:.95rem; color:var(--ink); outline:0;
}
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg-btn{
  flex:1; min-width:130px; padding:11px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:#fff; color:var(--ink-soft);
  font-weight:600; font-size:.88rem; transition:all .2s var(--ease);
}
.seg-btn.active{ background:var(--plum-950); border-color:var(--plum-950); color:#fff; }
#orderSubmit{ width:100%; justify-content:center; margin-top:4px; }

.branch-badge{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px;
  font-size:.85rem; font-weight:600; color:var(--plum-950); line-height:1.6;
  animation:branchIn .35s var(--ease);
}
.branch-badge .bb-icon{ font-size:1.3rem; line-height:1; }
.branch-badge.branch-0{ background:linear-gradient(135deg, #FFE9C6, #FFD59A); }
.branch-badge.branch-1{ background:linear-gradient(135deg, #D8F3DE, #BEEACB); }
@keyframes branchIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.order-form select optgroup{ font-weight:700; font-style:normal; }

/* Favorites drawer */
.favorites-drawer{ width:min(620px, 100%); }
.fav-item{
  position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center; gap:14px; padding:13px 42px 13px 0; border-bottom:1px solid var(--line);
}
[dir="ltr"] .fav-item{ padding:13px 0 13px 42px; }
.fav-item > img, .fav-item > .fthumb{ width:72px; height:72px; border-radius:16px; object-fit:cover; background:var(--cream-deep); }
.fav-item > .fthumb{ display:grid; place-items:center; color:rgba(36,19,56,.25); font-family:var(--font-display); font-size:1.5rem; font-weight:800; }
.fav-item-copy{ min-width:0; }
.fav-item-copy small, .fav-item-copy b, .fav-item-copy span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-item-copy small{ color:var(--pink); font-size:.7rem; font-weight:700; }
.fav-item-copy b{ margin-top:2px; color:var(--plum-950); font-family:var(--font-display); font-size:1rem; }
.fav-item-copy span{ color:var(--ink-faint); font-size:.75rem; }
.fav-view{ padding:8px 14px; border-radius:999px; color:#fff; background:var(--plum-800); font-size:.75rem; font-weight:700; }
.fav-remove{ position:absolute; top:50%; inset-inline-end:0; width:32px; height:32px; border-radius:10px; color:var(--ink-faint); background:#fff; font-size:1.2rem; transform:translateY(-50%); }
.fav-remove:hover{ color:#fff; background:var(--pink); }
.favorites-empty{ min-height:260px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:30px; text-align:center; }
.favorites-empty > span{ width:60px; height:60px; display:grid; place-items:center; border-radius:20px; color:var(--pink); background:rgba(240,25,122,.08); font-size:2.1rem; }
.favorites-empty b{ margin-top:16px; font-family:var(--font-display); font-size:1.15rem; }
.favorites-empty p{ max-width:300px; margin:5px 0 0; color:var(--ink-faint); font-size:.85rem; }
.favorites-foot{ padding:16px 26px 24px; border-top:1.5px dashed var(--line-strong); }
.favorites-foot .btn{ width:100%; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--plum-950); color:#B7ABDA; padding:60px 0 30px; }
.footer-grid{ display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.footer .logo-img{ width:200px; height:auto; max-height:120px; object-fit:contain; image-rendering:-webkit-optimize-contrast; filter:drop-shadow(0 3px 8px rgba(0,0,0,.22)); }
.footer-col{ display:flex; flex-direction:column; gap:9px; min-width:150px; }
.footer-col b{ font-family:var(--font-display); color:#fff; font-size:1.02rem; margin-bottom:4px; }
.footer-col a{ font-size:.92rem; transition:color .25s, text-shadow .25s; }
.footer-col a:hover{ text-shadow:0 0 14px rgba(255,159,28,.55); }
#footTel{ direction:ltr; unicode-bidi:isolate; display:inline-block; text-align:right; width:100%; }
.footer-col a:hover{ color:var(--mango); }
.footer-bottom{
  margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.82rem;
}
.footer-bottom a{ color:var(--mango); font-weight:600; }
.dash-link{ opacity:.55; }
.dash-link:hover{ opacity:1; }

.preview-toast{
  position:fixed; z-index:66; top:calc(var(--nav-h) + 10px); inset-inline-end:14px;
  background:var(--mango); color:var(--plum-950);
  font-weight:700; font-size:.82rem; font-family:var(--font-display);
  padding:9px 18px; border-radius:999px; box-shadow:0 10px 26px -8px rgba(240,138,0,.5);
  display:none; align-items:center; gap:10px;
}
.preview-toast.show{ display:inline-flex; }
.preview-toast button{ font-weight:800; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1300px){
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .nav-links a{ padding-inline:10px; font-size:.88rem; }
  .pillnav{ gap:10px; }
  .nav .btn-wa-desktop{ display:none; }
}
@media (max-width: 1020px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .hero-grid{ grid-template-columns:1fr; gap:20px; }
  .hero-fan{ height:420px; max-width:560px; margin-inline:auto; width:100%; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 820px){
  .nav-links, .nav .btn-wa-desktop{ display:none; }
  .burger{ display:grid; }
  .branch-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:13px; }
  .pcard{ min-height:0; padding:0; border-radius:21px; }
  .pcard-media{ aspect-ratio:1 / 1; }
  .pcard-info{ min-height:82px; padding:14px; }
  .quick-panel{ padding:15px; }
  .pname{ font-size:.98rem; }
  .pname-en{ font-size:.72rem; }
  .pill{ padding:4px 9px; font-size:.78rem; gap:5px; }
  .padd{ width:15px; height:15px; font-size:.78rem; }
  .cat-badge{ font-size:.68rem; padding:4px 11px; top:11px; inset-inline-start:11px; }
  .badge-new{ font-size:.72rem; padding:4px 12px; top:51px; inset-inline-end:11px; }
  .fav-button{ top:10px; inset-inline-end:10px; width:36px; height:36px; }
  .pcard .bgph span{ font-size:3.6rem; }
  .hero h1{ font-size:clamp(2.1rem, 8.4vw, 2.9rem); }
  .fan-card{ width:44vw; }
  .hero-stats{ gap:20px; }
  .marquee img{ width:140px; height:140px; }
  .menu{ padding:48px 0 70px; }
  .cart-bar{ bottom:12px; }
  .cart-bar-inner{ width:min(94vw, 560px); justify-content:space-between; }
}
@media (max-width: 420px){
  .container{ width:min(calc(100vw - max(32px, 6vw)), 1540px); }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .pname{ font-size:.86rem; }
  .pname-en{ font-size:.66rem; }
  .pcard-info{ min-height:64px; padding:11px; }
  .pills{ gap:6px; }
  .pcard-media{ aspect-ratio:1.08 / 1; }
  .quick-panel{ padding:18px; }
  .pill{ padding:7px 11px; }
  .fav-item{ grid-template-columns:58px minmax(0,1fr); padding-inline-end:36px; }
  .fav-item > img, .fav-item > .fthumb{ width:58px; height:58px; }
  .fav-view{ grid-column:2; width:fit-content; }
}

/* =========================================================
   v9 LUXURY LAYER — aurora, motion, process, patterns
   ========================================================= */

/* ---- Aurora blobs in hero ---- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aurora i{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.5; mix-blend-mode:screen;
  animation:drift 16s ease-in-out infinite alternate;
}
.aurora .a1{ width:560px; height:560px; background:radial-gradient(circle, rgba(240,25,122,.55), transparent 65%); top:-16%; inset-inline-start:-8%; }
.aurora .a2{ width:520px; height:520px; background:radial-gradient(circle, rgba(255,177,60,.5), transparent 65%); top:4%; inset-inline-end:-10%; animation-delay:-5s; animation-duration:19s; }
.aurora .a3{ width:640px; height:640px; background:radial-gradient(circle, rgba(79,224,143,.4), transparent 65%); bottom:-30%; inset-inline-start:28%; animation-delay:-9s; animation-duration:22s; }
@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(60px, 44px) scale(1.16); }
}

/* ---- Fruit pattern texture in hero ---- */
.hero-pattern{
  position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/artwork-fruit.webp") repeat;
  background-size:560px auto;
  opacity:.065;
  mask-image:linear-gradient(#000 40%, transparent 90%);
  -webkit-mask-image:linear-gradient(#000 40%, transparent 90%);
}

/* ---- Headline word-by-word entrance ---- */
#heroTitle .w{
  display:inline-block;
  transform:translateY(1.1em) rotate(4deg); opacity:0;
  animation:wordUp .8s var(--ease) forwards;
  animation-delay:calc(var(--wi) * 90ms + 120ms);
}
@keyframes wordUp{ to{ transform:none; opacity:1; } }
.hero .eyebrow, .hero .lead, .hero-ctas, .hero-stats{
  opacity:0; animation:softUp .9s var(--ease) forwards;
}
.hero .lead{ animation-delay:.55s; }
.hero-ctas{ animation-delay:.7s; }
.hero-stats{ animation-delay:.85s; }
.hero .eyebrow{ animation-delay:.05s; }
@keyframes softUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---- Floating photo fan ---- */
.fan-card{ animation:floatY 6s ease-in-out infinite; }
.fan-1{ animation-delay:0s; }
.fan-2{ animation-delay:-2s; animation-duration:7s; }
.fan-3{ animation-delay:-4s; animation-duration:8s; }
@keyframes floatY{ 50%{ margin-top:-13px; } }

/* ---- Marquee edge fade ---- */
.marquee{
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---- Category chip active gradient ---- */
.chip.on{
  background:linear-gradient(135deg, var(--plum-800), var(--plum-950));
  border-color:transparent; color:#fff;
  box-shadow:0 10px 24px -12px rgba(22,12,51,.6);
}

/* ---- Product card stagger ---- */
.pcard.reveal{ transition-delay:var(--d, 0ms); }

/* ---- Section head underline flourish ---- */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-8px;
  width:64px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--mango), var(--pink));
}

/* ---- Process strip (about band) ---- */
.kicker.light{ color:var(--mango); }
.kicker.light::before{ background:var(--mango); }
.process{ padding:64px 0 8px; position:relative; }
.process-head h3{ font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800; color:#fff; margin-top:10px; }
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  margin-top:34px; counter-reset:step;
}
.step{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:0 0 26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.step:hover{ transform:translateY(-8px); background:rgba(255,255,255,.1); border-color:rgba(255,177,60,.45); }
.step-n{
  position:absolute; top:18px; inset-inline-end:18px; z-index:3;
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  color:var(--plum-950); background:var(--mango);
  padding:5px 15px; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(240,138,0,.6);
}
.step img{
  width:100%; height:clamp(270px, 21vw, 340px); margin:0 0 18px;
  object-fit:cover; object-position:center;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:transform .65s var(--ease), filter .45s var(--ease);
}
.step:hover img{ transform:scale(1.045); filter:saturate(1.08) contrast(1.03); }
.step b{ margin-inline:24px; font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:#fff; }
.step > span:last-child{ margin-inline:24px; font-size:.87rem; color:#C9BEE6; font-weight:300; line-height:1.7; }

/* ---- Process v2 (4-step redesign) ---- */
.process-v2 .process-head p{ max-width:56ch; margin-top:12px; color:#C9BEE6; font-size:.95rem; font-weight:300; line-height:1.8; }
.steps-v2{ grid-template-columns:repeat(3, 1fr); gap:20px; }
.step-v2{ padding:0; align-items:stretch; }
.step-v2 .step-media{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.16); }
.step-v2 .step-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease), filter .45s var(--ease); }
.step-v2:hover .step-media img{ transform:scale(1.06); filter:saturate(1.08) contrast(1.03); }
.step-v2 .step-body{ position:relative; padding:22px 22px 26px; display:flex; flex-direction:column; gap:8px; }
.step-v2 .step-n{ position:static; align-self:flex-start; margin-bottom:4px; }
.step-v2 .step-body b{ margin-inline:0; font-size:1.05rem; }
.step-v2 .step-body > span{ margin-inline:0; font-size:.85rem; color:#C9BEE6; font-weight:300; line-height:1.75; }
@media (max-width: 900px){ .steps.steps-v2{ grid-template-columns:repeat(2, 1fr); } .steps-v2 .step-v2:last-child{ grid-column:1 / -1; max-width:calc(50% - 10px); justify-self:center; } }
@media (max-width: 600px){ .steps.steps-v2{ grid-template-columns:1fr; } .steps-v2 .step-v2:last-child{ max-width:none; } }

/* ---- About + footer pattern texture ---- */
.about{ position:relative; }
.about::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/artwork-fruit.webp") repeat;
  background-size:590px auto; opacity:.055;
}
.about > .container{ position:relative; z-index:1; }
.footer{ position:relative; }
.footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/artwork-fruit.webp") repeat;
  background-size:560px auto; opacity:.05;
}
.footer .container{ position:relative; z-index:1; }

/* ---- Reduced motion for the luxury layer ---- */
@media (prefers-reduced-motion: reduce){
  .aurora i, .fan-card, .btn-shine::after, .topline{ animation:none !important; }
  #heroTitle .w, .hero .eyebrow, .hero .lead, .hero-ctas, .hero-stats{ animation:none !important; opacity:1; transform:none; }
}

/* ---- Responsive for the new header & layers ---- */
@media (max-width: 820px){
  :root{ --nav-h:104px; --nav-compact:76px; }
  .tl-mid{ display:none; }
  .topline-row{ justify-content:center; gap:22px; }
  .pillnav{ margin-top:10px; padding:8px 10px 8px 16px; gap:10px; }
  [dir="rtl"] .pillnav{ padding:8px 16px 8px 10px; }
  .nav .logo-img{ height:38px; }
  .steps{ grid-template-columns:1fr; }
  .step img{ height:clamp(300px, 82vw, 430px); }
  .aurora i{ filter:blur(52px); }
  .menu::before,.branches::before{ background-size:520px auto; opacity:.1; }
}
@media (max-width: 420px){
  .topline-row{ font-size:.72rem; }
  .skbd{ display:none; }
}

/* =========================================================
   AI FLAVOR ASSISTANT
   ========================================================= */
.ai-chat-launch{
  position:fixed; z-index:57; inset-inline-end:24px; bottom:24px;
  min-height:58px; display:flex; align-items:center; gap:11px;
  padding:8px 20px 8px 9px; border:1px solid rgba(255,255,255,.24);
  border-radius:999px; color:#fff;
  background:linear-gradient(135deg, var(--plum-800), var(--plum-950));
  box-shadow:0 18px 44px -16px rgba(22,12,51,.78), 0 0 0 5px rgba(240,25,122,.08);
  font-family:var(--font-display); font-size:1rem; font-weight:800;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), bottom .35s var(--ease);
}
[dir="ltr"] .ai-chat-launch{ padding:8px 9px 8px 20px; }
.ai-chat-launch:hover{ transform:translateY(-4px); box-shadow:0 24px 54px -16px rgba(22,12,51,.86), 0 0 0 8px rgba(240,25,122,.11); }
.ai-chat-launch > i{
  position:absolute; top:4px; inset-inline-start:9px; width:10px; height:10px;
  border:2px solid var(--plum-950); border-radius:50%; background:var(--green-bright);
  box-shadow:0 0 12px rgba(79,224,143,.8);
}
.ai-launch-icon{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; color:var(--plum-950);
  background:linear-gradient(145deg, #FFD37F, var(--mango));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px -8px rgba(255,177,60,.75);
}
.ai-launch-icon svg{ width:23px; height:23px; }
body.has-cart .ai-chat-launch{ bottom:100px; }

.ai-chat-panel{
  position:fixed; z-index:70; inset-inline-end:24px; bottom:94px;
  width:min(430px, calc(100vw - 32px)); height:min(680px, calc(100dvh - 132px));
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto;
  overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:28px;
  color:var(--ink); background:rgba(255,251,244,.97);
  -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 34px 90px -24px rgba(22,12,51,.58), 0 0 0 7px rgba(240,25,122,.07);
  transform:translateY(22px) scale(.96); transform-origin:bottom right; opacity:0;
  transition:transform .3s var(--ease), opacity .24s ease, bottom .35s var(--ease);
}
[dir="rtl"] .ai-chat-panel{ transform-origin:bottom left; }
.ai-chat-panel.open{ transform:none; opacity:1; }
/* closed = really gone: no click-blocking, no blur filter running in the background */
.ai-chat-panel[hidden]{ display:none !important; }
.ai-chat-panel:not(.open){ pointer-events:none; visibility:hidden; }
body.has-cart .ai-chat-panel{ bottom:164px; }
.ai-chat-head{
  min-height:78px; display:flex; align-items:center; gap:12px; padding:14px 16px;
  color:#fff; background:
    radial-gradient(circle at 82% -40%, rgba(240,25,122,.55), transparent 45%),
    linear-gradient(135deg, var(--plum-800), var(--plum-950));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ai-head-mark{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:16px; color:var(--plum-950); background:linear-gradient(145deg, #FFD47F, var(--mango));
  box-shadow:0 10px 24px -10px rgba(255,177,60,.8);
}
.ai-head-mark svg{ width:25px; height:25px; }
.ai-chat-head > div:nth-child(2){ min-width:0; display:flex; flex:1; flex-direction:column; line-height:1.4; }
.ai-chat-head b{ font-family:var(--font-display); font-size:1.16rem; }
.ai-chat-head > div:nth-child(2) > span{ display:flex; align-items:center; gap:7px; color:#D7CDEC; font-size:.7rem; }
.ai-chat-head > div:nth-child(2) > span > i{ width:7px; height:7px; flex:none; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px rgba(79,224,143,.8); }
.ai-chat-close{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; color:#fff; background:rgba(255,255,255,.08); transition:background .2s, transform .2s; }
.ai-chat-close:hover{ background:rgba(255,255,255,.18); transform:rotate(4deg); }
.ai-chat-close svg{ width:20px; height:20px; }

.ai-chat-messages{
  min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 15px;
  background:
    linear-gradient(rgba(250,241,226,.86), rgba(250,241,226,.86)),
    url("../img/deco/artwork-fruit.webp") repeat;
  background-size:auto, 420px auto;
  scrollbar-width:thin; scrollbar-color:rgba(43,27,92,.28) transparent;
}
.ai-msg{ display:flex; align-items:flex-end; gap:8px; margin:0 0 14px; animation:aiMessageIn .36s var(--ease) both; }
@keyframes aiMessageIn{ from{ opacity:0; transform:translateY(9px) scale(.985); } }
.ai-msg-user{ justify-content:flex-start; }
[dir="ltr"] .ai-msg-user{ justify-content:flex-end; }
.ai-msg-user > div{
  max-width:84%; padding:10px 14px; border-radius:18px 18px 5px 18px;
  color:#fff; background:linear-gradient(135deg, var(--pink), #B80F69);
  box-shadow:0 10px 24px -12px rgba(240,25,122,.55); font-size:.84rem; line-height:1.75;
}
[dir="ltr"] .ai-msg-user > div{ border-radius:18px 18px 18px 5px; }
.ai-msg-avatar{
  width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:10px;
  color:var(--plum-950); background:var(--mango); font-size:.78rem; box-shadow:0 7px 18px -9px rgba(240,138,0,.75);
}
.ai-msg-content{ max-width:calc(100% - 36px); }
.ai-msg-content > p{
  width:fit-content; max-width:100%; margin:0; padding:11px 14px;
  border:1px solid var(--line); border-radius:18px 18px 18px 5px;
  color:var(--ink); background:#fff; box-shadow:0 8px 24px -17px rgba(36,19,56,.3);
  font-size:.82rem; line-height:1.8;
}
[dir="rtl"] .ai-msg-content > p{ border-radius:18px 18px 5px 18px; }

.ai-results{ display:grid; gap:9px; margin-top:9px; }
.ai-result-card{
  width:100%; min-height:92px; display:grid; grid-template-columns:78px minmax(0,1fr) 24px;
  align-items:center; gap:11px; padding:8px; text-align:start; border:1px solid var(--line);
  border-radius:18px; background:#fff; box-shadow:0 10px 28px -20px rgba(36,19,56,.35);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.ai-result-card:hover{ transform:translateY(-3px); border-color:rgba(240,25,122,.34); box-shadow:0 15px 34px -19px rgba(240,25,122,.32); }
.ai-result-media, .ai-result-media img, .ai-result-placeholder{ width:78px; height:76px; display:block; border-radius:13px; }
.ai-result-media{ overflow:hidden; background:var(--cream-deep); }
.ai-result-media img{ object-fit:cover; }
.ai-result-placeholder{ display:grid; place-items:center; color:rgba(43,27,92,.35); font-family:var(--font-display); font-size:1.8rem; font-weight:800; }
.ai-result-copy{ min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.ai-result-copy small{ overflow:hidden; color:var(--pink); font-size:.62rem; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.ai-result-copy b{ overflow:hidden; margin-top:2px; color:var(--plum-950); font-family:var(--font-display); font-size:.93rem; white-space:nowrap; text-overflow:ellipsis; }
.ai-result-copy em{ display:-webkit-box; overflow:hidden; margin-top:3px; color:var(--ink-soft); font-size:.65rem; font-style:normal; line-height:1.5; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ai-result-copy strong{ margin-top:4px; color:var(--green); font-size:.66rem; }
.ai-result-arrow{ width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--plum-800); font-size:.8rem; transition:transform .25s var(--ease); }
.ai-result-card:hover .ai-result-arrow{ transform:translate(2px,-2px); }
[dir="rtl"] .ai-result-card:hover .ai-result-arrow{ transform:translate(-2px,-2px); }

.ai-typing{ display:flex; align-items:center; gap:4px; padding:13px 15px; border:1px solid var(--line); border-radius:18px 18px 18px 5px; background:#fff; }
[dir="rtl"] .ai-typing{ border-radius:18px 18px 5px 18px; }
.ai-typing i{ width:6px; height:6px; border-radius:50%; background:var(--pink); animation:aiDot 1s ease-in-out infinite; }
.ai-typing i:nth-child(2){ animation-delay:.14s; }
.ai-typing i:nth-child(3){ animation-delay:.28s; }
@keyframes aiDot{ 0%,65%,100%{ transform:translateY(0); opacity:.45; } 32%{ transform:translateY(-5px); opacity:1; } }

.ai-chat-suggestions{
  display:flex; gap:7px; overflow-x:auto; padding:10px 12px 4px; background:var(--card); scrollbar-width:none;
}
.ai-chat-suggestions::-webkit-scrollbar{ display:none; }
.ai-chat-suggestions button{
  flex:none; padding:7px 11px; border:1px solid rgba(43,27,92,.15); border-radius:999px;
  color:var(--plum-800); background:#fff; font-size:.68rem; font-weight:700; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
}
.ai-chat-suggestions button:hover{ color:#fff; border-color:var(--pink); background:var(--pink); }
.ai-chat-suggestions button:disabled{ opacity:.45; cursor:wait; }
.ai-chat-form{ display:grid; grid-template-columns:minmax(0,1fr) 46px; align-items:end; gap:8px; padding:10px 12px 6px; background:var(--card); }
.ai-chat-form label{ min-width:0; display:block; }
.ai-chat-form textarea{
  width:100%; min-height:46px; max-height:110px; display:block; resize:none; padding:11px 14px;
  border:1.5px solid rgba(43,27,92,.14); outline:0; border-radius:16px; color:var(--ink);
  background:var(--cream); font-size:.78rem; line-height:1.65;
  transition:border-color .2s, box-shadow .2s;
}
.ai-chat-form textarea:focus{ border-color:rgba(240,25,122,.55); box-shadow:0 0 0 4px rgba(240,25,122,.08); }
.ai-chat-form button{
  width:46px; height:46px; display:grid; place-items:center; border-radius:15px;
  color:#fff; background:linear-gradient(135deg, var(--pink), #B90D68);
  box-shadow:0 10px 23px -10px rgba(240,25,122,.65); transition:transform .2s, opacity .2s;
}
.ai-chat-form button:hover{ transform:translateY(-2px); }
.ai-chat-form button:disabled{ opacity:.48; cursor:wait; transform:none; }
.ai-chat-form button svg{ width:20px; height:20px; }
[dir="rtl"] .ai-chat-form button svg{ transform:scaleX(-1); }
.ai-chat-note{ display:block; padding:0 14px 9px; color:var(--ink-faint); background:var(--card); font-size:.58rem; text-align:center; }

.pcard.ai-product-focus{
  animation:aiProductFocus 1.05s var(--ease) 2;
  box-shadow:0 0 0 4px rgba(240,25,122,.28), 0 24px 58px -22px rgba(240,25,122,.55);
}
@keyframes aiProductFocus{ 45%{ transform:translateY(-9px) scale(1.018); } }

@media (max-width: 700px){
  .ai-chat-launch{ inset-inline-end:14px; bottom:16px; min-height:54px; padding-inline-end:17px; font-size:.9rem; }
  .ai-launch-icon{ width:38px; height:38px; }
  body.has-cart .ai-chat-launch{ bottom:96px; }
  .ai-chat-panel{
    inset-inline:8px; bottom:8px; width:auto; height:min(720px, calc(100dvh - 16px));
    border-radius:24px; transform-origin:bottom center;
  }
  body.has-cart .ai-chat-panel{ bottom:8px; }
  .ai-chat-head{ min-height:72px; }
  .ai-result-card{ grid-template-columns:72px minmax(0,1fr) 22px; }
  .ai-result-media, .ai-result-media img, .ai-result-placeholder{ width:72px; height:72px; }
}

@media (prefers-reduced-motion: reduce){
  .ai-msg, .ai-typing i, .pcard.ai-product-focus{ animation:none !important; }
}


/* ===== Lead form: country combobox, international phone input, states ===== */
.combo{ position:relative; }
.combo input{ padding-inline-end:42px; cursor:text; }
.combo-arrow{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; }
.combo-list{
  position:absolute; z-index:5; inset-inline:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none;
  max-height:240px; overflow-y:auto; background:#fff; border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm); box-shadow:0 18px 40px -16px rgba(36,19,56,.35);
}
.combo-list[hidden]{ display:none; }
.combo-list li{ padding:10px 12px; border-radius:10px; font-size:.92rem; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:10px; }
.combo-list li[aria-selected="true"], .combo-list li:hover{ background:var(--cream-deep); }
.combo-list li.active{ background:var(--cream-deep); outline:1.5px solid var(--mango, #FF9F1C); outline-offset:-1.5px; }
.combo-list .combo-empty{ cursor:default; color:var(--ink-faint); }
.combo-list .combo-empty:hover{ background:transparent; }

/* intl-tel-input: match the form's rounded inputs; phone numbers always read left-to-right */
.order-form .iti{ width:100%; display:block; direction:ltr; }
.order-form .iti input.iti__tel-input, .order-form .iti input.iti__tel-input[type=tel]{
  width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); background:#fff;
  padding-block:12px; font-size:.95rem; color:var(--ink); outline:0; direction:ltr; text-align:left;
  transition:border-color .25s;
}
.order-form .iti input.iti__tel-input:focus{ border-color:var(--plum-800); }
.order-form .iti{ --iti-dropdown-bg:#fff; --iti-border-color:var(--line-strong); --iti-hover-color:var(--cream-deep); --iti-border-radius:14px; }
.order-form .iti__dropdown-content{ border-radius:14px; box-shadow:0 18px 40px -16px rgba(36,19,56,.35); }

.order-form input.invalid, .order-form .iti input.invalid, .order-form textarea.invalid{ border-color:#d6336c; }
.field-error{ color:#c2255c; font-size:.8rem; font-weight:600; }
.field-error[hidden], .form-banner-error[hidden]{ display:none; }
.form-banner-error{ margin:0; padding:12px 14px; border-radius:14px; background:#fde8ef; color:#a61e4d; font-size:.88rem; font-weight:600; line-height:1.6; }
#investSubmit[disabled]{ opacity:.7; cursor:progress; }
.lead-success{ text-align:center; padding:26px 6px 10px; display:grid; gap:14px; justify-items:center; }
.lead-success[hidden]{ display:none; }
.lead-success h4{ font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--plum-950); margin:0; }
.lead-success p{ margin:0; font-size:.95rem; color:var(--ink-soft); line-height:1.8; }
.order-form[hidden]{ display:none; }

\/* dropdown is attached to <body> (above the modal), so style it outside .order-form *\/
.iti--container, .iti__dropdown-content{ z-index:200; }
.iti--container .iti__search-input{ width:100%; border:0; border-bottom:1.5px solid var(--line); border-radius:0; background:transparent; padding:12px 40px; font-size:16px; outline:0; }


/* ===== Footer: optional link (hidden until configured) ===== */
.footer-col a[hidden]{ display:none !important; }

/* ===== "How we work": card 3 has no picture, so it sits on the bottom line of the row ===== */
.step-v2.step-v2-text{ align-self:end; }

/* ===== Invest modal (fast, scannable, CTA always in reach) ===== */
.invest-drawer{ width:min(720px, 100%); max-height:92vh; }
.invest-body{ padding:20px 26px 8px; overscroll-behavior:contain; }
.invest-body .info-lead{ font-family:var(--font-display); font-size:1.12rem; font-weight:700; line-height:1.75; color:var(--plum-950); margin:0 0 10px; }
.invest-body .invest-sub{ margin:0 0 16px; }
.invest-drawer .invest-cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.invest-drawer .invest-card{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:16px; box-shadow:0 10px 24px -18px rgba(36,19,56,.45);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.invest-drawer .invest-card:hover{ transform:translateY(-2px); border-color:rgba(255,159,28,.55); box-shadow:0 16px 30px -18px rgba(36,19,56,.5); }
.invest-ico{
  flex:none; width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  color:var(--plum-950); background:linear-gradient(145deg, #FFD47F, var(--mango, #FF9F1C));
  box-shadow:0 10px 20px -10px rgba(255,159,28,.9);
}
.invest-drawer .invest-card b{ display:block; margin-bottom:4px; font-size:1rem; }
.invest-drawer .invest-card div span{ display:block; font-size:.84rem; line-height:1.75; }
.invest-drawer .invest-card .invest-ico{ display:grid; place-items:center; }
.invest-ico svg{ display:block; }
.invest-vision{
  margin:0 0 14px; padding:18px 20px; border-radius:20px; color:#fff;
  background:radial-gradient(circle at 85% -30%, rgba(240,25,122,.45), transparent 50%), linear-gradient(135deg, var(--plum-800), var(--plum-950));
}
.invest-vision p{ margin:0 0 10px; color:#E8E0F7; font-size:.9rem; line-height:1.85; }
.invest-vision .invest-vision-line{ margin:0; color:#FFD47F; font-weight:700; }
.invest-foot{ padding:14px 26px 20px; border-top:1.5px dashed var(--line-strong); background:var(--cream); }
.invest-foot .invest-cta{ width:100%; justify-content:center; margin:0; }
.invest-drawer .invest-card{ animation:investIn .4s var(--ease) both; }
.invest-drawer .invest-card:nth-child(2){ animation-delay:.05s; }
.invest-drawer .invest-card:nth-child(3){ animation-delay:.1s; }
.invest-drawer .invest-card:nth-child(4){ animation-delay:.15s; }
@keyframes investIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width: 600px){
  .invest-drawer .invest-cards{ grid-template-columns:1fr; }
  .invest-body{ padding:16px 18px 6px; }
  .invest-foot{ padding:12px 18px calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){ .invest-drawer .invest-card{ animation:none; } }

/* ===== Lead success: colored logo on the page's own (cream) background ===== */
.lead-success-logo{ width:min(220px, 62%); height:auto; display:block; }

/* process cards: keep 2 columns on tablets (overrides the generic .steps rule) */
@media (min-width:601px) and (max-width:900px){ .steps.steps-v2{ grid-template-columns:repeat(2, 1fr); } }

/* ---- "How we craft your moments": three identical cards, each photo shown in full ---- */
.moments{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; max-width:1000px; margin:34px auto 0; }
.moment{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16); box-shadow:0 24px 54px -30px rgba(0,0,0,.7); transition:transform .5s var(--ease), border-color .4s; }
.moment:hover{ transform:translateY(-5px); border-color:rgba(255,177,60,.5); }
.moment-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--plum-900); border-bottom:1px solid rgba(255,255,255,.16); }
.moment-media img{ position:absolute; inset:0; width:100%; height:100%; transition:transform 1.2s var(--ease); }
.moment-media img.bg{ object-fit:cover; filter:blur(20px) saturate(1.2); transform:scale(1.25); opacity:.75; }
.moment-media img:not(.bg){ object-fit:contain; }
.moment:hover .moment-media img:not(.bg){ transform:scale(1.04); }
.moment-body{ flex:1; display:flex; flex-direction:column; gap:8px; padding:18px 18px 22px; }
.moment-body::before{ content:""; width:38px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--mango),var(--pink)); }
.moment-body b{ color:#fff; font-size:1rem; line-height:1.6; text-wrap:balance; }
.moment-body > span{ color:#C9BEE6; font-size:.84rem; font-weight:300; line-height:1.8; }
@media (max-width:820px){ .moments{ grid-template-columns:1fr; max-width:420px; } }
@media (prefers-reduced-motion:reduce){ .moment, .moment-media img{ transition:none; } }

/* tablets: three product columns instead of two */
@media (min-width:601px) and (max-width:820px){ .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .pname{ font-size:.92rem; } }

/* category chips: always fully visible (wrap, never scroll) */
/* the rail stays pinned under the nav while browsing the menu, on every screen */
.cat-rail{ position:sticky; }
@media (max-width:820px){ .cat-rail{ padding:6px 0; } }
@media (max-width:820px){ .cat-scroll{ gap:6px; } .chip{ font-size:.74rem; padding:5px 10px; gap:5px; } .chip small{ font-size:.64rem; } }
@media (max-width:420px){ .cat-scroll{ gap:4px; } .chip{ font-size:.68rem; padding:4px 8px; gap:4px; } .chip small{ font-size:.6rem; } }

/* "moments": the photo sits whole inside the square on a clean matte, nothing cropped or blurred */
.moment-media{ container-type:size; display:grid; place-items:center; padding:12px; background:#1b0f3d; }
.moment-media img.bg{ display:none; }
.moment-media img:not(.bg){ position:static; width:auto; height:auto; max-width:100cqw; max-height:100cqh; object-fit:contain; border-radius:14px; box-shadow:0 12px 30px -14px rgba(0,0,0,.7); }

/* menu intro: headline first, then the category rail, then the products */
.menu-intro{ background:#FAF1E2; padding:54px 0 26px; }
.menu-intro .section-head{ margin-bottom:0; }
.menu{ padding-top:34px; }
@media (max-width:820px){ .menu-intro{ padding:40px 0 20px; } .menu{ padding-top:26px; } }

/* moments: all three photos are 4:5, so each card shows its whole photo with nothing cropped */
.moment-media{ aspect-ratio:4/5; padding:0; background:#1b0f3d; }
.moment-media img:not(.bg){ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:0; box-shadow:none; }

/* menu spacing: no counts, tighter rhythm between intro, rail and products */
.menu-tools{ display:none; }
.menu{ padding:26px 0 80px; }
.cat-block{ margin-top:34px; }
.cat-block:first-child{ margin-top:0; }
.cat-title{ margin-bottom:16px; padding-bottom:10px; }
.menu-intro{ padding:46px 0 22px; }
.cat-rail{ padding:8px 0; }
@media (max-width:820px){ .menu-intro{ padding:34px 0 16px; } .menu{ padding:20px 0 64px; } .cat-block{ margin-top:26px; } .cat-title h3{ font-size:1.2rem; } }

/* chatbot: always fits the visible screen (short laptops, zoomed windows, phones in landscape) */
.ai-chat-panel{ max-height:calc(100dvh - 24px); }
@media (max-height:700px){
  .ai-chat-panel{ bottom:84px; height:calc(100dvh - 100px); border-radius:22px; }
  .ai-chat-head{ min-height:58px; padding:8px 14px; }
  .ai-head-mark{ width:38px; height:38px; border-radius:13px; }
  .ai-chat-head b{ font-size:1.02rem; }
  .ai-chat-messages{ padding:12px; }
  .ai-chat-suggestions{ padding:8px 12px 2px; }
  .ai-chat-form{ padding:8px 12px 4px; }
  .ai-chat-note{ display:none; }
}
@media (max-width:700px) and (max-height:700px){
  .ai-chat-panel{ bottom:8px; height:calc(100dvh - 16px); }
}
@media (max-height:480px){
  .ai-chat-panel{ bottom:6px; top:6px; height:auto; }
  .ai-chat-head{ min-height:48px; padding:6px 12px; }
  .ai-head-mark{ width:32px; height:32px; }
}

/* phones & tablets: the size/price panel always fits inside the photo (up to 5 sizes), nothing is cut */
@media (max-width:820px){
  .quick-panel{ padding:10px; justify-content:center; background:linear-gradient(180deg, rgba(22,12,51,.62), rgba(22,12,51,.9)); }
  .quick-label{ display:none; }
  .quick-hint{ display:none; }
  .pills{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; margin-top:0; }
  .pill{ flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:5px 4px; border-radius:14px; min-width:0; }
  .pill small{ font-size:.66rem; line-height:1.25; }
  .pill b{ font-size:.82rem; line-height:1.2; white-space:nowrap; }
  .pill b em{ font-size:.56rem; }
  .pill .padd{ display:none; }
  .pill:last-child:nth-child(odd){ grid-column:1 / -1; }
  .pcard .cat-badge, .pcard .badge-new, .pcard .fav-button{ z-index:4; }
  .pcard.is-open .cat-badge, .pcard.is-open .badge-new{ opacity:0; }
}
@media (max-width:820px){ .pcard.is-open .fav-button{ opacity:0; pointer-events:none; } }