/* ============================================================
   PB BAKE HOUSE — LUXURY PATISSERIE DESIGN SYSTEM
   ------------------------------------------------------------
   UI layer only. Every legacy token (--blue, --red, --ink…) is
   re-mapped onto the luxury palette so existing markup and
   inline styles inherit the new look without any logic change.
   Signature motif: the OVEN ARCH + gold hairline seal.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand palette */
  --bg:#FFF8F2;
  --cream:#FFF5E6;
  --surface:#FFFFFF;
  --surface-2:#FFFCF7;
  --primary:#8B4513;
  --primary-deep:#6B3410;
  --primary-soft:#F5E7DA;
  --chocolate:#4E342E;
  --coffee:#6D4C41;
  --gold:#D4AF37;
  --gold-soft:#E9CE7C;
  --gold-deep:#A8862A;
  --gold-wash:#FBF3DE;
  --dark:#2D1B12;
  --wine:#9E2A2B;
  --wine-deep:#7C1F20;
  --wine-soft:#FBEDEC;
  --forest:#1F7A5C;
  --forest-soft:#E6F4EE;
  --amber:#B8860B;

  /* Text */
  --ink:#2D1B12;
  --ink-soft:#6D4C41;
  --ink-faint:#9C8578;

  /* Lines & fills */
  --line:#EADFD3;
  --line-strong:#DDCBB8;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);
  --glass-line:rgba(212,175,55,.28);

  /* Legacy aliases — keep existing markup on-brand */
  --blue:#8B4513;
  --blue-dark:#6B3410;
  --blue-light:#FFF5E6;
  --blue-mid:#E8D5B7;
  --red:#9E2A2B;
  --red-dark:#7C1F20;
  --red-light:#FBEDEC;
  --white:#FFFFFF;
  --ok:#1F7A5C;
  --warn:#B8860B;

  /* Radius */
  --r-sm:12px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;

  /* Elevation — warm, never grey */
  --shadow-xs:0 1px 2px rgba(45,27,18,.05);
  --shadow:0 4px 18px rgba(78,52,46,.07);
  --shadow-md:0 10px 30px rgba(78,52,46,.10);
  --shadow-lg:0 22px 56px rgba(78,52,46,.16);
  --shadow-gold:0 12px 34px rgba(212,175,55,.28);

  /* Type */
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-base:15.5px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:94px;
}

/* ---------- 2. DARK MODE ---------- */
[data-theme="dark"]{
  --bg:#170E08;
  --cream:#241609;
  --surface:#1F1209;
  --surface-2:#26170C;
  --primary:#D9A05B;
  --primary-deep:#C08A47;
  --primary-soft:#33200F;
  --chocolate:#3A2515;
  --gold:#E5C263;
  --gold-soft:#F0D890;
  --gold-deep:#C9A445;
  --gold-wash:#2C1D0C;
  --wine-soft:#38181A;
  --forest-soft:#122C22;

  --ink:#F6EADC;
  --ink-soft:#D6C0AB;
  --ink-faint:#A0866D;

  --line:#3A2716;
  --line-strong:#4C3520;
  --glass:rgba(35,21,11,.72);
  --glass-strong:rgba(31,18,9,.88);
  --glass-line:rgba(212,175,55,.22);

  --blue:#D9A05B;
  --blue-dark:#C08A47;
  --blue-light:#2C1D0C;
  --blue-mid:#4C3520;
  --red:#E07A6B;
  --red-dark:#C4604F;
  --red-light:#38181A;
  --white:#1F1209;
  --ok:#4FBF95;
  --warn:#E0B455;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 18px rgba(0,0,0,.42);
  --shadow-md:0 10px 30px rgba(0,0,0,.5);
  --shadow-lg:0 22px 56px rgba(0,0,0,.6);
}

/* ---------- 3. RESET & BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  padding-top:var(--nav-h);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
/* Warm ambient light — the "bakery window" glow */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(212,175,55,.16),transparent 62%),
    radial-gradient(760px 480px at 96% 4%,rgba(139,69,19,.10),transparent 60%),
    radial-gradient(700px 700px at 50% 108%,rgba(255,245,230,.9),transparent 64%);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(212,175,55,.10),transparent 62%),
    radial-gradient(760px 480px at 96% 4%,rgba(139,69,19,.16),transparent 60%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;letter-spacing:-.028em;line-height:1.14}
::selection{background:var(--gold);color:var(--dark)}

.container{width:min(1240px,92%);margin-inline:auto}
.hide{display:none!important}
.center{text-align:center}

/* Custom scrollbar */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--cream)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--primary));
  border-radius:20px;border:3px solid var(--cream);
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold-deep),var(--primary-deep))}
html{scrollbar-color:var(--gold) var(--cream);scrollbar-width:thin}

/* Keyboard focus — visible, gold, never removed */
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- 4. PAGE LOADER ---------- */
.pb-loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(160deg,#2D1B12,#4E342E 55%,#2D1B12);
  transition:opacity .7s var(--ease),visibility .7s;
}
.pb-loader.done{opacity:0;visibility:hidden}
.pbl-inner{display:grid;place-items:center;gap:22px}
.pbl-ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;position:relative}
.pbl-ring::before,.pbl-ring::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.pbl-ring::before{border-top-color:var(--gold);border-right-color:var(--gold);animation:pblSpin 1.05s linear infinite}
.pbl-ring::after{inset:12px;border-bottom-color:rgba(212,175,55,.45);animation:pblSpin 1.6s linear reverse infinite}
@keyframes pblSpin{to{transform:rotate(360deg)}}
.pbl-mark{font-family:var(--font-display);font-size:30px;color:var(--gold);letter-spacing:.04em}
.pbl-word{
  font-family:var(--font-display);font-size:18px;letter-spacing:.42em;
  color:#F6EADC;text-transform:uppercase;text-indent:.42em;
}
.pbl-bar{width:190px;height:2px;background:rgba(246,234,220,.16);border-radius:2px;overflow:hidden}
.pbl-bar i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:pblSlide 1.15s var(--ease) infinite;
}
@keyframes pblSlide{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border:none;border-radius:100px;
  font-family:var(--font-body);font-weight:600;font-size:14.5px;letter-spacing:.015em;
  cursor:pointer;min-height:50px;white-space:nowrap;
  transition:transform .35s var(--spring),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.btn-primary{
  background:linear-gradient(135deg,var(--primary) 0%,var(--chocolate) 100%);
  color:#FFF8F2;box-shadow:0 6px 20px rgba(139,69,19,.26);
}
.btn-primary:hover{box-shadow:0 14px 34px rgba(139,69,19,.36)}

.btn-red{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:var(--dark);box-shadow:0 6px 20px rgba(212,175,55,.34);font-weight:700;
}
.btn-red:hover{box-shadow:0 14px 36px rgba(212,175,55,.46)}

.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--line-strong)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-deep);box-shadow:0 10px 26px rgba(212,175,55,.20)}

.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{color:var(--primary);background:var(--cream)}
.btn-block{width:100%}
.btn-sm{padding:10px 20px;font-size:13.5px;min-height:42px}

/* Ripple (injected by ui.js) */
.ripple{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.42);animation:rip .6s var(--ease) forwards;
}
.btn-outline .ripple,.btn-red .ripple{background:rgba(139,69,19,.22)}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

/* ---------- 6. NAVIGATION ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:900;
  display:flex;align-items:center;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:height .35s var(--ease),background .35s,box-shadow .35s;
}
.nav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--glass-line) 18%,var(--gold) 50%,var(--glass-line) 82%,transparent);
}
.nav.scrolled{height:82px;background:var(--glass-strong);box-shadow:0 10px 34px rgba(78,52,46,.10)}
.nav-inner{width:min(1240px,94%);margin-inline:auto;display:flex;align-items:center;gap:22px}

/* THE LOGO IS DELIBERATELY STATIC.
   No transition, no transform, no hover state, no scroll shrink — the mark is
   the one fixed point on the page while everything around it moves. */
.logo{display:flex;align-items:center;gap:15px;flex-shrink:0}
.logo-mark{
  width:64px;height:64px;border-radius:19px;overflow:hidden;
  display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(140deg,var(--primary),var(--chocolate));
  color:var(--gold);font-family:var(--font-display);font-weight:800;font-size:24px;
  box-shadow:0 6px 18px rgba(78,52,46,.22),inset 0 0 0 1.5px rgba(212,175,55,.5);
  transition:none;
}
.logo:hover .logo-mark{transform:none;box-shadow:0 6px 18px rgba(78,52,46,.22),inset 0 0 0 1.5px rgba(212,175,55,.5)}
.logo-mark img{width:100%;height:100%;object-fit:cover;transition:none}
.logo:hover .logo-mark img{transform:none}
/* Real uploaded logo: shown at full size on a transparent field, no ring,
   no crop — the artwork is already a finished circular mark. */
.logo-mark.has-logo{
  width:70px;height:70px;background:transparent;padding:0;
  border-radius:0;box-shadow:none;overflow:visible;
}
.logo-mark.has-logo img{width:100%;height:100%;object-fit:contain}
.logo-text{
  font-family:var(--font-display);font-size:25px;font-weight:800;
  letter-spacing:-.03em;line-height:1.06;color:var(--ink);transition:none;
}
.logo-text small{
  display:block;font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.3em;color:var(--gold-deep);margin-top:4px;
}
.nav.scrolled .logo-mark,.nav.scrolled .logo-text{transform:none}

.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links a{
  position:relative;padding:9px 15px;border-radius:100px;
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.nav-links a::before{
  content:'';position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--primary));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--primary)}
.nav-links a:hover::before,.nav-links a.active::before{transform:scaleX(1)}
.nav-links a.active{color:var(--primary);font-weight:600}

.nav-actions{display:flex;align-items:center;gap:9px}
/* Explicit order guarantee: Sign in / account first, cart in the middle,
   hamburger last — independent of markup order, so this can never drift. */
.nav-actions>.acct-wrap,.nav-actions>a.btn-primary{order:1}
.nav-actions>.icon-btn:not(.hamburger){order:2}
.nav-actions>.hamburger{order:3}
.icon-btn{
  position:relative;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);
  cursor:pointer;display:grid;place-items:center;font-size:18px;color:var(--ink-soft);
  transition:transform .35s var(--spring),border-color .3s,background .3s,box-shadow .3s,color .3s;
}
.icon-btn:hover{
  transform:translateY(-2px);border-color:var(--gold);color:var(--primary);
  background:var(--cream);box-shadow:0 8px 20px rgba(212,175,55,.24);
}
.icon-btn svg{width:20px;height:20px}
.badge{
  position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 6px;
  border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--dark);font-size:11px;font-weight:700;
  box-shadow:0 3px 10px rgba(212,175,55,.5);border:2px solid var(--bg);
  animation:badgePop .45s var(--spring);
}
@keyframes badgePop{from{transform:scale(0)}}
.hamburger{display:none}

/* Account dropdown (nav user icon) */
.acct-wrap{position:relative}
.acct-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:920;min-width:220px;
  display:flex;flex-direction:column;padding:10px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.acct-menu.show{opacity:1;visibility:visible;transform:none}
.acct-menu-head{padding:8px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct-menu-head b{display:block;font-family:var(--font-display);font-size:14.5px;color:var(--ink)}
.acct-menu-head span{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px}
.acct-menu a,.acct-menu button{
  display:block;width:100%;text-align:left;padding:10px;border-radius:10px;border:none;background:none;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s;
}
.acct-menu a:hover,.acct-menu button:hover{background:var(--cream);color:var(--primary)}
.acct-menu button{color:var(--wine)}
.acct-menu button:hover{background:var(--wine-soft);color:var(--wine)}

/* Theme switcher */
.theme-toggle{
  position:relative;width:52px;height:28px;border-radius:100px;flex-shrink:0;
  border:1px solid var(--line-strong);background:var(--cream);cursor:pointer;
  transition:background .35s,border-color .35s;
}
.theme-toggle i{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-style:normal;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  transition:transform .45s var(--spring);
}
[data-theme="dark"] .theme-toggle i{transform:translateX(24px)}

/* ---------- 7. TRUST BAR ---------- */
.trust-bar{
  position:relative;z-index:5;overflow:hidden;
  background:linear-gradient(90deg,var(--chocolate),var(--dark) 50%,var(--chocolate));
  color:#EFE1D2;font-size:13px;font-weight:400;letter-spacing:.04em;
}
.trust-bar-inner{display:flex;gap:0;justify-content:center;flex-wrap:wrap;padding:11px 0}
.trust-bar-inner span{
  display:inline-flex;align-items:center;gap:8px;padding:3px 26px;position:relative;
  transition:color .3s var(--ease),transform .35s var(--spring);
}
.trust-bar-inner span+span::before{
  content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:5px;height:5px;background:var(--gold);opacity:.65;
}
.trust-bar-inner span:hover{color:var(--gold);transform:translateY(-1px)}
.trust-bar b{color:var(--gold);font-weight:600}

/* ---------- 8. HERO ---------- */
.hero-copy{position:relative;z-index:2;max-width:680px}
.hero{
  position:relative;overflow:hidden;
  min-height:clamp(460px,70vh,720px);display:flex;align-items:center;
  padding:clamp(20px,3.4vh,40px) 0 clamp(24px,4vh,44px);
  background:
    radial-gradient(1100px 520px at 78% 12%,rgba(212,175,55,.14),transparent 60%),
    linear-gradient(168deg,var(--cream) 0%,var(--bg) 46%,#F7E9DA 100%);
}
[data-theme="dark"] .hero{
  background:
    radial-gradient(1100px 520px at 78% 12%,rgba(212,175,55,.10),transparent 60%),
    linear-gradient(168deg,#241609 0%,#170E08 60%,#2A1A0C 100%);
}
.hero-motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.mote{position:absolute;border-radius:50%;background:var(--gold);opacity:.22;animation:moteDrift linear infinite}
@keyframes moteDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  12%{opacity:.28}
  88%{opacity:.2}
  100%{transform:translate3d(28px,-190px,0) scale(.4);opacity:0}
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  padding:8px 18px 8px 10px;border-radius:100px;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:12.5px;font-weight:500;letter-spacing:.05em;color:var(--ink-soft);
  box-shadow:var(--shadow-xs);animation:heroRise .8s var(--ease) both;
}
.hero-badge::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--forest);
  box-shadow:0 0 0 4px rgba(31,122,92,.16);animation:livePulse 2s infinite;
}
@keyframes livePulse{50%{box-shadow:0 0 0 8px rgba(31,122,92,0)}}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(38px,5.4vw,68px);
  font-weight:800;line-height:1.02;letter-spacing:-.045em;color:var(--ink);
}
.hero h1 .hl{
  display:inline-block;position:relative;font-weight:800;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 45%,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .w{
  display:inline-block;opacity:0;transform:translateY(26px) rotate(2deg);
  animation:wordUp .85s var(--ease) forwards;
}
/* The word-splitter (ui.js initHeroWords) wraps every word — including the
   ones inside .hl — in its own <span class="w">. Because "background" and
   "background-clip" are not inherited CSS properties, those nested spans
   lost the gold gradient the moment they got split, leaving the line fully
   transparent (invisible) instead of gold. Re-apply the same gradient clip
   directly to the split words so the line is visible again. */
.hero h1 .hl .w{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 45%,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes wordUp{to{opacity:1;transform:none}}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}}

.hero p{
  margin:14px 0 22px;max-width:490px;
  font-size:clamp(14.5px,1.4vw,16px);color:var(--ink-soft);line-height:1.65;
  animation:heroRise .8s .35s var(--ease) both;
}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap;animation:heroRise .8s .5s var(--ease) both}
.hero .btn-outline{background:var(--glass-strong);backdrop-filter:blur(8px)}

.trust-row{display:flex;gap:0;margin-top:22px;flex-wrap:wrap;animation:heroRise .8s .65s var(--ease) both}
.trust-row div{
  padding:0 28px;font-size:12px;color:var(--ink-faint);
  letter-spacing:.08em;text-transform:uppercase;position:relative;
}
.trust-row div:first-child{padding-left:0}
.trust-row div+div::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line-strong)}
.trust-row strong{
  display:block;font-family:var(--font-display);font-size:27px;font-weight:800;
  color:var(--ink);letter-spacing:-.01em;text-transform:none;margin-bottom:2px;
}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;gap:9px;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);
  animation:heroRise 1s .9s var(--ease) both;
}
.scroll-cue i{display:block;width:1px;height:44px;position:relative;overflow:hidden;background:var(--line-strong)}
.scroll-cue i::after{
  content:'';position:absolute;top:-44px;left:0;width:1px;height:44px;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:cueRun 1.9s var(--ease) infinite;
}
@keyframes cueRun{to{top:44px}}

/* ---------- 9. HERO BANNER — THE ARCH (signature) ---------- */
.hero-banner{
  position:relative;width:100%;aspect-ratio:4/4.1;max-width:395px;max-height:min(435px,62vh);
  /* Sits a little higher and a little left of dead-centre in its column,
     instead of being vertically centred against the taller text column. */
  align-self:flex-start;margin-top:-4px;margin-left:auto;margin-right:70px;
  border-radius:230px 230px var(--r-lg) var(--r-lg);
  overflow:hidden;background:linear-gradient(150deg,var(--cream),var(--primary-soft));
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(212,175,55,.35);
  animation:archIn 1.1s .25s var(--ease) both;
}
@keyframes archIn{from{opacity:0;transform:translateY(38px) scale(.94)}}
.hero-banner::after{
  content:'';position:absolute;inset:11px;z-index:4;pointer-events:none;
  border:1px solid rgba(212,175,55,.6);border-radius:220px 220px 16px 16px;
}
.banner-track{display:flex;height:100%;transition:transform .85s var(--ease);will-change:transform}
.banner-slide{position:relative;min-width:100%;height:100%;background:linear-gradient(150deg,var(--cream),var(--primary-soft))}
.banner-slide img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;transition:transform 7s linear}
.hero-banner.has-banners .banner-slide img{transform:scale(1.06)}
.banner-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 26px 30px;
  background:linear-gradient(to top,rgba(45,27,18,.93),rgba(45,27,18,.5) 58%,transparent);
  color:#FFF5E6;
}
.banner-caption h2{font-family:var(--font-display);font-size:clamp(18px,2vw,25px);font-weight:800;line-height:1.2}
.banner-caption p{font-size:13px;margin-top:6px;opacity:.9;line-height:1.55}
.banner-caption .btn{margin-top:14px;padding:9px 20px;font-size:13px;min-height:auto}
.banner-empty{
  position:absolute;inset:11px;z-index:2;display:grid;place-items:center;text-align:center;gap:2px;
  color:var(--primary);border:1px dashed rgba(212,175,55,.65);
  border-radius:220px 220px 16px 16px;background:rgba(255,248,242,.5);
}
[data-theme="dark"] .banner-empty{background:rgba(36,22,9,.5)}
.banner-nav{
  position:absolute;top:52%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(212,175,55,.5);
  background:var(--glass-strong);backdrop-filter:blur(10px);color:var(--ink);
  font-size:21px;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .35s,transform .35s var(--spring),background .3s;
}
.hero-banner.has-banners:hover .banner-nav{opacity:1}
.banner-nav:hover{transform:translateY(-50%) scale(1.14);background:var(--gold);color:var(--dark)}
.banner-nav.prev{left:16px}
.banner-nav.next{right:16px}
.banner-dots{position:absolute;bottom:16px;left:0;right:0;z-index:5;display:flex;gap:8px;justify-content:center}
.bdot{
  width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,248,242,.5);transition:all .45s var(--ease);
}
.bdot.on{background:var(--gold);width:26px;border-radius:4px}

/* ---------- 10. SECTIONS ---------- */
.section{padding:clamp(72px,9vw,124px) 0;position:relative}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:42px;flex-wrap:wrap}
.section-head h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(30px,3.9vw,52px);line-height:1.08;color:var(--ink);
}
.section-head h2 span{
  font-weight:800;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 50%,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head p{color:var(--ink-faint);font-size:14.5px;margin-top:9px;max-width:520px}
.section-head.center{justify-content:center;text-align:center}
.section-head.center p{margin-inline:auto}

/* Eyebrow with gold node — the section "seal" */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;
  font-family:var(--font-body);font-size:10.5px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);
}
.eyebrow::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{content:'';width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.section-head.center .eyebrow{justify-content:center}

/* Gold divider with diamond node */
.rule-gold{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 46px;max-width:220px}
.rule-gold::before,.rule-gold::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule-gold i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}

/* ---------- 11. CHIPS + CATEGORY CARDS ---------- */
.chips{display:flex;gap:11px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:12px 24px;border-radius:100px;white-space:nowrap;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
  transition:transform .35s var(--spring),border-color .3s,color .3s,box-shadow .3s,background .3s;
}
.chip:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--primary);box-shadow:0 8px 20px rgba(212,175,55,.2)}
.chip.active{
  background:linear-gradient(135deg,var(--primary),var(--chocolate));
  color:#FFF5E6;border-color:transparent;font-weight:600;
  box-shadow:0 8px 22px rgba(139,69,19,.3);
}

.cat-grid{
  display:flex;flex-wrap:nowrap;gap:20px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.cat-grid::-webkit-scrollbar{height:9px}
.cat-card{
  position:relative;display:block;overflow:hidden;aspect-ratio:3/4;
  flex:0 0 190px;width:190px;scroll-snap-align:start;
  border-radius:130px 130px var(--r) var(--r);
  background:linear-gradient(160deg,var(--cream),var(--primary-soft));
  border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.cat-card img{transition:opacity .5s var(--ease),transform 1s var(--ease)}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.cat-card::before{
  content:'';position:absolute;inset:0;z-index:2;transition:opacity .45s;
  background:linear-gradient(to top,rgba(45,27,18,.9) 0%,rgba(45,27,18,.28) 46%,transparent 72%);
}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cat-card:hover img{transform:scale(1.09)}
/* Plain fallback when a category has no artwork at all */
.cat-plain{background:linear-gradient(150deg,var(--cream),var(--primary-soft))}
.cat-plain .cat-meta{background:none;color:var(--ink)}
.cat-plain .cat-meta b{color:var(--ink)}
.cat-plain .cat-meta span{color:var(--ink-soft)}
.cat-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 18px;text-align:center}
.cat-meta b{
  display:block;font-family:var(--font-display);font-size:18px;font-weight:800;
  color:#FFF5E6;letter-spacing:-.01em;
}
.cat-meta span{
  display:inline-block;margin-top:5px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);
}
.cat-arrow{
  position:absolute;bottom:20px;right:18px;z-index:4;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:var(--dark);font-size:14px;
  opacity:0;transform:translateX(-8px);transition:all .45s var(--ease);
}
.cat-card:hover .cat-arrow{opacity:1;transform:none}

/* ---------- 12. PRODUCT CARDS ---------- */
/* align-items:stretch plus a flex column body is what makes every card in a
   row finish at the same height regardless of name length or badge count. */
.grid{
  display:grid;gap:clamp(14px,1.5vw,22px);align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(45,27,18,.04),0 12px 30px -18px rgba(45,27,18,.24);
  opacity:0;transform:translateY(22px);animation:cardIn .7s var(--ease) forwards;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
}
@keyframes cardIn{to{opacity:1;transform:none}}
.card::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:var(--r-lg);border:1.5px solid transparent;transition:border-color .45s var(--ease);
}
.card:hover{
  transform:translateY(-12px);
  box-shadow:0 3px 6px rgba(45,27,18,.05),0 34px 60px -26px rgba(45,27,18,.42);
}
.card:hover::before{border-color:var(--gold)}
.grid .card:nth-child(1){animation-delay:.04s}
.grid .card:nth-child(2){animation-delay:.1s}
.grid .card:nth-child(3){animation-delay:.16s}
.grid .card:nth-child(4){animation-delay:.22s}
.grid .card:nth-child(5){animation-delay:.28s}
.grid .card:nth-child(6){animation-delay:.34s}
.grid .card:nth-child(n+7){animation-delay:.4s}

/* A near-square frame shows far more of the product than the old 4:3 crop,
   and the height cap is generous enough that nothing important is sliced off. */
.card-img{
  position:relative;display:grid;place-items:center;overflow:hidden;
  aspect-ratio:4/4.6;max-height:min(360px,46vh);
  background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.card-img img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.1s var(--ease);
}
.card:hover .card-img img{transform:scale(1.08)}
.card-img::after{
  content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s;
  background:linear-gradient(to top,rgba(45,27,18,.42),transparent 55%);
}
.card:hover .card-img::after{opacity:1}

.img-placeholder{
  width:100%;height:100%;display:grid;place-items:center;gap:8px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 14px,var(--primary-soft) 14px,var(--primary-soft) 28px);
  color:var(--primary);font-size:10px;font-weight:600;letter-spacing:.22em;
}
.img-placeholder .ph-icon{font-size:34px;opacity:.55}

.tag{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 13px;border-radius:100px;
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--dark);
  box-shadow:0 5px 16px rgba(212,175,55,.42);backdrop-filter:blur(6px);
}
.tag.blue{
  background:linear-gradient(135deg,var(--primary),var(--chocolate));color:#FFF5E6;
  box-shadow:0 5px 16px rgba(139,69,19,.36);
}
.tag.veg{
  left:auto;right:14px;background:rgba(255,248,242,.9);color:var(--forest);
  border:1px solid rgba(31,122,92,.3);box-shadow:var(--shadow-xs);
}

/* Wishlist heart */
.wish{
  position:absolute;top:14px;right:14px;z-index:4;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-line);
  background:var(--glass-strong);backdrop-filter:blur(10px);
  display:grid;place-items:center;cursor:pointer;font-size:15px;color:var(--ink-faint);
  opacity:0;transform:translateY(-8px) scale(.85);transition:all .42s var(--spring);
}
.card:hover .wish{opacity:1;transform:none}
.wish:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.wish.on{opacity:1;transform:none;color:var(--wine)}
.card-img .tag.veg~.wish{top:56px}

.card-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1;gap:2px;position:relative;z-index:2}
.card-cat{font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)}
.card-name{
  font-family:var(--font-display);font-size:16.5px;font-weight:800;line-height:1.22;
  color:var(--ink);margin-top:2px;transition:color .3s;
}
.card:hover .card-name{color:var(--primary)}
.card-meta{font-size:12px;color:var(--ink-faint);letter-spacing:.02em}

.rating{display:flex;align-items:center;gap:7px;margin-top:6px}
.rating .rs{color:var(--gold);font-size:12.5px;letter-spacing:2.5px;line-height:1}
.rating .rs .off{color:var(--line-strong)}
.rating small{font-size:11px;color:var(--ink-faint)}

.price-row{display:flex;align-items:baseline;gap:8px;margin-top:8px;flex-wrap:wrap}
.price{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--primary);letter-spacing:-.02em}
.price-old{font-size:13.5px;color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:1px}
.price-off{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--forest);background:var(--forest-soft);padding:3px 9px;border-radius:100px;
}
.stock-note{font-size:11.5px;font-weight:500;margin-top:9px;display:flex;align-items:center;gap:6px}
.stock-note::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.stock-low{color:var(--amber)}
.stock-out{color:var(--wine)}

.card-foot{margin-top:auto;padding-top:10px}
.card-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.card-btns .btn{padding:9px 8px;font-size:12.5px;min-height:35px;border-radius:100px}

.qty{
  display:inline-flex;align-items:center;margin-top:10px;
  border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--surface);
}
.qty button{
  width:36px;height:36px;border:none;background:transparent;cursor:pointer;
  font-size:17px;font-weight:500;color:var(--primary);transition:background .25s,color .25s;
}
.qty button:hover{background:var(--cream);color:var(--gold-deep)}
.qty span{min-width:38px;text-align:center;font-weight:600;font-size:14px}

/* ---------- 13. SKELETONS ---------- */
.skeleton{
  position:relative;overflow:hidden;height:430px;border-radius:var(--r-lg);
  background:var(--cream);border:1px solid var(--line);
}
.skeleton::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  animation:shimmer 1.5s var(--ease) infinite;
}
[data-theme="dark"] .skeleton::after{
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- 14. FEATURE / WHY-US ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.feature{
  position:relative;overflow:hidden;padding:34px 26px;text-align:center;
  border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--shadow-xs);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
}
.feature::before{
  content:'';position:absolute;left:50%;top:0;width:0;height:2px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .55s var(--ease);
}
.feature:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--glass-line)}
.feature:hover::before{width:75%}
.feature .fi{
  width:66px;height:66px;margin:0 auto 16px;border-radius:22px;
  display:grid;place-items:center;font-size:29px;
  background:linear-gradient(150deg,var(--cream),var(--primary-soft));
  border:1px solid var(--glass-line);
  transition:transform .55s var(--spring),box-shadow .4s;
}
.feature:hover .fi{transform:translateY(-4px) rotate(-6deg);box-shadow:0 10px 24px rgba(212,175,55,.3)}
.feature h4{font-family:var(--font-display);font-size:18px;font-weight:800;margin-bottom:7px;color:var(--ink)}
.feature p{font-size:13px;color:var(--ink-faint);line-height:1.65}

/* ---------- 15. TESTIMONIALS ---------- */
.testi-rail{display:flex;gap:24px;overflow-x:auto;padding:10px 2px 26px;scroll-snap-type:x mandatory;scrollbar-width:none}
.testi-rail::-webkit-scrollbar{display:none}
.testi{
  flex:0 0 min(400px,84vw);scroll-snap-align:center;position:relative;
  padding:38px 32px 30px;border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
}
.testi:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--glass-line)}
.testi-quote{
  position:absolute;top:14px;right:26px;font-family:var(--font-display);
  font-size:82px;line-height:1;color:var(--gold);opacity:.2;pointer-events:none;
}
.testi .rs{color:var(--gold);font-size:13px;letter-spacing:3px;margin-bottom:14px;display:block}
.testi p{
  font-family:var(--font-body);font-size:17px;font-weight:400;font-style:normal;
  line-height:1.62;color:var(--ink);
}
.testi-who{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.testi-av{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:17px;font-weight:800;
  background:linear-gradient(140deg,var(--primary),var(--chocolate));color:var(--gold);
  box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.45);
}
.testi-who b{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink)}
.testi-who span{font-size:11.5px;color:var(--ink-faint);letter-spacing:.04em}

.rail-nav{display:flex;gap:10px}
.rail-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;
  font-size:17px;color:var(--ink-soft);transition:all .35s var(--spring);
}
.rail-btn:hover{background:var(--gold);color:var(--dark);border-color:var(--gold);transform:translateY(-2px)}

/* ---------- 16. PANELS & FORMS ---------- */
.panel{
  padding:30px;border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.panel h3{
  font-family:var(--font-display);font-size:21px;font-weight:800;margin-bottom:20px;
  display:flex;align-items:center;gap:12px;color:var(--ink);
}
.panel h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.field{margin-bottom:18px;position:relative}
.field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:15px 17px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  outline:none;font-size:14.5px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16);
}
.field input.bad{border-color:var(--wine);box-shadow:0 0 0 4px rgba(158,42,43,.1)}
.field input.good{border-color:var(--forest);box-shadow:0 0 0 4px rgba(31,122,92,.1)}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.err-msg{color:var(--wine);font-size:11.5px;font-weight:500;margin-top:6px;min-height:15px}

.pw-toggle{
  /* Anchored to the BOTTOM of .field (which always equals the bottom of the
     password input, whatever the label above it looks like) instead of a
     fixed distance from the top. That keeps it centred on the input itself
     across every field style on the site, rather than drifting off the
     input whenever a label's font-size/margin changes. */
  position:absolute;right:14px;bottom:9px;width:32px;height:32px;border-radius:9px;
  border:none;background:transparent;cursor:pointer;display:grid;place-items:center;
  font-size:15px;color:var(--ink-faint);transition:color .25s,background .25s;
}
.pw-toggle:hover{color:var(--primary);background:var(--cream)}
/* The auth (login/register) fields are shorter, so the toggle needs to be
   smaller and sit closer to the bottom edge to stay centred and inside
   the input instead of poking out above it. */
.auth-form .pw-toggle{right:10px;bottom:4px;width:24px;height:24px;font-size:12.5px}

/* ---------- 17. QUOTE / RULE STRIP ---------- */
.quote-box{
  margin:18px 0;padding:18px 20px;border-radius:var(--r);
  background:linear-gradient(140deg,var(--cream),var(--surface));
  border:1px solid var(--glass-line);
}
.quote-box.err{border-color:rgba(158,42,43,.35);background:var(--wine-soft)}
.quote-line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.quote-line strong{font-family:var(--font-display);font-size:23px;font-weight:800;color:var(--primary)}
.quote-note{font-size:12.5px;color:var(--ink-soft);margin-top:7px;line-height:1.6}
.rule-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;font-size:12px}
.rule-strip span{
  background:var(--surface);border:1px solid var(--line);
  padding:6px 14px;border-radius:100px;color:var(--ink-soft);
  transition:border-color .3s,transform .3s var(--spring);
}
.rule-strip span:hover{border-color:var(--gold);transform:translateY(-2px)}

/* ---------- 18. CART DRAWER ---------- */
.overlay{
  position:fixed;inset:0;z-index:950;opacity:0;pointer-events:none;
  background:rgba(45,27,18,.55);backdrop-filter:blur(5px);
  transition:opacity .4s var(--ease);
}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:960;width:min(440px,100%);
  display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .5s var(--ease);
  box-shadow:-24px 0 60px rgba(45,27,18,.22);
}
.drawer.show{transform:none}
.drawer-head{
  padding:24px 26px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);background:var(--cream);
}
.drawer-head h3{font-family:var(--font-display);font-size:22px;font-weight:800}
.drawer-body{flex:1;overflow-y:auto;padding:20px 26px}
.drawer-foot{padding:22px 26px;border-top:1px solid var(--line);background:var(--cream)}

.cart-item{
  display:flex;gap:15px;padding:16px;margin-bottom:12px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;
  animation:cardIn .45s var(--ease) both;
}
.cart-item:hover{border-color:var(--glass-line);transform:translateX(-3px);box-shadow:var(--shadow-xs)}
.cart-thumb{
  width:72px;height:72px;border-radius:14px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;font-size:24px;background:var(--cream);
}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-info{flex:1;min-width:0}
.cart-info h4{font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.3}
.cart-info .p{font-family:var(--font-display);color:var(--primary);font-weight:800;font-size:17px;margin-top:3px}

.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;color:var(--ink-soft)}
.sum-row.total{font-size:16px;font-weight:600;color:var(--ink);border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.sum-row.total b{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--primary)}

/* Outlined box grouping the coupon badge + input + error together, so the
   whole coupon area reads as one clearly-bordered card inside the order
   summary panel — matching the reference design. */
.coupon-box{
  margin-top:16px;padding:16px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--surface);
}
.coupon-box .field{margin-bottom:0}
.coupon-box .field label{margin-bottom:10px}

/* Coupon badge (checkout order summary) — advertises the active coupon
   before it's applied, and confirms it once applied (same look either way,
   matching the reference design). */
.coupon-badge{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--forest-soft);border:1.5px dashed var(--ok);
}
.coupon-badge b{font-family:var(--font-display);font-size:14px;color:var(--forest);letter-spacing:.3px}
.coupon-badge span{font-size:12px;color:var(--ink-soft)}
.coupon-badge button{background:none;border:none;color:var(--ink-faint);font-size:16px;cursor:pointer;line-height:1;padding:2px}
.coupon-badge button:hover{color:var(--red)}

.deliv-meter{margin-bottom:18px;padding:15px 17px;border-radius:var(--r);background:var(--cream);border:1px solid var(--glass-line)}
.deliv-meter p{font-size:12.5px;color:var(--ink-soft);margin-bottom:9px}
.deliv-meter p b{color:var(--primary)}
.dm-track{height:6px;border-radius:100px;background:var(--line);overflow:hidden}
.dm-fill{height:100%;border-radius:100px;width:0;background:linear-gradient(90deg,var(--gold),var(--primary));transition:width .8s var(--ease)}

/* ---------- 19. EMPTY STATES ---------- */
.empty{text-align:center;padding:64px 24px;color:var(--ink-faint)}
.empty .ei{
  width:96px;height:96px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;font-size:42px;
  background:linear-gradient(150deg,var(--cream),var(--primary-soft));
  border:1px solid var(--glass-line);animation:emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyFloat{50%{transform:translateY(-8px)}}
.empty p{font-size:15px;color:var(--ink-soft)}

/* ---------- 20. TOASTS ---------- */
#toasts{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;flex-direction:column;gap:11px;align-items:center;pointer-events:none;
}
.toast{
  pointer-events:auto;max-width:min(420px,90vw);
  padding:14px 24px;border-radius:100px;font-size:14px;font-weight:500;
  background:var(--dark);color:#FFF5E6;border:1px solid rgba(212,175,55,.35);
  box-shadow:0 16px 44px rgba(45,27,18,.34);
  animation:toastIn .5s var(--spring);
  display:flex;align-items:center;gap:10px;
}
.toast::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0}
.toast.ok::before{background:#4FBF95}
.toast.err::before{background:#E07A6B}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}}

/* ---------- 21. COUPON STRIP ---------- */
.coupon-strip{margin-bottom:4px}
.coupon-head{font-family:var(--font-display);font-size:11px;font-weight:800;margin-bottom:2px;color:var(--ink)}
.coupon-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.coupon-cards::-webkit-scrollbar{display:none}
.coupon-card{
  flex-shrink:0;min-width:220px;display:flex;align-items:stretch;cursor:pointer;
  border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .35s;
}
.coupon-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.coupon-left{flex:1;padding:5px 11px;background:linear-gradient(135deg,var(--cream),var(--surface))}
.coupon-val{font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--primary)}
.coupon-cond{font-size:9.5px;color:var(--ink-faint);margin-top:1px}
.coupon-code{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 15px;position:relative;
  background:linear-gradient(150deg,var(--primary),var(--chocolate));
  color:var(--gold);font-weight:600;font-size:12.5px;letter-spacing:.08em;
}
.coupon-code::before{content:'';position:absolute;left:0;top:8px;bottom:8px;border-left:1.5px dashed rgba(212,175,55,.5)}
.coupon-code span{font-size:7.5px;font-weight:600;letter-spacing:.2em;opacity:.8;margin-top:3px}

/* ---------- 22. INSTAGRAM CTA ---------- */
.insta-cta{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:30px;
  padding:46px 48px;border-radius:var(--r-xl);color:#FFF5E6;
  /* The only section that departs from the bakery palette — deliberately,
     because it is Instagram's own identity, not ours. */
  background:linear-gradient(115deg,#4A22B5 0%,#8A3AB9 22%,#C13584 45%,#E1306C 62%,#F56040 80%,#FCAF45 100%);
  box-shadow:0 22px 54px rgba(193,53,132,.32);
}
.insta-cta::before{
  content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.26),transparent 70%);
}
.insta-cta::after{
  content:'';position:absolute;left:-70px;bottom:-110px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(252,175,69,.34),transparent 68%);
}
.insta-cta-txt{flex:1;position:relative;z-index:1}
.insta-badge{
  display:inline-block;margin-bottom:14px;padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important;
  background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.4);
  font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--gold-soft);
}
.insta-cta h3{font-family:var(--font-display);font-size:clamp(25px,3.1vw,38px);font-weight:800;line-height:1.12;letter-spacing:-.03em}
.insta-cta h3 span{
  font-weight:800;padding:0;border-radius:0;
  background:linear-gradient(100deg,var(--gold-soft),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.insta-cta p{margin:14px 0 24px;font-size:14.5px;opacity:.85;max-width:540px;line-height:1.7}
.insta-cta .btn{background:var(--gold);color:var(--dark);font-weight:600}
.insta-cta .btn:hover{box-shadow:var(--shadow-gold)}
.insta-cta-icon{font-size:96px;opacity:.5;position:relative;z-index:1;animation:emptyFloat 4s ease-in-out infinite}

/* ---------- 23. PARTNERS ---------- */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.partner{
  position:relative;overflow:hidden;padding:32px 20px;text-align:center;
  border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
}
.partner:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--glass-line)}
.partner-ic{
  width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:26px;
  background:linear-gradient(150deg,var(--cream),var(--primary-soft));
  border:1px solid var(--glass-line);transition:transform .5s var(--spring);
}
.partner:hover .partner-ic{transform:scale(1.08) rotate(-5deg)}
.partner b{display:block;font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:4px}
.partner span{font-size:12px;color:var(--ink-faint)}

/* ---------- 24. FOOTER ---------- */
.footer{
  position:relative;overflow:hidden;margin-top:90px;padding:76px 0 28px;
  background:linear-gradient(170deg,#4E342E 0%,#2D1B12 100%);
  color:#D8C7B6;
}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.footer::after{
  content:'';position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.11),transparent 70%);
}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:46px}
.footer .logo-text{color:#FFF8F2}
.footer .logo-mark{background:rgba(212,175,55,.12);box-shadow:inset 0 0 0 1px rgba(212,175,55,.4)}
.footer .logo-mark.has-logo{background:transparent;box-shadow:none}
.footer h5{
  color:var(--gold);font-family:var(--font-body);font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:20px;
}
.footer a,.footer p{
  display:block;font-size:14px;color:#B9A691;margin-bottom:11px;line-height:1.65;
  transition:color .3s,transform .3s var(--ease);
}
.footer a{position:relative;width:fit-content}
.footer a:hover{color:var(--gold);transform:translateX(4px)}
.footer-bot{
  position:relative;z-index:1;margin-top:52px;padding-top:24px;text-align:center;
  border-top:1px solid rgba(212,175,55,.18);font-size:12.5px;color:#8E7B68;
}
.made-by{margin-top:7px}
.made-by a{display:inline;color:var(--gold);font-size:12.5px}

.news-form{display:flex;gap:9px;margin-top:6px;max-width:330px}
.news-form input{
  flex:1;min-width:0;padding:13px 17px;border-radius:100px;font-size:13.5px;
  background:rgba(255,248,242,.07);border:1px solid rgba(212,175,55,.28);
  color:#FFF8F2;outline:none;transition:border-color .3s,background .3s;
}
.news-form input::placeholder{color:#8E7B68}
.news-form input:focus{border-color:var(--gold);background:rgba(255,248,242,.11)}
.news-form button{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--dark);
  font-size:17px;display:grid;place-items:center;
  transition:transform .35s var(--spring),box-shadow .35s;
}
.news-form button:hover{transform:scale(1.08);box-shadow:var(--shadow-gold)}

.foot-socials{display:flex;gap:11px;margin-top:20px}
.foot-socials a{
  width:42px;height:42px;border-radius:50%;margin:0;display:grid;place-items:center;
  background:rgba(255,248,242,.06);border:1px solid rgba(212,175,55,.22);color:#D8C7B6;
  transition:all .4s var(--spring);
}
.foot-socials a:hover{background:var(--gold);color:var(--dark);border-color:var(--gold);transform:translateY(-4px) scale(1.06)}
.foot-socials svg{width:17px;height:17px}
.foot-map{margin-top:16px;border-radius:var(--r);overflow:hidden;height:150px;border:1px solid rgba(212,175,55,.25)}
.foot-map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.22)}
.foot-hours{
  display:flex;justify-content:space-between;gap:14px;font-size:13px;
  padding:5px 0;border-bottom:1px dashed rgba(212,175,55,.16);
}
.foot-hours:last-of-type{border-bottom:none}
.foot-hours b{color:#D8C7B6;font-weight:500}
.foot-hours span{color:var(--gold);font-size:12.5px}

/* ---------- 25. FLOATING BUTTONS ---------- */
.fab-stack{
  position:fixed;right:22px;bottom:26px;z-index:940;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateX(80px) scale(.6);pointer-events:none;
  transition:opacity .6s var(--spring),transform .6s var(--spring);
}
.fab-stack.fab-visible{opacity:1;transform:none;pointer-events:auto}
.fab{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#FFF8F2;cursor:pointer;
  box-shadow:0 10px 28px rgba(45,27,18,.26);
  transition:transform .4s var(--spring),box-shadow .4s;
  animation:fabFloat 3.4s ease-in-out infinite;
}
.fab:hover{transform:scale(1.12) translateY(-3px);box-shadow:0 16px 38px rgba(45,27,18,.36)}
/* All three share size, radius, shadow, float and hover — only the fill differs,
   so each brand stays recognisable while the set reads as one family.
   Stagger order matches the visual order: Call, Instagram, WhatsApp. */
.fab-call{background:linear-gradient(140deg,var(--gold),var(--primary));color:var(--dark);animation-delay:0s}
.fab-insta{background:linear-gradient(140deg,#F0B24A,#C13584 55%,#7B3FBF);animation-delay:.3s}
.fab-wa{background:linear-gradient(140deg,#25D366,#0F7A3D);animation-delay:.6s}
.fab-wa::after{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:fabPulse 2.2s infinite}
.fab svg{display:block;pointer-events:none}
@keyframes fabPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
@keyframes fabFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.fab-tip{
  position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(12px);
  padding:9px 15px;border-radius:100px;white-space:nowrap;
  background:var(--dark);color:#FFF5E6;border:1px solid rgba(212,175,55,.3);
  font-size:12px;font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
  box-shadow:0 8px 22px rgba(45,27,18,.3);
}
.fab:hover .fab-tip{opacity:1;transform:translateY(-50%)}

.to-top{
  position:fixed;left:22px;bottom:26px;z-index:940;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:17px;
  background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--glass-line);color:var(--primary);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:all .5s var(--spring);
}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)}

/* ---------- 26. SCROLL REVEAL ---------- */
/* Reveal animations are opt-in: the opacity:0 only applies once ui.js has
   confirmed it is running (html.js-on). Without JS, or if the observer never
   fires, every section stays fully visible instead of blank. */
.js-on .reveal-up{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-on .reveal-up.seen{opacity:1;transform:none}
.js-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-on .reveal.in{opacity:1;transform:none}

/* ---------- 27. CHECKOUT ---------- */
.co-item{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.co-item:last-of-type{border-bottom:none}
.co-item-info{flex:1;min-width:0}
.co-item-name{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.co-item-price{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.co-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--surface)}
.co-qty button{
  width:30px;height:30px;border:none;background:transparent;cursor:pointer;
  font-size:15px;font-weight:500;color:var(--primary);display:grid;place-items:center;transition:background .25s;
}
.co-qty button:hover{background:var(--cream)}
.co-qty span{min-width:30px;text-align:center;font-weight:600;font-size:13px}
.co-item-total{font-family:var(--font-display);font-weight:800;font-size:15.5px;min-width:70px;text-align:right;color:var(--ink)}
.co-addmore{display:block;text-align:center;padding:16px 0 4px;color:var(--primary);font-weight:500;font-size:13.5px;transition:color .3s}
.co-addmore:hover{color:var(--gold-deep)}

.co-steps{display:flex;align-items:center;gap:0;margin-bottom:34px;flex-wrap:wrap}
.co-step{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-faint)}
.co-step i{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-family:var(--font-display);font-size:14px;font-style:normal;font-weight:800;
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-faint);
  transition:all .45s var(--ease);
}
.co-step.on i{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-color:transparent;
  color:var(--dark);box-shadow:0 6px 16px rgba(212,175,55,.36);
}
.co-step.on{color:var(--ink);font-weight:500}
.co-step-line{flex:1;min-width:26px;height:1px;background:var(--line);margin:0 14px}

.pay-opt{
  display:flex;gap:14px;align-items:center;padding:18px;margin-bottom:12px;cursor:pointer;
  border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease);
}
.pay-opt:hover{border-color:var(--glass-line);transform:translateY(-2px)}
.pay-opt.sel{
  border-color:var(--gold);background:linear-gradient(135deg,var(--cream),var(--surface));
  box-shadow:0 8px 22px rgba(212,175,55,.18);
}
.pay-opt input[type=radio]{accent-color:var(--primary);width:18px;height:18px}
.pay-opt b{font-size:14.5px;font-weight:600}

.free-banner{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;padding:15px 18px;
  border-radius:var(--r);font-weight:500;font-size:13.5px;
  background:linear-gradient(135deg,var(--forest),#166149);color:#EAF7F1;
  box-shadow:0 8px 22px rgba(31,122,92,.24);animation:slideDown .5s var(--ease);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}}

.map-search{display:flex;gap:9px;margin-bottom:11px}
.map-search input{
  flex:1;min-width:0;padding:13px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.map-search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16)}
#pickMap{height:290px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map-hint{font-size:12px;color:var(--ink-faint);margin-top:9px;text-align:center}
.picked-addr{
  margin-top:12px;padding:14px 16px;border-radius:var(--r-sm);font-size:13.5px;
  background:var(--cream);border:1px solid var(--glass-line);color:var(--ink-soft);
}
.map-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:280px;margin-top:16px}
.map-wrap iframe{width:100%;height:100%;border:0}

.pay-modal-bg{
  position:fixed;inset:0;z-index:970;display:grid;place-items:center;padding:20px;
  background:rgba(45,27,18,.62);backdrop-filter:blur(6px);animation:fadeIn .3s;
}
@keyframes fadeIn{from{opacity:0}}
.pay-modal{
  width:min(430px,100%);overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--glass-line);
  box-shadow:0 30px 80px rgba(45,27,18,.42);animation:popUp .45s var(--spring);
}
@keyframes popUp{from{transform:scale(.88) translateY(16px);opacity:0}}
.pay-modal-head{padding:24px 28px;color:#FFF5E6;background:linear-gradient(135deg,var(--primary),var(--chocolate))}
.pay-modal-head h3{font-family:var(--font-display);font-size:20px;font-weight:800}
.pay-modal-body{padding:28px}
.pay-amt{font-family:var(--font-display);font-size:44px;font-weight:800;text-align:center;color:var(--ink);letter-spacing:-.03em}
.pay-methods{display:flex;gap:9px;justify-content:center}
.pm{flex:1;text-align:center;padding:14px 8px;border-radius:var(--r-sm);border:1.5px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.pay-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:600}

.check{animation:pop2 .7s var(--spring)}
@keyframes pop2{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1)}}

/* ---------- 28. ORDER TIMELINE ---------- */
.steps{display:flex;flex-direction:column;margin-top:26px}
.step{display:flex;gap:20px}
.step-dot{width:34px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.dot{
  width:17px;height:17px;border-radius:50%;flex-shrink:0;
  background:var(--surface);border:2px solid var(--line-strong);transition:all .5s var(--ease);
}
.step.done .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18)}
.step.now .dot{
  background:var(--primary);border-color:var(--primary);
  box-shadow:0 0 0 5px rgba(139,69,19,.18);animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{50%{box-shadow:0 0 0 13px rgba(139,69,19,0)}}
.bar{flex:1;width:2px;min-height:34px;background:var(--line);position:relative;overflow:hidden}
.step.done .bar::after{
  content:'';position:absolute;inset:0;transform-origin:top;
  background:linear-gradient(180deg,var(--gold),var(--primary));
  animation:barGrow .8s var(--ease) forwards;
}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.step-txt{padding-bottom:28px}
.step-txt h4{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink-faint)}
.step.done .step-txt h4{color:var(--ink)}
.step.now .step-txt h4{color:var(--primary)}
.step-txt p{font-size:13px;color:var(--ink-faint);margin-top:2px}

/* ---------- 29. PRODUCT DETAIL ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.pd-img{
  position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;
  border-radius:var(--r-xl);background:var(--cream);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.pd-img::after{content:'';position:absolute;inset:14px;border-radius:22px;pointer-events:none;border:1px solid rgba(212,175,55,.35)}
.pd-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pd-img:hover img{transform:scale(1.06)}
.stars{color:var(--gold);font-size:16px;letter-spacing:3px}

/* ---------- 30. ABOUT PAGE ---------- */
.about-hero{
  position:relative;overflow:hidden;margin-bottom:34px;padding:60px 48px;
  border-radius:var(--r-xl);color:#FFF5E6;
  background:linear-gradient(140deg,#4E342E 0%,#2D1B12 58%,#8B4513 155%);
  box-shadow:var(--shadow-lg);
}
.about-hero::after{
  content:'';position:absolute;right:-60px;bottom:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.24),transparent 70%);
}
.about-hero h1{font-family:var(--font-display);font-size:clamp(32px,4.6vw,54px);font-weight:800;line-height:1.08;position:relative;z-index:1}
.about-hero p{margin-top:18px;font-size:15.5px;opacity:.88;max-width:640px;line-height:1.75;position:relative;z-index:1}

.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-bottom:30px}
.val{
  padding:28px 24px;border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
}
.val:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--glass-line)}
.val-ic{
  width:56px;height:56px;margin-bottom:14px;border-radius:18px;
  display:grid;place-items:center;font-size:26px;
  background:linear-gradient(150deg,var(--cream),var(--primary-soft));
  border:1px solid var(--glass-line);
}
.val h4{font-family:var(--font-display);font-size:18px;font-weight:800;margin-bottom:7px}
.val p{font-size:13px;color:var(--ink-soft);line-height:1.65}

.price-example{background:var(--cream);border:1px solid var(--glass-line);border-radius:var(--r);padding:20px 22px;margin-top:16px}
.price-example table{width:100%;border-collapse:collapse;font-size:14px}
.price-example td{padding:9px 0;border-bottom:1px solid var(--line)}
.price-example td:last-child{text-align:right;font-weight:600}
.price-example tr:last-child td{border-bottom:none;font-weight:700;color:var(--primary);font-size:15px}

.step-list{counter-reset:s;margin-top:16px}
.step-list li{list-style:none;position:relative;padding:14px 0 14px 54px;border-bottom:1px solid var(--line)}
.step-list li:last-child{border-bottom:none}
.step-list li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:12px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:13px;font-weight:800;
  background:linear-gradient(140deg,var(--primary),var(--chocolate));color:var(--gold);
}

.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px}
.cm{
  display:flex;flex-direction:column;gap:3px;padding:18px 20px;border-radius:var(--r);
  font-weight:600;font-size:15px;color:#FFF8F2;
  transition:transform .4s var(--spring),box-shadow .4s;
}
.cm:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cm span{font-size:12px;font-weight:400;opacity:.9}
.cm-wa{background:linear-gradient(140deg,#25D366,#0F7A3D)}
.cm-ig{background:linear-gradient(140deg,#F0B24A,#C13584 55%,#7B3FBF)}
.cm-loc{background:linear-gradient(140deg,var(--gold),var(--primary));color:var(--dark)}
.cm-call{background:linear-gradient(140deg,var(--primary),var(--chocolate))}

.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--line);margin-bottom:30px;
}
.stat-cell{background:var(--surface);padding:30px 20px;text-align:center}
.stat-cell b{
  display:block;font-family:var(--font-display);font-size:38px;font-weight:800;
  color:var(--primary);letter-spacing:-.02em;line-height:1;
}
.stat-cell span{display:block;margin-top:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- 31. QUICK VIEW ---------- */
.qv-bg{
  position:fixed;inset:0;z-index:975;display:grid;place-items:center;padding:22px;
  background:rgba(45,27,18,.62);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.qv-bg.show{opacity:1;pointer-events:auto}
.qv{
  position:relative;width:min(760px,100%);max-height:88vh;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;
  border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--glass-line);box-shadow:0 34px 90px rgba(45,27,18,.44);
  transform:scale(.92) translateY(20px);transition:transform .5s var(--spring);
}
.qv-bg.show .qv{transform:none}
.qv-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.qv-img img{width:100%;height:100%;object-fit:cover}
.qv-body{padding:34px 32px;display:flex;flex-direction:column}
.qv-close{
  position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--glass-line);background:var(--glass-strong);backdrop-filter:blur(8px);
  cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--ink);
  transition:all .35s var(--spring);
}
.qv-close:hover{background:var(--gold);color:var(--dark);transform:rotate(90deg)}

/* ---------- 32. MENU FILTERS ---------- */
.menu-layout{display:grid;grid-template-columns:244px 1fr;gap:28px;align-items:start}
.filters{
  position:sticky;top:calc(var(--nav-h) + 18px);
  padding:22px 20px;border-radius:var(--r-lg);
  background:var(--glass-strong);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow-xs);
}
.filters h4{font-family:var(--font-display);font-size:17px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:11px}
.filters h4::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.filter-group{margin-bottom:26px}
.filter-group:last-child{margin-bottom:0}
.filter-list{display:flex;flex-direction:column;gap:3px}
.filter-list .chip{width:100%;text-align:left;justify-content:flex-start;border:none;background:transparent;padding:10px 14px;border-radius:12px}
.filter-list .chip:hover{background:var(--cream);transform:none;box-shadow:none}
.filter-list .chip.active{
  background:linear-gradient(135deg,var(--primary),var(--chocolate));color:#FFF5E6;
  box-shadow:0 6px 16px rgba(139,69,19,.24);
}

.search-wrap{position:relative;flex:1;min-width:210px}
.search-wrap input{
  width:100%;padding:14px 18px 14px 46px;border-radius:100px;
  border:1.5px solid var(--line);background:var(--surface);outline:none;font-size:14px;
  transition:border-color .35s,box-shadow .35s,background .3s;
}
.search-wrap input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16)}
.search-wrap .si{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:15px;pointer-events:none;
  transition:color .3s,transform .4s var(--spring);
}
.search-wrap input:focus~.si{color:var(--gold-deep);transform:translateY(-50%) scale(1.14)}
.sort-wrap{position:relative;display:inline-flex}
.sort-wrap select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:14px 44px 14px 20px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--surface);outline:none;font-size:14px;cursor:pointer;
  width:100%;text-overflow:ellipsis;
  transition:border-color .3s,box-shadow .3s;
}
.sort-wrap select::-ms-expand{display:none}
/* Drawn from borders rather than a background image so it inherits the ink
   colour and stays crisp in both themes. */
.sort-wrap::after{
  content:'';position:absolute;right:20px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
  transition:border-color .3s;
}
.sort-wrap:hover::after{border-color:var(--primary)}
.sort-wrap select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16)}

/* ---------- 33. AUTH PAGES ---------- */
/* max-width:900px on the outer .container plus a small, fixed top/bottom
   padding here — kept in CSS (not inline on the page) so both login and
   register stay in sync. The section is a flex box that centres the card
   vertically in whatever space is left under the fixed nav; because the
   card itself is now short enough to fit almost any laptop/phone screen,
   that centring is actually visible instead of being fought by overflow. */
.auth-page-section{
  min-height:calc(100vh - var(--nav-h,84px));display:flex;align-items:center;
  padding-top:clamp(8px,1.6vh,20px)!important;padding-bottom:clamp(8px,1.6vh,20px)!important;
}
.auth-shell{
  display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:var(--glass-strong);backdrop-filter:blur(18px);
  width:100%;max-width:700px;margin-inline:auto;
}
.auth-art{
  position:relative;overflow:hidden;padding:20px 26px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(150deg,#4E342E,#2D1B12 60%,#8B4513 150%);
  color:#FFF5E6;min-height:0;
}
.auth-art::before{
  content:'';position:absolute;top:-100px;right:-100px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.26),transparent 70%);
}
.auth-art-mark{
  position:absolute;top:18px;left:26px;font-family:var(--font-display);
  font-size:11px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase;
}
.auth-art h3{font-family:var(--font-display);font-size:21px;font-weight:800;line-height:1.14;letter-spacing:-.03em;position:relative;z-index:1}
.auth-art h3 em{font-style:normal;font-weight:800;color:var(--gold-soft)}
.auth-art p{margin-top:8px;font-size:12px;opacity:.8;line-height:1.55;position:relative;z-index:1;max-width:330px}
.auth-art ul{list-style:none;margin-top:10px;position:relative;z-index:1}
.auth-art li{display:flex;align-items:center;gap:10px;font-size:11.5px;padding:3px 0;opacity:.9}
.auth-art li::before{content:'';width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}
.auth-form{padding:18px 28px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:2px}
.auth-form .sub{color:var(--ink-faint);font-size:11.5px;margin-bottom:10px}
.auth-form .field{margin-bottom:7px}
.auth-form .field label{margin-bottom:4px;font-size:10px}
.auth-form .field input{padding:8px 13px;font-size:13px}
.auth-form .btn-block{padding:9px 18px;min-height:38px;font-size:13.5px}
.auth-alt{text-align:center;font-size:11.5px;margin-top:8px;color:var(--ink-soft)}
.auth-alt a{color:var(--primary);font-weight:600}
.auth-divider{
  display:flex;align-items:center;gap:12px;margin:8px 0;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px;border-radius:100px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);
  font-size:11.5px;font-weight:500;color:var(--ink-soft);
  transition:border-color .3s,transform .35s var(--spring),box-shadow .3s;
}
.social-btn:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,175,55,.18)}
.social-btn svg{width:15px;height:15px}

/* ---------- 34. RESPONSIVE ---------- */
@media(max-width:1080px){
  .hero-grid{gap:38px}
  .footer-grid{grid-template-columns:1.5fr 1fr 1.3fr;gap:36px}
  .footer-grid>div:nth-child(3){display:none}
  .menu-layout{grid-template-columns:214px 1fr;gap:22px}
}
@media(max-width:960px){
  :root{--nav-h:80px}
  .hero{padding:28px 0 36px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-banner{order:-1;max-width:320px;max-height:46vh;margin-inline:auto;aspect-ratio:4/4.2}
  .hero h1{font-size:clamp(32px,7.4vw,44px)}
  .section{padding:60px 0}
  .pd{grid-template-columns:1fr;gap:32px}
  .qv{grid-template-columns:1fr;max-height:86vh}
  .auth-shell{grid-template-columns:1fr}
  .auth-art{min-height:120px;padding:44px 26px 20px}
  .auth-art h3{font-size:20px}
  .auth-art ul,.auth-art p{display:none}
  .auth-form{padding:22px 24px}
  .menu-layout{grid-template-columns:1fr}
  .filters{position:static;margin-bottom:6px}
  .filter-list{flex-direction:row;flex-wrap:wrap}
  .filter-list .chip{width:auto;border-radius:100px}
  #layout{grid-template-columns:1fr!important}
  #layout>div:last-child .panel{position:static!important}
}
@media(max-width:760px){
  :root{--fs-base:14.5px;--nav-h:74px}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
    padding:14px 20px 22px;display:none;align-items:stretch;
    background:var(--glass-strong);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
  }
  .nav-links.open{display:flex;animation:heroRise .35s var(--ease)}
  .nav-links a{padding:15px 8px;border-radius:12px;font-size:15px}
  .nav-links a::before{left:8px;right:8px;bottom:9px}
  .hamburger{display:grid}
  /* Sign in stays the first (leftmost) icon in the mobile action row,
     hamburger stays last (rightmost, closest to the screen edge). */
  .nav-actions>.acct-wrap,.nav-actions>a.btn-primary{order:1}
  .nav-actions>.icon-btn:not(.hamburger){order:2}
  .nav-actions>.hamburger{order:3}
  .logo-text{font-size:20px}
  .logo-mark{width:52px;height:52px;border-radius:16px;font-size:20px}
  .logo-mark.has-logo{width:56px;height:56px}
  .logo-text small{font-size:8px;letter-spacing:.28em}
  .icon-btn{width:44px;height:44px}
  .theme-toggle{display:none}

  /* Keep the header from overflowing the viewport on phones: trim gaps,
     drop the tagline, and shrink the Sign in button so logo + icons +
     Sign in always fit on one line instead of getting clipped off-screen. */
  .nav-inner{gap:8px}
  .logo{gap:8px;min-width:0}
  .logo-text{min-width:0}
  .logo-text small{display:none}
  .nav-actions{gap:6px}
  .nav-actions .btn-sm{padding:9px 13px;font-size:12.5px;min-height:40px;white-space:nowrap}

  /* Shorter, tighter product cards on phones. */
  .card-body{padding:12px 12px 14px;gap:3px}
  .card-name{font-size:14.5px;line-height:1.22}
  .card-meta{font-size:11px}
  .price-row{margin-top:8px}
  .card-foot{padding-top:10px}

  .trust-bar-inner{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:10px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .trust-bar-inner::-webkit-scrollbar{display:none}
  .trust-bar-inner span{flex-shrink:0;padding:3px 16px;font-size:12px;white-space:nowrap}

  .hero{padding:22px 0 30px}
  .hero p{margin:12px 0 18px}
  .trust-row{margin-top:18px;gap:0}
  .trust-row div{padding:0 18px;font-size:10.5px}
  .trust-row strong{font-size:21px}
  .scroll-cue{display:none}

  .section{padding:48px 0}
  .section-head{margin-bottom:28px;gap:14px}
  .rule-gold{margin-bottom:30px}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .card-body{padding:11px 11px 13px}
  .card-name{font-size:13.5px}
  .card-cat{font-size:8.5px;letter-spacing:.2em}
  .price{font-size:16.5px}
  .price-old{font-size:12px}
  .card-btns{gap:6px}
  .card-btns .btn{padding:9px 4px;font-size:11.5px;min-height:34px}
  .tag{font-size:8.5px;padding:5px 10px;top:10px;left:10px}
  .tag.veg{right:10px}
  .wish{width:34px;height:34px;top:10px;right:10px;opacity:1;transform:none}
  .card-img .tag.veg~.wish{top:48px}
  .skeleton{height:330px}

  .cat-grid{display:flex;flex-wrap:nowrap;gap:13px}
  .cat-card{flex:0 0 132px;width:132px;border-radius:96px 96px var(--r) var(--r)}
  .feature-grid,.partners{grid-template-columns:repeat(2,1fr);gap:13px}
  .feature,.partner,.val{padding:24px 16px;border-radius:var(--r)}
  .feature .fi{width:54px;height:54px;font-size:24px;border-radius:18px}
  .feature h4,.partner b,.val h4{font-size:15.5px}
  .feature p,.partner span,.val p{font-size:12px}
  .val-grid{grid-template-columns:1fr}

  .testi{flex:0 0 88vw;padding:30px 24px 26px}
  .testi p{font-size:16px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-cell{padding:24px 14px}
  .stat-cell b{font-size:30px}

  .drawer{width:100%}
  .panel{padding:22px 18px;border-radius:var(--r)}
  .field-row{grid-template-columns:1fr;gap:0}
  .insta-cta{flex-direction:column;text-align:center;padding:32px 24px}
  .insta-cta-icon{display:none}
  .about-hero{padding:38px 26px}
  .footer{padding:56px 0 24px;margin-top:64px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .footer-grid>div:nth-child(3){display:block}
  .fab-stack{right:14px;bottom:18px;gap:11px}
  .fab{width:50px;height:50px}
  .fab-tip{display:none}
  .to-top{left:14px;bottom:18px;width:44px;height:44px}
  .co-steps{gap:6px}
  .co-step span{display:none}
  .co-step-line{margin:0 4px}
}
@media(max-width:430px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-grid{gap:10px}
  .cat-card{flex:0 0 116px;width:116px}
  .card-btns{grid-template-columns:1fr;gap:6px}
  .feature-grid,.partners{grid-template-columns:1fr}
  .hero h1{font-size:31px}
  .trust-row div{padding:0 12px}
  .social-row{grid-template-columns:1fr}
  .card-img{aspect-ratio:1/1;max-height:none}
}
@media(max-width:380px){
  .nav-inner{gap:6px}
  .logo-mark{width:44px;height:44px;border-radius:14px;font-size:17px}
  .logo-mark.has-logo{width:48px;height:48px}
  .logo-text{font-size:16px}
  .nav-actions .btn-sm{padding:8px 10px;font-size:11.5px}
  .icon-btn{width:40px;height:40px}
  .icon-btn svg{width:18px;height:18px}
}

/* ---------- 35. 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;
  }
  .reveal-up,.reveal,.card,.hero-badge,.hero p,.hero-btns,.trust-row,.hero-banner,.scroll-cue,.hero h1 .w{
    opacity:1!important;transform:none!important;
  }
  .mote,.hero-motes{display:none}
}

/* ---------- 36. PRINT ---------- */
@media print{
  .nav,.footer,.fab-stack,.to-top,.drawer,.overlay,.trust-bar,.scroll-cue,.pb-loader{display:none!important}
  body{padding-top:0;background:#fff}
}

/* ---------- ABOUT BAND (homepage) ---------- */
.about-band{position:relative}
.ab-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:56px;align-items:center}
.ab-art{position:relative;min-height:520px}
.ab-art-main,.ab-art-sub{
  background-size:cover;background-position:center;background-color:var(--primary-soft);
  box-shadow:var(--shadow-lg);
}
.ab-art-main{
  position:absolute;inset:0 22% 14% 0;
  border-radius:210px 210px var(--r-lg) var(--r-lg);
  border:1px solid rgba(212,175,55,.35);
}
.ab-art-sub{
  position:absolute;right:0;bottom:0;width:56%;height:46%;
  border-radius:var(--r-lg);border:5px solid var(--bg);
}
.ab-art-tag{
  position:absolute;left:-14px;bottom:16%;z-index:2;
  padding:14px 20px;border-radius:var(--r);
  background:rgba(255,248,242,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(212,175,55,.4);box-shadow:var(--shadow-md);
}
[data-theme="dark"] .ab-art-tag{background:rgba(35,22,12,.86)}
.ab-art-tag b{display:block;font-family:var(--font-display);font-size:19px;color:var(--ink)}
.ab-art-tag span{font-size:12px;color:var(--ink-soft)}
.ab-copy h2{font-size:clamp(30px,3.4vw,46px);margin:10px 0 26px;line-height:1.14}
.ab-block{margin-bottom:24px}
.ab-block h3{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px;
}
.ab-block p{color:var(--ink-soft);line-height:1.75}
.ab-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.ab-list li{
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;
}
.ab-list li:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.45);box-shadow:var(--shadow)}
.ab-list b{display:block;font-size:14px;margin-bottom:3px}
.ab-list span{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.ab-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:960px){
  .ab-grid{grid-template-columns:1fr;gap:38px}
  .ab-art{min-height:400px;max-width:460px;margin:0 auto;width:100%}
}
@media(max-width:560px){
  .ab-art{min-height:330px}
  .ab-list{grid-template-columns:1fr}
  .ab-art-tag{left:0}
}

/* ---------- CUSTOM CAKES ---------- */
.cc-hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:60px 46px;margin-bottom:26px;color:#FFF5E6;
  background:linear-gradient(120deg,var(--chocolate),var(--dark) 62%,var(--primary));
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-lg);
}
.cc-hero::after{
  content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.3),transparent 70%);
}
.cc-hero-txt{position:relative;z-index:1;max-width:560px}
.cc-hero h1{font-size:clamp(30px,4vw,50px);line-height:1.12;margin:10px 0 14px}
.cc-hero p{color:rgba(255,245,230,.82);font-size:16px;line-height:1.7}
.cc-steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.cc-stepbox{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .3s;
}
.cc-stepbox:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.45)}
.cc-stepbox b{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:18px;
  background:linear-gradient(140deg,var(--primary),var(--chocolate));color:var(--gold);
}
.cc-stepbox span{font-weight:500;font-size:14.5px}
.cc-drop{
  border:2px dashed var(--line-strong);border-radius:var(--r);
  padding:34px 20px;text-align:center;cursor:pointer;background:var(--cream);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.cc-drop:hover,.cc-drop.over{border-color:var(--gold);background:var(--primary-soft);transform:translateY(-2px)}
.cc-drop-ic{font-size:34px;margin-bottom:10px;opacity:.75}
.cc-drop b{display:block;font-size:15px;margin-bottom:4px}
.cc-drop span{font-size:12.5px;color:var(--ink-faint)}
.cc-prev{
  max-width:220px;max-height:200px;object-fit:cover;
  border-radius:14px;margin:0 auto 12px;display:block;border:1px solid var(--line);
}
.cc-tick{
  width:86px;height:86px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  font-size:40px;color:#fff;background:linear-gradient(140deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 34px rgba(212,175,55,.4);animation:ccPop .6s var(--spring) both;
}
@keyframes ccPop{from{transform:scale(.4);opacity:0}}
.cc-ref{
  display:inline-flex;flex-direction:column;gap:4px;margin-top:22px;padding:16px 34px;
  border-radius:var(--r);background:var(--cream);border:1px solid rgba(212,175,55,.4);
}
.cc-ref span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.cc-ref b{font-family:var(--font-display);font-size:26px;letter-spacing:.04em;color:var(--primary)}
.btn-lg{padding:17px 34px;font-size:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){
  .grid-2{grid-template-columns:1fr;gap:0}
  .cc-steps-row{grid-template-columns:1fr}
  .cc-hero{padding:40px 24px}
}

/* ---------- PAYMENT MODAL (redesigned) ---------- */
.pay-modal-bg{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:20px;
  background:rgba(45,27,18,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:payFade .3s var(--ease);
}
@keyframes payFade{from{opacity:0}}
.pay-modal{
  position:relative;width:min(440px,100%);max-height:92vh;overflow-y:auto;
  border-radius:26px;background:var(--surface);
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 36px 90px rgba(45,27,18,.45);
  animation:payUp .5s var(--spring) both;
}
@keyframes payUp{from{transform:translateY(30px) scale(.95);opacity:0}}
.pay-x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);
  color:#FFF5E6;font-size:22px;line-height:1;display:grid;place-items:center;
  transition:transform .35s var(--spring),background .3s;
}
.pay-x:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.pay-modal-head{
  display:flex;align-items:center;gap:14px;padding:24px 26px;
  background:linear-gradient(130deg,var(--chocolate),var(--dark));
  color:#FFF5E6;
}
.pay-lock{
  width:44px;height:44px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;
  font-size:19px;background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.42);
}
.pay-modal-head b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800}
.pay-modal-head span{font-size:12.5px;opacity:.8}
.pay-modal-body{padding:26px}
.pay-amt-wrap{text-align:center;margin-bottom:22px}
.pay-amt-wrap>span{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
}
.pay-amt{
  font-family:var(--font-display);font-size:46px;font-weight:800;
  letter-spacing:-.03em;line-height:1.1;margin-top:6px;color:var(--ink);
}
.pay-img{
  display:grid;place-items:center;padding:16px;margin-bottom:20px;
  border-radius:var(--r);background:var(--cream);border:1px solid var(--line);
}
.pay-img img{max-width:100%;max-height:220px;object-fit:contain;border-radius:12px}
.pay-cta{
  width:100%;flex-direction:column;gap:2px;
  padding:19px 24px;border-radius:18px;
  font-size:18px;line-height:1.25;
  box-shadow:0 12px 30px rgba(139,69,19,.32);
}
.pay-cta:hover{box-shadow:0 18px 42px rgba(139,69,19,.42)}
.pay-cta-main{display:block;font-size:19px;font-weight:600;letter-spacing:.01em}
.pay-cta-sub{display:block;font-size:11.5px;font-weight:400;opacity:.75;letter-spacing:.08em}
.pay-note{
  margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);text-align:center;
  font-size:13px;color:var(--ink-soft);
  background:var(--cream);border:1px solid rgba(212,175,55,.3);
}
.pay-trust{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:18px;font-size:11.5px;color:var(--ink-faint);
}
.pay-trust span:nth-child(2){font-size:6px;opacity:.5}
.pay-fine{text-align:center;font-size:11px;color:var(--ink-faint);margin-top:8px}
@media(max-width:480px){
  .pay-modal-body{padding:20px}
  .pay-amt{font-size:38px}
  .pay-cta{padding:17px 20px}
}

/* ---------- HOMEPAGE BANNER SLOTS ---------- */
.slot-wrap{padding-bottom:12px}
.slot-band{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.slot-link{display:block;position:relative;line-height:0}
.slot-link img{
  width:100%;height:clamp(180px,26vw,300px);object-fit:cover;display:block;
  transition:transform 1s var(--ease);
}
.slot-band-wide .slot-link img{height:clamp(200px,30vw,380px)}
.slot-link:hover img{transform:scale(1.04)}
.slot-link::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(45,27,18,.82) 0%,rgba(45,27,18,.4) 48%,transparent 78%);
}
.slot-copy{
  position:absolute;left:clamp(22px,4vw,52px);top:50%;transform:translateY(-50%);
  z-index:2;max-width:min(460px,62%);line-height:1.4;color:#FFF5E6;
}
.slot-copy h3{
  font-family:var(--font-display);font-size:clamp(22px,3vw,36px);
  font-weight:800;line-height:1.15;margin-bottom:8px;
}
.slot-copy p{font-size:clamp(13px,1.4vw,15.5px);opacity:.86;margin-bottom:16px}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--dark);box-shadow:0 6px 18px rgba(212,175,55,.34);
}
@media(max-width:560px){
  .slot-copy{max-width:76%;left:20px}
  .slot-link::after{background:linear-gradient(90deg,rgba(45,27,18,.88),rgba(45,27,18,.5) 70%,rgba(45,27,18,.25))}
}

/* ---------- OCCASION COLLECTIONS ---------- */
.occ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.occ-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;
  padding:26px 24px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .35s;
}
.occ-card::before{
  content:'';position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 70%);
  transition:transform .6s var(--ease);
}
.occ-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(212,175,55,.45);
}
.occ-card:hover::before{transform:scale(1.5)}
.occ-card b{font-family:var(--font-display);font-size:21px;font-weight:800;position:relative}
.occ-card span{font-size:13px;color:var(--ink-soft);line-height:1.6;position:relative;flex:1}
.occ-card i{
  font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);position:relative;margin-top:8px;
}

/* ---------- ACTIVE FILTER CHIPS ---------- */
.active-filters[hidden]{display:none}
.active-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.afilter{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 16px;border-radius:100px;font-size:13px;font-weight:500;
  background:var(--primary-soft);border:1px solid rgba(212,175,55,.4);color:var(--primary);
  transition:transform .3s var(--spring),background .3s,border-color .3s;
}
.afilter:hover{transform:translateY(-2px);background:var(--cream);border-color:var(--gold)}
.afilter span{font-size:16px;line-height:1;opacity:.7}
.afilter-clear{background:transparent;border-style:dashed;color:var(--ink-soft)}

/* ---------- AVAILABILITY NOTICE ---------- */
.avail-note{
  display:flex;gap:15px;align-items:flex-start;
  padding:20px 24px;margin-bottom:26px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--cream),var(--primary-soft));
  border:1px solid rgba(212,175,55,.42);
}
.avail-dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:7px;
  background:var(--gold);box-shadow:0 0 0 5px rgba(212,175,55,.2);
  animation:availPulse 2.4s ease-in-out infinite;
}
@keyframes availPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(212,175,55,.22)}
  50%{box-shadow:0 0 0 9px rgba(212,175,55,.06)}
}
.avail-note b{display:block;font-size:16px;font-weight:700;margin-bottom:4px;color:var(--ink)}
.avail-note span{font-size:13.5px;color:var(--ink-soft);line-height:1.65}

/* ---------- CUSTOM CAKE DESIGN GALLERY ---------- */
.cc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.cc-design{
  display:flex;flex-direction:column;text-align:left;cursor:pointer;overflow:hidden;
  padding:0;border-radius:var(--r-lg);font:inherit;color:inherit;
  background:var(--surface);border:1.5px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .35s;
}
.cc-design:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.cc-design.on{border-color:var(--gold);box-shadow:var(--shadow-gold),0 0 0 3px rgba(212,175,55,.18)}
.cc-design-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream);display:grid;place-items:center}
.cc-design-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cc-design:hover .cc-design-img img{transform:scale(1.07)}
.cc-design-ph{font-size:44px;opacity:.35}
.cc-design-pick{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(14px);
  padding:9px 20px;border-radius:100px;white-space:nowrap;
  font-size:12.5px;font-weight:600;
  background:var(--gold);color:var(--dark);
  opacity:0;transition:opacity .4s var(--ease),transform .5s var(--spring);
}
.cc-design:hover .cc-design-pick,.cc-design.on .cc-design-pick{opacity:1;transform:translateX(-50%) translateY(0)}
.cc-design-body{padding:16px 18px 18px}
.cc-design-body b{display:block;font-family:var(--font-display);font-size:17px;font-weight:800;margin-bottom:5px}
.cc-design-body p{
  font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cc-design-meta{display:flex;flex-wrap:wrap;gap:7px}
.cc-design-meta span{
  padding:4px 11px;border-radius:100px;font-size:11.5px;font-weight:600;
  background:var(--primary-soft);color:var(--primary);
}
.cc-design-price{background:var(--forest-soft)!important;color:var(--forest)!important}
.cc-skip{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
}
.cc-skip span{font-size:14px;color:var(--ink-soft)}

/* Chosen-design banner inside the form */
.cc-chosen{
  display:flex;align-items:center;gap:16px;position:relative;
  padding:14px 18px;margin-bottom:22px;border-radius:var(--r);
  background:var(--cream);border:1px solid rgba(212,175,55,.45);
  animation:chosenIn .5s var(--spring) both;
}
@keyframes chosenIn{from{opacity:0;transform:translateY(-8px)}}
.cc-chosen img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex-shrink:0}
.cc-chosen span{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);
}
.cc-chosen b{font-family:var(--font-display);font-size:17px;font-weight:800}
.cc-chosen-x{
  margin-left:auto;width:34px;height:34px;flex-shrink:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:transparent;font-size:20px;color:var(--ink-soft);
  transition:transform .35s var(--spring),background .3s,color .3s;
}
.cc-chosen-x:hover{background:var(--wine);color:#fff;border-color:transparent;transform:rotate(90deg)}

/* Prominent form labels (dates and other key fields) */
.label-lg{font-size:16px!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:10px!important}
.label-lg span{font-size:14px!important;font-weight:400!important;color:var(--ink-faint)!important}
@media(max-width:560px){
  .cc-gallery{grid-template-columns:1fr 1fr;gap:12px}
  .cc-design-body{padding:12px 13px 14px}
  .cc-design-body b{font-size:14.5px}
  .cc-design-body p{display:none}
  .avail-note{padding:16px 18px;gap:12px}
}

/* ---------- DATE FIELD WITH A REAL UPPERCASE PLACEHOLDER ----------
   A native <input type="date"> shows the browser's own locale hint
   ("dd-mm-yyyy", "mm/dd/yyyy") and the `placeholder` attribute is ignored on it.
   So while the field is empty we make the native text transparent and show our
   own uppercase DD-MM-YYYY on top. As soon as a date is picked the class comes
   off and the browser renders the value normally.
   Note: the chosen date is still displayed in the browser's locale format —
   that part is not something CSS or JS can override. */
.date-wrap{position:relative;display:block}
.date-wrap .date-input{width:100%}
.date-input.is-empty{color:transparent}
.date-input.is-empty::-webkit-datetime-edit{opacity:0}
.date-ph{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;opacity:0;
  font-family:var(--font-body);font-size:15.5px;font-weight:600;
  letter-spacing:.1em;color:var(--ink-soft);
  transition:opacity .25s var(--ease);
}
.date-input.is-empty ~ .date-ph{opacity:1}
.date-input:focus ~ .date-ph{color:var(--primary)}
/* Keep the calendar button visible and on-brand */
.date-input::-webkit-calendar-picker-indicator{
  opacity:.65;cursor:pointer;filter:saturate(0);
  transition:opacity .25s,transform .3s var(--spring);
}
.date-input::-webkit-calendar-picker-indicator:hover{opacity:1;transform:scale(1.15)}

/* Item 4: the label itself, larger again */
.label-lg{
  font-size:17.5px!important;font-weight:700!important;
  color:var(--ink)!important;margin-bottom:11px!important;letter-spacing:-.01em;
}
.label-lg span{font-size:14.5px!important;font-weight:500!important;color:var(--ink-faint)!important}
@media(max-width:560px){
  .label-lg{font-size:16px!important}
  .date-ph{font-size:14.5px}
}

/* ============================================================
   PREMIUM PASS — badges, card typography, image reveal, confetti
   ============================================================ */

/* ---------- PRODUCT BADGES ---------- */
.pbadge{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:7px 14px;border-radius:100px;
  font-family:var(--font-body);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(45,27,18,.18);
  animation:badgeIn .6s var(--spring) both .25s;
}
@keyframes badgeIn{from{opacity:0;transform:translateY(-8px) scale(.9)}}
.badge-best{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--dark)}
.badge-new{background:linear-gradient(135deg,var(--forest),#166149);color:#fff}
.badge-pop{background:linear-gradient(135deg,var(--primary),var(--chocolate));color:#FFF5E6}
.badge-off{background:linear-gradient(135deg,var(--wine),var(--wine-deep));color:#fff}
.badge-out{background:rgba(45,27,18,.82);color:#FFF5E6}
.badge-veg{
  left:auto;right:14px;
  background:rgba(255,255,255,.9);color:var(--forest);
  border:1px solid rgba(31,122,92,.28);box-shadow:0 4px 12px rgba(45,27,18,.1);
}
[data-theme="dark"] .badge-veg{background:rgba(30,18,8,.86);border-color:rgba(79,191,149,.3);color:#4FBF95}
/* Wishlist heart clears the eggless pill */
.card-img .pbadge.badge-veg ~ .wish,.card-img .badge-veg + .wish{top:58px}

/* ---------- CARD TYPOGRAPHY ---------- */
.card-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:2px;
}
.card-name{
  font-family:var(--font-display);font-size:14.5px;font-weight:800;
  letter-spacing:-.022em;line-height:1.2;color:var(--ink);margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s;
}
.card:hover .card-name{color:var(--primary)}
.card-meta{font-size:11px;color:var(--ink-faint);margin-bottom:0}
.card .price{font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.03em}
/* Push the buttons to the bottom so every card lines up */
.card-foot{margin-top:auto;padding-top:12px}
.card-btns{display:grid;grid-template-columns:1.35fr 1fr;gap:7px}
.btn-cart{
  padding:9px 14px;font-size:12.5px;border-radius:100px;letter-spacing:.01em;min-height:35px;
  box-shadow:0 5px 16px -6px rgba(139,69,19,.55);
}
.btn-cart:hover{box-shadow:0 12px 26px -8px rgba(139,69,19,.6)}
.btn-buy{padding:9px 12px;font-size:12px;border-radius:100px;min-height:35px}

/* ---------- IMAGE REVEAL ---------- */
/* Images fade up from a soft blur as they enter — the "expensive" feel comes
   from the slow curve, not from movement. */
.reveal-img{
  opacity:0;filter:blur(6px);transform:scale(1.01);
  transition:opacity .4s var(--ease),filter .4s var(--ease),transform .4s var(--ease);
}
.reveal-img.shown{opacity:1;filter:blur(0);transform:none}

/* ---------- SECTION HEAD RHYTHM ---------- */
.section-head{margin-bottom:clamp(30px,3.6vw,52px)}
.section-head h2{font-size:clamp(30px,3.9vw,52px);line-height:1.1;letter-spacing:-.035em}
.section-head p{font-size:15.5px;color:var(--ink-soft);margin-top:10px;max-width:60ch}

/* ---------- CONFETTI (order success) ---------- */
.confetti-host{position:fixed;inset:0;pointer-events:none;z-index:800;overflow:hidden}
.confetti{
  position:absolute;top:-14px;width:9px;height:15px;opacity:0;border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{opacity:0;transform:translateY(-20px) rotate(0deg)}
  8%{opacity:1}
  100%{opacity:0;transform:translateY(105vh) rotate(720deg)}
}

@media(max-width:760px){
  .grid{grid-template-columns:1fr 1fr;gap:13px}
  .card-body{padding:11px 11px 13px}
  .card-name{font-size:14px}
  .card .price{font-size:16.5px}
  .card-foot{padding-top:6px}
  .card-btns{grid-template-columns:1fr}
  .btn-buy{display:none}
  .pbadge{font-size:9.5px;padding:5px 10px;top:10px;left:10px}
  .badge-veg{right:10px}
}

/* ---------- NAV: more air, finer underline ---------- */
.nav-links{gap:4px}
.nav-links a{
  padding:10px 18px;font-size:14.5px;font-weight:500;letter-spacing:-.005em;
}
.nav-links a::after{height:2px;border-radius:2px}
@media(min-width:761px){.nav-inner{gap:28px}}

/* ---------- BUTTONS: softer, deeper, more considered ---------- */
.btn{
  border-radius:100px;letter-spacing:.005em;
  transition:transform .4s var(--spring),box-shadow .45s var(--ease),
             background .35s,color .35s,border-color .35s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary) 0%,var(--chocolate) 100%);
  box-shadow:0 6px 18px -8px rgba(139,69,19,.7);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(139,69,19,.7)}
.btn-outline{border-width:1.5px}
.btn-outline:hover{transform:translateY(-2px)}
.btn-red{box-shadow:0 6px 18px -8px rgba(212,175,55,.75)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(212,175,55,.75)}

/* ---------- HERO TYPE ---------- */
.hero h1{
  font-size:clamp(29px,3.9vw,50px);line-height:1.08;letter-spacing:-.038em;
}
.hero-copy p{font-size:clamp(14.5px,1.4vw,16px);line-height:1.65;max-width:52ch}
.hero .btn{padding:14px 28px;font-size:14.5px}

/* ---------- PANELS + SURFACES ---------- */
.panel{
  border-radius:var(--r-xl);
  box-shadow:0 1px 2px rgba(45,27,18,.04),0 18px 44px -28px rgba(45,27,18,.3);
}
.feature,.occ-card,.cc-stepbox,.ab-list li{
  box-shadow:0 1px 2px rgba(45,27,18,.03),0 10px 26px -18px rgba(45,27,18,.22);
}

@media(max-width:960px){
  .hero{min-height:auto;padding:32px 0 40px}
  .hero h1{font-size:clamp(32px,7.4vw,46px)}
}

/* ---------- 36. MENU PAGE HEADER ---------- */
/* The menu is a browse page, not a landing page. The header is deliberately one
   compact line - title, live item count, search and sort - so the product grid
   starts as high up the page as possible while still reading as a proper
   page masthead rather than three stacked scraps of text. */
.menu-section{
  padding-top:clamp(12px,1.3vw,20px);
  padding-bottom:clamp(48px,7vw,96px);
}
.menu-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 26px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.menu-head-copy{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0;
}
.menu-head h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(23px,2.5vw,30px);line-height:1.1;letter-spacing:-.035em;
  color:var(--ink);margin:0;
}
.menu-head h1 span{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 50%,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The count reads as supporting metadata, not a second headline. */
.menu-count{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-faint);
  padding-left:14px;border-left:1px solid var(--line);white-space:nowrap;
}
.menu-head-tools{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  flex:1 1 320px;justify-content:flex-end;
}
.menu-head-tools .search-wrap{flex:1 1 240px;max-width:380px}
.menu-head-tools .search-wrap input{padding:11px 16px 11px 42px;font-size:13.5px}
.menu-head-tools .search-wrap .si{left:16px;font-size:14px}

/* Offers moved into the sidebar. That single change is what lets the product
   grid start level with the search row instead of a full band below it, and
   coupons read better here anyway - they sit with the other browse controls. */
.filters .coupon-strip{margin:0 0 26px}
.filters .coupon-strip.hide{display:none}
.filters .coupon-head{
  font-family:var(--font-display);font-size:15px;font-weight:800;
  letter-spacing:0;text-transform:none;color:var(--ink);
  margin-bottom:12px;display:flex;align-items:center;gap:11px;
}
.filters .coupon-head::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);
}
/* Stack them down the rail instead of scrolling sideways in a narrow column.
   min-width:0 is the important part - without it the flex child refuses to
   shrink below 220px and the code block gets pushed past the card's edge,
   clipping the last letter of the coupon. */
.filters .coupon-cards{flex-direction:column;overflow:visible;gap:8px}
.filters .coupon-card{min-width:0;width:100%;flex-shrink:1}
.filters .coupon-left{min-width:0;padding:9px 12px}
.filters .coupon-val{font-size:13px}
.filters .coupon-cond{overflow-wrap:anywhere}
.filters .coupon-code{flex:0 0 auto;padding:0 13px;white-space:nowrap}
.menu-section .active-filters{margin-bottom:14px}

@media(max-width:960px){
  .menu-head-tools{flex:1 1 100%;justify-content:flex-start}
}
@media(max-width:640px){
  .menu-section{padding-top:6px}
  .menu-head{padding-bottom:12px;margin-bottom:14px}
  .menu-head h1{font-size:23px}
  .menu-count{font-size:11.5px;padding-left:11px}
}

/* ---------- 37. MENU: FIRST ROW ABOVE THE FOLD ---------- */
/* Landing on /menu.html, the first row of products must be readable in full -
   photo, name, price and both buttons - with nothing clipped by the fold.
   The photo height is therefore driven by whatever vertical space is actually
   left under the header, measured at runtime by fitFirstRow() in menu.html and
   published as --menu-img-h. The clamp below is the no-JS fallback and also
   sets the hard floor/ceiling the script is allowed to pick between. */
.menu-section{--menu-img-h:clamp(220px,38vh,380px)}
.menu-section .card-img{
  height:var(--menu-img-h);
  aspect-ratio:auto;max-height:none;
}
/* Skeletons mirror the real card height so the grid never jumps on load.
   152px is the measured body block: category, name, meta, price row, buttons. */
.menu-section .skeleton{height:calc(var(--menu-img-h) + 152px)}

/* On phones the first row is two cards side by side, so the photo can stay
   generous - the script still trims it if the fold demands it. */
@media(max-width:640px){
  .menu-section{--menu-img-h:clamp(150px,26vh,250px)}
  .menu-section .skeleton{height:calc(var(--menu-img-h) + 138px)}
}

/* ---------- 38. MENU GRID DENSITY ---------- */
/* Only the menu wants the narrower, denser column - it is a browse-everything
   page. Home, product and related grids keep the wider card they already had;
   there only the height was asked to change. */
.menu-section .grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
@media(max-width:960px){
  .menu-section .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}