/* LagosHousewife — app-style design. Colours come from /theme.css (--brand, --dark, --bg, --accent, --on-brand);
   change them in Admin → Branding. Mobile first: bottom tab bar on phones, top menu from 900px. */
:root{
  --ink:color-mix(in srgb,var(--dark) 94%,#000);
  --muted:color-mix(in srgb,var(--dark) 52%,#fff);
  --brand-l:color-mix(in srgb,var(--brand) 16%,#fff);
  --brand-m:color-mix(in srgb,var(--brand) 38%,#fff);
  --line:color-mix(in srgb,var(--dark) 10%,#fff);
  --card:#fff; --surface:#fff; --strong:var(--dark); --on-strong:#fff;
  --brand-ink:color-mix(in srgb,var(--brand) 62%,var(--dark));
  --tabs-bg:color-mix(in srgb,var(--dark) 7%,#fff);
  color-scheme:light;
  --r:22px; --r-sm:14px;
  --shadow:0 6px 22px color-mix(in srgb,var(--dark) 10%,transparent);
  --shadow-sm:0 2px 10px color-mix(in srgb,var(--dark) 8%,transparent);
  --font:"Avenir Next","Nunito","Poppins","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --gap:clamp(1rem,4vw,1.5rem);
  --tab-h:68px;
  /* legacy names still used by the admin area */
  --terra:var(--brand); --terra-d:color-mix(in srgb,var(--brand) 70%,#000); --terra-l:var(--brand-l);
  --sage:var(--brand); --sage-d:var(--dark); --sage-l:var(--brand-l); --cream:var(--bg); --paper:#fff; --sand:var(--brand-l); --peach:var(--brand-l);
  --radius:10px; --radius-lg:16px; --head:var(--font); --serif:var(--font);
}
body.admin{padding-bottom:0}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom))}
body.bare{padding-bottom:0;background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:800;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.7rem,5vw,2.6rem)} h2{font-size:clamp(1.2rem,3vw,1.5rem)} h3{font-size:1rem}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
.wrap{width:min(1180px,100% - 2*var(--gap));margin-inline:auto}
.narrow{width:min(720px,100% - 2*var(--gap))}
.narrow-wrap{max-width:720px}
.center{text-align:center}
.muted{color:var(--muted)} .small{font-size:.875rem}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--strong);color:var(--on-strong);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ico{flex:none}
.eyebrow{font:800 .72rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.lead{font-size:1.05rem;color:var(--muted);max-width:60ch}
.page-pad{padding-block:3rem}
.page-top{padding-top:1.4rem}
.page-top h1{margin-bottom:.4em}
.block{margin-block:1.7rem}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem}
.block-head h2{margin:0}
.block-head a{font-size:.85rem;font-weight:700;color:var(--brand-ink);text-decoration:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:800 .92rem/1 var(--font);padding:.95rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:filter .15s,background .15s}
.btn-dark{background:var(--strong);color:var(--on-strong)} .btn-dark:hover{filter:brightness(1.25)}
.btn-brand{background:var(--brand);color:var(--on-brand)} .btn-brand:hover{filter:brightness(.95)}
.btn-primary{background:var(--brand);color:var(--on-brand)} .btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)} .btn-ghost:hover{background:var(--brand-l)}
.btn-sm{padding:.65rem 1.1rem;font-size:.82rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:default}
.link-btn{background:none;border:0;padding:0;font-weight:800;font-size:.85rem;color:var(--brand-ink);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.round-btn{width:42px;height:42px;border-radius:50%;background:var(--surface);border:0;display:inline-grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--ink);text-decoration:none}
.round-btn.dark{background:var(--strong);color:var(--on-strong)}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;color:var(--ink);text-decoration:none}
.icon-btn:hover{background:var(--brand-l)}
.count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font:800 .68rem/18px var(--font);text-align:center}
.count[hidden]{display:none}

/* Top bar + tab bar */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,#fff);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:1rem;min-height:60px}
.brand{text-decoration:none;display:inline-flex;align-items:center}
.brand-name{font:800 1.3rem/1 var(--font);letter-spacing:-.02em;color:var(--ink)} .brand-name em{font-style:normal;color:var(--brand-ink)}
.brand-logo{height:40px;width:auto}
.desk-nav{display:none;margin-left:auto} .desk-nav ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.desk-nav a{display:block;padding:.5rem .95rem;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none}
.desk-nav a:hover{background:var(--brand-l)} .desk-nav a[aria-current]{background:var(--strong);color:var(--on-strong)}
.top-actions{margin-left:auto;display:flex;gap:.1rem}
.top-actions .hide-sm{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:var(--surface);border-radius:26px 26px 0 0;box-shadow:0 -6px 24px color-mix(in srgb,var(--dark) 12%,transparent)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--muted);text-decoration:none;padding:.4rem 0}
.tabbar a[aria-current]{color:var(--ink)}
.tabbar a[aria-current] .ico{stroke:var(--brand)}
.tabbar .tab-center{width:58px;height:58px;margin:-30px auto 0;border-radius:50%;background:var(--strong);color:var(--on-strong);display:grid;place-items:center;border:5px solid var(--bg);box-shadow:var(--shadow)}
.tabbar .tab-center[aria-current]{color:var(--on-strong);background:var(--strong)} .tabbar .tab-center .ico{stroke:var(--on-strong)!important}

/* Welcome card */
.welcome-wrap{margin-top:1rem}
.welcome{position:relative;overflow:hidden;background:var(--brand);color:var(--on-brand);border-radius:28px;padding:1.3rem 1.2rem 1rem;display:grid;gap:.4rem;isolation:isolate}
.welcome::before,.welcome::after{content:"";position:absolute;border-radius:50%;border:2px solid color-mix(in srgb,var(--on-brand) 28%,transparent);z-index:-1}
.welcome::before{width:260px;height:260px;right:-70px;top:-90px} .welcome::after{width:170px;height:170px;left:-60px;bottom:-70px}
.welcome h1,.welcome .lead{color:var(--on-brand)} .welcome .lead{opacity:.92}
.greet{font-weight:700;margin-bottom:.15rem;opacity:.95}
.welcome-art{display:grid;place-items:center}
.welcome-svg{width:min(52%,170px);height:auto}
.welcome h1{font-size:clamp(1.55rem,6vw,2.4rem)}
.welcome .lead{margin-bottom:1rem;font-size:.98rem}
.hero-img{width:100%;max-height:300px;object-fit:cover;border-radius:22px}
.searchbar{display:flex;align-items:center;gap:.5rem;background:var(--surface);border-radius:999px;padding:.35rem .35rem .35rem 1rem;box-shadow:var(--shadow-sm);color:var(--muted)}
.searchbar input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:.6rem .2rem;outline:0}
.searchbar:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.searchbar .btn{padding:.7rem 1.1rem}

/* Carousel, chips, strips, lists */
.carousel,.chips,.strip{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1*var(--gap));padding:.2rem var(--gap) .6rem}
.carousel::-webkit-scrollbar,.chips::-webkit-scrollbar,.strip::-webkit-scrollbar{display:none}
.fcard{position:relative;flex:0 0 min(82%,330px);min-height:158px;scroll-snap-align:start;background:var(--brand);color:var(--on-brand);border-radius:var(--r);padding:1.1rem;display:flex;overflow:hidden;text-decoration:none;isolation:isolate}
.fcard::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;border:2px solid color-mix(in srgb,var(--on-brand) 26%,transparent);right:-50px;top:-60px;z-index:-1}
.fcard-text{display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;width:56%;position:relative;z-index:1}
.fcard-text strong{font-size:1.1rem;line-height:1.25;font-weight:800}
.fcard-meta{display:flex;flex-direction:column;gap:.15rem;font-size:.78rem;opacity:.95}
.fcard-meta .avatar{background:#fff;color:#123;}
.fcard-img{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:150px;height:150px;border-radius:50%;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.18);background:var(--brand-m)}
.fcard-img img,.fcard-img .img-placeholder{width:100%;height:100%;object-fit:cover}
.pill,.pill-opt span{display:inline-flex;align-items:center;flex:none;padding:.62rem 1.15rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.88rem;text-decoration:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.pill:hover,.pill-opt span:hover{background:var(--brand-l)}
.pill.on,.pill-opt input:checked+span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pill-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pill-opt input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.strip{gap:.9rem}
.mini{flex:0 0 108px;text-decoration:none;scroll-snap-align:start;background:var(--surface);border-radius:var(--r);padding:.5rem;box-shadow:var(--shadow-sm);display:block}
.mini-media{display:block;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--brand-l)}
.mini-media img,.mini-media .img-placeholder{width:100%;height:100%;object-fit:cover}
.mini-title{display:block;font-size:.8rem;font-weight:700;margin-top:.45rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rlist{display:grid;gap:.75rem}
.rrow{display:flex;align-items:center;gap:.85rem;background:var(--surface);border-radius:var(--r);padding:.6rem;box-shadow:var(--shadow-sm)}
.rrow-media{flex:none;width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--brand-l)}
.rrow-media img,.rrow-media .img-placeholder{width:100%;height:100%;object-fit:cover}
.rrow-body{flex:1;min-width:0} .rrow-body h3{margin:0 0 .25rem;font-size:.98rem} .rrow-body a{text-decoration:none}
.go{flex:none;width:34px;height:34px;border-radius:50%;background:var(--strong);color:var(--on-strong);display:grid;place-items:center;margin-right:.3rem}
.author{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted)}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--brand-m);color:var(--ink);display:inline-grid;place-items:center;font-size:.7rem;font-weight:800}
.time{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;color:var(--muted)}
.fcard .time{color:inherit}

/* Recipe grid + cards */
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.rcard{position:relative;background:var(--surface);border-radius:var(--r);padding:.55rem .55rem .8rem;box-shadow:var(--shadow-sm)}
.rcard-media{display:block;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--brand-l)}
.rcard-media img,.rcard-media .img-placeholder{width:100%;height:100%;object-fit:cover}
.rcard h3{margin:.65rem .35rem .3rem;font-size:.95rem;line-height:1.25} .rcard h3 a{text-decoration:none}
.rcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin:0 .35rem}
.fav{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--brand)}
.fav.on,.round-btn.on{color:var(--accent)} .fav.on .ico,.round-btn.on .ico{fill:var(--accent)}
.img-placeholder{display:grid;place-items:center;background:var(--brand-l);width:100%;height:100%;min-height:90px}
.ph-art{width:78%;height:auto;opacity:.9}

/* Recipe page */
.recipe-page{position:relative}
.rp-hero{position:relative;aspect-ratio:1/.82;background:var(--brand-l);overflow:hidden}
.rp-hero img,.rp-hero .img-placeholder{width:100%;height:100%;object-fit:cover}
.rp-back,.rp-fav{position:absolute;top:calc(14px + env(safe-area-inset-top))}
.rp-back{left:var(--gap)} .rp-fav{right:var(--gap);left:auto;bottom:auto;width:42px;height:42px}
.rp-sheet{position:relative;margin-top:-30px;background:var(--surface);border-radius:30px 30px 0 0;padding:1.6rem var(--gap) 1.5rem;box-shadow:0 -8px 24px color-mix(in srgb,var(--dark) 8%,transparent)}
.rp-sheet::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--line);margin:-.7rem auto 1rem}
.rp-title{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}
.rp-title h1{font-size:clamp(1.4rem,5vw,2rem);margin:0 0 .5rem}
.time-pill{display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.3rem .7rem;border-radius:999px;background:var(--brand-l);font-size:.8rem;font-weight:700;color:var(--muted)}
.rp-desc{color:var(--muted);margin-bottom:.3rem}
.rp-desc.clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{margin-bottom:.8rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.1rem 0}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i v" "i l";column-gap:.7rem;align-items:center}
.tile-ico{grid-area:i;width:44px;height:44px;border-radius:14px;background:var(--brand-l);display:grid;place-items:center;color:var(--brand-ink)}
.tile dd{grid-area:v;margin:0;font-weight:800;line-height:1.15} .tile dt{grid-area:l;font-size:.74rem;color:var(--muted);text-transform:capitalize}
.tablist{display:flex;gap:.3rem;background:var(--tabs-bg);border-radius:18px;padding:5px;margin:1rem 0 1.2rem}
.tab{flex:1;border:0;background:none;border-radius:14px;padding:.8rem;font-weight:800;cursor:pointer;color:var(--ink)}
.tab.on{background:var(--strong);color:var(--on-strong)}
.tabs:not(.js) .tablist{display:none}
.tabs.js .tabpanel{display:none} .tabs.js .tabpanel.on{display:block}
.tabs:not(.js) .tabpanel+.tabpanel{margin-top:1.5rem}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.8rem} .panel-head h2{margin:0}
.ingredients{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.ingredients li{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .7rem;box-shadow:var(--shadow-sm)}
.ing-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--brand-l);display:grid;place-items:center;color:var(--brand-ink)}
.ing-text{flex:1;min-width:0;font-weight:600}
.stepper{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-weight:800}
.stepper button{width:26px;height:26px;border-radius:8px;border:1.5px solid var(--brand);background:var(--surface);color:var(--brand);display:grid;place-items:center;cursor:pointer;padding:0}
.stepper output{min-width:1.1em;text-align:center}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:.9rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:.8rem;align-items:start}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:11px;background:var(--brand-l);display:grid;place-items:center;font-weight:800;color:var(--brand-ink)}
.rp-actions{display:grid;gap:.6rem;margin-top:1.6rem}
.rp-video{margin:1rem 0}
.callout{background:var(--brand-l);border-radius:var(--r);padding:1.1rem 1.2rem;margin:1.2rem 0}
.callout h2{font-size:1.05rem}

/* Cooking mode */
.cook{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 var(--gap)}
.cook-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:calc(14px + env(safe-area-inset-top)) 0 .8rem}
.cook-top h1{flex:1;text-align:center;font-size:1.15rem;margin:0}
.cook-top .round-btn{box-shadow:none;border:1px solid var(--line)}
.cook-stage{flex:1;display:flex;flex-direction:column;gap:1rem;padding-bottom:1rem}
.cook-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--brand-l)} .cook-photo img,.cook-photo .img-placeholder{width:100%;height:100%;object-fit:cover}
.cstep-n{font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0}
.cstep-text{font-size:1.35rem;font-weight:800;line-height:1.35;margin:0}
.cook.js .cstep{display:none} .cook.js .cstep.on{display:block}
.cook:not(.js) .cstep{margin-bottom:1.2rem}
.timer{position:relative;width:210px;height:210px;margin:.4rem auto}
.timer[hidden],.link-btn[hidden],.done[hidden],.cook-foot[hidden]{display:none}
.ring{width:100%;height:100%;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:7}
.ring-bg{stroke:var(--brand-l)} .ring-fg{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.timer-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem}
.timer-time{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.timer-adj{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted)}
.timer-adj button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0}
.center-btn{align-self:center}
.cook-foot{position:sticky;bottom:0;background:var(--surface);padding:.8rem 0 calc(1rem + env(safe-area-inset-bottom));display:grid;gap:.7rem}
.cook-prog{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;color:var(--brand-ink)} .cook-prog b{color:var(--brand)}
.bar{height:6px;border-radius:3px;background:var(--brand-l);overflow:hidden} .bar i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .3s}
.cook-btns{display:grid;grid-template-columns:1fr 2fr;gap:.6rem}
.cook-empty{text-align:center;padding:3rem 0}
.done{position:relative;text-align:center;padding:1rem 0 2rem;overflow:hidden}
.done h2{font-size:2rem;margin-top:.5rem}
.done-plate{width:200px;margin:1.5rem auto 0}
.confetti i{position:absolute;top:-10px;left:calc(var(--i)*5.6%);width:8px;height:14px;border-radius:2px;background:var(--brand);animation:fall 3.2s ease-in calc(var(--i)*.12s) 1 both}
.confetti i:nth-child(3n){background:var(--accent)} .confetti i:nth-child(3n+1){background:#f6b73c} .confetti i:nth-child(4n){background:var(--strong)}
@keyframes fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(420px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti i{animation:none;opacity:0}html{scroll-behavior:auto}}

/* Search + filter sheet */
.search-form{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}
.filter-open{width:50px;height:50px;border-radius:16px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center}
.sheet{display:none;position:fixed;inset:0;z-index:60}
.sheet:target{display:block}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--surface);border-radius:28px 28px 0 0;padding:1.2rem var(--gap) calc(1.2rem + env(safe-area-inset-bottom))}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem} .sheet-head h2{margin:0}
.sheet-close{width:36px;height:36px;border-radius:50%;background:var(--brand-l);display:grid;place-items:center}
.sheet fieldset{border:0;padding:0;margin:0 0 1.1rem;min-width:0} .sheet legend{font-weight:800;margin-bottom:.5rem;padding:0}
.sheet .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.range{display:block;width:100%;max-width:100%;margin:.4rem 0;accent-color:var(--brand)} .range-out{margin:.2rem 0 0;font-size:.85rem;font-weight:700;color:var(--muted)}
.sheet-actions{display:grid;grid-template-columns:1fr 2fr;gap:.6rem;margin-top:.5rem}
.quick-filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0 0}
.quick-filters select,.filters select,.filters input[type=search]{padding:.65rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;color:var(--ink)}
.check{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem}

/* Newsletter, footer */
.newsletter{margin:2.5rem var(--gap) 0;background:var(--brand-l);border-radius:28px;padding:2rem 1.2rem}
.newsletter p{color:var(--muted)}
.nl-form{display:grid;gap:.7rem;max-width:520px;margin:1rem auto 0;text-align:left}
.nl-form input[type=email]{padding:.95rem 1.2rem;border:1px solid var(--line);border-radius:999px;font:inherit}
.consent{display:flex;gap:.5rem;font-size:.8rem;color:var(--muted)}
.hp{position:absolute;left:-9999px}
.site-footer{margin-top:2rem;padding:2rem 0 1rem;font-size:.9rem}
.footer-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
.footer-grid h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .footer-grid a{text-decoration:none} .footer-grid a:hover{text-decoration:underline}
.legal{margin-top:1.5rem;color:var(--muted);font-size:.82rem}

/* Generic content (about pages, notices, pager, cards used by hidden sections) */
.notice{border-radius:var(--r-sm);padding:.8rem 1rem;background:var(--brand-l);margin:1rem 0;font-size:.92rem}
.notice-warn{background:color-mix(in srgb,#f6b73c 22%,#fff)} .notice-err{background:color-mix(in srgb,var(--accent) 16%,#fff)}
.empty{text-align:center;background:var(--surface);border-radius:var(--r);padding:2.2rem 1.2rem;box-shadow:var(--shadow-sm)} .empty p{color:var(--muted)}
.pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem;color:var(--muted)}
.prose{max-width:68ch;line-height:1.75} .prose img{border-radius:var(--r-sm)} .prose a{color:var(--brand-ink)}
.page-head{background:var(--brand-l);padding:2rem 0;margin-bottom:1rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 .8rem;font-size:.82rem;color:var(--muted)} .crumbs li+li::before{content:"/";margin-right:.4rem} .crumbs a{text-decoration:none}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .card-body{padding:1rem} .card-media{display:block;aspect-ratio:16/10;background:var(--brand-l)} .card-media img{width:100%;height:100%;object-fit:cover}
.badge{display:inline-block;font-size:.7rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;background:var(--brand-l);margin-right:.3rem}
.chip{display:inline-block;padding:.25rem .7rem;border-radius:999px;background:var(--brand-l);font-size:.82rem;text-decoration:none}
.figure{margin:1rem 0} .figure img{border-radius:var(--r)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.vgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .vcard h3{margin:.6rem 0 0}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden} .video iframe,.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video-play{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer}
.play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--dark);font-size:1.3rem}
.cart-group{background:var(--surface);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)} .cart-group h2{font-size:1.05rem} .cart-group a{text-decoration:none}
.cart-items{list-style:none;margin:0;padding:0} .cart-items li{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-top:1px solid var(--line)} .cart-items label{flex:1;display:flex;gap:.6rem;align-items:center} .cart-items li.done label span{text-decoration:line-through;color:var(--muted)}
.cart-items input{width:20px;height:20px;accent-color:var(--brand)} .qty{color:var(--muted)}
.cart-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Desktop */
@media (min-width:600px){
  .rgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .welcome{grid-template-columns:1.1fr .9fr;align-items:center;padding:2.2rem}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .tabbar{display:none}
  .desk-nav{display:block} .top-actions{margin-left:.5rem} .top-actions .hide-sm{display:inline-grid}
  .carousel,.chips,.strip{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .carousel .fcard{flex-basis:340px}
  .chips{flex-wrap:wrap;overflow:visible}
  .mini{flex-basis:140px}
  .rgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rlist{grid-template-columns:repeat(2,1fr)}
  .welcome{padding:2.8rem 3rem;min-height:300px}
  .block{margin-block:2.4rem}
  .recipe-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2rem;width:min(1180px,100% - 2*var(--gap));margin:1.5rem auto 0;align-items:start}
  .rp-hero{position:sticky;top:84px;aspect-ratio:1/1.05;border-radius:30px}
  .rp-sheet{margin-top:0;border-radius:30px;padding:2rem;box-shadow:var(--shadow)}
  .rp-sheet::before{display:none}
  .rp-back,.rp-fav{top:16px} .rp-back{left:16px} .rp-fav{right:16px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .search-form{grid-template-columns:1fr}
  .filter-open{display:none}
  .sheet{display:block;position:static}
  .sheet-backdrop,.sheet-close{display:none}
  .sheet-panel{position:static;max-height:none;border-radius:var(--r);box-shadow:var(--shadow-sm);margin-top:.8rem;padding:1.2rem 1.4rem}
  .sheet-head{display:none}
  .newsletter{margin-inline:auto;width:min(1180px,100% - 2*var(--gap))}
  .cook{padding-top:1rem}
}
.recipe-page>.wrap{grid-column:1/-1}
@media print{.topbar,.tabbar,.newsletter,.site-footer,.no-print,.rp-back,.rp-fav,.stepper,.link-btn{display:none!important}.recipe-page{display:block}.rp-sheet{box-shadow:none;margin:0}.tabs .tabpanel{display:block!important}.tablist{display:none}body{padding:0;background:var(--surface)}}
.fcard .author,.fcard .time{color:inherit}
/* breathing room between the search bar, category chips and filters on list pages */
.page-top>.searchbar,.page-top>.search-form{margin-bottom:1.3rem}
.page-top .chips{margin-bottom:.5rem}
.page-top .quick-filters{margin-top:.8rem}
/* keep faces in frame when a tall portrait is cropped to a card or hero */
.rp-hero img,.rcard-media img,.rrow-media img,.mini-media img,.fcard-img img,.cook-photo img{object-position:50% 28%}
.fcard-text{width:52%} .fcard-text strong{overflow-wrap:anywhere;font-size:1.05rem}
.fcard-img{right:-18px;width:140px;height:140px}
/* narrow phones: let footer columns shrink and long addresses wrap instead of overflowing sideways */
.footer-grid>*{min-width:0} .footer-grid a{overflow-wrap:anywhere}
@media (max-width:380px){.footer-grid{grid-template-columns:1fr}}

/* ---- Phone fixes: nothing may be wider than its card; side-scrolling rows start in line with the page content ---- */
.welcome>*,.welcome-copy,.searchbar{min-width:0}
.searchbar input{width:100%;min-width:0}
.searchbar .btn{flex:none}
.welcome .lead{max-width:none;overflow-wrap:anywhere}
.carousel,.chips,.strip{scroll-padding-inline:var(--gap)}

/* ---- Top bar buttons: theme switch and notifications ---- */
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:inline}
.notif{position:relative}
.notif>summary{list-style:none;cursor:pointer} .notif>summary::-webkit-details-marker{display:none}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:min(340px,calc(100vw - 2*var(--gap)));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:.9rem 1rem}
.notif-panel h2{font-size:1rem;margin:0 0 .5rem}
.notif-panel ul{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.15rem}
.notif-panel li a{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .4rem;border-radius:12px;text-decoration:none;font-size:.92rem}
.notif-panel li a:hover{background:var(--brand-l)}
.notif-panel .n{flex:none;min-width:26px;height:26px;border-radius:13px;background:var(--accent);color:#fff;font:800 .78rem/26px var(--font);text-align:center;padding:0 6px}
.notif-panel .none{color:var(--muted);margin:.2rem 0 .7rem}
.notif-panel .more{font-weight:800;font-size:.88rem;color:var(--brand-ink);text-decoration:none}
.notif-panel .who{font-size:.8rem;color:var(--muted);margin:0 0 .6rem}

/* ---- Video: our own full-screen button (so the phone shows our address, and the video fills a rotated screen) ---- */
.video-fs{position:absolute;right:10px;bottom:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.video:fullscreen{aspect-ratio:auto;border-radius:0;width:100vw;height:100vh;background:#000}
.video:fullscreen iframe{position:absolute;inset:0;width:100%;height:100%}
.video:fullscreen .video-fs{bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}

/* ---- Dark mode. Follows the phone's setting until a visitor uses the switch. Admin pages stay light. ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:not(.admin){
    --bg:color-mix(in srgb,var(--dark) 72%,#000); --surface:color-mix(in srgb,var(--dark) 84%,#fff); --card:var(--surface);
    --ink:#eef3f1; --muted:color-mix(in srgb,#fff 62%,var(--dark)); --line:color-mix(in srgb,#fff 14%,var(--dark));
    --brand-l:color-mix(in srgb,var(--brand) 22%,var(--surface)); --brand-m:color-mix(in srgb,var(--brand) 40%,var(--surface));
    --brand-ink:color-mix(in srgb,var(--brand) 62%,#fff); --strong:var(--brand); --on-strong:var(--on-brand);
    --tabs-bg:color-mix(in srgb,#fff 9%,var(--bg));
    --shadow:0 6px 22px rgba(0,0,0,.4); --shadow-sm:0 2px 10px rgba(0,0,0,.32); color-scheme:dark;
  }
}
:root[data-theme="dark"] body:not(.admin){
  --bg:color-mix(in srgb,var(--dark) 72%,#000); --surface:color-mix(in srgb,var(--dark) 84%,#fff); --card:var(--surface);
  --ink:#eef3f1; --muted:color-mix(in srgb,#fff 62%,var(--dark)); --line:color-mix(in srgb,#fff 14%,var(--dark));
  --brand-l:color-mix(in srgb,var(--brand) 22%,var(--surface)); --brand-m:color-mix(in srgb,var(--brand) 40%,var(--surface));
  --brand-ink:color-mix(in srgb,var(--brand) 62%,#fff); --strong:var(--brand); --on-strong:var(--on-brand);
  --tabs-bg:color-mix(in srgb,#fff 9%,var(--bg));
  --shadow:0 6px 22px rgba(0,0,0,.4); --shadow-sm:0 2px 10px rgba(0,0,0,.32); color-scheme:dark;
}
/* parts that sit on a photo or on the brand colour keep fixed light text */
.welcome .searchbar{--ink:#1c2a26;--muted:#5b6b66;background:#fff}

/* Recipes that are a video only (no written ingredients or steps yet) */
.video-only{display:flex;gap:.9rem;align-items:flex-start;background:var(--brand-l);border-radius:var(--r);padding:1.1rem 1.2rem;margin:1.2rem 0;color:var(--ink)}
.video-only .ico{flex:none;margin-top:.15rem;color:var(--brand-ink)}
.video-only h2{font-size:1.05rem;margin:0 0 .25rem} .video-only p{margin:0;color:var(--muted)}