/* Foodzu storefront v4 — fresh wellness, made to order */
:root { --fz-deep:#123c2c; --fz-green:#238b45; --fz-mint:#eaf5e8; --fz-paper:#fbfcf8; }
body { background:var(--fz-paper); }
header { border-bottom-color:#e7ece5; }
header nav { gap:22px; }
header nav > a:not(.cart-link) { font-size:13px; white-space:nowrap; }
.category-section { position:fixed; top:var(--foodzu-header-height,76px); right:0; left:0; z-index:39; padding:8px max(5vw,24px); border-bottom:1px solid rgba(221,230,223,.9); background:rgba(251,252,248,.98); box-shadow:0 5px 18px rgba(18,60,44,.06); backdrop-filter:blur(12px); }
main:has(> .category-section) { padding-top:55px; }
.category-text-menu { display:flex; gap:8px; padding:2px 0 8px; overflow-x:auto; }
.category-text-menu a { flex:0 0 auto; padding:10px 16px; border:1px solid #dde6df; border-radius:10px; background:#fff; color:#395447; font-size:13px; font-weight:700; }
.category-text-menu a:hover { border-color:#8fbaa0; color:var(--fz-green); }
.category-text-menu a.active { border-color:var(--fz-deep); background:var(--fz-deep); color:#fff; }
.catalogue-cta { margin:-52px 0 80px; text-align:center; }
.hero.hero-compact { min-height:225px; height:23vw; max-height:285px; margin-top:0; margin-bottom:0; padding-top:22px; padding-bottom:22px; position:relative; background:linear-gradient(120deg,#e8f5e6 0%,#f3f7e8 60%,#fff5d9 100%); box-shadow:inset 0 0 0 1px rgba(35,139,69,.06); }
.hero-compact h1 { margin:10px 0 14px; font-size:clamp(42px,5vw,65px); }
.hero-compact p { max-width:580px; }
.hero-triptych figure { box-shadow:0 18px 40px rgba(18,60,44,.14); }
.freshness-strip { width:min(1320px,90%); margin:10px auto 0; padding:10px 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; border:1px solid #e2e9df; border-radius:12px; background:#fff; }
.freshness-strip span { display:flex; align-items:center; gap:9px; color:#465f54; font-size:13px; font-weight:600; }
.freshness-strip b { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--fz-mint); color:var(--fz-green); font-size:10px; }
.how-it-works { padding:52px max(5vw,24px) 18px; }
.how-it-works .section-heading > p { max-width:290px; margin:0; color:var(--muted); text-align:right; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.steps-grid article { min-height:125px; padding:19px; display:flex; gap:14px; border:1px solid #e3e9e1; border-radius:15px; background:#fff; }
.steps-grid article > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--fz-deep); color:#fff; font-weight:700; }
.steps-grid h3 { margin:4px 0 8px; font:600 21px Fraunces,serif; }
.steps-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.wellness-plans { margin:0 max(5vw,24px) 60px; padding:38px; display:grid; grid-template-columns:.78fr 1.22fr; gap:48px; border-radius:22px; background:var(--fz-deep); color:#fff; scroll-margin-top:90px; }
.plans-intro h2 { margin:10px 0 18px; font:700 clamp(38px,4.5vw,62px)/1 Fraunces,serif; }
.plans-intro h2 em { color:#bfe48b; }
.plans-intro p { max-width:460px; color:#c8d7d0; line-height:1.7; }
.plan-list { display:grid; }
.plan-list a { padding:19px 4px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:15px; border-bottom:1px solid rgba(255,255,255,.16); }
.plan-list a:first-child { border-top:1px solid rgba(255,255,255,.16); }
.plan-list > a > span { color:#91ab9f; font-size:12px; }
.plan-list div { display:grid; gap:4px; }
.plan-list b { font:600 20px Fraunces,serif; }
.plan-list small { color:#9fb4ab; }
.plan-list strong { color:#bfe48b; font-size:12px; }
.product { box-shadow:0 3px 20px rgba(24,60,41,.07); }
.product:hover { box-shadow:0 16px 38px rgba(24,60,41,.12); }
.product-info { min-height:200px; }
.photo span { background:rgba(255,255,255,.9); backdrop-filter:blur(6px); }
.product-anchor { height:0; scroll-margin-top:145px; }
.catalogue-heading { margin:0; padding:16px max(5vw,24px) 12px; }
.catalogue-heading h2 { margin:0; font-size:28px; }
.product-anchor + .grid { padding-top:18px; }
@media(max-width:1120px){header nav{gap:14px}.wellness-plans{gap:35px;padding:38px}}
@media(min-width:751px) and (max-width:1050px){header{flex-wrap:nowrap;gap:14px}.header-search{order:0;flex-basis:auto;max-width:none}.city-select{min-width:110px}}
@media(max-width:850px){header nav{width:100%;order:4;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:2px}.freshness-strip{grid-template-columns:1fr 1fr}.steps-grid{grid-template-columns:1fr}.wellness-plans{grid-template-columns:1fr}.how-it-works .section-heading>p{text-align:left}.hero.hero-compact{height:auto;min-height:400px}}
@media(max-width:560px){header{padding-top:7px;padding-bottom:7px}.category-section{padding:8px 14px 6px}.category-text-menu{margin:0}.category-text-menu a{padding:8px 12px;font-size:12px}.hero.hero-compact{width:calc(100% - 28px);min-height:280px;padding:20px;border-radius:18px}.hero-triptych{grid-template-columns:1fr}.hero-triptych figure:nth-child(1),.hero-triptych figure:nth-child(3){display:none}.hero-triptych figure:nth-child(2){height:86px;border-radius:12px}.catalogue-cta{margin:-50px 0 48px}.how-it-works{padding:42px 14px 15px}.steps-grid article{min-height:0;padding:16px}.wellness-plans{margin:0 14px 50px;padding:25px 19px;border-radius:18px}.plan-list a{grid-template-columns:28px 1fr}.plan-list strong{display:none}.plan-list b{font-size:18px}.plan-list small{font-size:12px}.hero-compact h1{font-size:38px}.hero-compact p{font-size:13px;line-height:1.45}.product-heading{padding-top:28px}}

/* Compact, floating catalogue controls */
@media(min-width:751px) and (max-width:1050px){header{flex-wrap:nowrap;gap:14px}.header-search{order:0;flex-basis:auto;max-width:none}.city-select{min-width:110px}}
@media(max-width:850px){.hero.hero-compact{min-height:300px}}
@media(max-width:750px){main:has(> .category-section){padding-top:47px}}
@media(max-width:560px){
  header{padding-top:7px;padding-bottom:7px}
  .category-section{padding:5px 14px}
  .category-text-menu a{padding:7px 11px}
  .hero.hero-compact{min-height:225px;padding:14px 18px}
  .hero-triptych figure:nth-child(2){height:55px}
  .hero-compact h1{margin:5px 0 8px;font-size:33px}
  .hero-compact p{margin:0 0 8px;font-size:12px;line-height:1.35}
  .hero-actions{margin-top:6px}
  .catalogue-heading{padding:9px 14px 7px}
  .catalogue-heading h2{font-size:22px}
  .product-heading{padding-top:9px}
}