/* =========================================================
   Saffron & Sage — Warm Editorial demo
   Colours come from config.js (CSS variables below are fallbacks)
   ========================================================= */
:root{
  --cream:#F6EFE6; --paper:#FBF7F1; --ink:#2B211B; --muted:#7A6A5E;
  --terracotta:#C2603D; --terraDark:#9E4A2D; --olive:#5B6B3A; --sand:#E8DCCB;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hh:64px;
  --r:18px; --r-lg:28px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(43,33,27,.06), 0 10px 30px -12px rgba(43,33,27,.18);
  --safe-b:env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (min-width:900px){ :root{ --hh:76px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-behavior:smooth; scroll-padding-top:calc(var(--hh) + 56px); }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
html.lock, html.lock body{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; }
input,textarea{ font:inherit; color:inherit; }
svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:6px; }

/* paper grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.13 0 0 0 0 0.1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:translateZ(0);
}

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }
@media (min-width:900px){ .wrap{ padding:0 40px; } }

.eyebrow{
  font:500 12px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta); margin:0 0 14px;
}
.sec-title{
  font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 120;
  font-size:clamp(38px, 9vw, 72px); line-height:1.02; letter-spacing:-.02em; margin:0;
}
.sec-title em, .hero__title em{ font-style:italic; color:var(--terracotta); font-weight:350; }
.sec-head{ padding:88px 0 28px; }
.sec-head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
@media (min-width:900px){ .sec-head{ padding:130px 0 40px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border-radius:999px;
  font:500 15px/1 var(--sans); letter-spacing:.01em; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s, opacity .25s;
  user-select:none; -webkit-user-select:none;
}
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:active{ transform:scale(.97); }
.btn--primary{ background:var(--terracotta); color:#fff; box-shadow:0 8px 20px -10px var(--terracotta); }
.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--ghost{ border:1px solid rgba(43,33,27,.22); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
@media (hover:hover){
  .btn--primary:hover{ background:var(--terraDark); }
  .btn--primary:hover svg{ transform:translateX(4px); }
  .btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
  .btn--dark:hover{ background:#000; }
}
.btn.is-loading span{ opacity:0; }
.btn.is-loading{ position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  display:inline-grid; place-items:center; transition:background-color .2s;
}
@media (hover:hover){ .icon-btn:hover{ background:rgba(43,33,27,.06); } }
.round-btn{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(43,33,27,.2); transition:background-color .2s, color .2s;
}
.round-btn svg{ width:18px; height:18px; }
@media (hover:hover){ .round-btn:hover{ background:var(--ink); color:var(--cream); } }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--hh);
  transition:background-color .35s, box-shadow .35s, transform .4s var(--ease);
}
.hdr.is-scrolled{ background:rgba(246,239,230,.86); box-shadow:0 1px 0 rgba(43,33,27,.08); }
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .hdr.is-scrolled{ background:color-mix(in srgb, var(--cream) 78%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
}
.hdr.is-hidden{ transform:translateY(calc(-100% - 2px)); }
.hdr__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{ font:500 22px/1 var(--serif); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.logo em{ font-style:italic; color:var(--terracotta); }
.logo img{ height:34px; width:auto; }
.nav{ display:none; gap:34px; font-size:14.5px; }
.nav a{ position:relative; padding:6px 0; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
@media (hover:hover){ .nav a:hover::after{ transform:scaleX(1); transform-origin:left; } }
.hdr__actions{ display:flex; align-items:center; gap:2px; margin-right:-10px; }
.badge{
  position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--terracotta); color:#fff; font:600 10.5px/18px var(--sans); text-align:center;
}
.badge.bump{ animation:bump .45s var(--ease-out); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.avatar{
  position:absolute; inset:7px; border-radius:50%; background:var(--olive); color:#fff;
  display:grid; place-items:center; font:600 13px/1 var(--sans);
}
.burger{ display:grid; gap:6px; place-content:center; }
.burger span{ display:block; width:20px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.8px) rotate(-45deg); }
@media (min-width:900px){ .nav{ display:flex; } .burger{ display:none; } }

/* mobile nav */
.mnav{
  position:fixed; inset:0; z-index:45; background:var(--cream);
  padding:calc(var(--hh) + 24px) 24px calc(28px + var(--safe-b));
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .6s var(--ease), visibility 0s .6s;
}
.mnav.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .6s var(--ease), visibility 0s; }
.mnav__links{ display:flex; flex-direction:column; }
.mnav__links a{
  font:400 clamp(36px, 10vw, 46px)/1.1 var(--serif); letter-spacing:-.02em;
  padding:12px 0; border-bottom:1px solid rgba(43,33,27,.1);
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(20px); transition:opacity .4s, transform .5s var(--ease);
}
.mnav__links a em{ font:500 12px var(--sans); color:var(--terracotta); font-style:normal; }
.mnav.is-open .mnav__links a{ opacity:1; transform:none; }
.mnav.is-open .mnav__links a:nth-child(1){ transition-delay:.15s }
.mnav.is-open .mnav__links a:nth-child(2){ transition-delay:.2s }
.mnav.is-open .mnav__links a:nth-child(3){ transition-delay:.25s }
.mnav.is-open .mnav__links a:nth-child(4){ transition-delay:.3s }
.mnav.is-open .mnav__links a:nth-child(5){ transition-delay:.35s }
.mnav__foot{ font-size:14px; color:var(--muted); display:grid; gap:4px; }
.mnav__foot a{ color:var(--ink); font-weight:500; }
@media (min-width:900px){ .mnav{ display:none; } }

/* ---------- hero ---------- */
.hero{
  padding-top:calc(var(--hh) + 28px); padding-bottom:40px;
  display:grid; gap:36px;
}
.hero__eyebrow{ color:var(--muted); }
.hero__title{
  font-family:var(--serif); font-weight:350; font-variation-settings:"opsz" 144;
  font-size:clamp(50px, 14.5vw, 116px); line-height:.96; letter-spacing:-.035em; margin:0 0 22px;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title .line > *{ display:inline-block; }
.hero__sub{ max-width:460px; color:var(--muted); font-size:16.5px; margin:0 0 28px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__cta .btn{ flex:1 1 auto; }
.hero__meta{ list-style:none; padding:0; margin:30px 0 0; display:flex; gap:30px; }
.hero__meta li{ display:flex; flex-direction:column; font-size:13px; color:var(--muted); }
.hero__meta strong{ font:500 15px/1.4 var(--sans); color:var(--ink); display:flex; align-items:center; gap:8px; }
.hero__meta strong::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 4px color-mix(in srgb, var(--olive) 20%, transparent); }
.hero__meta strong.closed::before{ background:var(--terracotta); }
.hero__meta li + li strong::before{ display:none; }

.hero__media{ position:relative; }
.hero__frame{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio:4/4.6; background:var(--sand);
  transform:translateZ(0);
}
.hero__parallax{ position:absolute; inset:-8% 0; will-change:transform; }
.hero__parallax img{ width:100%; height:100%; object-fit:cover; transform:scale(1.14); transition:transform 2.4s var(--ease-out); }
.ready .hero__parallax img{ transform:scale(1); }
.hero__stamp{
  position:absolute; width:112px; height:112px; left:-10px; bottom:-30px;
  background:var(--cream); border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow);
}
.hero__stamp svg{ position:absolute; inset:0; width:100%; height:100%; animation:rot 22s linear infinite; }
.hero__stamp text{ font:500 10.5px var(--sans); letter-spacing:.22em; fill:var(--ink); stroke:none; }
.hero__stamp span{ color:var(--terracotta); font-size:22px; }
@keyframes rot{ to{ transform:rotate(360deg); } }

@media (min-width:900px){
  .hero{ grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; padding-top:calc(var(--hh) + 40px); padding-bottom:70px; min-height:min(100vh, 900px); }
  .hero__cta .btn{ flex:0 0 auto; }
  .hero__title{ font-size:clamp(64px, 5.9vw, 100px); }
  .hero__frame{ aspect-ratio:4/5; }
  .hero__stamp{ width:140px; height:140px; left:-50px; bottom:40px; }
  .hero__stamp text{ font-size:10px; }
}

/* hero intro animation */
.js .hero__eyebrow, .js .hero__sub, .js .hero__cta, .js .hero__meta, .js .hero__stamp{ opacity:0; transform:translateY(18px); }
.js .hero__title .line > *{ transform:translateY(105%); }
.js .hero__frame{ clip-path:inset(12% 8% 0 8% round 28px); opacity:.0; }
.ready .hero__eyebrow, .ready .hero__sub, .ready .hero__cta, .ready .hero__meta, .ready .hero__stamp{
  opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
.ready .hero__title .line > *{ transform:none; transition:transform 1.1s var(--ease-out); }
.ready .hero__title .line:nth-child(2) > *{ transition-delay:.1s; }
.ready .hero__sub{ transition-delay:.3s; }
.ready .hero__cta{ transition-delay:.4s; }
.ready .hero__meta{ transition-delay:.5s; }
.ready .hero__stamp{ transition-delay:.9s; }
.ready .hero__frame{ clip-path:inset(0 0 0 0 round 28px); opacity:1; transition:clip-path 1.4s var(--ease-out) .1s, opacity .6s; }

/* ---------- ticker ---------- */
.ticker{ border-block:1px solid rgba(43,33,27,.12); overflow:hidden; padding:16px 0; }
.ticker__track{ display:flex; width:max-content; animation:tick 38s linear infinite; will-change:transform; }
.ticker__track span{ font:italic 400 22px/1 var(--serif); padding:0 22px; white-space:nowrap; display:flex; align-items:center; gap:44px; }
.ticker__track span::after{ content:"✦"; font-style:normal; font-size:13px; color:var(--terracotta); }
@keyframes tick{ to{ transform:translate3d(-50%,0,0); } }

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); }

/* ---------- menu ---------- */
.cats{
  position:sticky; top:var(--hh); z-index:30; padding:10px 0;
  background:var(--cream);
  transition:transform .4s var(--ease), box-shadow .3s;
}
.cats.is-stuck{ box-shadow:0 8px 16px -14px rgba(43,33,27,.4); }
.hdr-hidden .cats.is-stuck{ transform:translate3d(0, calc(-1 * var(--hh)), 0); }
.cats__in{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.cats__in::-webkit-scrollbar{ display:none; }
.cat{
  flex:0 0 auto; height:40px; padding:0 18px; border-radius:999px; scroll-snap-align:start;
  border:1px solid rgba(43,33,27,.16); font-size:14px; font-weight:500; color:var(--muted);
  transition:background-color .3s, color .3s, border-color .3s;
}
.cat.is-on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
@media (hover:hover){ .cat:not(.is-on):hover{ border-color:var(--ink); color:var(--ink); } }

.mgroup{ padding-top:40px; }
.mgroup__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.mgroup__head h3{ font:400 32px/1.1 var(--serif); letter-spacing:-.02em; margin:0; }
.mgroup__head span{ font-size:13px; color:var(--muted); }
.mgroup__head::after{ content:""; flex:1; height:1px; background:rgba(43,33,27,.14); align-self:center; }
.mgrid{ display:grid; gap:14px; }
@media (min-width:640px){ .mgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .mgrid{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.item{
  display:grid; grid-template-columns:1fr 112px; gap:14px; align-items:start;
  background:var(--paper); border-radius:var(--r); padding:14px;
  border:1px solid rgba(43,33,27,.06);
  transition:box-shadow .35s, transform .35s var(--ease);
}
@media (hover:hover){ .item:hover{ box-shadow:var(--shadow); transform:translateY(-3px); } .item:hover .item__img img{ transform:scale(1.06); } }
.item__top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.veg{ width:14px; height:14px; border:1.4px solid var(--olive); border-radius:3px; display:grid; place-items:center; flex:0 0 auto; }
.veg::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--olive); }
.veg.non{ border-color:#B23B2B; } .veg.non::after{ background:#B23B2B; }
.tag{ font:600 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 11%, transparent); padding:5px 7px; border-radius:6px; }
.item__name{ font:500 19px/1.2 var(--serif); letter-spacing:-.01em; margin:0 0 6px; }
.item__desc{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item__price{ font:500 16px/1 var(--sans); }
.item__right{ position:relative; }
.item__img{ width:112px; height:112px; border-radius:14px; overflow:hidden; background:var(--sand); position:relative; }
.item__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .5s; opacity:0; }
.item__img img.ok{ opacity:1; }
.ph{ position:absolute; inset:0; display:grid; place-items:center; font:italic 400 34px var(--serif); color:var(--terracotta);
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--terracotta) 22%, var(--sand)), var(--sand)); }
.add{
  position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  height:36px; min-width:92px; border-radius:999px; background:var(--paper);
  border:1px solid rgba(43,33,27,.14); box-shadow:0 6px 14px -8px rgba(43,33,27,.4);
  font:600 13px/1 var(--sans); letter-spacing:.06em; color:var(--terracotta);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:background-color .25s, color .25s;
}
.add:active{ transform:translateX(-50%) scale(.95); }
.add.has{ background:var(--terracotta); color:#fff; border-color:var(--terracotta); padding:0; }
.add__one{ width:100%; height:100%; color:inherit; font:inherit; letter-spacing:inherit; }
.add .q{ display:flex; align-items:center; width:100%; height:100%; }
.add .q button{ flex:1; height:100%; font-size:18px; color:#fff; }
.add .q b{ min-width:20px; text-align:center; font-size:14px; }

/* stepper */
.stepper{ display:inline-flex; align-items:center; border:1px solid rgba(43,33,27,.16); border-radius:999px; height:34px; }
.stepper button{ width:34px; height:100%; font-size:17px; color:var(--terracotta); }
.stepper output, .stepper b{ min-width:22px; text-align:center; font-weight:600; font-size:14px; }
.stepper--lg{ height:50px; }
.stepper--lg button{ width:54px; font-size:22px; }
.stepper--lg output{ min-width:40px; font-size:17px; }

/* ---------- booking ---------- */
.book{ padding-top:88px; }
.book__grid{ display:grid; gap:36px; }
.book__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--sand); }
.book__media img{ width:100%; height:100%; object-fit:cover; }
.book__note{
  position:absolute; left:14px; right:14px; bottom:14px; background:var(--paper); border-radius:16px; padding:16px 18px;
  font-size:14px; color:var(--muted);
}
.book__note p{ margin:0; } .book__note .eyebrow{ margin-bottom:6px; }
.book__form .sec-title{ margin-bottom:26px; }
@media (min-width:900px){
  .book{ padding-top:140px; }
  .book__grid{ grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
  .book__media{ aspect-ratio:3/4; position:sticky; top:calc(var(--hh) + 24px); }
}
.lbl{ display:block; font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:22px 0 12px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chips--scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:2px 20px; scroll-snap-type:x proximity; }
.chips--scroll::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .chips--scroll{ margin:0; padding:2px 0; flex-wrap:wrap; } }
.chip{
  flex:0 0 auto; padding:10px 15px; border-radius:12px; border:1px solid rgba(43,33,27,.16);
  font-size:14px; font-weight:500; background:var(--paper); scroll-snap-align:start;
  transition:background-color .25s, color .25s, border-color .25s, transform .2s;
}
.chip:active{ transform:scale(.96); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.chip[disabled]{ opacity:.35; text-decoration:line-through; pointer-events:none; }
.chip--date{ display:flex; flex-direction:column; align-items:center; min-width:62px; padding:10px 8px; gap:2px; }
.chip--date small{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.chip--date b{ font:500 22px/1.1 var(--serif); }
.slot-head{ display:block; font-size:13px; color:var(--muted); margin:2px 0 8px; }
.slot-head:not(:first-child){ margin-top:14px; }
@media (hover:hover){ .chip:not(.is-on):hover{ border-color:var(--ink); } }

/* fields (floating labels) */
.field{ position:relative; margin-top:14px; }
.field input, .field textarea{
  width:100%; height:56px; padding:22px 16px 8px; border-radius:14px;
  border:1px solid rgba(43,33,27,.16); background:var(--paper); outline:none;
  font-size:16px; /* 16px stops iOS zoom */
  transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ height:auto; min-height:110px; resize:vertical; padding-top:26px; }
.field label{
  position:absolute; left:17px; top:18px; font-size:15px; color:var(--muted); pointer-events:none;
  transform-origin:left top; transition:transform .25s var(--ease), color .25s;
}
.field input:focus, .field textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(43,33,27,.06); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{ transform:translateY(-10px) scale(.76); }
.field.bad input, .field.bad textarea{ border-color:#C0392B; animation:shake .4s; }
.field input[readonly]{ background:color-mix(in srgb, var(--sand) 40%, var(--paper)); color:var(--muted); }
.row2{ display:grid; gap:0 12px; }
@media (min-width:560px){ .row2{ grid-template-columns:1fr 1fr; } }
#bookBtn{ margin-top:26px; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ---------- about ---------- */
.about{ padding-top:88px; }
.about__grid{ display:grid; gap:44px; }
.about__media{ position:relative; padding-bottom:22%; }
.about__img1{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; width:78%; background:var(--sand); }
.about__img2{ position:absolute; right:0; bottom:0; width:48%; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; border:8px solid var(--cream); background:var(--sand); }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__text .sec-title{ font-size:clamp(34px, 8vw, 58px); margin-bottom:22px; }
.about__paras p{ color:var(--muted); margin:0 0 16px; font-size:16.5px; }
.about__paras p:first-child::first-letter{
  font:400 64px/.8 var(--serif); float:left; padding:8px 10px 0 0; color:var(--terracotta);
}
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; border-top:1px solid rgba(43,33,27,.14); padding-top:22px; }
.stats b{ display:block; font:400 40px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.stats span{ font-size:12.5px; color:var(--muted); line-height:1.35; display:block; margin-top:8px; }
@media (min-width:900px){
  .about{ padding-top:140px; }
  .about__grid{ grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
}

/* ---------- reviews ---------- */
.rating{ display:flex; flex-direction:column; align-items:flex-start; }
.rating__num{ font:400 64px/1 var(--serif); letter-spacing:-.03em; }
.rating__stars{ color:var(--terracotta); letter-spacing:3px; font-size:15px; }
.rating__note{ font-size:12px; color:var(--muted); margin-top:4px; }
.rv-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:6px max(20px, calc((100vw - 1240px) / 2 + 40px)) 10px;
  scroll-padding-inline:max(20px, calc((100vw - 1240px) / 2 + 40px));
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.rv-track::-webkit-scrollbar{ display:none; }
.rv{
  flex:0 0 86%; max-width:420px; scroll-snap-align:start; background:var(--paper); border-radius:var(--r-lg);
  padding:26px 24px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:260px;
  border:1px solid rgba(43,33,27,.06);
}
.rv__q{ font:400 21px/1.4 var(--serif); letter-spacing:-.01em; margin:0; }
.rv__q::before{ content:"“"; display:block; font:italic 400 56px/.6 var(--serif); color:var(--terracotta); margin:10px 0 6px; }
.rv__who{ display:flex; align-items:center; gap:12px; }
.rv__av{ width:42px; height:42px; border-radius:50%; background:var(--sand); display:grid; place-items:center; font:500 17px var(--serif); color:var(--terracotta); }
.rv__who b{ display:block; font-weight:500; font-size:15px; }
.rv__who small{ color:var(--muted); font-size:13px; }
.rv__stars{ margin-left:auto; color:var(--terracotta); font-size:12px; letter-spacing:2px; }
.rv-ctrl{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.rv-dots{ display:flex; gap:6px; }
.rv-dots i{ width:6px; height:6px; border-radius:3px; background:rgba(43,33,27,.2); transition:width .35s var(--ease), background-color .35s; }
.rv-dots i.on{ width:22px; background:var(--ink); }
@media (min-width:900px){ .rv{ flex-basis:400px; } }

/* ---------- contact ---------- */
.contact{ padding:88px 0 90px; }
.contact__grid{ display:grid; gap:40px; }
.cinfo{ margin-top:28px; display:grid; gap:0; }
.cinfo__row{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:16px 0; border-top:1px solid rgba(43,33,27,.12); font-size:15px; }
.cinfo__row:last-child{ border-bottom:1px solid rgba(43,33,27,.12); }
.cinfo__row span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.cinfo__row a{ text-decoration:underline; text-decoration-color:rgba(43,33,27,.25); text-underline-offset:4px; }
.cinfo__row p{ margin:0; }
.map-art{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; }
.map-art svg{ width:100%; height:100%; display:block; }
.m-bg{ fill:color-mix(in srgb, var(--sand) 70%, var(--cream)); stroke:none; }
.m-road{ stroke:var(--paper); stroke-width:14; fill:none; }
.m-road--thin{ stroke-width:7; }
.m-park{ fill:color-mix(in srgb, var(--olive) 22%, var(--cream)); stroke:none; }
.m-river{ stroke:color-mix(in srgb, #7FA3B5 45%, var(--cream)); stroke-width:16; fill:none; }
.map-pin{ position:absolute; left:52%; top:42%; width:20px; height:20px; transform:translate(-50%,-50%); }
.map-pin span{ position:absolute; inset:0; border-radius:50%; background:var(--terracotta); border:3px solid var(--paper); box-shadow:0 4px 10px rgba(0,0,0,.2); }
.map-pin::before{ content:""; position:absolute; inset:-14px; border-radius:50%; background:var(--terracotta); opacity:.25; animation:pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse{ 0%{ transform:scale(.4); opacity:.45 } 100%{ transform:scale(1.6); opacity:0 } }
.map-btn{ position:absolute; right:12px; bottom:12px; background:var(--ink); color:var(--cream); border-radius:999px; padding:11px 16px; font-size:13.5px; font-weight:500; }
.cform{ margin-top:10px; }
.cform .btn{ margin-top:16px; }
@media (min-width:900px){
  .contact{ padding:140px 0 120px; }
  .contact__grid{ grid-template-columns:1fr 1fr; gap:80px; }
}

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--cream); padding:56px 0 calc(28px + var(--safe-b)); overflow:hidden; }
.foot__big{ font:350 clamp(56px, 17vw, 210px)/.9 var(--serif); letter-spacing:-.045em; white-space:nowrap; }
.foot__big em{ font-style:italic; color:var(--terracotta); }
.foot__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:36px; padding-top:22px; border-top:1px solid rgba(246,239,230,.16); font-size:14px; color:rgba(246,239,230,.7); }
.foot__row p{ margin:0; }
.foot__row nav{ display:flex; gap:22px; }
.foot__small{ font-size:12px; color:rgba(246,239,230,.45); margin:22px 0 0; }

/* ---------- floating cart bar (phone only) ---------- */
.cartbar{
  position:fixed; left:12px; right:12px; bottom:calc(12px + var(--safe-b)); z-index:40;
  height:60px; border-radius:18px; padding:0 18px; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 16px 32px -14px rgba(43,33,27,.6);
  transform:translateY(calc(100% + 30px)); transition:transform .5s var(--ease);
}
.cartbar.show{ transform:none; }
.sheet-open .cartbar.show, .nav-open .cartbar.show{ transform:translateY(calc(100% + 30px)); }
.cartbar__l{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.cartbar__l b{ font-weight:500; font-size:12px; opacity:.7; }
.cartbar__l span{ font-weight:600; font-size:16px; }
.cartbar__r{ display:flex; align-items:center; gap:4px; font-weight:500; font-size:15px; }
.cartbar__r svg{ width:18px; height:18px; }
@media (min-width:900px){ .cartbar{ display:none; } }

/* ---------- sheets ---------- */
.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(30,22,17,.42);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s;
}
.scrim.show{ opacity:1; visibility:visible; transition:opacity .4s, visibility 0s; }
.sheet{
  position:fixed; z-index:100; left:0; right:0; bottom:0;
  max-height:92dvh; height:92dvh; background:var(--paper); border-radius:26px 26px 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(105%); visibility:hidden;
  transition:transform .55s var(--ease), visibility 0s .55s;
  box-shadow:0 -10px 40px -20px rgba(0,0,0,.35);
}
.sheet--sm{ height:auto; }
.sheet.open{ transform:translateY(0); visibility:visible; transition:transform .55s var(--ease), visibility 0s; }
.sheet.dragging{ transition:none; }
.sheet__grab{ padding:10px 0 2px; display:grid; place-items:center; touch-action:none; }
.sheet__grab span{ width:40px; height:4.5px; border-radius:3px; background:rgba(43,33,27,.18); }
.sheet__head{ display:flex; align-items:center; gap:4px; padding:4px 10px 10px 22px; border-bottom:1px solid rgba(43,33,27,.08); touch-action:none; }
.sheet__back{ margin-left:-12px; }
.sheet__title{ flex:1; font:400 26px/1.2 var(--serif); letter-spacing:-.02em; margin:0; }
.sheet__body{ flex:1; overflow-y:auto; padding:6px 22px 22px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sheet__foot{ padding:14px 22px calc(14px + var(--safe-b)); border-top:1px solid rgba(43,33,27,.08); background:var(--paper); }
.steps{ position:relative; flex:1; display:grid; min-height:0; }
.step{
  grid-area:1/1; display:flex; flex-direction:column; min-height:0;
  opacity:0; transform:translateX(40px); visibility:hidden; pointer-events:none;
  transition:opacity .35s, transform .45s var(--ease), visibility 0s .45s;
}
.step.is-active{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .35s .05s, transform .45s var(--ease), visibility 0s; }
.step.is-left{ transform:translateX(-40px); }
@media (min-width:900px){
  .sheet{
    left:auto; top:0; width:460px; height:100dvh; max-height:none; border-radius:0;
    transform:translateX(105%);
  }
  .sheet.open{ transform:translateX(0); }
  .sheet--sm{ top:50%; left:50%; right:auto; bottom:auto; width:440px; height:auto; max-height:88vh; border-radius:26px;
    transform:translate(-50%,-46%) scale(.97); opacity:0; transition:transform .45s var(--ease), opacity .3s, visibility 0s .45s; }
  .sheet--sm.open{ transform:translate(-50%,-50%); opacity:1; transition:transform .45s var(--ease), opacity .3s, visibility 0s; }
  .sheet__grab{ display:none; }
  .sheet__head{ padding-top:18px; }
}

/* cart contents */
.cline{ display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(43,33,27,.08); }
.cline__img{ width:56px; height:56px; border-radius:12px; overflow:hidden; background:var(--sand); position:relative; }
.cline__img img{ width:100%; height:100%; object-fit:cover; }
.cline__img .ph{ font-size:22px; }
.cline__n{ font:500 16px/1.25 var(--serif); margin:0 0 4px; }
.cline__p{ font-size:13.5px; color:var(--muted); }
.cline .stepper{ height:34px; }
.empty{ text-align:center; padding:60px 10px; color:var(--muted); }
.empty__ic{ font:italic 400 64px/1 var(--serif); color:var(--terracotta); margin-bottom:14px; }
.empty h4{ font:400 26px/1.2 var(--serif); color:var(--ink); margin:0 0 8px; }
.bill{ margin-top:20px; background:color-mix(in srgb, var(--sand) 35%, var(--paper)); border-radius:16px; padding:16px 18px; font-size:14.5px; }
.bill div{ display:flex; justify-content:space-between; padding:5px 0; color:var(--muted); }
.bill .free{ color:var(--olive); font-weight:500; }
.bill .tot{ color:var(--ink); font-weight:600; font-size:16px; border-top:1px dashed rgba(43,33,27,.2); margin-top:8px; padding-top:12px; }
.nudge{ font-size:13px; color:var(--olive); background:color-mix(in srgb, var(--olive) 10%, transparent); padding:10px 14px; border-radius:12px; margin-top:16px; }
.foot-row{ display:flex; align-items:center; gap:14px; }
.foot-row .tot-mini{ display:flex; flex-direction:column; line-height:1.2; }
.foot-row .tot-mini small{ font-size:12px; color:var(--muted); }
.foot-row .tot-mini b{ font-size:18px; font-weight:600; }
.foot-row .btn{ flex:1; }

.seg{ display:grid; grid-template-columns:repeat(3,1fr); background:color-mix(in srgb, var(--sand) 50%, var(--paper)); padding:4px; border-radius:14px; position:relative; }
.seg button{ height:42px; border-radius:11px; font-size:14px; font-weight:500; color:var(--muted); position:relative; z-index:1; transition:color .3s; }
.seg button.is-on{ color:var(--ink); }
.seg::before{ content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); border-radius:11px; background:var(--paper); box-shadow:0 2px 8px -2px rgba(43,33,27,.18); transform:translateX(calc(var(--i,0) * 100%)); transition:transform .4s var(--ease); }

.pay-total{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0 4px; }
.pay-total span{ color:var(--muted); }
.pay-total strong{ font:400 34px/1 var(--serif); }
.paylist{ display:grid; gap:10px; }
.payopt{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid rgba(43,33,27,.14); border-radius:16px; cursor:pointer; transition:border-color .25s, background-color .25s; }
.payopt input{ position:absolute; opacity:0; pointer-events:none; }
.payopt__ic{ width:42px; height:42px; border-radius:12px; background:color-mix(in srgb, var(--sand) 55%, var(--paper)); display:grid; place-items:center; font:600 12px var(--sans); color:var(--terracotta); }
.payopt__ic svg{ width:20px; height:20px; }
.payopt__t{ flex:1; display:flex; flex-direction:column; line-height:1.3; }
.payopt__t b{ font-weight:500; font-size:15px; }
.payopt__t small{ font-size:12.5px; color:var(--muted); }
.payopt i{ width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(43,33,27,.3); transition:border .2s; }
.payopt:has(input:checked){ border-color:var(--ink); background:color-mix(in srgb, var(--sand) 25%, var(--paper)); }
.payopt:has(input:checked) i{ border:6px solid var(--terracotta); }
.payopt.is-on{ border-color:var(--ink); }
.payopt.is-on i{ border:6px solid var(--terracotta); }
.paybox{ margin-top:6px; }
.demo-note{ font-size:12.5px; color:var(--muted); text-align:center; margin:18px 0 0; }

.done{ text-align:center; padding-top:30px; }
.tick{ width:84px; height:84px; margin:0 auto 18px; }
.tick svg{ width:100%; height:100%; stroke-width:2.4; }
.tick circle{ stroke:var(--olive); stroke-dasharray:151; stroke-dashoffset:151; fill:color-mix(in srgb, var(--olive) 10%, transparent); }
.tick path{ stroke:var(--olive); stroke-dasharray:40; stroke-dashoffset:40; }
.anim .tick circle{ animation:draw .7s var(--ease-out) forwards; }
.anim .tick path{ animation:draw .45s var(--ease-out) .45s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.done__title{ font:400 34px/1.1 var(--serif); letter-spacing:-.02em; margin:0 0 8px; }
.done__sub{ color:var(--muted); margin:0 0 26px; font-size:15px; }
.track{ display:flex; justify-content:space-between; position:relative; margin:0 6px 26px; }
.track::before{ content:""; position:absolute; left:12px; right:12px; top:9px; height:2px; background:rgba(43,33,27,.12); }
.track::after{ content:""; position:absolute; left:12px; top:9px; height:2px; background:var(--olive); width:calc((100% - 24px) * var(--p,0)); transition:width 1.2s var(--ease); }
.track__step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); width:33%; }
.track__step:first-child{ align-items:flex-start; } .track__step:last-child{ align-items:flex-end; }
.track__step i{ width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid rgba(43,33,27,.18); transition:background-color .4s, border-color .4s; }
.track__step.is-on i{ background:var(--olive); border-color:var(--olive); }
.track__step.is-on{ color:var(--ink); font-weight:500; }
.receipt, .ticket{ text-align:left; background:color-mix(in srgb, var(--sand) 35%, var(--paper)); border-radius:18px; padding:18px; font-size:14px; }
.receipt div, .ticket div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.receipt span, .ticket span{ color:var(--muted); }
.receipt .tot{ border-top:1px dashed rgba(43,33,27,.22); margin-top:8px; padding-top:12px; font-weight:600; }
.ticket{ position:relative; margin-top:10px; }
.ticket .id{ font:500 22px var(--serif); letter-spacing:.02em; }
.ticket-actions{ display:flex; gap:10px; margin-top:16px; }
.ticket-actions .btn{ flex:1; height:46px; font-size:14px; }

/* login */
.login__h{ font:400 30px/1.15 var(--serif); letter-spacing:-.02em; margin:18px 0 6px; }
.login__p{ color:var(--muted); margin:0 0 22px; font-size:15px; }
.phone-in{ display:flex; align-items:center; height:58px; border:1px solid rgba(43,33,27,.18); border-radius:16px; background:var(--paper); transition:border-color .25s; }
.phone-in:focus-within{ border-color:var(--ink); }
.phone-in span{ padding:0 14px 0 18px; border-right:1px solid rgba(43,33,27,.14); font-weight:500; }
.phone-in input{ flex:1; height:100%; border:0; outline:0; background:transparent; padding:0 14px; font-size:18px; letter-spacing:.06em; min-width:0; }
.phone-in.bad{ border-color:#C0392B; animation:shake .4s; }
.err{ color:#B23B2B; font-size:13px; min-height:18px; margin:8px 0 0; }
.otp{ display:flex; gap:12px; }
.otp input{
  width:100%; max-width:64px; height:64px; text-align:center; font:500 26px var(--serif);
  border:1px solid rgba(43,33,27,.18); border-radius:16px; background:var(--paper); outline:0;
  transition:border-color .2s, transform .2s;
}
.otp input:focus{ border-color:var(--ink); transform:translateY(-2px); }
.otp.bad input{ border-color:#C0392B; animation:shake .4s; }
.resend{ font-size:14px; color:var(--muted); }
.resend button{ color:var(--terracotta); font-weight:500; }
.resend button[disabled]{ color:var(--muted); }

.acc-card{ display:flex; align-items:center; gap:14px; padding:18px 0; }
.acc-card .big-av{ width:56px; height:56px; border-radius:50%; background:var(--olive); color:#fff; display:grid; place-items:center; font:500 22px var(--serif); }
.acc-card b{ display:block; font:400 22px/1.2 var(--serif); }
.acc-card small{ color:var(--muted); }
.acc-sec{ font:500 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.acc-row{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid rgba(43,33,27,.08); font-size:14px; }
.acc-row span{ color:var(--muted); }

/* toast */
.toast{
  position:fixed; left:50%; top:calc(var(--hh) + 10px); z-index:300;
  transform:translate(-50%, -20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:14px; font-size:14px; font-weight:500;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.4); max-width:calc(100% - 32px); width:max-content; text-align:center;
  transition:opacity .3s, transform .45s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast b{ color:#F2B79F; }

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

/* grid children must be allowed to shrink (prevents horizontal overflow on phones) */
.hero > *, .book__grid > *, .about__grid > *, .contact__grid > *, .mgrid > *, .item > *{ min-width:0; }
[hidden]{ display:none !important; }
.sheet{ overflow:hidden; overflow:clip; }
.steps{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); overflow:hidden; overflow:clip; }
.rv__who small{ display:block; line-height:1.35; margin-top:2px; }

/* =========================================================
   SEARCH OVERLAY
   ========================================================= */
.logo{ white-space:nowrap; }
@media (max-width:380px){ .hdr__actions .icon-btn{ width:40px; } }
@media (max-width:350px){ .logo{ font-size:19px; } .hdr__actions .icon-btn{ width:36px; } }

.srch{
  position:fixed; inset:0; z-index:80; background:var(--cream);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s .35s;
}
.srch.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility 0s; }
.srch__top{ flex:0 0 auto; padding-top:env(safe-area-inset-top, 0px); border-bottom:1px solid rgba(43,33,27,.1); }
.srch__topin{ height:calc(var(--hh) + 8px); display:flex; align-items:center; gap:14px; }
.srch__bar{
  flex:1; min-width:0; height:50px; display:flex; align-items:center; gap:10px; padding:0 8px 0 16px;
  background:var(--paper); border:1px solid rgba(43,33,27,.14); border-radius:999px; cursor:text;
  transition:border-color .25s, box-shadow .25s;
}
.srch__bar:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(43,33,27,.06); }
.srch__bar > svg{ flex:0 0 auto; width:20px; height:20px; color:var(--muted); }
.srch__bar input{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:400 17px/1 var(--sans); color:var(--ink); -webkit-appearance:none; appearance:none;
}
.srch__bar input::placeholder{ color:var(--muted); opacity:.8; }
.srch__bar input::-webkit-search-cancel-button, .srch__bar input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.srch__clear{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:rgba(43,33,27,.06); flex:0 0 auto; }
.srch__clear svg{ width:16px; height:16px; }
.srch__close{ flex:0 0 auto; height:44px; padding:0 2px; font:500 15px/1 var(--sans); color:var(--ink); }
@media (hover:hover){ .srch__close:hover{ color:var(--terracotta); } }

.srch__body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(110px + var(--safe-b)); }
.srch__in{ max-width:820px; padding-top:30px; transform:translateY(14px); transition:transform .5s var(--ease-out); }
.srch.is-open .srch__in{ transform:none; }
.srch__h{ font:400 clamp(36px, 9vw, 60px)/1.04 var(--serif); letter-spacing:-.025em; margin:0 0 22px; }
.srch__h em{ font-style:italic; color:var(--terracotta); font-weight:350; }
.srch__chips{ margin-bottom:30px; }
.srch__count{ font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; min-height:12px; }
.srch__intro + .srch__count:empty{ display:none; }

.sres{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid rgba(43,33,27,.1); cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.sres__img{ width:64px; height:64px; border-radius:14px; overflow:hidden; background:var(--sand); position:relative; }
.sres__img img{ width:100%; height:100%; object-fit:cover; }
.sres__img .ph{ font-size:24px; }
.sres__name{ display:flex; align-items:center; gap:8px; font:500 18px/1.25 var(--serif); letter-spacing:-.01em; margin:0 0 4px; }
.sres__name span:last-child{ min-width:0; }
.sres__name mark{ background:color-mix(in srgb, var(--terracotta) 16%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--terracotta) 16%, transparent); color:inherit; border-radius:3px; padding:0; }
.sres__meta{ font-size:13px; color:var(--muted); }
.sres__meta i{ font-style:normal; color:var(--terracotta); font-weight:500; }
@media (hover:hover){ .sres:hover .sres__name{ color:var(--terracotta); } }
@media (min-width:900px){
  .sres{ grid-template-columns:76px minmax(0,1fr) auto; gap:20px; padding:16px 0; }
  .sres__img{ width:76px; height:76px; }
  .sres__name{ font-size:20px; }
}

.add--inline{ position:static; transform:none; min-width:88px; }
.add--inline:active{ transform:scale(.95); }

.srch__none{ text-align:center; padding:50px 10px; color:var(--muted); }
.srch__none h4{ font:400 26px/1.2 var(--serif); color:var(--ink); margin:0 0 8px; }
.srch__none p{ margin:0; }

.srch__cart{
  position:absolute; left:12px; right:12px; bottom:calc(12px + var(--safe-b));
  height:60px; border-radius:18px; padding:0 18px; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 16px 32px -14px rgba(43,33,27,.6);
  transform:translateY(calc(100% + 30px)); transition:transform .5s var(--ease);
}
.srch__cart.show{ transform:none; }
@media (min-width:900px){
  .srch__cart{ left:50%; right:auto; width:min(796px, calc(100% - 24px)); bottom:24px; transform:translate(-50%, calc(100% + 40px)); }
  .srch__cart.show{ transform:translate(-50%, 0); }
}

.search-open .cartbar.show{ transform:translateY(calc(100% + 30px)); }
.search-open .toast{ top:auto; bottom:calc(86px + var(--safe-b)); }

.item.flash{ animation:itemFlash 1.9s var(--ease-out); }
@keyframes itemFlash{ 0%,35%{ box-shadow:0 0 0 2px var(--terracotta), var(--shadow); } 100%{ box-shadow:0 0 0 2px transparent; } }
.srch__topin{ max-width:820px; }