/* ============================================================
   COOKEDMEAL.SHOP — "grocery aisle" design system
   Palette: navy (#1B2A4A) / market red (#D62828) / kraft (#E3D5BE)
            butter white (#FDFBF4) / navy-deep (#111B33) / slate (#6B748C)
   Type: Bricolage-free pairing — "Epilogue" (display) / "Rubik" (body)
   Signature: the aisle list — every recipe's shopping list grouped by
   supermarket aisle (produce / pantry / chilled), plus price-tag
   shaped labels and a receipt-rule grid.
   Distinct from every prior build: the only crisp navy-and-red
   grocery palette, and the only site with an aisle-grouped list.
   ============================================================ */
:root{
  --navy:#1B2A4A;
  --navy-deep:#111B33;
  --red:#D62828;
  --red-deep:#B31E1E;
  --kraft:#E3D5BE;
  --kraft-2:#D6C4A6;
  --paper:#FDFBF4;
  --paper-2:#F4F0E4;
  --slate:#6B748C;
  --line:#DFD8C7;
  --radius:6px;
  --shadow:0 2px 4px rgba(27,42,74,.06), 0 14px 30px rgba(27,42,74,.10);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:'Rubik',system-ui,sans-serif; line-height:1.72; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Epilogue','Rubik',sans-serif; font-weight:800; line-height:1.08; margin:0 0 .42em; color:var(--navy); letter-spacing:-.025em; }
h1{ font-size:clamp(2.3rem,5.6vw,3.8rem); }
h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); }
h3{ font-size:1.2rem; }
h1 em, h2 em{ font-style:normal; color:var(--red); }
p{ margin:0 0 1.1em; }
a{ color:var(--red-deep); }
img,svg{ display:block; max-width:100%; }
.container{ max-width:1060px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:780px; }

/* Signature: price-tag label */
.tagl{
  display:inline-flex; align-items:center; gap:8px; position:relative;
  background:var(--navy); color:var(--paper);
  font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 15px 8px 13px; border-radius:var(--radius); margin-bottom:17px;
}
.tagl::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--paper); flex-shrink:0;
}
.tagl.red{ background:var(--red); }
.tagl.kraft{ background:var(--kraft); color:var(--navy); }
.tagl.kraft::before{ background:var(--navy); }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:'Rubik',sans-serif; font-weight:600; font-size:.92rem;
  padding:14px 30px; border-radius:var(--radius); transition:background .18s, transform .12s, color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(214,40,40,.24); }
.btn-red:hover{ background:var(--red-deep); }
.btn-navy{ background:var(--navy); color:var(--paper); }
.btn-navy:hover{ background:var(--navy-deep); }
.btn-line{ background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-line:hover{ background:var(--navy); color:var(--paper); }
.skip-link{ position:absolute; left:-999px; background:var(--red); color:#fff; padding:10px 16px; z-index:300; }
.skip-link:focus{ left:0; top:0; }

/* Signature: receipt rule */
.receipt-rule{ border:0; border-top:2px dashed var(--line); margin:0; }

/* Signature: aisle list */
.aisles{ display:grid; gap:20px; }
.aisle{ border-top:2px solid var(--navy); padding-top:14px; }
.aisle h4{
  font-family:'Rubik',sans-serif; font-weight:600; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin:0 0 10px;
}
.aisle ul{ list-style:none; margin:0; padding:0; }
.aisle li{
  padding:8px 0; border-bottom:1px dashed var(--line); font-size:.93rem;
  display:flex; align-items:flex-start; gap:10px;
}
.aisle li:last-child{ border-bottom:0; }
.aisle li::before{
  content:""; width:13px; height:13px; border:2px solid var(--kraft-2);
  border-radius:3px; flex-shrink:0; margin-top:6px;
}
/* compact version used on cards */
.card .aisles{ gap:12px; }
.card .aisle{ border-top:1px solid var(--line); padding-top:10px; }
.card .aisle li{ padding:4px 0; border-bottom:0; font-size:.83rem; color:var(--slate); }
.card .aisle li::before{ width:10px; height:10px; margin-top:6px; }

/* ---------------- Header ---------------- */
header.site{
  background:var(--paper); position:sticky; top:0; z-index:100; border-bottom:2px solid var(--navy);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.logo{
  font-family:'Epilogue',sans-serif; font-weight:800; font-size:1.28rem; color:var(--navy);
  text-decoration:none; display:flex; align-items:center; gap:10px; letter-spacing:-.035em;
}
.logo .bag{ flex-shrink:0; }
.logo span{ color:var(--red); }
nav.main ul{ list-style:none; display:flex; gap:3px; margin:0; padding:0; }
nav.main a{
  text-decoration:none; color:var(--navy); font-weight:500; font-size:.91rem;
  padding:9px 14px; border-radius:var(--radius); transition:background .15s, color .15s;
}
nav.main a:hover, nav.main a[aria-current="page"]{ background:var(--navy); color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; color:var(--navy); font-size:1.7rem; cursor:pointer; }
@media (max-width:900px){
  .nav-toggle{ display:block; }
  nav.main{ position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--navy); max-height:0; overflow:hidden; transition:max-height .25s; }
  nav.main.open{ max-height:460px; }
  nav.main ul{ flex-direction:column; padding:10px 24px 18px; }
  nav.main a{ display:block; padding:12px 8px; }
}

/* ---------------- Hero ---------------- */
.hero{ padding:78px 0 64px; text-align:center; position:relative; overflow:hidden; background:var(--paper); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background:repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px);
  mask-image:radial-gradient(500px 300px at 50% 45%, #000, transparent 76%);
  -webkit-mask-image:radial-gradient(500px 300px at 50% 45%, #000, transparent 76%);
}
.hero > .container{ position:relative; z-index:1; }
.hero p.lede{ font-size:1.1rem; color:var(--slate); max-width:52ch; margin:16px auto 32px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-facts{
  display:inline-flex; margin-top:44px; border:2px solid var(--navy); border-radius:var(--radius);
  background:var(--kraft); overflow:hidden;
}
.hero-facts div{ padding:14px 26px; border-right:2px solid var(--navy); font-size:.78rem; font-weight:500; color:var(--navy); }
.hero-facts div:last-child{ border-right:0; }
.hero-facts b{ display:block; font-family:'Epilogue',sans-serif; font-weight:800; font-size:1.3rem; color:var(--red); }
@media (max-width:640px){ .hero-facts{ flex-direction:column; } .hero-facts div{ border-right:0; border-bottom:2px solid var(--navy); } .hero-facts div:last-child{ border-bottom:0; } }

/* ---------------- Cards ---------------- */
.section{ padding:64px 0; }
.section.kraft{ background:var(--paper-2); border-top:2px solid var(--navy); border-bottom:2px solid var(--navy); }
.section.navy{ background:var(--navy); color:#C9D2E6; }
.section.navy h2, .section.navy h3{ color:var(--paper); }
.section.navy p{ color:#A9B3CC; }
.section-head{ text-align:center; margin-bottom:44px; }
.section-head p{ color:var(--slate); max-width:56ch; margin:0 auto; }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:920px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:#fff; border:2px solid var(--navy); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--navy);
  transition:transform .16s, box-shadow .16s;
}
.card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--red); }
.card-art{
  height:126px; display:flex; align-items:center; justify-content:center; color:var(--navy);
  background:var(--kraft); border-bottom:2px solid var(--navy);
}
.card:nth-child(2) .card-art{ background:#F6D9D9; color:var(--red-deep); }
.card:nth-child(3) .card-art{ background:#D9E2F0; }
.card-body{ padding:21px 21px 19px; display:flex; flex-direction:column; flex:1; }
.card .kind{ font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.card h3{ margin-bottom:9px; }
.card p.desc{ color:var(--slate); font-size:.91rem; flex:1; margin-bottom:14px; }
.card .meta{
  display:flex; justify-content:space-between; margin-top:15px; padding-top:13px;
  border-top:2px dashed var(--line); font-weight:600; font-size:.79rem; color:var(--slate);
}
.card .meta .count{ color:var(--red); }

/* ---------------- Feature band ---------------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:820px){ .features{ grid-template-columns:1fr; } }
.feature{ text-align:center; padding:0 10px; }
.feature .f-ic{
  width:58px; height:58px; margin:0 auto 15px; border-radius:var(--radius);
  background:var(--red); display:flex; align-items:center; justify-content:center; color:#fff;
}
.feature:nth-child(2) .f-ic{ background:var(--kraft); color:var(--navy); }
.feature:nth-child(3) .f-ic{ background:transparent; border:2px solid var(--kraft); color:var(--kraft); }
.feature h3{ font-size:1.06rem; }
.feature p{ font-size:.92rem; margin:0; }

/* ---------------- Ad slots ---------------- */
.ad-slot{
  background:#fff; border:2px dashed var(--line); border-radius:var(--radius);
  padding:16px; text-align:center; color:var(--slate); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; margin:46px auto; max-width:760px;
}
.section.kraft .ad-slot{ background:var(--paper); }

/* ---------------- Recipe page ---------------- */
.recipe-hero{ background:var(--paper-2); border-bottom:2px solid var(--navy); padding:50px 0 44px; }
.crumbs{ font-size:.79rem; color:var(--slate); margin-bottom:16px; }
.crumbs a{ font-weight:600; }
.fact-strip{
  display:flex; background:var(--navy); color:var(--paper); border-radius:var(--radius);
  overflow:hidden; margin-top:26px; text-align:center;
}
.fact-strip div{ flex:1; padding:16px 8px; border-right:1px solid rgba(253,251,244,.2); }
.fact-strip div:last-child{ border-right:0; }
.fact-strip b{ display:block; font-family:'Epilogue',sans-serif; font-weight:800; font-size:1.2rem; color:#FF8A8A; }
.fact-strip span{ font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:#A9B3CC; }
.recipe-body{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; padding:54px 0 30px; align-items:start; }
@media (max-width:860px){ .recipe-body{ grid-template-columns:1fr; } }
.list-card{
  background:#fff; border:2px solid var(--navy); border-radius:var(--radius);
  padding:24px 22px; position:sticky; top:94px;
}
.list-card h3{ margin-bottom:6px; }
.list-card p.sub{ font-size:.82rem; color:var(--slate); margin-bottom:20px; }
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{
  counter-increment:step; display:grid; grid-template-columns:40px 1fr; gap:18px;
  padding:20px 0; border-bottom:2px dashed var(--line);
}
.steps li:last-child{ border-bottom:0; }
.steps li::before{
  content:counter(step); width:40px; height:40px; border-radius:var(--radius);
  background:var(--navy); color:var(--paper);
  font-family:'Epilogue',sans-serif; font-weight:800; font-size:.98rem;
  display:flex; align-items:center; justify-content:center;
}
.swap-box{
  background:var(--kraft); border-radius:var(--radius); padding:22px 24px; margin-top:28px;
}
.swap-box b{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red-deep); display:block; margin-bottom:10px; }
.swap-box .line{
  display:flex; justify-content:space-between; gap:14px; padding:7px 0;
  border-bottom:1px dashed rgba(27,42,74,.2); font-size:.9rem;
}
.swap-box .line:last-child{ border-bottom:0; }
.swap-box .line span:last-child{ color:var(--navy); font-weight:500; text-align:right; }
.tip{ background:var(--navy); color:#C9D2E6; border-radius:var(--radius); padding:22px 26px; margin-top:24px; }
.tip b{ color:#FF8A8A; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:8px; }
.tip p{ margin:0; font-size:.94rem; }
.nutri-note{ color:var(--slate); font-size:.81rem; margin-top:20px; }

/* ---------------- Static / legal pages ---------------- */
.page{ padding:58px 0 82px; }
.page h1{ margin-bottom:.5em; }
.page h2{ margin-top:1.7em; font-size:1.28rem; }
.page ul{ padding-left:1.3em; }
.page .updated{ color:var(--slate); font-size:.89rem; }

/* Contact */
.contact-form{ display:grid; gap:17px; max-width:520px; margin-top:26px; }
.contact-form label{ font-weight:600; font-size:.87rem; display:block; margin-bottom:7px; }
.contact-form input,.contact-form textarea{
  width:100%; padding:13px 15px; border:2px solid var(--navy); border-radius:var(--radius);
  font-family:'Rubik',sans-serif; font-size:.95rem; background:#fff;
}

/* ---------------- Newsletter ---------------- */
.mailer{
  background:var(--kraft); border:2px solid var(--navy); border-radius:var(--radius);
  padding:42px 38px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center;
}
@media (max-width:760px){ .mailer{ grid-template-columns:1fr; } }
.mailer p{ color:#5D5340; margin:0; }
.mailer form{ display:flex; gap:10px; }
@media (max-width:560px){ .mailer form{ flex-direction:column; } }
.mailer input[type="email"]{
  flex:1; padding:14px 16px; border-radius:var(--radius); border:2px solid var(--navy);
  font-family:'Rubik',sans-serif; font-size:.95rem;
}

/* ---------------- Footer ---------------- */
footer.site{ background:var(--navy-deep); color:#A9B3CC; padding:52px 0 26px; margin-top:70px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h4{ color:#FF8A8A; font-family:'Epilogue',sans-serif; font-weight:800; font-size:.88rem; margin:0 0 12px; letter-spacing:-.02em; }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin-bottom:9px; font-size:.91rem; }
.foot-grid a{ color:#A9B3CC; text-decoration:none; }
.foot-grid a:hover{ color:#fff; text-decoration:underline; }
.foot-grid p{ color:#A9B3CC; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.15); padding-top:20px; font-size:.79rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#7C87A3;
}

/* ---------------- Cookie notice ---------------- */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  background:#fff; border:2px solid var(--navy); border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--red); padding:18px 22px;
  display:none; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:720px; margin:0 auto;
}
.cookie-bar.show{ display:flex; }
.cookie-bar p{ margin:0; font-size:.85rem; color:var(--slate); max-width:52ch; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }