/* ==========================================================
   By.Me Delicious — styles.css  v1.4.0
   "Patisserie Moderne" — Warm Light Editorial
   ========================================================== */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Base surfaces */
  --bg:       #FAFAF7;    /* warm off-white */
  --bg2:      #F3EDE3;
  --surface:  #FFFFFF;
  --surface2: #FFF7EE;
  --ink:      #18120C;    /* deep warm black */
  --muted:    #6B5748;
  --subtle:   #A0897A;
  --line:     rgba(24,18,12,.09);
  --line2:    rgba(24,18,12,.16);

  /* Brand palette — Strawberry Rose + Amber */
  --accent:       #D0384F;   /* strawberry rose */
  --accent2:      #E04F66;
  --accent-bg:    rgba(208,56,79,.07);
  --accent-glow:  rgba(208,56,79,.24);

  --amber:         #D4843A;  /* warm amber */
  --amber-light:   #FDECD4;

  --blush:         #FCE8EC;  /* very light rose wash */

  /* Typography */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Motion */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --smooth: cubic-bezier(.4,0,.2,1);
  --ease:   cubic-bezier(.25,.46,.45,.94);

  /* Shape */
  --r-xs:  4px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  40px;
  --r-full:9999px;

  /* Shadows */
  --sh-xs: 0 1px 4px rgba(24,12,8,.06);
  --sh-sm: 0 4px 16px rgba(24,12,8,.09);
  --sh-md: 0 12px 40px rgba(24,12,8,.11);
  --sh-lg: 0 24px 72px rgba(24,12,8,.14);
  --sh-xl: 0 40px 100px rgba(24,12,8,.18);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
html,body { min-height:100%; background:var(--bg); color:var(--ink); }
body { font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overscroll-behavior-x:none; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }
img { display:block; max-width:100%; }

/* ── App shell ───────────────────────────────────────────── */
.app { max-width:1800px; margin:0 auto; position:relative; min-height:100svh; }

/* ── Shared components ───────────────────────────────────── */
.label {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--accent); font:700 10px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase;
}
.label > span { width:28px; height:1px; background:currentColor; flex-shrink:0; }

.badge {
  border-radius:var(--r-xs); padding:6px 12px;
  font:700 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
}
.badge.accent { background:var(--accent); color:#fff; box-shadow:0 4px 12px var(--accent-glow); }
.badge.ghost  { background:rgba(255,255,255,.92); color:var(--ink); border:1px solid var(--line2); }

.icon-btn {
  width:44px; height:44px; border-radius:var(--r-sm);
  border:1.5px solid var(--line2); background:var(--surface);
  color:var(--ink); display:grid; place-items:center;
  box-shadow:var(--sh-xs); transition:all .2s var(--smooth);
}
.icon-btn:hover { border-color:var(--ink); background:var(--surface); box-shadow:var(--sh-sm); transform:translateY(-1px); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:30;
  height:76px; padding:0 clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(250,250,247,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.topbar.scrolled { box-shadow:0 2px 24px rgba(24,12,8,.08); }

/* Brand */
.brand { border:0; background:transparent; display:inline-flex; align-items:center; gap:14px; padding:6px 0; color:var(--ink); text-align:left; transition:opacity .2s; }
.brand:hover { opacity:.75; }
.brand-icon {
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--accent), #A82240);
  color:#fff; font:italic 700 15px/1 var(--serif); letter-spacing:-.06em;
  box-shadow:0 6px 20px var(--accent-glow);
  transition:transform .35s var(--spring); flex-shrink:0;
}
.brand:hover .brand-icon { transform:rotate(-7deg) scale(1.1); }
.brand-text strong { display:block; font:700 19px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.brand-text small  { display:block; color:var(--muted); margin-top:3px; font:500 10px var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.topbar-actions { display:flex; align-items:center; gap:8px; }

/* Search pill */
.search-toggle {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--line2); background:var(--surface);
  color:var(--muted); border-radius:var(--r-sm);
  padding:10px 18px; font:500 13px var(--sans);
  box-shadow:var(--sh-xs); transition:all .2s var(--smooth);
}
.search-toggle:hover { border-color:var(--ink); color:var(--ink); box-shadow:var(--sh-sm); }
.search-label { font-size:13px; }

/* Search bar */
.search-bar {
  position:sticky; top:76px; z-index:29;
  padding:0 clamp(16px,4vw,48px) 14px;
  background:rgba(250,250,247,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  animation:slideDown .3s var(--spring);
}
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
.search-inner {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1.5px solid var(--line2);
  border-radius:var(--r-sm); padding:0 20px;
  box-shadow:var(--sh-xs); transition:all .2s;
}
.search-inner:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg), var(--sh-sm); }
.search-inner svg { flex-shrink:0; color:var(--subtle); }
.search-inner input { flex:1; border:0; background:transparent; font:400 15px var(--sans); color:var(--ink); padding:14px 0; outline:none; }
.search-inner input::placeholder { color:var(--subtle); }
.search-close {
  width:32px; height:32px; border-radius:var(--r-xs); border:0;
  background:var(--bg2); color:var(--muted);
  display:grid; place-items:center; font-size:18px; transition:all .2s;
}
.search-close:hover { background:var(--ink); color:#fff; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:var(--surface2);
  padding:clamp(56px,7vw,120px) clamp(20px,5vw,72px);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}

/* Decorative blobs — soft & warm */
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-gradient {
  position:absolute; inset:-20%;
  background:
    radial-gradient(ellipse 50% 45% at 82% 25%, rgba(208,56,79,.1), transparent),
    radial-gradient(ellipse 40% 55% at 12% 75%, rgba(212,132,58,.09), transparent),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(208,56,79,.05), transparent);
  filter:blur(32px);
  animation:ambientDrift 16s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  from { transform:scale(1) rotate(0deg); }
  to   { transform:scale(1.06) rotate(5deg); }
}
.hero-pattern { display:none; }

.hero-content {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(400px,1.15fr);
  gap:clamp(40px,6vw,100px); align-items:center;
  max-width:1400px; width:100%; margin:0 auto;
}

.hero-text { max-width:600px; }
.hero-text .label { margin-bottom:28px; }

.hero h1 {
  font:500 clamp(48px,6vw,90px)/.92 var(--serif);
  letter-spacing:-.04em; color:var(--ink);
  margin-bottom:0;
}
.hero h1 em { font-style:italic; font-weight:400; color:var(--accent); }

.hero-sub {
  color:var(--muted); font:300 clamp(15px,1.5vw,17px)/1.75 var(--sans);
  margin:26px 0 36px; max-width:480px;
}

.hero-stats { display:flex; gap:0; margin-bottom:40px; }
.stat { display:grid; gap:4px; padding:0 32px; border-left:1px solid var(--line2); }
.stat:first-child { padding-left:0; border-left:0; }
.stat strong { font:500 38px/1 var(--serif); color:var(--ink); }
.stat span   { font:600 10px var(--sans); color:var(--subtle); text-transform:uppercase; letter-spacing:.16em; }

.cta-btn {
  border:0; border-radius:var(--r-sm);
  background:var(--accent); color:#fff;
  padding:16px 32px; font:600 14px/1 var(--sans);
  display:inline-flex; align-items:center; gap:12px;
  box-shadow:0 8px 28px var(--accent-glow);
  transition:all .25s var(--spring); position:relative; overflow:hidden;
}
.cta-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .5s ease;
}
.cta-btn:hover::before { transform:translateX(120%); }
.cta-btn:hover { transform:translateY(-3px); box-shadow:0 16px 40px var(--accent-glow); }
.cta-btn:active { transform:translateY(-1px); }
.cta-btn svg { transition:transform .2s; }
.cta-btn:hover svg { transform:translateX(5px); }

/* Hero Visual — floating photo cards */
.hero-visual {
  position:relative; aspect-ratio:4/5; max-height:min(600px,70vh);
  border-radius:var(--r-xl); overflow:visible;
  background:linear-gradient(155deg, var(--blush) 0%, var(--bg2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
}
.hv-ring {
  position:absolute; inset:12%; border-radius:50%;
  border:1px solid rgba(208,56,79,.12);
  animation:ringPulse 4s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.05);opacity:.15} }

.hv-card {
  position:absolute; overflow:hidden;
  border:7px solid #fff; border-radius:var(--r-sm);
  box-shadow:var(--sh-lg); background:var(--bg2);
  transition:transform .5s var(--spring);
}
.hv-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hv-a { width:48%; aspect-ratio:3/4; left:6%;  top:12%; transform:rotate(-7deg);  animation:floatA 6s ease-in-out infinite; }
.hv-b { width:44%; aspect-ratio:3/4; right:5%; top:8%;  transform:rotate(5.5deg); animation:floatB 7s ease-in-out infinite; }
.hv-c { width:42%; aspect-ratio:1;   left:29%; bottom:5%; transform:rotate(2deg); animation:floatC 8s ease-in-out infinite; }
@keyframes floatA{0%,100%{transform:rotate(-7deg)  translateY(0)}50%{transform:rotate(-9deg)  translateY(-10px)}}
@keyframes floatB{0%,100%{transform:rotate(5.5deg) translateY(0)}50%{transform:rotate(7deg)   translateY(-12px)}}
@keyframes floatC{0%,100%{transform:rotate(2deg)   translateY(0)}50%{transform:rotate(.5deg)  translateY(8px)}}

.hero-visual:hover .hv-a { animation-play-state:paused; transform:rotate(-8deg) translateY(-6px); }
.hero-visual:hover .hv-b { animation-play-state:paused; transform:rotate(6deg)  translateY(-7px); }
.hero-visual:hover .hv-c { animation-play-state:paused; transform:rotate(2.5deg) translateY(-4px); }

.hv-badge-note {
  position:absolute; z-index:5; left:-44px; top:36px;
  width:100px; height:100px;
  display:grid; place-content:center; text-align:center;
  transform:rotate(-12deg); border-radius:50%;
  background:var(--amber); color:#fff;
  box-shadow:0 8px 24px rgba(212,132,58,.3); line-height:1.2; gap:2px;
}
.hv-badge-note span   { font:italic 11px var(--serif); }
.hv-badge-note strong { font:700 18px/1 var(--serif); }
.hv-badge-count {
  position:absolute; z-index:5; right:-22px; bottom:64px;
  width:84px; height:84px; border-radius:50%;
  display:grid; place-content:center; text-align:center;
  color:#fff; background:var(--accent); border:3px solid #fff;
  font:500 26px/1 var(--serif); transform:rotate(8deg);
  box-shadow:0 8px 24px var(--accent-glow);
}
.hv-badge-count small { display:block; font:700 8px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:.85; }

/* ── Catalog Section ─────────────────────────────────────── */
.catalog {
  padding:clamp(32px,4vw,64px) clamp(16px,4vw,48px) clamp(56px,6vw,100px);
  background:var(--bg);
}

/* Category toolbar — sticky */
.cat-toolbar {
  display:flex; align-items:center; gap:16px;
  margin-bottom:28px;
  position:sticky; top:76px; z-index:20;
  padding:14px 0;
  background:linear-gradient(var(--bg) 80%, transparent);
}
.cat-toolbar .cat-pills-wrap { flex:1; min-width:0; }
.cat-pills-wrap { overflow:hidden; position:relative; }
.cat-pills-wrap::after {
  content:''; position:absolute; top:0; right:0; bottom:10px; width:48px;
  background:linear-gradient(to left,var(--bg),transparent);
  pointer-events:none; z-index:1;
}
.cat-pills { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 4px 10px; scroll-snap-type:x proximity; }
.cat-pills::-webkit-scrollbar { display:none; }

.pill {
  flex:0 0 auto; scroll-snap-align:start;
  border:1.5px solid var(--line2); background:var(--surface);
  color:var(--muted); padding:9px 20px; border-radius:var(--r-full);
  font:600 12px/1 var(--sans); white-space:nowrap;
  box-shadow:var(--sh-xs); transition:all .2s var(--smooth);
}
.pill:hover { color:var(--ink); border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--sh-sm); }
.pill[aria-selected="true"] {
  background:var(--accent); border-color:var(--accent);
  color:#fff; box-shadow:0 4px 14px var(--accent-glow);
}
.pill.entering { animation:pillPop .3s var(--spring) both; }
@keyframes pillPop { from{opacity:0;transform:translateY(6px) scale(.95)} to{opacity:1;transform:none} }
.cat-info { flex-shrink:0; align-self:center; color:var(--subtle); font:500 12px var(--sans); white-space:nowrap; }

/* ── Product Grid ────────────────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); }

/* ── Product Card ────────────────────────────────────────── */
.card {
  border-radius:var(--r-md); overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  cursor:pointer; display:flex; flex-direction:column; position:relative;
  transition:transform .4s var(--spring), box-shadow .4s var(--ease), border-color .25s;
  animation:cardUp .35s var(--smooth) both;
}
@keyframes cardUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.card:hover {
  transform:translateY(-8px);
  box-shadow:var(--sh-lg);
  border-color:transparent;
}
.card:active { transform:translateY(-3px); transition-duration:.1s; }

/* Accent bottom border on hover */
.card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--amber));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
  border-radius:0 0 var(--r-md) var(--r-md);
}
.card:hover::after { transform:scaleX(1); }

/* Card thumbnail */
.card-thumb {
  position:relative; aspect-ratio:4/3; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg, var(--blush), var(--bg2));
}
.card-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-thumb img { transform:scale(1.1); }

.card-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(24,12,8,.32) 0%, transparent 55%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.card:hover .card-thumb::after { opacity:1; }

/* Hover CTA */
.card-peek {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; color:var(--ink);
  border-radius:var(--r-full); padding:7px 16px;
  font:700 11px/1 var(--sans); white-space:nowrap; pointer-events:none;
  opacity:0; transition:all .25s var(--spring); z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.card:hover .card-peek { opacity:1; transform:translateX(-50%) translateY(0); }

/* Category tag */
.card-cat {
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.9); color:var(--accent);
  border-radius:var(--r-xs); padding:5px 10px;
  font:700 9px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(8px); border:1px solid rgba(208,56,79,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.card-noimg {
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(24,12,8,.38); color:rgba(255,255,255,.8);
  border-radius:var(--r-xs); padding:4px 9px;
  font:600 8px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}

/* Card placeholder */
.card-ph {
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--blush) 0%, var(--bg2) 100%);
}
.card-ph-icon { font:400 40px/1 var(--serif); opacity:.45; }
.card-ph-text { font:700 8px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:rgba(90,60,38,.45); margin-top:8px; }

/* Card info */
.card-info { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-name {
  font:500 clamp(13px,1.25vw,15px)/1.3 var(--serif); color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-foot {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
}
.card-price { font:700 clamp(13px,1.2vw,15px)/1 var(--sans); color:var(--accent); }
.card-price.muted { font-size:11px; color:var(--muted); font-style:italic; font-weight:400; }
.card-arrow {
  width:28px; height:28px; border-radius:var(--r-xs);
  border:1.5px solid var(--line2); background:transparent;
  display:grid; place-items:center; color:var(--subtle);
  transition:all .2s var(--spring); flex-shrink:0; pointer-events:none;
}
.card:hover .card-arrow { background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.1); }

/* ── States ──────────────────────────────────────────────── */
.loading-state,.empty-state,.error-state {
  grid-column:1/-1; padding:80px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-icon  { font-size:52px; opacity:.4; line-height:1; }
.empty-title { font:500 20px/1 var(--serif); color:var(--ink); opacity:.6; }
.empty-sub   { color:var(--muted); font-size:14px; }
.loader {
  width:36px; height:36px; border:3px solid var(--line2);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Modal ───────────────────────────────────────────────── */
.modal-bg {
  position:fixed; inset:0; z-index:60;
  background:rgba(24,12,8,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:grid; place-items:center; padding:clamp(12px,3vw,28px);
  animation:fadeIn .2s ease both;
}
.modal-bg[hidden] { display:none !important; }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }

.modal-x {
  position:fixed; top:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); z-index:70;
  width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.15);
  color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:all .2s;
}
.modal-x:hover { background:rgba(255,255,255,.28); transform:scale(1.08); }

.modal {
  width:100%; max-width:940px; max-height:min(90vh,680px);
  background:var(--surface); border-radius:var(--r-lg);
  overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr;
  box-shadow:var(--sh-xl); animation:modalPop .3s var(--spring) both;
}
@keyframes modalPop { from{opacity:0;transform:scale(.93) translateY(16px)} to{opacity:1;transform:none} }
@keyframes modalOut  { from{opacity:1;transform:none} to{opacity:0;transform:scale(.96) translateY(10px)} }

.modal-img { position:relative; overflow:hidden; background:var(--bg2); min-height:460px; }
.modal-img-frame { position:absolute; inset:0; }
.modal-img-frame img,.modal-img-frame video {
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.modal-img-frame::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,   rgba(24,12,8,.4), transparent 50%),
    linear-gradient(to bottom, rgba(24,12,8,.06), transparent 25%);
}
.modal-img > .badge { position:absolute; top:18px; z-index:2; }
.modal-img > .badge.accent { left:18px; }
.modal-img > .badge.ghost  { right:18px; }

.modal-nav { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.mnav {
  width:42px; height:42px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.18);
  color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:all .2s var(--spring);
}
.mnav:hover { background:rgba(255,255,255,.35); transform:scale(1.08); }

.modal-ph {
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--blush) 0%, var(--bg2) 100%);
  color:rgba(90,60,38,.65); overflow:hidden;
}
.modal-ph::before {
  content:''; position:absolute; width:50%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(208,56,79,.12);
  animation:pulse2 2.5s ease-in-out infinite;
}
@keyframes pulse2 { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.4} }
.modal-ph-icon { font:400 56px/1 var(--serif); opacity:.5; z-index:1; }
.modal-ph-text { font:700 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; opacity:.45; z-index:1; margin-top:12px; }

.modal-body {
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,3.5vw,48px); overflow-y:auto; gap:24px; position:relative;
  background:var(--surface);
}
.modal-body::before {
  content:''; position:absolute; top:0;
  left:clamp(28px,3.5vw,48px); right:clamp(28px,3.5vw,48px);
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--amber), transparent);
  border-radius:0 0 3px 3px;
}

.modal-info { display:flex; flex-direction:column; gap:12px; }
.modal-cat  { color:var(--accent); font:700 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; }
.modal h2   { font:500 clamp(26px,2.8vw,42px)/1.05 var(--serif); letter-spacing:-.025em; color:var(--ink); }
.modal-desc { color:var(--muted); font:300 clamp(13px,1.1vw,15px)/1.75 var(--sans); }
.modal-desc:empty::before { content:"Dibuat segar dengan bahan pilihan untuk menemani momen spesial Anda."; opacity:.55; font-style:italic; }

.modal-bottom { display:flex; flex-direction:column; gap:12px; }
.modal-price-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; padding-top:18px; border-top:1px solid var(--line);
}
.modal-price-label { color:var(--muted); font:600 10px/1 var(--sans); text-transform:uppercase; letter-spacing:.14em; }
.modal-price { font:600 clamp(22px,2.4vw,34px)/1 var(--serif); color:var(--accent); letter-spacing:-.02em; margin-top:6px; }

.copy-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff;
  border-radius:var(--r-sm); padding:11px 18px;
  font:600 12px/1 var(--sans); white-space:nowrap;
  transition:all .2s var(--smooth); flex-shrink:0;
}
.copy-btn:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow); }
.copy-btn:active { transform:translateY(0); }

.modal-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.wa-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#25D366; border:1.5px solid #25D366; color:#fff;
  border-radius:var(--r-sm); padding:11px 18px;
  font:600 12px/1 var(--sans); white-space:nowrap; text-decoration:none;
  transition:all .2s var(--smooth); flex-shrink:0;
}
.wa-btn:hover { background:#1EBE5B; border-color:#1EBE5B; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,211,102,.32); }
.wa-btn:active { transform:translateY(0); }

.modal-keys { color:var(--subtle); font:400 11px var(--sans); opacity:.65; }
kbd {
  display:inline-block; padding:2px 6px; border-radius:4px;
  border:1px solid var(--line2); background:var(--bg2);
  font:600 10px var(--sans); letter-spacing:.02em; margin:0 1px;
}

/* ── Drawer ──────────────────────────────────────────────── */
.overlay {
  position:fixed; inset:0;
  background:rgba(24,12,8,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:49;
}
.drawer {
  position:fixed; z-index:50; top:0; right:0; bottom:0;
  width:min(460px,94vw); padding:28px 24px;
  padding-bottom:calc(28px + var(--safe-b));
  background:var(--surface);
  box-shadow:-24px 0 64px rgba(24,12,8,.12);
  transform:translateX(105%); transition:transform .35s var(--smooth);
  display:flex; flex-direction:column; overflow:hidden;
  border-left:1px solid var(--line);
}
.drawer.open { transform:translateX(0); }
.drawer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:4px; }
.drawer-top h2 { font:500 28px/1.1 var(--serif); color:var(--ink); }

.drawer-list { display:grid; gap:6px; margin-top:20px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.d-item {
  border:1.5px solid var(--line); background:transparent; border-radius:var(--r-sm);
  display:flex; justify-content:space-between; align-items:center;
  text-align:left; padding:14px 18px; color:var(--ink);
  transition:all .2s var(--smooth); position:relative; overflow:hidden;
}
.d-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom;
  transition:transform .2s var(--spring);
}
.d-item:hover { background:var(--blush); border-color:rgba(208,56,79,.2); }
.d-item:hover::before { transform:scaleY(1); }
.d-item strong { font:600 14px var(--sans); }
.d-item span   { color:var(--muted); font:500 11px var(--sans); }
.d-item.on { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 16px var(--accent-glow); }
.d-item.on::before { display:none; }
.d-item.on span { color:rgba(255,255,255,.65); }

.drawer-foot { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:5px; }
.drawer-foot span { font:700 13px var(--sans); color:var(--ink); }
.drawer-foot small { color:var(--muted); line-height:1.55; font-size:12px; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position:fixed; left:50%; bottom:28px; z-index:90;
  transform:translate(-50%,20px);
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:var(--r-sm);
  color:#fff; background:var(--ink);
  font:600 13px var(--sans); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .3s var(--spring);
  box-shadow:var(--sh-md); white-space:nowrap;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ── Back to Top ─────────────────────────────────────────── */
.btn-top {
  position:fixed; bottom:32px; left:32px; z-index:40;
  width:48px; height:48px; border-radius:var(--r-sm);
  border:1.5px solid var(--line2); background:var(--surface);
  color:var(--ink); box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .3s var(--spring);
  font-size:18px; font-weight:700;
}
.btn-top:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.btn-top:active { transform:translateY(0); }

/* ── WhatsApp float ──────────────────────────────────────── */
.wa-float {
  position:fixed; right:28px; bottom:28px; z-index:45;
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; min-width:54px; padding:0 15px; border-radius:var(--r-full);
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  font:600 13px var(--sans); white-space:nowrap; overflow:hidden;
  transition:all .28s var(--spring);
}
.wa-float-label {
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .3s var(--smooth), opacity .2s, margin-left .3s var(--smooth);
}
.wa-float:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(37,211,102,.55); }
.wa-float:hover .wa-float-label { max-width:180px; opacity:1; margin-left:9px; }
.wa-float:active { transform:translateY(0); }

/* ── Responsive ≤1400px ──────────────────────────────────── */
@media(max-width:1400px){ .grid{grid-template-columns:repeat(3,1fr)} }

/* ── ≤960px ──────────────────────────────────────────────── */
@media(max-width:960px){
  .topbar{height:68px}
  .search-label{display:none}
  .search-bar{top:68px}
  .cat-toolbar{top:68px}

  .hero-content{grid-template-columns:1fr;gap:48px;justify-items:center}
  .hero-visual{width:min(480px,88%);order:0}
  .hero-text{order:1;text-align:center;max-width:600px}
  .hero h1{font-size:clamp(44px,11vw,72px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-stats{justify-content:center}
  .hv-badge-note{width:80px;height:80px;left:-20px;top:24px}
  .hv-badge-note strong{font-size:16px}
  .hv-badge-count{width:72px;height:72px;right:-14px;bottom:52px;font-size:22px}

  .grid{grid-template-columns:repeat(2,1fr)}
  .modal{grid-template-columns:1fr;max-height:min(92vh,640px);max-width:520px}
  .modal-img{min-height:260px;max-height:38vh}
  .modal-nav{bottom:14px}
}

/* ── ≤700px ──────────────────────────────────────────────── */
@media(max-width:700px){
  .cat-toolbar{flex-direction:column;gap:6px}
  .cat-info{align-self:flex-start;padding-top:0}
}

/* ── ≤600px ──────────────────────────────────────────────── */
@media(max-width:600px){
  .topbar{padding:0 16px;height:62px}
  .brand-icon{width:40px;height:40px;font-size:13px}
  .brand-text strong{font-size:16px}
  .icon-btn{width:40px;height:40px}
  .search-toggle{padding:8px 13px;font-size:12px}
  .search-bar{top:62px;padding:0 14px 10px}
  .cat-toolbar{top:62px}

  .hero{padding:48px 16px 56px}
  .hero-visual{min-height:260px;border-radius:var(--r-xl)}
  .hero h1{font-size:clamp(40px,12vw,60px)}
  .hero-sub{font-size:14px;margin:20px auto 28px}
  .stat{padding:0 20px}
  .stat strong{font-size:28px}
  .cta-btn{font-size:13px;padding:14px 24px}
  .hv-badge-note{left:-10px;width:68px;height:68px}
  .hv-badge-note span{font-size:9px}
  .hv-badge-note strong{font-size:14px}
  .hv-badge-count{right:-6px;width:60px;height:60px;font-size:18px}

  .catalog{padding:24px 10px 48px}
  .pill{padding:8px 14px;font-size:11.5px}
  .grid{gap:10px}
  .card-info{padding:12px 13px 14px;gap:6px}
  .card-name{font-size:13px}
  .card-price{font-size:12px}
  .card-foot{padding-top:9px}
  .card-arrow{width:24px;height:24px}

  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:94vh;max-width:100%;width:100%;animation:sheetUp .3s var(--spring) both}
  @keyframes sheetUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  .modal-img{min-height:200px;max-height:34vh}
  .modal-body{padding:22px 20px calc(22px + var(--safe-b))}
  .modal-body::before{left:20px;right:20px}
  .modal h2{font-size:clamp(22px,6.5vw,32px)}
  .modal-price-row{flex-wrap:wrap}
  .modal-actions{width:100%}
  .copy-btn,.wa-btn{flex:1;justify-content:center}
  .modal-keys{display:none}
  .modal-x{top:10px;right:10px;width:40px;height:40px}
  .btn-top{bottom:20px;left:16px;width:44px;height:44px}
  .wa-float{right:16px;bottom:20px;height:48px;min-width:48px;padding:0 13px}
  .wa-float:hover .wa-float-label{max-width:150px}
}

/* ── ≤400px ──────────────────────────────────────────────── */
@media(max-width:400px){
  .grid{grid-template-columns:1fr}
  .stat{padding:0 14px}
  .stat strong{font-size:24px}
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}