:root{
  /* ── Sea palette — teal/cyan, airier than the old dark navy ── */
  --ocean:#0e7490;        /* deep sea teal  */
  --ocean-dark:#164e63;   /* darkest teal for headings */
  --sky:#06b6d4;          /* bright sea cyan */
  --sky-mid:#0891b2;      /* mid sea blue */
  --sky-light:#22d3ee;    /* light cyan */
  --sky-pale:#cffafe;     /* pale cyan wash */
  --sky-faint:#f0fdfe;    /* barely-there tint */
  --white:#fff;
  --text:#164e63;         /* deep teal text */
  --muted:#0e7490;        /* secondary text */
  --border:#a5f3fc;       /* light cyan border */
  --shadow:rgba(14,116,144,.07);
  --shadow-md:rgba(14,116,144,.14);
  --green:#059669;--green-light:#10b981;
  --r8:8px;--r12:12px;--r16:16px;--r24:24px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',system-ui,sans-serif;
  background:#ffffff;color:var(--text);  /* pure white body */
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
}

/* ── HEADER ─────────────────────────────── */
.header{
  background:linear-gradient(135deg,var(--ocean) 0%,var(--sky-mid) 55%,var(--sky) 100%);
  position:sticky;top:0;z-index:100;
  padding-top:env(safe-area-inset-top,0);
}
.header-inner{
  padding:.85rem 1.1rem .1rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;flex-direction:column;gap:.05rem}
.logo-mark{
  font-family:'Fraunces',serif;font-size:1.45rem;
  font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1;
}
.logo-mark span{font-style:italic;font-weight:400}
.logo-sub{
  font-size:.63rem;font-weight:300;color:rgba(255,255,255,.7);
  letter-spacing:.18em;text-transform:uppercase;
}
.hd-right{display:flex;align-items:center;gap:.5rem}
.hd-refresh{
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.22);
  border-radius:50%;color:#fff;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:background .2s,transform .3s;
  flex-shrink:0;
}
.hd-refresh:hover{background:rgba(255,255,255,.25)}
.hd-refresh.spinning{transform:rotate(360deg)}
.hd-cart{
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3);
  border-radius:var(--r12);color:#fff;
  padding:.45rem .8rem;display:flex;align-items:center;gap:.4rem;
  font-family:'Sora',sans-serif;font-size:.78rem;font-weight:500;
  cursor:pointer;backdrop-filter:blur(8px);transition:background .2s;
  display:none;
}
.hd-cart.visible{display:flex}
.hd-cart:hover{background:rgba(255,255,255,.25)}
.hd-badge{
  background:#fff;color:var(--ocean);border-radius:6px;
  padding:.1rem .45rem;font-size:.7rem;font-weight:700;min-width:22px;text-align:center;
}

/* ── TABS ────────────────────────────────── */
.tabs-row{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:.6rem 0 0}
.tabs-row::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:.3rem;padding:0 1rem .7rem;width:max-content}
.tab{
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.22);
  border-radius:100px;color:rgba(255,255,255,.82);
  padding:.38rem .8rem;font-family:'Sora',sans-serif;
  font-size:.73rem;font-weight:500;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:.3rem;
  transition:background .18s,color .18s,border-color .18s;
}
.tab.active{background:#fff;border-color:#fff;color:var(--ocean);font-weight:600}

/* ── DESKTOP HEADER ──────────────────────── */
@media(min-width:768px){
  .header-inner{padding:1rem 2rem .15rem}
  .logo-mark{font-size:1.7rem}
  .tabs{padding:0 2rem .85rem;gap:.45rem}
  .tab{padding:.45rem 1.1rem;font-size:.78rem}
}
/* ── DESKTOP CART SHEET (centered modal) ─ */
@media(min-width:768px){
  .sheet{left:50%!important;right:auto!important;width:min(500px,96vw)!important;
    border-radius:20px 20px 0 0!important;
    transform:translateX(-50%) translateY(100%)!important}
  .sheet.open{transform:translateX(-50%) translateY(0)!important}
  .cart-bar .cart-bar-btn{max-width:520px;margin:0 auto;display:flex}
}
/* ── INSTALL BANNER ─────────────────────── */
.install-banner{
  background:linear-gradient(90deg,#fffbeb,#fef3c7);
  border-bottom:1px solid #fcd34d;
  padding:.55rem 1rem;display:none;align-items:center;gap:.65rem;
}
.install-banner.show{display:flex}
.install-text{flex:1;font-size:.78rem;font-weight:500;color:#78350f}
.install-btn{
  background:#d97706;color:#fff;border:none;border-radius:var(--r8);
  padding:.3rem .7rem;font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.install-x{
  background:none;border:none;cursor:pointer;color:#92400e;font-size:1.1rem;line-height:1;padding:.1rem;
}

/* ── CONTENT ─────────────────────────────── */
.content{padding:.9rem .75rem 6.5rem;max-width:1400px;margin:0 auto}
@media(min-width:768px){.content{padding:1.1rem 1.5rem 6.5rem}}
@media(min-width:1200px){.content{padding:1.25rem 3rem 6.5rem}}
.cat-header{margin-bottom:1.1rem}
.cat-title{
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;
  color:var(--ocean);display:flex;align-items:center;gap:.45rem;margin-bottom:.15rem;
}
.cat-desc{font-size:.75rem;color:var(--muted);font-weight:300}
.sub-head{
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--ocean);
  margin:1.4rem 0 .7rem;padding-bottom:.35rem;border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;gap:.3rem;
}

/* ── CARDS ───────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:320px){.grid{grid-template-columns:1fr}}
@media(min-width:540px){.grid{grid-template-columns:repeat(3,1fr);gap:.85rem}}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr);gap:1rem}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(5,1fr);gap:1.1rem}}
.card{
  background:#fff;border-radius:var(--r16);padding:0;
  box-shadow:0 2px 14px var(--shadow);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:box-shadow .2s,transform .15s;
}
.card:hover{box-shadow:0 6px 24px var(--shadow-md)}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sky),var(--sky-light));
  opacity:0;transition:opacity .25s;z-index:1;
}
.card.incart::after{opacity:1}
.card:active{transform:scale(.985)}
/* ── unified media area (photo OR emoji, same aspect ratio) ── */
.c-media{
  width:100%;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sky-faint) 0%,var(--sky-pale) 100%);
  position:relative;
}
.c-media>img{width:100%;height:100%;object-fit:cover;display:block}
.c-emoji{font-size:2.4rem;line-height:1}
/* ── photo carousel (2 images, swipe) ──────────── */
.c-carousel{
  display:flex;width:100%;height:100%;
  overflow-x:scroll;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.c-carousel::-webkit-scrollbar{display:none}
.c-carousel>img{
  flex-shrink:0;width:100%;height:100%;
  object-fit:cover;scroll-snap-align:start;
}
.c-dots{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;pointer-events:none;
}
.c-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:background .2s,transform .2s;
}
.c-dot.on{background:#fff;transform:scale(1.25)}
/* card text body */
.c-body{padding:.75rem .8rem .8rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.c-name{
  font-family:'Fraunces',serif;font-size:.875rem;font-weight:600;
  color:var(--text);line-height:1.2;
}
@media(min-width:860px){.c-name{font-size:.95rem}}
.c-desc{font-size:.7rem;color:var(--muted);font-weight:300;line-height:1.45;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.22rem}
.tag{font-size:.6rem;font-weight:600;padding:.13rem .42rem;border-radius:100px;letter-spacing:.02em}
.t-local{background:#fef3c7;color:#92400e}
.t-vegetarian{background:#dcfce7;color:#166534}
.t-seafood{background:#e0f2fe;color:#075985}
.t-fortwo{background:#f3e8ff;color:#6b21a8}
.t-spicy{background:#fee2e2;color:#991b1b}
.c-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.c-price{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ocean)}
.add-btn{
  background:linear-gradient(135deg,var(--ocean),var(--sky));border:none;
  border-radius:var(--r8);color:#fff;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.25rem;font-weight:300;
  transition:transform .15s,box-shadow .15s;flex-shrink:0;
}
.add-btn:active{transform:scale(.88)}
.qty-ctrl{display:flex;align-items:center;gap:.35rem}
.q-btn{
  background:var(--sky-pale);border:none;border-radius:7px;color:var(--ocean);
  width:27px;height:27px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;font-weight:700;transition:background .15s;flex-shrink:0;
}
.q-btn:active{background:var(--border)}
.q-num{
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;
  color:var(--ocean);min-width:1.1rem;text-align:center;
}

/* ── FLOAT CART BAR ──────────────────────── */
.cart-bar{
  position:fixed;bottom:0;left:0;right:0;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0));
  background:#fff;border-top:1px solid var(--border);
  box-shadow:0 -4px 24px var(--shadow-md);z-index:200;display:none;
}
.cart-bar.show{display:block}
.cart-bar-btn{
  width:100%;
  background:linear-gradient(135deg,var(--ocean),var(--sky-mid));
  border:none;border-radius:var(--r16);color:#fff;
  padding:.85rem 1.1rem;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-family:'Sora',sans-serif;font-size:.82rem;font-weight:600;
  box-shadow:0 4px 18px rgba(7,89,133,.35);transition:transform .15s;
}
.cart-bar-btn:active{transform:scale(.99)}
.cb-left{display:flex;align-items:center;gap:.45rem}
.cb-badge{
  background:#fff;color:var(--ocean);border-radius:7px;
  padding:.12rem .5rem;font-size:.75rem;font-weight:700;
}
.cb-total{font-size:.88rem;font-weight:700}

/* ── CART SHEET ──────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(7,89,133,.45);
  z-index:300;opacity:0;pointer-events:none;
  transition:opacity .28s;backdrop-filter:blur(3px);
}
.overlay.open{opacity:1;pointer-events:all}
.sheet{
  position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-radius:22px 22px 0 0;z-index:400;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
}
.sheet.open{transform:translateY(0)}
.handle{width:36px;height:4px;background:#cbd5e1;border-radius:2px;margin:.65rem auto 0;flex-shrink:0}
.sh-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.15rem .5rem;flex-shrink:0;
}
.sh-title{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:var(--ocean)}
.sh-close{
  background:var(--sky-pale);border:none;border-radius:50%;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ocean);font-size:1rem;
}
.sh-body{overflow-y:auto;flex:1;padding:0 1.15rem;overscroll-behavior:contain}

/* Cart items */
.ci{display:flex;align-items:center;gap:.65rem;padding:.65rem 0;border-bottom:1px solid var(--sky-faint)}
.ci:last-child{border-bottom:none}
.ci-emoji{font-size:1.4rem;flex-shrink:0}
.ci-info{flex:1}
.ci-name{font-family:'Fraunces',serif;font-size:.82rem;font-weight:600;color:var(--text);line-height:1.2}
.ci-unit{font-size:.72rem;color:var(--muted);font-weight:300}
.ci-ctrl{display:flex;align-items:center;gap:.3rem;flex-shrink:0}

/* Empty */
.empty{text-align:center;padding:3rem 1rem}
.empty-icon{font-size:3rem;margin-bottom:.5rem}
.empty-txt{font-family:'Fraunces',serif;font-size:.95rem;font-weight:500;color:var(--muted)}
.empty-sub{font-size:.75rem;color:var(--muted);font-weight:300;margin-top:.25rem}

/* Cost breakdown */
.breakdown{background:var(--sky-faint);border-radius:var(--r16);padding:.85rem 1rem;margin:.75rem 0}
.brow{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;font-size:.8rem}
.brow.tot{
  border-top:1.5px solid var(--border);margin-top:.5rem;padding-top:.7rem;
  font-weight:700;font-size:.98rem;color:var(--ocean);font-family:'Fraunces',serif;
}
.brow-label{color:var(--muted)}
.brow-val{font-weight:600;color:var(--text)}
.brow.tot .brow-val{color:var(--ocean)}

/* Form */
.form{margin:.25rem 0 .5rem}
.f-label{
  display:block;font-size:.72rem;font-weight:600;color:var(--ocean);
  margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.06em;
}
.f-input{
  width:100%;background:var(--sky-faint);border:1.5px solid var(--border);
  border-radius:var(--r12);padding:.7rem .9rem;
  font-family:'Sora',sans-serif;font-size:.85rem;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;margin-bottom:.8rem;
}
.f-input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
.f-input::placeholder{color:#94a3b8}
textarea.f-input{resize:vertical;min-height:72px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.f-req{color:#dc2626;font-size:.7rem}
.f-opt{color:#94a3b8;font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0}
.f-err{color:#dc2626;font-size:.72rem;margin-top:-.6rem;margin-bottom:.6rem;display:none}
.f-err.show{display:block}

/* Sheet footer */
.sh-foot{
  padding:.65rem 1.15rem calc(.65rem + env(safe-area-inset-bottom,0));
  flex-shrink:0;border-top:1px solid var(--border);
}
.wa-btn{
  width:100%;
  background:linear-gradient(135deg,#15803d,var(--green-light));
  border:none;border-radius:var(--r16);color:#fff;padding:.95rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  cursor:pointer;font-family:'Sora',sans-serif;font-size:.9rem;font-weight:600;
  box-shadow:0 4px 16px rgba(22,163,74,.35);transition:transform .15s;
}
.wa-btn:active{transform:scale(.98)}
.wa-icon{width:20px;height:20px;fill:#fff;flex-shrink:0}
.svc-note{
  text-align:center;font-size:.68rem;color:var(--muted);margin-top:.5rem;font-weight:300;
}

/* Footer */
.page-foot{
  text-align:center;padding:.9rem;font-size:.7rem;color:var(--muted);
  background:#fff;border-top:1px solid var(--border);
}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.grid>.card{animation:fadeUp .25s ease both}
@keyframes popIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.pop{animation:popIn .3s cubic-bezier(.34,1.56,.64,1) both}

/* ── HEADER SEARCH ICON BUTTON ───────────── */
.hd-icon-btn{
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.22);
  border-radius:50%;color:#fff;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .2s;
  padding:0;
}
.hd-icon-btn:hover{background:rgba(255,255,255,.25)}
.hd-icon-btn svg{width:16px;height:16px}

/* ── FULL-SCREEN SEARCH OVERLAY ──────────── */
.search-overlay{
  position:fixed;inset:0;z-index:250;
  background:var(--sky-faint);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  padding-top:env(safe-area-inset-top,0);
}
.search-overlay.open{transform:translateY(0)}
.so-header{
  background:linear-gradient(135deg,var(--ocean),var(--sky-mid));
  padding:.7rem 1rem;display:flex;align-items:center;gap:.65rem;flex-shrink:0;
}
.so-input-wrap{
  flex:1;background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:100px;display:flex;align-items:center;
  padding:.42rem .85rem;gap:.45rem;
  transition:background .2s;
}
.so-input-wrap:focus-within{background:rgba(255,255,255,.28)}
.so-icon{width:15px;height:15px;stroke:#fff;opacity:.8;flex-shrink:0}
.so-input{
  flex:1;background:none;border:none;outline:none;
  color:#fff;font-family:'Sora',sans-serif;font-size:.9rem;min-width:0;
}
.so-input::placeholder{color:rgba(255,255,255,.65)}
.so-clear{background:none;border:none;color:rgba(255,255,255,.75);font-size:.95rem;cursor:pointer;padding:.1rem;line-height:1;flex-shrink:0}
.so-cancel{
  background:none;border:none;color:rgba(255,255,255,.9);
  font-family:'Sora',sans-serif;font-size:.85rem;font-weight:500;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.so-body{overflow-y:auto;flex:1;padding:.75rem .75rem 2rem}
.so-hint{
  text-align:center;padding:3.5rem 1.5rem;color:var(--muted);
  font-size:.9rem;font-weight:300;line-height:1.7;
}
.so-hint-icon{font-size:2.5rem;display:block;margin-bottom:.4rem}
.so-count{
  font-size:.78rem;color:var(--muted);font-weight:500;margin-bottom:.65rem;
  padding:0 .1rem;
}
.no-results{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:.88rem}
.no-results-icon{font-size:3rem;margin-bottom:.5rem}
@media(min-width:768px){.so-header{padding:.7rem 2rem}}

/* ── ALL PRODUCTS / COMPACT VIEW ─────────── */
/* Category divider: centred label flanked by thin lines */
.all-cat-label{
  display:flex;align-items:center;gap:.75rem;
  margin:1.6rem 0 .65rem;
  font-family:'Fraunces',serif;font-size:.85rem;font-weight:700;
  color:var(--muted);letter-spacing:.02em;
}
.all-cat-label::before,.all-cat-label::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.all-cat-label:first-child{margin-top:.4rem}
/* compact grid — more columns, tighter */
.compact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
@media(min-width:540px){.compact-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){.compact-grid{grid-template-columns:repeat(5,1fr);gap:.7rem}}
@media(min-width:1200px){.compact-grid{grid-template-columns:repeat(6,1fr)}}
/* compact card — no desc/tags, tighter body padding */
.card.compact .c-body{padding:.5rem .6rem .65rem}
.card.compact .c-name{font-size:.78rem}
.card.compact .c-price{font-size:.88rem}
.card.compact .add-btn{width:26px;height:26px;font-size:1rem}
.card.compact .q-btn{width:24px;height:24px;font-size:.85rem}
.card.compact .q-num{font-size:.85rem}

/* ── OFFER BADGE (on card photo) ─────────── */
.offer-badge{
  position:absolute;top:7px;left:7px;
  background:linear-gradient(135deg,#d97706,#f59e0b);
  color:#fff;border-radius:6px;
  font-size:.62rem;font-weight:700;padding:.18rem .5rem;
  letter-spacing:.04em;box-shadow:0 2px 6px rgba(217,119,6,.35);
  pointer-events:none;z-index:2;
}
.c-price-old{font-size:.72rem;color:#94a3b8;text-decoration:line-through;margin-right:.3rem;font-family:'Fraunces',serif}
.c-price.sale{color:#d97706}

/* ── OFFER BANNER (countdown strip) — warm amber/gold, premium not alarming */
.offer-banner{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border-bottom:1.5px solid #fde68a;
  color:#78350f;padding:.55rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  position:sticky;top:var(--hdr-h,120px);z-index:90;
  cursor:pointer;
}
.ob-left{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.ob-flame{font-size:1.1rem;flex-shrink:0}
.ob-text{min-width:0}
.ob-title{
  font-family:'Fraunces',serif;font-size:.88rem;font-weight:700;
  color:#92400e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ob-sub{font-size:.7rem;font-weight:400;color:#b45309;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}
.ob-timer{text-align:right;flex-shrink:0}
.ob-timer-lbl{font-size:.58rem;font-weight:500;color:#b45309;text-transform:uppercase;letter-spacing:.08em}
.ob-countdown{
  font-family:'Fraunces',serif;font-size:1rem;font-weight:700;
  color:#92400e;letter-spacing:.04em;line-height:1;
}
.ob-chevron{font-size:1.1rem;color:#b45309;flex-shrink:0;line-height:1}

/* ── HERO BANNER ─────────────────────────── */
#hero{position:relative;overflow:hidden;background:var(--ocean)}
.hero-car{
  display:flex;width:100%;overflow-x:scroll;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -ms-overflow-style:none;
  will-change:scroll-position;
}
.hero-car::-webkit-scrollbar{display:none}
.hero-car>img{
  flex-shrink:0;width:100%;
  aspect-ratio:3/1;object-fit:cover;    /* shorter banner, was 16/7 */
  scroll-snap-align:start;display:block;
}
@media(min-width:768px){
  .hero-car>img{aspect-ratio:4/1}       /* even wider/shorter on desktop */
}
.hero-dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;pointer-events:none;
}
.hero-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.45);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:background .25s,transform .25s;
}
.hero-dot.on{background:#fff;transform:scale(1.3)}

/* ── CARD TAP / MODERN INTERACTION ──────── */
.card-tap{cursor:pointer;display:flex;flex-direction:column}
.card-tap .c-media{transition:transform .22s ease,opacity .15s}
.card-tap:hover .c-media{transform:scale(1.025)}
.card-tap:active .c-media{opacity:.85;transform:scale(.98)}
/* Subtle "tap to view" hint on photo area */
.c-media::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 55%,rgba(7,89,133,.25));
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.card-tap:hover .c-media::before{opacity:1}
/* c-foot is now outside card-tap, needs its own padding */
.c-foot{display:flex;align-items:center;justify-content:space-between;padding:.1rem .8rem .75rem;margin-top:0}
.c-body{padding:.7rem .8rem .25rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
/* ob-chevron hint */
.ob-chevron{font-size:1.4rem;color:rgba(255,255,255,.8);flex-shrink:0;line-height:1}

/* ── PRODUCT DETAIL SHEET ────────────────── */
.product-sheet{
  position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-radius:22px 22px 0 0;z-index:500;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  /* max-height not fixed height — sheet only takes what it needs, never more than 90% */
  max-height:90vh;max-height:90dvh;
  display:flex;flex-direction:column;overflow:hidden;
}
.product-sheet.open{transform:translateY(0)}
@media(min-width:768px){
  .product-sheet{
    top:0;left:auto;right:0;bottom:0;
    width:min(480px,46vw);max-height:100%;height:100%;border-radius:0;
    transform:translateX(100%);
  }
  .product-sheet.open{transform:translateX(0)}
}
.ps-close-btn{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.9);border:none;border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;font-size:.88rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);color:var(--text);
}
/* min-height:0 is critical — without it, flex children won't shrink + scroll on iOS */
.ps-scroll{overflow-y:auto;flex:1;overscroll-behavior:contain;min-height:0}

/* Photo area — 16/9 on small phones (photo ≤210px), 4/3 on wider screens */
.ps-photo{
  width:100%;aspect-ratio:16/9;
  overflow:hidden;flex-shrink:0;position:relative;
}
@media(min-width:420px){
  .ps-photo{aspect-ratio:4/3}
}
.ps-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.ps-photo-emoji{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sky-faint),var(--sky-pale));
}
.ps-emoji{font-size:5rem;line-height:1}
.ps-carousel{
  display:flex;width:100%;height:100%;
  overflow-x:scroll;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.ps-carousel::-webkit-scrollbar{display:none}
.ps-carousel>img{flex-shrink:0;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.ps-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.ps-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:background .2s,transform .2s}
.ps-dot.on{background:#fff;transform:scale(1.3)}

/* Product body */
.ps-body{padding:1rem 1.15rem .75rem;display:flex;flex-direction:column;gap:.6rem}
.ps-offer-badge{
  display:inline-block;background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;
  font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:100px;width:fit-content;
}
.ps-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.ps-name{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:700;color:var(--ocean);line-height:1.2}
.ps-desc{font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.65}

/* Sticky footer */
.ps-foot{
  padding:.85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--border);flex-shrink:0;background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.ps-price-wrap{display:flex;align-items:baseline;gap:.3rem;flex-shrink:0}
.ps-price{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;color:var(--ocean)}
.ps-price.sale{color:#d97706}
.ps-price-old{font-family:'Fraunces',serif;font-size:.9rem;font-weight:400;color:#94a3b8;text-decoration:line-through}
.ps-add{
  background:linear-gradient(135deg,var(--ocean),var(--sky-mid));color:#fff;border:none;
  border-radius:var(--r12);padding:.75rem 1.5rem;
  font-family:'Sora',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:opacity .2s;white-space:nowrap;
}
.ps-add:active{opacity:.82}
.ps-qty .q-btn{width:32px;height:32px;font-size:1.1rem}
.ps-qty .q-num{font-size:1.05rem}

/* ── OFFER DETAIL SHEET ──────────────────── */
.offer-sheet{
  position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-radius:22px 22px 0 0;z-index:500;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;
}
.offer-sheet.open{transform:translateY(0)}
@media(min-width:768px){
  .offer-sheet{max-width:520px;left:50%;transform:translateX(-50%) translateY(100%)}
  .offer-sheet.open{transform:translateX(-50%) translateY(0)}
}
.os-close-btn{background:rgba(180,83,9,.12)!important;color:#92400e!important;box-shadow:none!important;top:14px!important}
.os-scroll{overflow-y:auto;flex:1;overscroll-behavior:contain}

/* Offer header — warm amber/gold */
.os-head{
  background:linear-gradient(135deg,#fffbeb,#fef3c7,#fde68a);
  border-bottom:1.5px solid #fcd34d;
  color:#78350f;
  padding:1.1rem 1.15rem .95rem;display:flex;align-items:center;gap:.85rem;
  flex-shrink:0;position:relative;
}
.os-flame{font-size:2rem;flex-shrink:0;line-height:1}
.os-info-block{flex:1;min-width:0}
.os-title{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;color:#92400e;line-height:1.2}
.os-desc{font-size:.8rem;font-weight:400;color:#b45309;margin-top:.2rem}
.os-pct{
  display:inline-block;background:rgba(180,83,9,.12);border:1px solid #fcd34d;
  border-radius:100px;font-size:.7rem;font-weight:700;color:#92400e;
  padding:.2rem .65rem;margin-top:.4rem;
}
.os-countdown-wrap{text-align:right;flex-shrink:0}
.os-countdown-lbl{font-size:.6rem;font-weight:500;color:#b45309;text-transform:uppercase;letter-spacing:.08em}
.os-countdown{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#92400e;letter-spacing:.04em}

/* Offer items */
.os-items{padding:.5rem 1.1rem calc(.75rem + env(safe-area-inset-bottom,0))}
.os-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 0;border-bottom:1px solid var(--sky-faint);
}
.os-item:last-child{border-bottom:none}
.os-thumb{width:58px;height:58px;border-radius:10px;object-fit:cover;flex-shrink:0}
.os-thumb-emoji{
  width:58px;height:58px;border-radius:10px;background:var(--sky-faint);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;
}
.os-info{flex:1;min-width:0}
.os-name{font-family:'Fraunces',serif;font-size:.88rem;font-weight:600;color:var(--text);line-height:1.25}
.os-price{font-size:.78rem;margin-top:.1rem;display:flex;align-items:center;gap:.35rem}
.os-old{text-decoration:line-through;color:#94a3b8}
.os-new{font-weight:700;color:var(--ocean)}
.os-add{
  background:linear-gradient(135deg,var(--ocean),var(--sky));color:#fff;border:none;
  border-radius:var(--r8);padding:.4rem .9rem;
  font-family:'Sora',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;flex-shrink:0;
}
.os-qty{flex-shrink:0}
.os-qty .q-btn{width:26px;height:26px;font-size:.9rem}
.os-qty .q-num{font-size:.85rem}
.os-empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.85rem;font-weight:300}

/* ── ORDER TOAST (auto-clear with countdown + Undo) ── */
.order-toast{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom,0) + .85rem);
  left:.75rem;right:.75rem;
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff;border-radius:var(--r16);
  padding:.85rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  z-index:600;
  box-shadow:0 6px 28px rgba(5,150,105,.45);
  animation:toastUp .3s cubic-bezier(.32,.72,0,1) both;
}
@keyframes toastUp{
  from{transform:translateY(80px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.ot-left{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0}
.ot-check{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.25);
  color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ot-info{min-width:0}
.ot-ref{
  font-family:'Fraunces',serif;font-size:.92rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ot-cd{font-size:.7rem;color:rgba(255,255,255,.85);font-weight:300;margin-top:.05rem}
.ot-undo{
  background:rgba(255,255,255,.95);
  color:#059669;border:none;border-radius:var(--r8);
  padding:.5rem 1.05rem;
  font-family:'Sora',sans-serif;font-size:.82rem;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .15s;
}
.ot-undo:active{background:#fff}

/* ── SW UPDATE BAR ───────────────────────── */
.update-bar{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:var(--ocean);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.5rem 1rem;font-size:.78rem;font-weight:500;
  padding-top:calc(.5rem + env(safe-area-inset-top,0));
}
.update-bar button{
  background:#fff;color:var(--ocean);border:none;
  border-radius:6px;padding:.2rem .55rem;font-weight:700;
  font-family:'Sora',sans-serif;font-size:.75rem;cursor:pointer;
}
.update-bar-x{
  background:none!important;color:rgba(255,255,255,.7)!important;
  padding:.1rem .2rem!important;font-size:.9rem!important;
}