/* =========================================================
   [Bakery Name] — shared styles (mockup)
   Palette: creams, flour white, crust browns, terracotta + sage accents
   ========================================================= */
:root{
  --flour:#FFFCF6; --cream:#F8F1E5; --cream-2:#F1E6D3; --oat:#E7D8BF;
  --crust:#9A6232; --crust-dark:#5C3A1E; --ink:#2F2219; --muted:#6B5848;
  --accent:#C4643A; --accent-soft:#F4D9C6; --sage:#6F8F6B; --sage-soft:#DCE6D6;
  --honey:#E3A93F; --line:#E6D9C4; --danger:#A33A2A;
  --radius:22px; --radius-sm:14px; --shadow:0 1px 2px rgba(60,35,15,.06),0 10px 30px -12px rgba(60,35,15,.22);
  --shadow-lg:0 30px 60px -25px rgba(60,35,15,.35);
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.22,.8,.24,1);
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(rgba(154,98,50,.05) 1px,transparent 1px);background-size:22px 22px;overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;color:var(--crust-dark);font-variation-settings:"SOFT" 100,"WONK" 0}
h1{font-size:clamp(2.4rem,5.6vw,4.6rem)} h2{font-size:clamp(1.9rem,3.6vw,3rem)} h3{font-size:clamp(1.2rem,1.8vw,1.45rem)}
p{margin:0 0 1em} a{color:var(--crust-dark);text-underline-offset:3px}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:.5em;align-items:center}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center}
.container{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.section{padding-block:clamp(4rem,9vw,8rem);position:relative}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:1rem;top:-100px;background:var(--crust-dark);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:200}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.placeholder-brand{background:linear-gradient(transparent 62%,rgba(227,169,63,.45) 62%);padding:0 .1em}

/* ---------- Buttons ---------- */
.btn{--bg:var(--crust-dark);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 1rem/1 var(--sans);
  padding:.95em 1.5em;border-radius:999px;border:2px solid var(--bg);background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;box-shadow:0 8px 20px -10px rgba(92,58,30,.6);min-height:44px}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(92,58,30,.7)}
.btn:active{transform:translateY(0)}
.btn-ghost{--bg:transparent;--fg:var(--crust-dark);border-color:var(--crust-dark);box-shadow:none}
.btn-ghost:hover{background:var(--crust-dark);color:#fff}
.btn-accent{--bg:var(--accent);border-color:var(--accent)}
.btn-sage{--bg:#4F6E4B;border-color:#4F6E4B}
.btn-sm{padding:.6em 1em;font-size:.9rem;min-height:38px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--flour);cursor:pointer;color:var(--crust-dark)}
.icon-btn:hover{background:var(--cream-2)}

/* ---------- Header ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:linear-gradient(90deg,var(--honey),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
.site-header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.scrolled{background:rgba(255,252,246,.86);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--crust-dark);font:600 1.3rem/1 var(--serif)}
.brand-mark{width:40px;height:40px;flex:none}
.brand small{display:block;font:500 .66rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:.55rem .9rem;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:500;font-size:.98rem;transition:background .2s}
.nav-links a:hover{background:var(--cream-2)}
.nav-links a[aria-current="page"]{background:var(--crust-dark);color:#fff}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.cart-btn{position:relative}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font:700 .72rem/21px var(--sans);text-align:center;transform:scale(0);transition:transform .3s var(--ease)}
.cart-count.has{transform:scale(1)}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.45)}}
.menu-toggle{display:none}
@media (max-width:860px){
  .menu-toggle{display:inline-grid}
  .nav-links{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;padding:1rem 1.25rem 1.5rem;background:var(--flour);
    box-shadow:var(--shadow-lg);border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s var(--ease)}
  .nav-links.open{transform:none;opacity:1;visibility:visible}
  .nav-links a{padding:.9rem 1rem;font-size:1.1rem}
  .brand small{display:none}
}

/* ---------- Reveal / motion ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-reveal="left"]{transform:translateX(-36px)} [data-reveal="right"]{transform:translateX(36px)} [data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
[data-parallax]{will-change:transform}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,7rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1.4rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.2rem;color:var(--muted);font-size:.95rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.45rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px var(--sage-soft);display:inline-block}
.hero-art{position:relative;aspect-ratio:1/1;max-width:560px;justify-self:center;width:100%}
.hero-art .plate{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,var(--flour) 40%,var(--cream-2) 100%);box-shadow:var(--shadow-lg),inset 0 -12px 30px rgba(154,98,50,.12)}
.hero-art .loaf{position:absolute;inset:18% 12% 22% 12%;filter:drop-shadow(0 26px 22px rgba(92,58,30,.35))}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.75;pointer-events:none}
.blob.b1{width:42vmin;height:42vmin;background:radial-gradient(circle,var(--accent-soft),transparent 70%);top:-8%;right:-10%}
.blob.b2{width:30vmin;height:30vmin;background:radial-gradient(circle,var(--sage-soft),transparent 70%);bottom:0;left:-8%}
.wheat{position:absolute;width:70px;opacity:.9}
.steam path{stroke-dasharray:60;animation:steam 3.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.6s}.steam path:nth-child(3){animation-delay:1.2s}
@keyframes steam{0%{stroke-dashoffset:60;opacity:0}40%{opacity:.7}100%{stroke-dashoffset:-60;opacity:0}}
.badge-float{position:absolute;background:var(--flour);border-radius:16px;padding:.7rem 1rem;box-shadow:var(--shadow);font-size:.88rem;display:flex;gap:.6rem;align-items:center;border:1px solid var(--line)}
.badge-float strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--crust-dark)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:420px;order:-1}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--flour);padding:1rem 0}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:marquee 38s linear infinite;font:500 italic clamp(1.2rem,2.4vw,1.7rem)/1 var(--serif);color:var(--crust)}
.marquee-track span{display:inline-flex;align-items:center;gap:2.5rem;white-space:nowrap}
.marquee-track span::after{content:"✻";color:var(--accent);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Photo slots ---------- */
.photo-slot{position:relative;border-radius:var(--radius);overflow:hidden;background:
  radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.55),transparent 55%),
  linear-gradient(135deg,#E9C9A0 0%,#C98E5A 45%,#8E5A30 100%);min-height:260px;box-shadow:var(--shadow)}
.photo-slot.sage{background:radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,#E5EBDD,#A9BC9F 50%,#6F8F6B)}
.photo-slot.cream{background:radial-gradient(120% 90% at 30% 20%,#fff,transparent 60%),linear-gradient(135deg,#F7EBDA,#E2C9A6)}
.photo-slot .slot-label{position:absolute;left:1rem;bottom:1rem;background:rgba(255,252,246,.92);color:var(--crust-dark);font:600 .75rem/1.2 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;padding:.45rem .7rem;border-radius:999px;display:flex;gap:.4rem;align-items:center}
.photo-slot .slot-art{position:absolute;inset:12%;opacity:.95}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.story-photos{position:relative;min-height:520px}
.story-photos .photo-slot:first-child{position:absolute;inset:0 22% 18% 0}
.story-photos .photo-slot:last-child{position:absolute;inset:45% 0 0 40%;border:8px solid var(--flour)}
.signature{font:italic 500 1.6rem/1 var(--serif);color:var(--accent);margin-top:1rem}
.stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.5rem}
.stats div strong{display:block;font:600 2.2rem/1 var(--serif);color:var(--crust-dark)}
.stats div span{font-size:.9rem;color:var(--muted)}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-photos{min-height:380px}}

/* ---------- How it works (sticky) ---------- */
.how{background:var(--crust-dark);color:#F6EADB;border-radius:clamp(24px,4vw,48px);margin-inline:clamp(.5rem,2vw,1.5rem)}
.how h2,.how h3{color:#FFF6EA}
.how .eyebrow{color:var(--honey)}
.how-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem)}
.how-sticky{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}
.how-sticky .lead{color:#E3D2BD}
.how-clock{margin-top:2rem;display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;max-width:420px}
.how-clock div{text-align:center;padding:.7rem 0;border-radius:12px;background:rgba(255,255,255,.06);font-size:.8rem;font-weight:600;letter-spacing:.06em;transition:.4s var(--ease);color:#D9C6AE}
.how-clock div.on{background:var(--honey);color:var(--crust-dark);transform:translateY(-4px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,8vh,5rem);padding-block:2vh 10vh}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:2rem;transition:.5s var(--ease);opacity:.45;transform:scale(.97)}
.step.active{opacity:1;transform:none;background:rgba(255,255,255,.1);border-color:rgba(227,169,63,.6)}
.step-num{font:600 .85rem/1 var(--sans);letter-spacing:.14em;color:var(--honey);text-transform:uppercase}
.step h3{margin:.6rem 0 .4rem;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.step p{color:#E3D2BD;margin:0}
.step .day{display:inline-block;margin-top:1rem;background:rgba(227,169,63,.18);color:#FFE2A8;padding:.35rem .75rem;border-radius:999px;font-weight:600;font-size:.88rem}
@media (max-width:860px){.how-grid{grid-template-columns:1fr}.how-sticky{position:relative;top:0}.step{opacity:1;transform:none}}

/* ---------- Horizontal featured (pinned) ---------- */
.hscroll{position:relative}
.hscroll-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hscroll-track{display:flex;gap:1.5rem;padding-inline:max(1.25rem,calc((100vw - var(--maxw))/2));will-change:transform}
.feature-card{flex:0 0 clamp(270px,30vw,380px);background:var(--flour);border-radius:var(--radius);padding:1rem 1rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .4s var(--ease)}
.feature-card:hover{transform:translateY(-6px) rotate(-.4deg)}
.feature-card .art{aspect-ratio:4/3;border-radius:16px;display:grid;place-items:center;margin-bottom:1rem;overflow:hidden}
.feature-card .art svg{width:70%;height:auto;filter:drop-shadow(0 14px 12px rgba(92,58,30,.28))}
.feature-card h3{margin-bottom:.2rem}
.feature-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.price{font:600 1.25rem/1 var(--serif);color:var(--crust-dark)}
.hscroll-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.hscroll-bar{height:4px;background:var(--line);border-radius:4px;margin-top:2rem;overflow:hidden;width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.hscroll-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.hscroll.static .hscroll-pin{position:relative;height:auto;padding-block:4rem}
.hscroll.static .hscroll-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.hscroll.static .feature-card{scroll-snap-align:start}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.quote{background:var(--flour);border-radius:var(--radius);padding:1.8rem;border:1px solid var(--line);box-shadow:var(--shadow)}
.quote p{font:italic 400 1.15rem/1.5 var(--serif);color:var(--ink)}
.quote footer{font-size:.9rem;color:var(--muted)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---------- Newsletter signup ---------- */
.signup{background:linear-gradient(135deg,var(--accent-soft),var(--cream-2));border-radius:clamp(24px,4vw,48px);padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;position:relative;overflow:hidden}
.signup form{display:flex;gap:.6rem;flex-wrap:wrap}
.signup input{flex:1 1 220px}
@media (max-width:860px){.signup{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
label{font-weight:600;font-size:.92rem;display:block;margin-bottom:.35rem;color:var(--crust-dark)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:.8rem 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--flour);color:var(--ink);min-height:46px;transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--crust);box-shadow:0 0 0 4px rgba(196,100,58,.18)}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.error-msg{color:var(--danger);font-size:.85rem;margin-top:.3rem;display:none}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field.invalid .error-msg{display:block}
.check{display:flex;gap:.75rem;align-items:flex-start;font-weight:500;cursor:pointer;padding:1rem;border-radius:14px;background:var(--cream);border:1.5px solid var(--line)}
.check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--crust-dark);flex:none}

/* ---------- Footer ---------- */
.site-footer{background:#2B1D13;color:#D8C7B2;padding:4rem 0 2rem;margin-top:4rem}
.site-footer h4{color:#FFF3E2;font-size:1.05rem}
.site-footer a{color:#F2DFC6}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.5rem;font-size:.85rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-footer .brand{color:#FFF3E2}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Mockup ribbon ---------- */
.mock-note{background:var(--crust-dark);color:#FBE9CF;font-size:.82rem;text-align:center;padding:.45rem 1rem}
.mock-note strong{color:var(--honey)}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:var(--cream-2);color:var(--crust-dark)}
.tag.sage{background:var(--sage-soft);color:#3E5A3B}
.tag.accent{background:var(--accent-soft);color:#8A3E1C}
.tag.sample{background:#FFF0C7;color:#7A5300;border:1px dashed #C9A23F}

/* ---------- Menu page ---------- */
.page-hero{padding-block:clamp(2.5rem,6vw,4.5rem) 2rem;position:relative;overflow:hidden}
.week-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.week-bar .cell{background:var(--flour);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.week-bar .cell span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.week-bar .cell strong{font:600 1.2rem/1.3 var(--serif);color:var(--crust-dark)}
.countdown{font-variant-numeric:tabular-nums}
@media (max-width:760px){.week-bar{grid-template-columns:1fr}}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;position:sticky;top:var(--header-h);z-index:20;padding:.8rem 0;background:linear-gradient(var(--cream) 75%,transparent)}
.chip{border:1.5px solid var(--line);background:var(--flour);padding:.55rem 1.1rem;border-radius:999px;font:600 .92rem var(--sans);color:var(--ink);cursor:pointer;min-height:42px;transition:.2s}
.chip[aria-pressed="true"],.chip.on{background:var(--crust-dark);color:#fff;border-color:var(--crust-dark)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:1.5rem;margin-top:1rem}
.item-card{background:var(--flour);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.item-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.item-card .art{aspect-ratio:16/11;display:grid;place-items:center;position:relative}
.item-card .art svg{width:62%;filter:drop-shadow(0 14px 12px rgba(92,58,30,.28));transition:transform .6s var(--ease)}
.item-card:hover .art svg{transform:scale(1.06) rotate(-2deg)}
.item-card .art .tag{position:absolute;top:.9rem;left:.9rem}
.item-card .body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.item-card h3{margin-bottom:.25rem}
.item-card .desc{color:var(--muted);font-size:.95rem;flex:1}
.item-card .unit{font-size:.85rem;color:var(--muted)}
.stock{margin:.9rem 0}
.stock-row{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}
.stock-bar{height:6px;background:var(--cream-2);border-radius:6px;overflow:hidden}
.stock-bar i{display:block;height:100%;background:var(--sage);border-radius:6px;transition:width .8s var(--ease)}
.stock-bar.low i{background:var(--accent)}
.buy-row{display:flex;gap:.6rem;align-items:center}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.qty button{width:40px;height:42px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--crust-dark);border-radius:999px}
.qty button:hover{background:var(--cream-2)}
.qty output,.qty span{min-width:1.8rem;text-align:center;font-weight:700}
.item-card.soldout .art{filter:grayscale(.7);opacity:.7}
.mobile-cartbar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;display:none;transform:translateY(140%);transition:transform .4s var(--ease)}
.mobile-cartbar.show{transform:none}
@media (max-width:760px){.mobile-cartbar{display:block}}

/* ---------- Cart drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(43,29,19,.45);backdrop-filter:blur(3px);z-index:150;opacity:0;visibility:hidden;transition:.3s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--flour);z-index:160;transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer-open .drawer{transform:none}.drawer-open .drawer-backdrop{opacity:1;visibility:visible}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer header h2{font-size:1.5rem;margin:0}
.drawer-body{flex:1;overflow:auto;padding:1rem 1.4rem}
.drawer footer{padding:1.2rem 1.4rem;border-top:1px solid var(--line);background:var(--cream)}
.line-item{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px dashed var(--line)}
.line-item .thumb{width:64px;height:64px;border-radius:14px;display:grid;place-items:center}
.line-item .thumb svg{width:78%}
.line-item h4{font-size:1.02rem;margin:0 0 .2rem}
.line-item .qty button{width:32px;height:34px;font-size:1rem}
.remove{background:none;border:0;color:var(--muted);font-size:.8rem;cursor:pointer;text-decoration:underline;padding:0}
.totals{display:grid;gap:.35rem;margin-bottom:1rem}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font:600 1.3rem var(--serif);color:var(--crust-dark);border-top:1px solid var(--line);padding-top:.6rem;margin-top:.3rem}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty svg{width:120px;margin:0 auto 1rem;opacity:.85}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:300;display:grid;gap:.5rem;pointer-events:none;width:max-content;max-width:calc(100% - 2rem)}
.toast{background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:14px;box-shadow:var(--shadow-lg);font-size:.95rem;animation:toastIn .4s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}}

/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:2rem;align-items:start}
.panel{background:var(--flour);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow);margin-bottom:1.5rem}
.panel h2{font-size:1.45rem;display:flex;align-items:center;gap:.7rem}
.panel h2 .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--crust-dark);color:#fff;font:700 .95rem var(--sans);flex:none}
.summary{position:sticky;top:calc(var(--header-h) + 1rem)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.choice{position:relative;display:block;cursor:pointer;margin:0}
.choice input{position:absolute;opacity:0;inset:0}
.choice .card{border:2px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;background:#fff;transition:.2s;height:100%;font-weight:400}
.choice .card strong{display:block;font:600 1.1rem var(--serif);color:var(--crust-dark)}
.choice .card span{color:var(--muted);font-size:.9rem}
.choice input:checked + .card{border-color:var(--crust-dark);background:var(--cream);box-shadow:0 0 0 4px rgba(92,58,30,.08)}
.choice input:focus-visible + .card{outline:3px solid var(--accent);outline-offset:2px}
.slots{display:flex;flex-wrap:wrap;gap:.5rem}
.slots .choice .card{padding:.6rem 1rem;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink)}
.slots .choice input:disabled + .card{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.stripe-btn{background:#635BFF;border-color:#635BFF;--bg:#635BFF;font-size:1.05rem;padding:1.1em 1.5em}
.secure{display:flex;align-items:center;gap:.4rem;justify-content:center;font-size:.82rem;color:var(--muted);margin-top:.7rem}
.overlay{position:fixed;inset:0;background:rgba(255,252,246,.92);backdrop-filter:blur(6px);z-index:400;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}
.overlay.show{opacity:1;visibility:visible}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--line);border-top-color:#635BFF;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.confirm{text-align:center;max-width:680px;margin:0 auto}
.confirm .check-anim{width:96px;height:96px;margin:0 auto 1.2rem}
.confirm .check-anim circle{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1s var(--ease) forwards}
.confirm .check-anim path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.receipt{text-align:left;margin-top:2rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem}
.kv dt{color:var(--muted);font-size:.9rem}.kv dd{margin:0;font-weight:600}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr}.summary{position:relative;top:0;order:-1}}
@media (max-width:520px){.choice-grid{grid-template-columns:1fr}}

/* ---------- Dashboard ---------- */
.dash{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--cream)}
.dash-side{background:#2B1D13;color:#E9DAC5;padding:1.4rem 1rem;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem}
.dash-side .brand{color:#FFF3E2}
.dash-side nav{display:grid;gap:.25rem;margin-top:1rem}
.dash-side nav a{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border-radius:12px;color:#E9DAC5;text-decoration:none;font-weight:500}
.dash-side nav a:hover{background:rgba(255,255,255,.07)}
.dash-side nav a.active{background:var(--honey);color:#2B1D13;font-weight:700}
.dash-side nav svg{width:20px;height:20px;flex:none}
.dash-side .side-foot{margin-top:auto;font-size:.8rem;color:#BFAA90}
.dash-main{padding:clamp(1rem,3vw,2.2rem);min-width:0}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.dash-top h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.kpi{background:var(--flour);border:1px solid var(--line);border-radius:18px;padding:1.2rem;box-shadow:var(--shadow)}
.kpi span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.kpi strong{display:block;font:600 2rem/1.2 var(--serif);color:var(--crust-dark);margin-top:.3rem}
.kpi small{color:var(--sage);font-weight:600}
.dash-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem}
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;min-width:620px}
table.data th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.8rem 1rem;background:var(--cream);border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:#FFFBF3}
table.data input,table.data select{min-height:38px;padding:.45rem .6rem;font-size:.92rem}
.status{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700}
.status.paid{background:var(--sage-soft);color:#3E5A3B}.status.ready{background:#FFF0C7;color:#7A5300}.status.done{background:#E6E0F5;color:#4B3E7A}
.bake-row{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:.8rem 0;border-bottom:1px dashed var(--line)}
.bake-row .stock-bar{grid-column:1/-1;height:10px}
.bake-row strong{font-family:var(--serif);font-size:1.05rem;color:var(--crust-dark)}
.view{display:none;animation:fade .4s var(--ease)}.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar input[type=search]{max-width:280px}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--oat);border-radius:999px;transition:.25s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + span{background:var(--sage)}
.switch input:checked + span::before{transform:translateX(20px)}
.switch input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.history{display:none;background:var(--cream);font-size:.88rem}
.history.open{display:table-row}
.history td{padding:1rem 1.2rem}
.send-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:1.5rem;align-items:start}
.email-frame{width:100%;height:760px;border:1px solid var(--line);border-radius:14px;background:#EFE7DA}
.recips{display:flex;flex-wrap:wrap;gap:.35rem;max-height:120px;overflow:auto;padding:.5rem;background:var(--cream);border-radius:12px}
.modal{position:fixed;inset:0;z-index:420;display:grid;place-items:center;background:rgba(43,29,19,.5);padding:1rem;opacity:0;visibility:hidden;transition:.25s}
.modal.show{opacity:1;visibility:visible}
.modal .panel{max-width:480px;width:100%;margin:0}
.dash-mobile-top{display:none}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.dash-cols,.send-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:sticky;top:0;height:auto;z-index:50;padding:.6rem .8rem;flex-direction:row;align-items:center;gap:.5rem}
  .dash-side .brand small,.dash-side .side-foot{display:none}
  .dash-side nav{display:flex;margin:0;overflow-x:auto;gap:.2rem;scrollbar-width:none;flex:1}
  .dash-side nav a{white-space:nowrap;padding:.55rem .75rem;font-size:.9rem}
  .dash-side nav a span.lbl{display:inline}
  .dash-side .brand-text{display:none}
}
@media (max-width:480px){.kpis{grid-template-columns:1fr 1fr}.kpi strong{font-size:1.5rem}}

/* ---------- Newsletter view ---------- */
.nl-switch{display:inline-flex;background:var(--flour);border:1px solid var(--line);border-radius:999px;padding:.3rem;gap:.2rem}
.nl-switch button{border:0;background:none;padding:.6rem 1.2rem;border-radius:999px;font:600 .95rem var(--sans);cursor:pointer;color:var(--ink);min-height:42px}
.nl-switch button[aria-selected="true"]{background:var(--crust-dark);color:#fff}
.mail-client{max-width:760px;margin:2rem auto 0;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.mail-head{padding:1rem 1.3rem;border-bottom:1px solid #eee;font-size:.9rem;display:grid;gap:.25rem;background:#FAFAF8}
.mail-head .subj{font:600 1.15rem var(--sans);color:#222}
.mail-client iframe{width:100%;height:1500px;border:0;display:block;background:#F3ECE1}
.web-issue{max-width:900px;margin:2rem auto 0}
.web-issue .issue-hero{border-radius:var(--radius);padding:clamp(2rem,6vw,4rem);background:linear-gradient(135deg,var(--crust-dark),#7A4B26);color:#FBEBD5;position:relative;overflow:hidden}
.web-issue .issue-hero h2{color:#fff}
.issue-list{display:grid;gap:1rem;margin-top:1.5rem}
.issue-item{display:grid;grid-template-columns:96px 1fr auto;gap:1.2rem;align-items:center;background:var(--flour);border:1px solid var(--line);border-radius:18px;padding:1rem;box-shadow:var(--shadow)}
.issue-item .thumb{width:96px;height:96px;border-radius:14px;display:grid;place-items:center}
.issue-item .thumb svg{width:75%}
@media (max-width:560px){.issue-item{grid-template-columns:64px 1fr}.issue-item .thumb{width:64px;height:64px}.issue-item .price{grid-column:2}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .marquee-track{animation:none}
  .step{opacity:1;transform:none}
}

/* ---------- Fixes / refinements ---------- */
.hero .container,.page-hero .container{position:relative;z-index:1}
.btn-accent{--bg:#A9502A;border-color:#A9502A}
.how .btn-accent{--bg:var(--honey);--fg:var(--crust-dark);border-color:var(--honey)}
@media (max-width:760px){body.has-cartbar .toast-wrap{bottom:5.5rem}}
table.data td:nth-child(2){min-width:130px}
@media (min-width:861px){.dash{background:linear-gradient(90deg,#2B1D13 250px,var(--cream) 250px)}}
@media print{.dash-side,.mock-note,.dash-top .btn{display:none!important}.dash{display:block}.panel{box-shadow:none}}
.choice .card{display:block}
.slots .choice .card{display:inline-block}

/* =========================================================
   COZY PASS (v2): warmer, deeper palette · paper grain · photo vignettes
   Scroll behavior untouched — only visual tokens and photo components.
   ========================================================= */
:root{
  --flour:#FCF6EC; --cream:#F3E7D5; --cream-2:#EBDBC2; --oat:#DCC6A4;
  --crust:#8A5528; --crust-dark:#4A2E1A; --ink:#38251A; --muted:#6A5241;
  --accent:#A24C29; --accent-soft:#F0D3BC; --sage:#76875F; --sage-soft:#DDE3CD;
  --honey:#D99A3D; --line:#E2CFB2;
  --radius:28px; --radius-sm:18px;
  --shadow:0 1px 2px rgba(74,46,26,.07),0 14px 34px -16px rgba(74,46,26,.32);
  --shadow-lg:0 34px 70px -28px rgba(74,46,26,.45);
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
}
body{background-color:var(--cream);
  background-image:
    radial-gradient(1200px 600px at 10% -10%,rgba(217,154,61,.16),transparent 60%),
    radial-gradient(900px 500px at 110% 10%,rgba(180,90,51,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(120,80,40,.025) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(120,80,40,.02) 0 1px,transparent 1px 4px);
  background-attachment:scroll;background-size:auto}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;font-weight:440;color:var(--accent)}
.eyebrow{color:var(--accent);letter-spacing:.18em}
.eyebrow::before{height:2px;border-radius:2px;width:26px}
.placeholder-brand{background:none;padding:0}
.btn{box-shadow:0 10px 22px -12px rgba(74,46,26,.7)}
.btn-ghost{background:rgba(252,246,236,.6)}
.hand-note{position:absolute;font:600 1.45rem/1.05 var(--hand);color:var(--accent);display:flex;align-items:flex-end;gap:.2rem;transform:rotate(-6deg);z-index:3;white-space:nowrap}
.hand-note svg{transform:translateY(16px)}
.signature{font:600 2rem/1 var(--hand);color:var(--accent)}
.mock-note{background:#3A2416}

.photo{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--cream-2);box-shadow:var(--shadow);isolation:isolate}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 95% at 50% 45%,transparent 58%,rgba(58,32,14,.28) 100%),linear-gradient(180deg,rgba(255,214,150,.06),rgba(120,60,20,.08));
  box-shadow:inset 0 0 0 1px rgba(255,240,215,.25)}
.photo-fallback{width:100%;height:100%;display:grid;place-items:center}

.hero{background:linear-gradient(180deg,rgba(217,154,61,.10),transparent 70%)}
.hero-art{aspect-ratio:auto;max-width:620px;padding:1.5rem 0}
.hero-photo{border-radius:300px 300px var(--radius) var(--radius);aspect-ratio:4/5;box-shadow:var(--shadow-lg);border:10px solid var(--flour)}
.hero-photo img{position:absolute;inset:-6% 0;height:112%;object-position:52% 50%}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(200deg,rgba(255,196,120,.18),transparent 45%,rgba(74,46,26,.18))}
.badge-float{border-radius:20px;background:rgba(252,246,236,.94);backdrop-filter:blur(6px);z-index:2}
.badge-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cream-2);font-size:1.15rem}
.hero .steam{z-index:2}
@media (max-width:860px){.hero-art{max-width:400px;padding:1rem .5rem}.hero-photo{aspect-ratio:5/5.4}.hand-note{font-size:1.2rem;left:0!important}}

.story-photos .story-a{position:absolute;inset:0 24% 14% 0}
.story-photos .story-b{position:absolute;inset:48% 0 0 44%;border:10px solid var(--flour);border-radius:50% 50% var(--radius) var(--radius)}
.story-photos .photo img{position:absolute;inset:-6% 0;height:112%}

.how{background:radial-gradient(1000px 500px at 85% 0%,rgba(217,154,61,.20),transparent 60%),linear-gradient(160deg,#4A2E1A,#3A2214);color:#F3E4D0}
.how::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px)}
.step{padding:0 0 1.8rem;overflow:hidden}
.step > :not(.step-photo){margin-inline:1.8rem}
.step-photo{border-radius:var(--radius) var(--radius) 18px 18px;aspect-ratio:16/8;margin-bottom:1.3rem;box-shadow:none}
.step-photo img{transition:transform 1.2s var(--ease)}
.step.active .step-photo img{transform:scale(1.04)}
.how-clock div.on{background:var(--honey);color:#3A2214}

.feature-card{padding:.8rem .8rem 1.3rem}
.feature-card .art{border-radius:20px;aspect-ratio:4/3}
.feature-card .art img{transition:transform .8s var(--ease)}
.feature-card:hover .art img{transform:scale(1.05)}
.feature-card h3,.feature-card .row,.feature-card > p,.feature-card > .tag{margin-inline:.5rem}

.signup{background:var(--flour);isolation:isolate;box-shadow:var(--shadow)}
.signup-bg{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;z-index:-2;opacity:.95}
.signup::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--flour) 38%,rgba(252,246,236,.8) 62%,rgba(252,246,236,.15))}
@media (max-width:860px){.signup::after{background:linear-gradient(180deg,rgba(252,246,236,.95),rgba(252,246,236,.88))}}

.quote{position:relative}
.quote::before{content:"“";position:absolute;top:-.2rem;left:1.2rem;font:600 4.5rem/1 var(--serif);color:var(--honey);opacity:.5}

.banner{margin-top:1.8rem;aspect-ratio:16/6}
.banner img{position:absolute;inset:-8% 0;height:116%}
.banner .hand-note.on-photo{position:absolute;right:1.4rem;bottom:1rem;color:#FFF3DF;text-shadow:0 2px 10px rgba(40,20,8,.6);transform:rotate(-4deg);font-size:1.6rem}
@media (max-width:760px){.banner{aspect-ratio:4/3}}
.item-card .art{aspect-ratio:4/3;border-radius:0}
.item-card .art::after{border-radius:0}
.item-card .art img{transition:transform .9s var(--ease)}
.item-card:hover .art img{transform:scale(1.05)}
.item-card .art .tag{z-index:2;background:rgba(252,246,236,.95)}
.item-card.soldout .art img{filter:grayscale(.6) brightness(.9)}

.line-item .thumb,.issue-item .thumb,.dash-thumb{overflow:hidden;padding:0;border-radius:14px;box-shadow:0 4px 10px -6px rgba(74,46,26,.5)}
.line-item .thumb img,.issue-item .thumb img,.dash-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dash-thumb{width:56px;height:56px}
.empty-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 1rem;box-shadow:var(--shadow)}
.empty-photo img{width:100%;height:100%;object-fit:cover}

.ship-card{aspect-ratio:1/1}
.ship-card img{position:absolute;inset:0}
.ship-card figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.2rem 1.2rem 1rem;color:#FFF3DF;font:600 1.35rem/1.15 var(--hand);background:linear-gradient(transparent,rgba(40,20,8,.7))}
@media (max-width:900px){.ship-card{display:none}}
.confirm-photo{width:min(100%,420px);aspect-ratio:16/10;margin:0 auto 1.4rem}

.web-issue .issue-hero{background:linear-gradient(110deg,rgba(58,34,20,.94) 35%,rgba(58,34,20,.55)),#3A2214;isolation:isolate}
.issue-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.9}

.dash-side{background:linear-gradient(180deg,#3A2416,#2E1C11)}
@media (min-width:861px){.dash{background:linear-gradient(90deg,#33200F 250px,var(--cream) 250px)}}
.site-footer{background:linear-gradient(180deg,#3A2416,#2A1A0F)}
@media (prefers-reduced-motion:reduce){.step.active .step-photo img,.item-card:hover .art img,.feature-card:hover .art img{transform:none}}
@media (min-width:861px){.hero-photo{aspect-ratio:1/1.02}}
/* fulfillment notes (v3) */
.ship-note{display:flex;gap:.9rem;align-items:flex-start;background:var(--cream);border:1.5px dashed var(--oat);border-radius:18px;padding:1rem 1.1rem;margin-bottom:1.3rem}
.ship-ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--flour);font-size:1.25rem;box-shadow:0 2px 6px -3px rgba(74,46,26,.4)}
.choice .card .rate{float:right;font:600 1.1rem var(--serif);color:var(--crust-dark)}
.track{min-width:170px}
.status.tobake{background:#FFF0C7;color:#7A5300}
.pack-slip{border:1.5px dashed var(--oat);border-radius:14px;padding:.8rem 1rem;margin-bottom:.7rem;background:var(--flour)}
.pack-slip header{display:flex;justify-content:space-between;gap:.5rem;font-weight:700;color:var(--crust-dark)}
.ingr{margin:.7rem 0 0;font-size:.86rem;border-top:1px dashed var(--line);padding-top:.5rem}
.ingr summary{cursor:pointer;font-weight:600;color:var(--crust-dark);list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:32px}
.ingr summary::-webkit-details-marker{display:none}
.ingr summary::after{content:"+";font:600 1.2rem var(--sans);color:var(--accent);transition:transform .25s}
.ingr[open] summary::after{transform:rotate(45deg)}
.ingr p{margin:.35rem 0;color:var(--muted)}
.footer-bottom .fine-print{flex-basis:100%;max-width:90ch;line-height:1.55}
/* ---- Photo library ---- */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:2rem 1rem;border:2px dashed var(--oat);border-radius:var(--radius);background:var(--flour);cursor:pointer;transition:background .2s,border-color .2s}
.dropzone:hover,.dropzone.over{background:var(--accent-soft);border-color:var(--accent)}
.dropzone:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dz-ico{font-size:2rem}
.editor-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem;margin-top:1.4rem}
.editor-grid canvas{width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow);background:var(--cream)}
.lbl-like{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.lib-card{background:var(--flour);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.lib-img{aspect-ratio:4/3;background:var(--cream-2)}
.lib-img img{width:100%;height:100%;object-fit:cover;display:block}
.lib-body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.lib-badges{display:flex;gap:.35rem;flex-wrap:wrap}
.lib-alt{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-actions{display:flex;gap:.4rem;align-items:center;margin-top:auto}
.lib-actions select{flex:1;min-width:0;font-size:.85rem}
/* ---- Cap meter ---- */
.cap{margin:1rem 0 1.4rem}
.cap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.7rem}
.cap-head strong{display:block;font-family:var(--serif);font-size:1.5rem}
.meter{height:14px;border-radius:99px;background:var(--cream-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(74,46,26,.15)}
.meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sage),var(--honey))}
/* ---- Cottage food labels ---- */
.label-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.cf-label{background:#fff;color:#222;border:1.5px solid #3a2a1e;border-radius:10px;padding:1rem 1.1rem;font:13px/1.45 var(--sans);position:relative}
.cf-label h3{font:700 1.2rem var(--serif);margin:0 0 .2rem;color:#222}
.cf-label p{margin:.35rem 0}
.lbl-addr{font-size:12px;color:#444}
.lbl-wt{font-size:14px}
.lbl-mdard{font-weight:700;border-top:1px solid #999;padding-top:.45rem;font-size:12.5px}
.cf-label .tag{margin-top:.4rem}
@media (max-width:760px){.editor-grid{grid-template-columns:1fr}}
@media print{
  body.printing-labels *{visibility:hidden}
  body.printing-labels #view-labels,body.printing-labels #view-labels *{visibility:visible}
  body.printing-labels #view-labels{position:absolute;left:0;top:0;width:100%}
  body.printing-labels #view-labels .dash-top,body.printing-labels #view-labels > p,body.printing-labels .cf-label .tag{display:none}
  body.printing-labels .cf-label{break-inside:avoid}
  body::before{display:none}
}
@media (max-width:480px){}
/* ---- Pickup ---- */
.status.ready{background:var(--accent-soft);color:#7A3418}.status.picked{background:var(--sage-soft);color:#3E5A3B}
#slots .card{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:8.5rem;padding:.55rem 1rem}
#slots .card small{font-weight:500;font-size:.74rem;color:var(--muted);margin-top:.15rem}
#slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
#slots .choice .card{border-radius:18px}
#slot-err{margin-top:.5rem}
.data tr.slot-head th{background:var(--cream);color:var(--crust-dark);font:600 .95rem var(--serif);text-align:left;padding:.55rem .9rem;letter-spacing:0;text-transform:none}
.slot-order{display:flex;justify-content:space-between;gap:.8rem;padding:.35rem 0;border-top:1px dashed var(--line)}
.slot-order:first-of-type{border-top:0}
.slot-preview{display:flex;flex-wrap:wrap;gap:.35rem}
.tag.full{background:var(--accent-soft);color:#7A3418;text-decoration:line-through}
@media print{.dash-cols{display:block}.dash-cols .panel{break-inside:avoid;margin-bottom:1rem}}
.day-cap{margin:.7rem 0 0;padding:.5rem .8rem;border-radius:12px;background:var(--sage-soft);color:#3E5A3B;display:inline-block}
.day-cap.full{background:var(--accent-soft);color:#7A3418}
.limits-note{margin:.2rem 0 1rem;padding:.6rem .8rem;border-radius:12px;background:var(--cream);border:1px dashed var(--oat)}
.slot-order>span:last-child{white-space:nowrap}

/* returning customer note (checkout) */
.welcome-back{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;padding:.8rem 1rem;margin-bottom:1rem;border-radius:14px;background:var(--cream);border:1.5px dashed var(--line)}
.welcome-back strong{font-family:'Caveat',cursive;font-size:1.35rem;font-weight:700}
.welcome-back .linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.welcome-back[hidden]{display:none}

/* ---------- Owner portal: fit laptop screens (1280–1440) and stack on small screens ---------- */
body:has(.dash){overflow-x:visible}                  /* never block scrolling in the portal */
.dash-main>*,.dash-cols>*,.send-grid>*,.view{min-width:0}
.dash-main .panel{max-width:100%}
.dash-main input,.dash-main select,.dash-main textarea{max-width:100%;min-width:0}
.dash-top{flex-wrap:wrap;gap:.6rem}
#menu-table{min-width:0;table-layout:auto}
#menu-table td,#menu-table th{padding:.55rem .5rem}
#menu-table td:nth-child(2){min-width:170px}
#menu-table td:nth-child(3){min-width:110px;max-width:140px}
#menu-table td:nth-child(4) input,#menu-table td:nth-child(5) input{width:4.6rem}
#menu-table select,#menu-table input[type=text]{width:100%}
@media (max-width:1100px){
  #menu-table thead{display:none}
  #menu-table,#menu-table tbody{display:block}
  #menu-table tr{display:grid;grid-template-columns:64px 1fr 1fr;gap:.4rem .8rem;padding:.9rem;border-bottom:1px solid var(--line);align-items:center}
  #menu-table td{display:block;border:0;padding:0;min-width:0!important;max-width:none!important}
  #menu-table td:nth-child(1){grid-row:span 2}
  #menu-table td:nth-child(2){grid-column:2/-1}
  #menu-table td:nth-child(3){grid-column:2/-1}
  #menu-table td:nth-child(n+4)::before{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
  #menu-table td:nth-child(4)::before{content:"Price"}#menu-table td:nth-child(5)::before{content:"Made"}
  #menu-table td:nth-child(6)::before{content:"Ordered"}#menu-table td:nth-child(7)::before{content:"On menu"}
}
@media (max-width:860px){.dash-main{padding:1rem}.dash-main .toolbar input[type=search]{max-width:none;flex:1 1 200px}}
.dash{grid-template-columns:250px minmax(0,1fr)}
@media (max-width:860px){.dash{grid-template-columns:minmax(0,1fr)}.dash-side{min-width:0}}
#ov-orders{min-width:0}