/* Mocharo Foods — stylesheet
   Palette: cream #FFF8EB · butter #F2CE62 · forest #203D32 · cocoa #46342A · sage #BBC8AC */

:root{
  --cream:#FFF8EB;
  --cream-deep:#FBF0DB;
  --butter:#F2CE62;
  --butter-soft:#F8E3A4;
  --forest:#203D32;
  --forest-deep:#182E26;
  --cocoa:#46342A;
  --sage:#BBC8AC;
  --sage-line:#D5DCCB;
  --ink:#243B31;
  --muted:#5C6E63;
  --danger:#A4472F;
  --ok:#2E5B43;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --shadow-pack:0 24px 40px -24px rgba(70,52,42,.35);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--forest)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--forest);line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--butter);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--forest);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip-link:focus{left:8px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  border:2px solid var(--forest);border-radius:999px;padding:12px 26px;
  cursor:pointer;text-decoration:none;line-height:1.2;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
  min-height:44px;
}
.btn-primary{background:var(--forest);color:var(--cream)}
.btn-primary:hover{background:var(--forest-deep);border-color:var(--forest-deep)}
.btn-ghost{background:transparent;color:var(--forest)}
.btn-ghost:hover{background:rgba(32,61,50,.08)}
.btn-butter{background:var(--butter);border-color:var(--butter);color:var(--forest)}
.btn-butter:hover{background:#EBC24A;border-color:#EBC24A}
.btn-sm{padding:8px 16px;font-size:.85rem;min-height:38px}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:active{transform:translateY(1px)}
.link-plain{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:80;background:rgba(255,248,235,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--sage-line);
}
.header-inner{display:flex;align-items:center;gap:14px;height:var(--header-h);max-width:var(--wrap);margin:0 auto;padding:0 20px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:6px;flex:0 0 auto}
.logo svg{width:30px;height:30px}
.logo-word{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--forest);letter-spacing:-.01em;line-height:1}
.logo-word small{display:block;font-family:var(--sans);font-weight:600;font-size:.52rem;letter-spacing:.42em;color:var(--cocoa);margin-top:1px}
.main-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto}
.main-nav>a,.nav-drop>button{
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--forest);
  text-decoration:none;background:none;border:0;cursor:pointer;
  padding:9px 13px;border-radius:999px;line-height:1.2;
}
.main-nav>a:hover,.nav-drop>button:hover{background:rgba(187,200,172,.32)}
.main-nav>a[aria-current="page"],.nav-drop>button[aria-expanded="true"]{background:var(--forest);color:var(--cream)}
.nav-drop{position:relative}
.nav-drop-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:210px;
  background:#fff;border:1px solid var(--sage-line);border-radius:var(--r);
  box-shadow:0 18px 40px -18px rgba(32,61,50,.35);padding:8px;display:none;z-index:90;
}
.nav-drop-menu.open{display:block}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink)}
.nav-drop-menu a:hover{background:var(--cream-deep)}
.nav-drop-menu hr{border:0;border-top:1px solid var(--sage-line);margin:6px 4px}
.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;border:0;background:none;
  color:var(--forest);cursor:pointer;position:relative;
}
.icon-btn:hover{background:rgba(187,200,172,.32)}
.cart-count{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;
  background:var(--butter);color:var(--forest);font-size:.68rem;font-weight:700;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cream);
}
.cart-count.hidden{display:none}
.menu-btn{display:none}
@media (max-width:860px){
  .main-nav{display:none}
  .menu-btn{display:inline-flex}
}

/* Mobile drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(32,61,50,.45);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.mobile-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(330px,88vw);background:var(--cream);
  z-index:110;transform:translateX(-102%);transition:transform .28s ease;
  display:flex;flex-direction:column;box-shadow:20px 0 50px -30px rgba(32,61,50,.5);
}
.mobile-drawer.open{transform:none}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--sage-line)}
.mobile-drawer nav{padding:12px;overflow-y:auto}
.mobile-drawer nav a{display:block;padding:13px 12px;font-size:1.05rem;font-weight:600;color:var(--forest);text-decoration:none;border-radius:10px}
.mobile-drawer nav a:hover{background:rgba(187,200,172,.3)}
.mobile-drawer nav .sub{padding-left:26px;font-size:.95rem;font-weight:500;color:var(--ink)}
.mobile-drawer nav .group-label{font-family:var(--serif);font-size:.95rem;color:var(--cocoa);padding:14px 12px 4px;font-style:italic}

/* ============ Sunrise brand device ============ */
.sunrays{color:var(--butter)}

/* ============ Page shell ============ */
#app{min-height:60vh}
.page{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section{padding:64px 0}
.section-tight{padding:44px 0}
.section-head{max-width:640px;margin-bottom:34px}
.section-head p{color:var(--muted)}

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;background:var(--cream)}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:56px 20px 84px;position:relative;z-index:2;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.8rem;
  letter-spacing:.24em;color:var(--cocoa);margin-bottom:18px;
}
.hero-eyebrow svg{width:22px;height:14px}
.hero h1{margin-bottom:.4em}
.hero-copy{font-size:1.12rem;color:var(--muted);max-width:44ch;margin-bottom:26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.hero-sun{
  position:absolute;inset:auto;width:min(470px,88%);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--butter-soft) 0%,rgba(242,206,98,.5) 44%,rgba(242,206,98,0) 72%);
}
.hero-rays{position:absolute;width:min(560px,100%);color:rgba(242,206,98,.85)}
.hero-float{position:relative;z-index:1;perspective:900px;animation:packRise .9s cubic-bezier(.2,.7,.2,1) both .1s}
.hero-pack{
  position:relative;display:block;width:min(440px,86%);margin:0 auto;
  transform:rotate(-5deg);transform-style:preserve-3d;
  filter:drop-shadow(0 40px 34px rgba(70,52,42,.30));
  animation:packBob 5.5s ease-in-out infinite 1s;
  will-change:transform;
}
@keyframes packRise{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes packBob{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.hero-pack{animation:none}.hero-float{animation:none}}
.hero-band{
  position:absolute;left:0;right:0;bottom:-2px;height:64px;color:var(--forest);z-index:1;
}
.hero-band svg{width:100%;height:100%;display:block}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding:40px 20px 72px;text-align:left}
  .hero-stage{order:-1;min-height:280px}
  .hero-pack{width:min(300px,78%)}
}

/* ============ Product cards ============ */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){.grid-products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-products{grid-template-columns:repeat(2,1fr);gap:14px}}
.pcard{
  background:#fff;border:1px solid var(--sage-line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.pcard:hover{border-color:var(--sage);transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(32,61,50,.35)}
.pcard-media{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:210px;padding:22px 16px 26px;margin-top:-26px;
}
.pcard-media .pack{
  position:relative;z-index:1;max-width:88%;max-height:170px;width:auto;height:auto;
  transform:rotate(-4deg) translateY(0);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
  filter:drop-shadow(0 14px 12px rgba(70,52,42,.18));
}
.pcard:nth-child(even) .pcard-media .pack{transform:rotate(3deg)}
.pcard:hover .pcard-media .pack{transform:rotate(0deg) translateY(-10px) scale(1.05)}
.pcard-media .pack-shadow{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:64%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,52,42,.28),rgba(70,52,42,0));
  transition:width .35s ease,opacity .35s ease;
}
.pcard:hover .pcard-media .pack-shadow{width:74%;opacity:.65}
.pcard-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard-cat{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.pcard-name{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.25;margin:0}
.pcard-name a{text-decoration:none;color:var(--forest)}
.pcard-name a::after{content:"";position:absolute;inset:0}
.pcard-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.pcard-size{color:var(--muted);font-size:.86rem}
.pcard-price{font-weight:700;color:var(--forest)}
.pcard-add{
  position:relative;z-index:2;margin:0 16px 16px;align-self:stretch;
}
.badge-soldout{position:absolute;top:12px;left:12px;background:var(--cocoa);color:var(--cream);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;z-index:2}
.badge-low{position:absolute;top:12px;left:12px;background:var(--butter);color:var(--forest);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;z-index:2}

/* ============ Shop-by-use ============ */
.use-section{background:var(--forest);color:var(--cream);position:relative}
.use-section h2{color:var(--cream)}
.use-section .section-head p{color:var(--sage)}
.use-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.use-tab{
  border:2px solid var(--sage);background:transparent;color:var(--cream);
  border-radius:999px;padding:10px 22px;font-weight:600;font-size:.95rem;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;min-height:44px;
}
.use-tab:hover{border-color:var(--butter)}
.use-tab[aria-selected="true"]{background:var(--butter);border-color:var(--butter);color:var(--forest)}
.use-note{color:var(--sage);max-width:56ch;margin-bottom:24px;min-height:2.6em}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:760px){.use-grid{grid-template-columns:1fr}}
.use-card{
  background:rgba(255,248,235,.06);border:1px solid rgba(187,200,172,.35);
  border-radius:var(--r-lg);padding:14px;display:flex;gap:14px;align-items:center;
  text-decoration:none;color:var(--cream);transition:background .18s,border-color .18s;
}
.use-card:hover{background:rgba(255,248,235,.12);border-color:var(--butter)}
.use-card img{width:74px;height:74px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 5px 4px rgba(70,52,42,.2))}
.use-card b{font-family:var(--serif);font-size:1.05rem;display:block}
.use-card span{color:var(--sage);font-size:.86rem}

/* ============ Featured product / tilt ============ */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.feature{grid-template-columns:1fr;gap:28px}}
.tilt-frame{perspective:900px;display:flex;justify-content:center;align-items:center;min-height:300px;position:relative}
.tilt-frame::before{
  content:"";position:absolute;width:min(380px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(242,206,98,.55),rgba(242,206,98,0) 70%);
}
.tilt-card{
  position:relative;width:min(430px,92%);transform-style:preserve-3d;
  transition:transform .18s ease-out;will-change:transform;
  filter:drop-shadow(0 30px 26px rgba(70,52,42,.28));
}
.tilt-card img{width:100%;height:auto;display:block}
.feature-info .price-line{display:flex;align-items:baseline;gap:12px;margin:10px 0 18px}
.feature-info .price{font-size:1.5rem;font-weight:700;color:var(--forest)}
.feature-info .size{color:var(--muted)}
.feature-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ============ Bundle band ============ */
.bundle-band{background:var(--butter-soft);position:relative;overflow:hidden}
.bundle-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.bundle-inner{grid-template-columns:1fr}}
.bundle-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:260px}
.bundle-stage .pack{max-width:min(460px,96%);height:auto;transform:rotate(2deg);filter:drop-shadow(0 26px 22px rgba(70,52,42,.30));transition:transform .35s ease}
.bundle-inner:hover .bundle-stage .pack{transform:rotate(0deg) translateY(-6px)}
.bundle-stage .pack-shadow{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:70%;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(32,61,50,.35),rgba(32,61,50,0))}

/* ============ Brand band ============ */
.brand-band{background:var(--cream)}
.brand-band .inner{max-width:720px;margin:0 auto;text-align:center}
.brand-band .sun-mark{width:54px;margin:0 auto 18px;color:var(--butter)}
.brand-band p{font-size:1.15rem;color:var(--cocoa)}

/* ============ Recipes ============ */
.grid-recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.grid-recipes{grid-template-columns:1fr}}
.rcard{
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  border:1px solid var(--sage-line);background:#fff;display:flex;flex-direction:column;
  transition:transform .2s ease,border-color .2s ease;
}
.rcard:hover{transform:translateY(-3px);border-color:var(--sage)}
.rcard-art{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.rcard-art svg{width:100%;height:100%}
.rcard-body{padding:16px 18px 18px}
.rcard-body h3{margin-bottom:4px;font-size:1.15rem}
.rcard-body span{color:var(--muted);font-size:.88rem}

/* ============ Newsletter ============ */
.newsletter{background:var(--forest);color:var(--cream)}
.newsletter h2{color:var(--cream)}
.newsletter p{color:var(--sage)}
.newsletter-form{display:flex;gap:10px;max-width:480px;flex-wrap:wrap}
.newsletter-form input{flex:1 1 220px}
.demo-note{font-size:.8rem;color:var(--sage);margin-top:10px}

/* ============ Forms ============ */
input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--sage);border-radius:12px;
  padding:11px 14px;width:100%;min-height:46px;
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:3px solid var(--butter);outline-offset:1px;border-color:var(--forest)}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:6px;color:var(--forest)}
.field{margin-bottom:16px}
.field .hint{font-weight:400;color:var(--muted);font-size:.8rem;margin-left:4px}
.field-error{color:var(--danger);font-size:.85rem;margin-top:5px;display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--danger)}
.field.invalid .field-error{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-msg{border-radius:12px;padding:12px 16px;margin:14px 0;font-size:.95rem;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#E7F0E4;color:var(--ok);border:1px solid var(--sage)}
.form-msg.err{background:#F7E8E2;color:var(--danger);border:1px solid #E0BBAC}

/* ============ Shop page ============ */
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
@media (max-width:860px){.shop-layout{grid-template-columns:1fr}}
.shop-side h3{font-size:1rem;margin-bottom:10px}
.shop-side .cat-list{list-style:none;margin:0 0 26px;padding:0}
.shop-side .cat-list a{
  display:block;padding:8px 12px;border-radius:999px;text-decoration:none;
  color:var(--ink);font-weight:500;font-size:.95rem;
}
.shop-side .cat-list a:hover{background:rgba(187,200,172,.3)}
.shop-side .cat-list a.active{background:var(--forest);color:var(--cream)}
.shop-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
}
.shop-toolbar .count{color:var(--muted);font-size:.92rem;margin-right:auto}
.shop-toolbar select{width:auto;min-height:42px;padding:8px 34px 8px 12px}
.shop-search{position:relative;flex:1 1 200px;max-width:280px}
.empty-state{
  text-align:center;padding:56px 20px;border:1.5px dashed var(--sage);border-radius:var(--r-lg);
}
.empty-state p{color:var(--muted)}

/* ============ Product page ============ */
.crumbs{font-size:.85rem;color:var(--muted);margin:22px 0 10px;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--forest);text-decoration:underline}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-bottom:56px}
@media (max-width:860px){.pdp{grid-template-columns:1fr;gap:26px}}
.pdp-media{position:sticky;top:calc(var(--header-h) + 18px)}
@media (max-width:860px){.pdp-media{position:static}}
.pdp-img{
  border:0;background:none;cursor:zoom-in;position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;min-height:340px;
  perspective:900px;padding:0;
}
.pdp-img::before{
  content:"";position:absolute;width:min(400px,92%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(242,206,98,.5),rgba(242,206,98,0) 70%);
}
.pdp-img .pack{
  position:relative;z-index:1;width:min(440px,94%);height:auto;transform-style:preserve-3d;
  transition:transform .18s ease-out;will-change:transform;
  filter:drop-shadow(0 30px 26px rgba(70,52,42,.3));
}
.pdp-img .pack-shadow{
  position:absolute;bottom:10%;left:50%;transform:translateX(-50%);
  width:60%;height:20px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,52,42,.28),rgba(70,52,42,0));
}
.pdp-img .zoom-hint{
  position:absolute;bottom:12px;right:12px;background:rgba(255,248,235,.92);
  border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:600;color:var(--forest);
  display:flex;align-items:center;gap:6px;pointer-events:none;
}
.pdp-info h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.pdp-cat{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pdp-price-line{display:flex;align-items:baseline;gap:14px;margin:6px 0 16px}
.pdp-price{font-size:1.6rem;font-weight:700;color:var(--forest)}
.pdp-size{color:var(--muted)}
.pdp-desc{font-size:1.05rem;color:var(--cocoa);max-width:52ch}
.qty{display:inline-flex;align-items:center;border:2px solid var(--forest);border-radius:999px;overflow:hidden}
.qty button{
  width:44px;height:44px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--forest);font-weight:700;
}
.qty button:hover{background:rgba(187,200,172,.3)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty input{
  width:52px;border:0;text-align:center;font-weight:700;font-size:1rem;min-height:0;padding:0;background:transparent;
}
.pdp-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0 8px}
.stock-note{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.stock-note.low{color:var(--danger)}
.uses{margin:20px 0 8px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.uses li{background:var(--cream-deep);border:1px solid var(--sage-line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;color:var(--cocoa)}
.acc{border-top:1px solid var(--sage-line);margin-top:24px}
.acc-item{border-bottom:1px solid var(--sage-line)}
.acc-trigger{
  width:100%;background:none;border:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px 4px;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--forest);cursor:pointer;text-align:left;
}
.acc-trigger svg{transition:transform .2s ease;flex:0 0 auto}
.acc-trigger[aria-expanded="true"] svg{transform:rotate(45deg)}
.acc-panel{padding:0 4px 18px;color:var(--cocoa);display:none}
.acc-panel.open{display:block}
.bundle-list{margin:0;padding-left:20px}
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--sage-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;box-shadow:0 -12px 30px -18px rgba(32,61,50,.35);
}
.sticky-buy .sb-name{font-weight:700;font-size:.9rem;line-height:1.2}
.sticky-buy .sb-price{color:var(--muted);font-size:.85rem}
.sticky-buy .btn{margin-left:auto}
@media (max-width:860px){.sticky-buy.show{display:flex}}

/* ============ Cart drawer & page ============ */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--cream);
  z-index:110;transform:translateX(103%);transition:transform .28s ease;
  display:flex;flex-direction:column;box-shadow:-20px 0 50px -30px rgba(32,61,50,.5);
}
.cart-drawer.open{transform:none}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--sage-line)}
.cart-drawer-head h2{margin:0;font-size:1.3rem}
.cart-lines{flex:1;overflow-y:auto;padding:14px 18px}
.cart-line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--sage-line);align-items:center}
.cart-line img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(70,52,42,.18))}
.cart-line .cl-name{font-weight:700;font-size:.95rem;line-height:1.3}
.cart-line .cl-name a{text-decoration:none;color:var(--forest)}
.cart-line .cl-size{color:var(--muted);font-size:.82rem}
.cart-line .cl-price{font-weight:700;text-align:right}
.cart-line .cl-controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.cart-line .qty button{width:36px;height:36px}
.cart-line .qty input{width:38px}
.cl-remove{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.82rem;text-decoration:underline;padding:4px}
.cl-remove:hover{color:var(--danger)}
.cart-foot{border-top:1px solid var(--sage-line);padding:16px 18px calc(16px + env(safe-area-inset-bottom));background:var(--cream)}
.cart-totals{margin-bottom:14px}
.tot-row{display:flex;justify-content:space-between;font-size:.95rem;padding:3px 0}
.tot-row.grand{font-weight:700;font-size:1.15rem;border-top:1px solid var(--sage-line);margin-top:8px;padding-top:10px}
.tot-row .neg{color:var(--ok)}
.cart-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.cart-empty svg{width:60px;margin:0 auto 14px;color:var(--sage)}
.cart-page-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start}
@media (max-width:860px){.cart-page-layout{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--sage-line);border-radius:var(--r-lg);padding:22px}
.discount-row{display:flex;gap:10px;margin:14px 0}
.discount-row input{flex:1}
.discount-msg{font-size:.85rem;margin-top:-6px;margin-bottom:10px}
.discount-msg.ok{color:var(--ok)}
.discount-msg.err{color:var(--danger)}
.applied-code{
  display:inline-flex;align-items:center;gap:8px;background:#E7F0E4;color:var(--ok);
  border-radius:999px;padding:5px 8px 5px 14px;font-weight:700;font-size:.85rem;margin:8px 0;
}
.applied-code button{background:none;border:0;cursor:pointer;color:var(--ok);font-size:1rem;line-height:1;padding:2px 6px}
.free-del-note{font-size:.83rem;color:var(--muted);margin-top:8px}

/* ============ Checkout ============ */
.checkout-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:start}
@media (max-width:860px){.checkout-layout{grid-template-columns:1fr}}
.demo-banner{
  background:var(--butter-soft);border:1px solid var(--butter);border-radius:12px;
  padding:11px 16px;font-size:.9rem;font-weight:600;color:var(--cocoa);margin-bottom:22px;
}
.pay-option{
  display:flex;gap:12px;align-items:flex-start;border:2px solid var(--forest);
  border-radius:14px;padding:14px 16px;background:var(--cream-deep);
}
.pay-option b{display:block}
.pay-option span{font-size:.85rem;color:var(--muted)}
.summary-lines{margin-bottom:12px}
.summary-line{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--sage-line);font-size:.92rem}
.summary-line img{width:46px;height:46px;object-fit:contain}
.summary-line .n{flex:1;line-height:1.3}
.summary-line .n small{color:var(--muted);display:block}

/* ============ Confirmation ============ */
.confirm-hero{text-align:center;padding:56px 20px 30px}
.confirm-hero .tick{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:var(--butter);display:flex;align-items:center;justify-content:center;color:var(--forest)}
.order-ref{font-family:var(--serif);font-size:1.3rem;color:var(--cocoa)}
.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto}
@media (max-width:760px){.confirm-grid{grid-template-columns:1fr}}

/* ============ Recipe pages ============ */
.recipe-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:34px}
@media (max-width:760px){.recipe-hero{grid-template-columns:1fr}}
.recipe-hero .rcard-art{border-radius:var(--r-lg);border:1px solid var(--sage-line)}
.recipe-meta{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0;color:var(--cocoa);font-size:.92rem}
.recipe-meta b{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.recipe-cols{display:grid;grid-template-columns:.85fr 1.3fr;gap:40px;align-items:start}
@media (max-width:760px){.recipe-cols{grid-template-columns:1fr}}
.recipe-cols ul{padding-left:20px}
.recipe-cols ol{padding-left:22px}
.recipe-cols ol li{margin-bottom:12px}
.recipe-uses-product{
  margin-top:28px;background:var(--cream-deep);border:1px solid var(--sage-line);
  border-radius:var(--r-lg);padding:16px;display:flex;gap:16px;align-items:center;
}
.recipe-uses-product img{width:70px;height:70px;border-radius:12px;object-fit:cover}

/* ============ Story / static pages ============ */
.prose{max-width:680px}
.prose p{color:var(--cocoa)}
.prose h2{margin-top:1.6em}
.story-hero{background:var(--butter-soft);padding:70px 0}
.story-hero h1{max-width:16ch}
.draft-note{
  background:var(--cream-deep);border:1px dashed var(--sage);border-radius:12px;
  padding:10px 16px;font-size:.85rem;color:var(--muted);margin-bottom:24px;
}

/* ============ Overlays ============ */
.overlay{
  position:fixed;inset:0;z-index:120;background:rgba(32,61,50,.5);
  display:none;align-items:flex-start;justify-content:center;padding:8vh 20px 20px;
}
.overlay.open{display:flex}
.overlay-panel{
  background:var(--cream);border-radius:var(--r-lg);width:min(620px,100%);
  box-shadow:0 30px 80px -30px rgba(24,46,38,.6);max-height:82vh;display:flex;flex-direction:column;
  animation:pageIn .25s ease both;
}
.overlay-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--sage-line)}
.overlay-head input{flex:1}
.overlay-body{overflow-y:auto;padding:10px 18px 18px}
.search-hit{display:flex;gap:14px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.search-hit:hover{background:var(--cream-deep)}
.search-hit img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(70,52,42,.18))}
.search-hit b{color:var(--forest)}
.search-hit small{color:var(--muted);display:block}
.zoom-overlay{padding:4vh 16px;align-items:center}
.zoom-panel{background:transparent;box-shadow:none;max-height:none;width:min(760px,100%)}
.zoom-panel img{width:100%;border-radius:var(--r-lg)}
.zoom-close{position:fixed;top:16px;right:16px;background:var(--cream);z-index:2}

/* ============ Toast ============ */
.toast-zone{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:140;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--forest);color:var(--cream);border-radius:999px;padding:11px 22px;
  font-weight:600;font-size:.92rem;box-shadow:0 14px 30px -14px rgba(24,46,38,.7);
  animation:toastIn .25s ease both;display:flex;gap:8px;align-items:center;
}
.toast.err{background:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ Footer ============ */
.site-footer{background:var(--forest);color:var(--sage);margin-top:0}
.footer-main{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:32px;
  max-width:var(--wrap);margin:0 auto;padding:54px 20px 34px;
}
@media (max-width:860px){.footer-main{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-main{grid-template-columns:1fr}}
.site-footer h3{color:var(--cream);font-size:1rem;font-family:var(--sans);font-weight:700;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--sage);text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:var(--cream);text-decoration:underline}
.footer-brand .logo-word{color:var(--cream)}
.footer-brand .logo-word small{color:var(--sage)}
.footer-brand p{font-size:.9rem;margin-top:12px;max-width:30ch}
.footer-news input{background:rgba(255,248,235,.1);border-color:rgba(187,200,172,.5);color:var(--cream)}
.footer-news input::placeholder{color:rgba(187,200,172,.8)}
.footer-bottom{border-top:1px solid rgba(187,200,172,.25)}
.footer-bottom .inner{
  max-width:var(--wrap);margin:0 auto;padding:16px 20px;display:flex;gap:16px;flex-wrap:wrap;
  justify-content:space-between;font-size:.82rem;
}
.footer-bottom a{font-size:.82rem}

/* Print */
@media print{
  .site-header,.site-footer,.sticky-buy,.toast-zone,.no-print{display:none!important}
  body{background:#fff}
  .page{animation:none}
}


/* ============ V2 design layer ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.zoom-panel{background:var(--cream)}
#zoom-img{max-width:min(760px,92vw);max-height:82vh;width:auto;height:auto;filter:drop-shadow(0 30px 30px rgba(70,52,42,.3))}

.hero-stage{min-height:400px}
@media (max-width:860px){
  .hero-stage{min-height:300px}
  .hero-pack{width:min(320px,82%)}
  .pcard-media{height:170px;margin-top:-18px}
  .pcard-media .pack{max-height:132px}
}






/* ================================================================
   V5 EDITORIAL THEME — aubergine / porcelain / coral / powder / lilac
   Premium contemporary food editorial: expressive serif, fine rules,
   open product layouts, intentional asymmetry, realistic shadows.
   ================================================================ */
:root{
  --aubergine:#321E35;
  --aubergine-deep:#271528;
  --porcelain:#F7F1EA;
  --porcelain-deep:#EFE6DB;
  --coral:#DD7962;
  --coral-deep:#C96350;
  --powder:#DCE6EF;
  --lilac:#E9DDEA;
  --cream:#F7F1EA;
  --cream-deep:#EFE6DB;
  --forest:#321E35;          /* legacy var -> aubergine so inner chrome follows */
  --butter:#DD7962;
  --butter-soft:#E9DDEA;
  --cocoa:#4A3A4C;
  --ink:#321E35;
  --muted:#7A6C77;
  --sage:#C9B9CB;
  --sage-line:rgba(50,30,53,.14);
  --line:rgba(50,30,53,.14);
  --line-light:rgba(247,241,234,.22);
  --danger:#B0432E;
  --r-lg:8px;
  --shadow-soft:0 24px 54px -30px rgba(39,21,40,.45);
}
body{background:var(--porcelain);color:var(--ink)}
body::after{content:none}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
.microcaps{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.center-link{text-align:center;margin-top:34px}

.section-head{margin-bottom:42px}
.section-head h2{font-size:clamp(1.9rem,3.8vw,2.9rem);color:var(--ink)}
.section-head h2::after{content:none}
.section-head p{color:var(--muted)}
.section-head .microcaps{margin-top:10px;color:var(--muted)}

/* ---- buttons ---- */
.btn{
  border-radius:4px;border:1px solid transparent;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:none;
  padding:14px 26px;box-shadow:none;font-family:var(--sans);
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(39,21,40,.5)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-coral{background:var(--coral);color:var(--aubergine);border-color:var(--coral)}
.btn-coral:hover{background:var(--coral-deep);color:#fff}
.btn-dark,.btn-primary{background:var(--aubergine);color:var(--porcelain);border-color:var(--aubergine)}
.btn-dark:hover,.btn-primary:hover{background:var(--aubergine-deep)}
.btn-butter{background:var(--coral);color:var(--aubergine);border-color:var(--coral)}
.btn-butter:hover{background:var(--coral-deep);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--porcelain)}
.btn-outline-light{background:transparent;border:1px solid rgba(247,241,234,.6);color:var(--porcelain)}
.btn-outline-light:hover{background:var(--porcelain);color:var(--aubergine)}
.btn-sm{padding:10px 18px;font-size:.78rem}
.btn .arr{display:none}
.link-plain{color:var(--aubergine);font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:3px}
.link-plain:hover{color:var(--coral-deep)}

/* ---- header: compact porcelain ---- */
.site-header{background:rgba(247,241,234,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:none}
.main-nav a,.main-nav button{font-size:.9rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink)}
.main-nav a:hover,.main-nav button:hover{color:var(--coral-deep)}
.logo svg{color:var(--coral)}
.logo-word{color:var(--aubergine)}
.logo-word small{color:var(--coral);letter-spacing:.3em}
.nav-drop-menu{border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-soft);background:var(--porcelain)}
.nav-drop-menu a{font-size:.9rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-count{background:var(--coral);color:var(--aubergine);border:1px solid var(--porcelain);font-weight:700}
.soon-pill{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--powder);color:var(--aubergine);border-radius:999px;padding:3px 8px;
}

/* ---- hero: deep aubergine editorial ---- */
.hero{background:var(--aubergine);color:var(--porcelain);border-bottom:0}
.hero-band{display:none}
.hero-inner{padding:76px 24px 84px;gap:30px;grid-template-columns:1.05fr 1fr;align-items:center}
.hero-eyebrow{color:var(--coral);font-weight:600;letter-spacing:.32em;font-size:.7rem;display:flex;align-items:center;gap:12px}
.hero-eyebrow::after{content:"";width:44px;height:1px;background:rgba(221,121,98,.6)}
.hero-eyebrow svg{display:none}
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.02;color:var(--porcelain);margin-bottom:.35em}
.hero h1 em{font-style:normal}
.hero-copy{color:rgba(247,241,234,.85);font-size:1.18rem;max-width:40ch;margin-bottom:30px}
.hero-micro{margin-top:30px;font-size:.66rem;font-weight:600;letter-spacing:.34em;color:rgba(247,241,234,.55);display:flex;align-items:center;gap:14px}
.hero-micro::before{content:"";width:34px;height:1px;background:rgba(247,241,234,.3)}
.hero-stage{min-height:400px}
.hero-sun{display:none}
.hero-rays{display:none}
.hero-stage::after{content:none}
.hero-glow{
  position:absolute;width:min(500px,96%);aspect-ratio:1.4;border-radius:50%;
  background:radial-gradient(ellipse at 50% 55%,rgba(221,121,98,.22),rgba(221,121,98,0) 65%);
}
.hero-float{position:relative;z-index:1;perspective:900px;animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both .1s}
.hero-pack{
  display:block;width:min(470px,92%);margin:0 auto;transform:rotate(-2deg);
  transform-style:preserve-3d;will-change:transform;animation:none;
  filter:drop-shadow(0 44px 34px rgba(0,0,0,.5));
}
.hero-ground{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:72%;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));
}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding:46px 20px 64px}
  .hero-stage{order:2;min-height:280px}   /* copy above product on mobile */
  .hero-copy-col{order:1}
  .hero-pack{width:min(330px,86%)}
}

/* ---- product columns: open, no heavy cards ---- */
.grid-products{gap:34px 26px}
.pcard{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.pcard:hover{transform:none;box-shadow:none;border:0}
.pcard-media{
  background:var(--porcelain-deep);border:0;border-radius:6px;
  height:230px;padding:24px 16px 30px;margin-top:0;
}
.pcard-media::before{content:none}
.pcard-media .pack{
  max-height:172px;max-width:92%;width:auto;height:auto;
  transform:scale(var(--pscale,1));
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 16px 13px rgba(39,21,40,.28));
}
.pcard:nth-child(even) .pcard-media .pack{transform:scale(var(--pscale,1))}
.pcard:hover .pcard-media .pack{transform:scale(calc(var(--pscale,1)*1.05)) translateY(-7px)}
.pcard-media .pack-shadow{bottom:14px;background:radial-gradient(closest-side,rgba(39,21,40,.3),rgba(39,21,40,0))}
.pcard-body{padding:16px 4px 10px;text-align:center}
.pcard-cat{color:var(--muted);font-size:.64rem;letter-spacing:.28em}
.pcard-name{font-size:1.18rem}
.pcard-name a{color:var(--ink)}
.pcard-meta{justify-content:center;gap:10px;color:var(--muted)}
.pcard-price{color:var(--ink);font-weight:600}
.pcard-add{
  margin:6px auto 0;display:inline-block;background:var(--aubergine);color:var(--porcelain);
  border:1px solid var(--aubergine);
}
.pcard-add:hover{background:var(--aubergine-deep)}
.pcard-add:disabled{background:var(--porcelain-deep);border-color:var(--line);color:var(--muted)}
.badge-low,.badge-soldout{
  border:0;background:var(--coral);color:var(--aubergine);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  box-shadow:none;border-radius:3px;
}
.badge-soldout{background:var(--porcelain-deep);color:var(--muted)}

/* ---- editorial toast banner: live HTML text over the image's open area ---- */
.editorial{position:relative;min-height:460px;display:flex;align-items:center;overflow:hidden}
.editorial-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.editorial-copy{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;
  padding:64px 24px;
}
.editorial-copy h2{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--aubergine);max-width:11ch}
.editorial-copy p{color:var(--cocoa);font-size:1.08rem;max-width:34ch;margin:14px 0 26px}
@media (max-width:760px){
  .editorial{min-height:0;flex-direction:column;align-items:stretch;background:var(--porcelain-deep)}
  .editorial-img{position:static;height:260px;object-position:70% 55%;order:2}
  .editorial-copy{order:1;padding:40px 20px 28px;text-align:left}
}

/* ---- what are you making: lilac ---- */
.makes-section{background:var(--lilac)}
.use-section{background:var(--lilac)}
.makes-section .section-head p{color:var(--cocoa)}
.use-tabs{display:flex;gap:26px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.use-tab{
  border:0;border-bottom:2px solid transparent;border-radius:0;background:none;
  color:var(--cocoa);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:8px 2px;box-shadow:none;cursor:pointer;
}
.use-tab:hover{color:var(--aubergine)}
.use-tab[aria-selected="true"]{color:var(--aubergine);border-bottom-color:var(--coral);background:none;box-shadow:none}
.use-note{color:var(--cocoa);text-align:center;max-width:62ch;margin:0 auto 26px}
.use-card{border:0;border-radius:6px;background:var(--porcelain);box-shadow:none}
.use-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.use-card img{filter:drop-shadow(0 5px 4px rgba(39,21,40,.25))}

/* ---- pantry band: powder blue split ---- */
.pantry-band{
  background:var(--powder);display:grid;grid-template-columns:1fr 1.15fr;align-items:center;min-height:420px;
}
.pantry-copy{padding:56px clamp(24px,6vw,84px)}
.coming-tag{color:var(--coral-deep);letter-spacing:.3em}
.pantry-copy h2{font-size:clamp(2rem,4vw,3rem);margin:12px 0 12px;color:var(--aubergine)}
.pantry-copy p{color:var(--cocoa);font-size:1.06rem;max-width:36ch}
.pantry-links{display:flex;gap:26px;margin-top:24px}
.pantry-img{width:100%;height:100%;object-fit:cover;min-height:320px}
@media (max-width:860px){
  .pantry-band{grid-template-columns:1fr}
  .pantry-img{min-height:240px;order:2}
  .pantry-copy{order:1;padding:44px 20px 30px}
}

/* ---- bundle feature ---- */
.bundle-feature{background:var(--porcelain)}
.bundle-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
@media (max-width:860px){.bundle-inner{grid-template-columns:1fr}}
.bundle-band{background:var(--porcelain);border:0}
.bundle-stage{min-height:280px}
.bundle-stage .pack{max-width:min(520px,100%);transform:none;filter:drop-shadow(0 28px 24px rgba(39,21,40,.32))}
.bundle-inner:hover .bundle-stage .pack{transform:translateY(-5px)}
.bundle-stage .pack-shadow{background:radial-gradient(closest-side,rgba(39,21,40,.3),rgba(39,21,40,0))}
.bundle-info h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:8px 0 10px}
.bundle-info>p{color:var(--muted);max-width:46ch}
.bundle-list{list-style:none;margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:8px}
.bundle-list li{font-size:.95rem;color:var(--cocoa);display:flex;gap:10px;align-items:center}
.bundle-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral)}
.price-line .price{color:var(--ink)}

/* ---- coming-soon category pages ---- */
.soon-hero{
  display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:calc(100vh - var(--header-h) - 200px);
  background:var(--accent,#DCE6EF);
}
.soon-copy{padding:64px clamp(24px,6vw,84px)}
.soon-copy h1{font-size:clamp(2.4rem,5vw,3.8rem);margin:10px 0 14px}
.soon-intro{color:var(--cocoa);font-size:1.08rem;max-width:44ch}
.soon-note{color:var(--muted);font-size:.9rem;margin:14px 0 26px;max-width:44ch}
.soon-img{width:100%;height:100%;object-fit:cover;min-height:340px}
@media (max-width:860px){
  .soon-hero{grid-template-columns:1fr}
  .soon-img{order:2;min-height:230px}
  .soon-copy{order:1;padding:40px 20px 28px}
}

/* ---- recipes ---- */
.rcard{border:0;border-radius:6px;background:#fff;box-shadow:none}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border:0}
.rcard-art{border-bottom:1px solid var(--line)}
.rcard-body h3{font-size:1.16rem}

/* ---- forms ---- */
input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:4px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aubergine);box-shadow:0 0 0 3px rgba(50,30,53,.12)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--danger);box-shadow:0 0 0 3px rgba(176,67,46,.12)}
.newsletter{background:var(--porcelain-deep);border:0}
.newsletter .demo-note,.newsletter .section-head p{color:var(--muted)}

/* ---- inner chrome ---- */
.crumbs a:hover{color:var(--coral-deep)}
.shop-side .cat-list a{border-radius:4px;display:flex;align-items:center;gap:8px}
.shop-side .cat-list a:hover{background:var(--lilac)}
.shop-side .cat-list a.active{background:var(--aubergine);color:var(--porcelain)}
.empty-state{border:1px dashed var(--muted)}
.acc{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:none}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc + .acc{margin-top:0}
.summary-card,.pay-option,.order-card{border:1px solid var(--line);box-shadow:none;border-radius:8px;background:#fff}
.demo-banner{border:1px solid var(--coral);background:#F9E9E3;box-shadow:none;border-radius:6px;color:var(--aubergine)}
.cart-drawer{border-left:1px solid var(--line);background:var(--porcelain)}
.toast{border:0;box-shadow:var(--shadow-soft);background:var(--aubergine);color:var(--porcelain);font-weight:500}
.pdp-img::before{content:none}
.pdp-img .pack{transform:scale(var(--pscale,1));filter:drop-shadow(0 30px 26px rgba(39,21,40,.35))}
.pdp-img{background:var(--porcelain-deep);border-radius:8px;min-height:380px}
.pdp-cat{color:var(--muted);letter-spacing:.26em}
.pdp-price{color:var(--ink)}
.qty{border:1px solid var(--ink);border-radius:4px}
.zoom-hint{background:rgba(247,241,234,.95);border:1px solid var(--line);color:var(--aubergine);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumb{
  width:66px;height:66px;border:1px solid var(--line);border-radius:6px;background:var(--porcelain-deep);
  padding:8px;cursor:pointer;
}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-thumb.active{border-color:var(--aubergine);box-shadow:0 0 0 1px var(--aubergine)}

/* ---- footer: aubergine ---- */
.site-footer{background:var(--aubergine);border-top:0;color:var(--porcelain)}
.site-footer h3{color:var(--coral);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.footer-brandline{font-family:var(--serif);font-size:1.15rem;color:var(--porcelain);margin:8px 0 6px}
.footer-bottom{border-top:1px solid var(--line-light)}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.grid-products .pcard.reveal{transition-delay:calc(var(--i,0)*80ms)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.zoom-panel{background:var(--porcelain)}
#zoom-img{max-width:min(760px,92vw);max-height:82vh;width:auto;height:auto;filter:drop-shadow(0 30px 30px rgba(39,21,40,.4))}
@media (max-width:860px){
  .pcard-media{height:190px}
  .pcard-media .pack{max-height:146px}
}

/* ---- journal ---- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.bcard{background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.bcard-head{display:flex;align-items:center;justify-content:center;height:150px;background:var(--tint,var(--lilac))}
.bcard-mark svg{width:44px;height:44px;color:var(--aubergine);opacity:.75}
.bcard-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard-body h2{font-size:1.22rem;line-height:1.3}
.bcard-body h2 a{color:var(--ink);text-decoration:none}
.bcard-body h2 a:hover{color:var(--coral-deep)}
.bcard-excerpt{color:var(--muted);font-size:.95rem;flex:1}
.blog-hero{background:var(--tint,var(--lilac));padding:56px 0 46px;margin-bottom:40px}
.blog-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);max-width:22ch;margin-top:10px}
.blog-body{max-width:760px;padding-bottom:70px}
.blog-body .prose p{font-size:1.05rem;line-height:1.75;color:var(--cocoa)}
.blog-body .prose h2{font-size:1.4rem;margin:34px 0 10px}
.blog-related{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.blog-related h3{margin-bottom:16px}