:root{
  --navy:#06152e; --navy2:#0b2248; --blue:#116dff; --blue2:#0b4ed8; --ink:#071226; --muted:#5d6b82; --line:#d9e2f1; --card:#ffffff; --soft:#f4f8ff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#fff 0%,#f5f8fe 70%,#eef4ff 100%);color:var(--ink)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 28px;background:linear-gradient(135deg,#020916,var(--navy) 55%,#0a2b60);box-shadow:0 10px 30px rgba(2,9,22,.22)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px}.brand img{width:74px;height:74px;border-radius:50%;object-fit:cover}.brand strong{font-size:26px;line-height:1}.brand small{display:block;color:#3b91ff;font-size:16px;letter-spacing:6px;margin-top:2px}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}nav a{color:#fff;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.8px;font-size:14px}.social{display:inline-flex;align-items:center;gap:10px;margin-left:6px}.social-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#fff;background:rgba(255,255,255,.10);transition:background .15s,color .15s}.social-link svg{width:18px;height:18px;fill:currentColor;display:block}.social-link:hover,.social-link:focus-visible{background:#fff;color:#0b2b62}.social-link:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion:reduce){.social-link{transition:none}}
.hero{text-align:center;padding:38px 20px 26px}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:var(--blue);font-weight:900}.hero h1{margin:8px 0 10px;font-size:clamp(40px,6vw,74px);text-transform:uppercase;letter-spacing:3px;line-height:.95}.hero h1 span{color:var(--blue2)}.hero p:last-child{font-size:19px;color:#14305d;margin:0;text-transform:uppercase;letter-spacing:1.6px}

.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}.hero-actions a{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.9px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 10px 22px rgba(17,109,255,.22)}.hero-actions a:last-child{background:#fff;color:var(--blue2);border:1px solid #bcd0ed}.future{max-width:1180px;margin:38px auto;padding:30px 24px;text-align:center}.future h2{font-size:clamp(34px,5vw,56px);line-height:1;margin:8px 0;text-transform:uppercase}.future>p{color:#314b70;font-size:18px;max-width:760px;margin:0 auto 22px}.coming-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}.coming-grid div{position:relative;overflow:hidden;border:1px solid #c7d5e9;border-radius:16px;background:#fff;padding:24px 16px;box-shadow:0 14px 34px rgba(11,34,72,.1)}.coming-grid div:after{content:"COMING SOON";position:absolute;right:-34px;top:16px;transform:rotate(35deg);background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;padding:6px 36px}.coming-grid span{font-size:42px;display:block;margin-bottom:10px}.coming-grid strong{display:block;text-transform:uppercase;color:#071226;font-size:18px}.coming-grid small{display:block;color:#5d6b82;margin-top:6px;font-weight:800}.waitlist{position:relative;overflow:hidden;border:1px solid #c7d5e9;border-radius:18px;background:#fff;box-shadow:0 16px 42px rgba(11,34,72,.1)}.waitlist:before{content:"";position:absolute;inset:0;background:url('assets/macroprep-logo.jpg') center/52% no-repeat;opacity:.035;filter:grayscale(1);pointer-events:none}.waitlist>*{position:relative;z-index:1}.recipe-signup{position:relative;z-index:1;margin:0 28px 28px;border:1px solid #c7d5e9;border-radius:14px;background:rgba(244,248,255,.92);padding:22px;text-align:center}.recipe-signup h3{margin:0 0 6px;text-transform:uppercase;color:#0b2b62}.recipe-signup p{margin:0 0 14px;color:#39587c;font-weight:700}.recipe-signup a{display:inline-flex;text-decoration:none;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:12px 18px;border-radius:8px;text-transform:uppercase;font-weight:900}
.recipes{padding:14px 24px 28px}.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1600px;margin:0 auto}.home-card{position:relative;overflow:hidden;background:#fff;border:1px solid #cbd7e8;border-radius:14px;box-shadow:0 16px 40px rgba(11,34,72,.12);display:grid;grid-template-columns:43% 57%;min-height:365px}.home-card:before{content:"";position:absolute;inset:0;background:url('assets/macroprep-logo.jpg') center/65% no-repeat;opacity:.045;filter:grayscale(1);pointer-events:none}.home-card .food{position:relative;z-index:1;min-height:365px;overflow:hidden;background:linear-gradient(135deg,#e7eefb,#fff)}.food img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at 20% 20%,rgba(17,109,255,.22),transparent 38%),linear-gradient(135deg,#081734,#0e3f91);color:#fff;text-align:center}.placeholder img{width:68%;height:auto;object-fit:contain;border-radius:50%;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.home-info{position:relative;z-index:1;padding:24px 22px 18px;display:flex;flex-direction:column}.home-info h3{font-size:clamp(24px,2.2vw,36px);line-height:1.05;margin:0;text-transform:uppercase;letter-spacing:1px}.protein-tag{display:flex;align-items:center;gap:7px;color:var(--blue2);font-weight:900;text-transform:uppercase;font-size:13px;margin:14px 0}.macro-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;gap:2px}.macro{display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line)}.macro:last-child{border-right:0}.macro .icon{font-size:22px}.macro strong{font-size:28px;line-height:1;margin-top:4px}.macro small{text-transform:uppercase;font-weight:900;font-size:10px}.time-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.time-row span{display:flex;gap:9px;align-items:center;font-weight:900;text-transform:uppercase;color:#0a2e6d}.time-row b{font-size:24px}.view-btn{margin-top:auto;background:linear-gradient(135deg,var(--blue),var(--blue2));border:0;border-radius:6px;color:#fff;padding:13px 18px;font-weight:900;text-transform:uppercase;letter-spacing:1px;cursor:pointer;box-shadow:0 10px 20px rgba(17,109,255,.25)}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:linear-gradient(135deg,var(--navy),var(--blue2));padding:26px 42px;color:#fff}.feature-strip div{display:flex;align-items:center;gap:16px;border-right:1px solid rgba(255,255,255,.25);padding:0 22px}.feature-strip div:last-child{border:0}.feature-strip span{font-size:38px}.feature-strip strong{display:block;text-transform:uppercase;font-size:17px}.feature-strip small{display:block;color:#dceaff;margin-top:4px}
.about,.waitlist{max-width:880px;margin:34px auto;padding:28px;text-align:center}.about h2,.waitlist h2{font-size:38px;margin:8px 0;text-transform:uppercase}.waitlist form{display:flex;gap:10px;justify-content:center;margin-top:18px}.waitlist input{min-width:320px;padding:15px;border:1px solid #b9c7da;border-radius:8px}.waitlist button{padding:15px 22px;background:var(--blue2);color:#fff;border:0;border-radius:8px;font-weight:900}.hidden-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}.thanks{color:var(--blue2);font-weight:800}
.recipe-modal{width:min(1180px,96vw);max-height:92vh;border:0;border-radius:18px;padding:0;box-shadow:0 28px 90px rgba(0,0,0,.38);background:#fff}.recipe-modal::backdrop{background:rgba(2,8,20,.72);backdrop-filter:blur(5px)}.close-modal{position:sticky;top:12px;float:right;margin:12px 12px -54px 0;z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:#071226;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.full-card{position:relative;overflow:hidden;background:#fff;padding:0}.full-card:before{content:"";position:absolute;inset:0;background:url('assets/macroprep-logo.jpg') center 58%/72% no-repeat;opacity:.045;filter:grayscale(1);pointer-events:none}.full-top{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;border-bottom:3px solid var(--blue2)}.full-brand{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#06152e,#0b2b62);color:#fff;padding:18px 24px;border-bottom-right-radius:22px;width:max-content}.full-brand img{width:86px;height:86px;border-radius:50%;object-fit:cover}.full-brand strong{font-size:34px;text-transform:uppercase;letter-spacing:2px}.full-brand small{display:block;color:#4ca0ff;letter-spacing:7px;text-transform:uppercase;font-weight:900}.title-block{padding:24px}.title-block h2{font-size:clamp(46px,6vw,82px);line-height:.92;text-transform:uppercase;margin:18px 0 12px;color:#071226}.title-block h2 span{color:var(--blue2)}.subtitle{font-weight:900;text-transform:uppercase;color:#0b2b62;letter-spacing:1.4px}.full-photo{min-height:420px}.full-photo img{width:100%;height:100%;object-fit:cover}.full-photo.placeholder{min-height:420px}.top-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.stat-box{border:1px solid #bad0ef;border-radius:10px;text-align:center;padding:12px;background:rgba(255,255,255,.88)}.stat-box span{font-size:26px}.stat-box strong{display:block;font-size:34px}.stat-box small{font-weight:900;text-transform:uppercase}.serving-bar{background:linear-gradient(90deg,var(--navy),var(--blue2));color:#fff;padding:12px 18px;margin-top:14px;border-radius:8px;font-weight:900;text-transform:uppercase}
.full-body{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;padding:28px}.section-title{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--blue2),#0a2b60);color:#fff;border-radius:30px 4px 4px 30px;padding:9px 22px;margin:0 0 15px;text-transform:uppercase;letter-spacing:2px;font-size:21px}.full-body ul,.full-body ol{margin-top:0;padding-left:24px;font-size:17px;line-height:1.55}.full-body li{margin:5px 0}.full-body ol{counter-reset:item;list-style:none;padding-left:0}.full-body ol li{counter-increment:item;position:relative;padding-left:44px}.full-body ol li:before{content:counter(item);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--blue2);color:#fff;text-align:center;line-height:28px;font-weight:900}.bottom-panels{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;padding:0 28px 28px}.panel{border:1px solid #c7d5e9;border-radius:12px;background:rgba(255,255,255,.86);padding:18px}.panel h3{margin:0 0 12px;text-transform:uppercase;color:#0b2b62}.panel-row{display:flex;justify-content:space-between;border-bottom:1px dashed #bcc9dc;padding:9px 0;font-weight:800}.panel p,.panel li{font-size:16px;line-height:1.45}.chef-note{font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:19px!important}.modal-footer{position:relative;z-index:1;text-align:center;background:linear-gradient(135deg,var(--navy),var(--blue2));color:#fff;padding:18px;text-transform:uppercase;letter-spacing:3px;font-weight:900}
@media(max-width:1050px){.recipe-grid{grid-template-columns:1fr 1fr}.full-top{grid-template-columns:1fr}.full-photo{min-height:340px}.site-header{flex-wrap:wrap}.feature-strip{grid-template-columns:1fr 1fr}.coming-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.site-header{padding:10px 14px}.brand img{width:55px;height:55px}.brand strong{font-size:20px}nav{gap:10px;font-size:12px;flex-wrap:wrap}.recipe-grid{grid-template-columns:1fr}.home-card{grid-template-columns:1fr}.home-card .food{min-height:270px}.full-body,.bottom-panels{grid-template-columns:1fr}.top-stats{grid-template-columns:1fr 1fr}.waitlist form{flex-direction:column}.waitlist input{min-width:0;width:100%}.coming-grid{grid-template-columns:1fr}.recipe-signup{margin:0 16px 22px}}

/* Emoji + fit fixes requested */
.emoji,.icon,.protein-tag,.time-row span,.stat-box span,.serving-bar,.section-title,.panel h3{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",Arial,Helvetica,sans-serif}
.panel{overflow:hidden;min-height:0}
.panel h3{font-size:18px;line-height:1.15;white-space:nowrap}
.panel-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;line-height:1.22}
.panel-row span:first-child{text-transform:uppercase;white-space:nowrap}
.panel-row span:last-child{text-align:right;overflow-wrap:break-word}
.bottom-panels{align-items:start}
@media(max-width:680px){.panel h3{white-space:normal}.panel-row span:last-child{text-align:left}.panel-row{grid-template-columns:1fr}}


.feature-strip span,
.coming-grid span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#eaf2ff;
  color:#0b4ed8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}


/* MacroPrep container layout updates */
.time-row{grid-template-columns:1fr 1.25fr}
.time-row span{min-width:0;align-items:flex-start;flex-wrap:wrap;line-height:1.08}
.time-row b{font-size:20px;white-space:normal;line-height:1.05}
.time-row small{display:block;width:100%;font-size:10px;line-height:1.1}
.panel h3{white-space:normal;font-size:17px}
.panel-row{grid-template-columns:minmax(118px,auto) minmax(0,1fr)}
@media(max-width:680px){.time-row{grid-template-columns:1fr 1fr}.time-row b{font-size:18px}.panel-row{grid-template-columns:1fr}}

/* V1 cleanup: no food photos, cleaner storage/tip layout */
.home-card .food{background:radial-gradient(circle at 20% 20%,rgba(17,109,255,.25),transparent 38%),linear-gradient(135deg,#06152e,#0b4ed8)}
.home-card .placeholder{background:transparent}
.home-card .placeholder img{width:76%;max-width:220px;border-radius:50%;object-fit:contain}
.full-photo.placeholder{display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 18% 18%,rgba(17,109,255,.2),transparent 40%),linear-gradient(135deg,#06152e,#0b4ed8)}
.full-photo.placeholder img{width:min(72%,320px);height:auto;object-fit:contain;border-radius:50%;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.bottom-panels{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.bottom-panels .wide-panel{grid-column:1 / -1}
.panel p{margin:0;color:#102542;font-weight:750;line-height:1.45}
.panel-row span:last-child{text-align:right;line-height:1.25}
.storage-panel .panel-row span:last-child,.macros-panel .panel-row span:last-child{font-weight:900}
.wide-panel{background:rgba(255,255,255,.92)}
.wide-panel h3{margin-bottom:10px}
.wide-panel .chef-note{font-family:Arial,Helvetica,sans-serif;font-size:16px!important;font-weight:750;color:#102542}
@media(max-width:680px){.bottom-panels{grid-template-columns:1fr}.bottom-panels .wide-panel{grid-column:auto}.panel-row span:last-child{text-align:left}}

/* Final pre-macro-audit branding/card/layout fixes */
.home-card{
  grid-template-columns:43% 57%;
}
.card-branding{
  position:relative;
  z-index:1;
  min-height:365px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px 24px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#081734,#0e3f91);
}
.card-branding:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 42%);
  pointer-events:none;
}
.card-branding img{
  position:relative;
  z-index:1;
  width:min(78%,230px);
  height:auto;
  border-radius:50%;
  object-fit:contain;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.category-strip{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  padding:10px 12px;
}
.category-chicken .category-strip{background:linear-gradient(135deg,#116dff,#0b4ed8)}
.category-beef .category-strip{background:linear-gradient(135deg,#ff5a1f,#c62828)}
.category-breakfast .category-strip{background:linear-gradient(135deg,#f5b014,#ff7a00)}
.category-fresh .category-strip{background:linear-gradient(135deg,#10a85a,#047a3d)}
.category-default .category-strip{background:linear-gradient(135deg,#116dff,#0b4ed8)}
.home-card.category-beef .card-branding{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#2d0808,#8f1d1d)}
.home-card.category-breakfast .card-branding{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#3b2600,#b45f00)}
.home-card.category-fresh .card-branding{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#052d1c,#096b3a)}
.bottom-panels{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.bottom-panels .wide-panel{grid-column:1 / -1}
.storage-panel,.macros-panel{min-height:100%}
.wide-panel{background:rgba(255,255,255,.94)}
.wide-panel h3{margin-bottom:10px}
.wide-panel p{margin:0;font-size:17px;line-height:1.5;font-weight:750;color:#102542}
.wide-panel .chef-note{font-family:Arial,Helvetica,sans-serif;font-size:17px!important;font-weight:750;color:#102542}
.full-card:before{background:url('assets/macroprep-logo.jpg') center 58%/72% no-repeat;opacity:.04;filter:grayscale(1)}
@media(max-width:680px){
  .home-card{grid-template-columns:1fr}
  .card-branding{min-height:260px;padding:50px 20px 22px}
  .card-branding img{width:min(62%,190px)}
  .bottom-panels{grid-template-columns:1fr}
  .bottom-panels .wide-panel{grid-column:auto}
}


/* FINAL genre category card system */
.home-card{
  display:grid !important;
  grid-template-columns:43% 57% !important;
  grid-template-rows:60px 1fr !important;
  min-height:385px;
}
.category-strip{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  position:relative !important;
  z-index:4 !important;
  height:60px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  font-size:15px !important;
  border-radius:14px 14px 0 0 !important;
}
.category-chicken .category-strip{background:linear-gradient(135deg,#2563eb,#2563eb) !important;}
.category-beef .category-strip{background:linear-gradient(135deg,#a4161a,#a4161a) !important;}
.category-breakfast .category-strip{background:linear-gradient(135deg,#e8730a,#e8730a) !important;}
.category-fresh .category-strip{background:linear-gradient(135deg,#15803d,#15803d) !important;}
.category-default .category-strip{background:linear-gradient(135deg,#116dff,#0b4ed8) !important;}

.home-card .food{
  grid-column:1 !important;
  grid-row:2 !important;
  min-height:331px !important;
  padding-top:0 !important;
}
.home-card .home-info{
  grid-column:2 !important;
  grid-row:2 !important;
}
.home-card .placeholder{
  height:100% !important;
  min-height:331px !important;
  padding:22px !important;
}
.home-card .placeholder img{
  width:70% !important;
  max-width:170px !important;
}
.protein-tag{
  display:none !important;
}
@media(max-width:680px){
  .home-card{
    grid-template-columns:1fr !important;
    grid-template-rows:60px auto auto !important;
  }
  .category-strip{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .home-card .food{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:230px !important;
  }
  .home-card .home-info{
    grid-column:1 !important;
    grid-row:3 !important;
  }
}

.category-strip .emoji{font-size:1.4em; line-height:1;}


/* Mobile card stat alignment fixes - prevents time/serving numbers from wrapping */
.home-card .home-info{
  min-width:0;
}
.macro-row{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.macro{
  min-width:0;
}
.macro strong{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(25px,2.05vw,30px) !important;
  white-space:nowrap !important;
  letter-spacing:-.5px;
}
.macro small{
  font-family:Arial,Helvetica,sans-serif !important;
  white-space:nowrap !important;
  font-size:clamp(9px,.75vw,10px) !important;
  line-height:1.05 !important;
}
.time-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
.time-row > span{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:9px !important;
  row-gap:2px !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
  line-height:1 !important;
  font-family:Arial,Helvetica,sans-serif !important;
}
.time-row > span > .emoji{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",Arial,Helvetica,sans-serif !important;
  font-size:20px !important;
  line-height:1 !important;
}
.time-row > span > b{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(19px,1.8vw,24px) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  letter-spacing:-.2px;
}
.time-row > span > small{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  width:auto !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
@media(max-width:680px){
  .recipes{padding:14px 14px 28px !important;}
  .home-info{padding:24px 38px 26px !important;}
  .home-info h3{font-size:clamp(34px,10vw,46px) !important; line-height:.98 !important;}
  .macro-row{gap:0 !important; padding:14px 0 !important;}
  .macro .icon{font-size:20px !important;}
  .macro strong{font-size:clamp(28px,8vw,38px) !important;}
  .macro small{font-size:10px !important;}
  .time-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; margin:18px 0 20px !important;}
  .time-row > span{column-gap:8px !important;}
  .time-row > span > b{font-size:clamp(24px,7vw,32px) !important;}
  .time-row > span > small{font-size:12px !important;}
}
@media(max-width:390px){
  .home-info{padding:22px 28px 24px !important;}
  .home-info h3{font-size:clamp(31px,9.2vw,40px) !important;}
  .macro strong{font-size:clamp(26px,7.4vw,34px) !important;}
  .time-row > span > b{font-size:clamp(22px,6.5vw,28px) !important;}
}

/* Desktop card repair after mobile wrapping fix */
@media (min-width:681px){
  .recipe-grid{
    grid-template-columns:repeat(auto-fit,minmax(460px,1fr)) !important;
    align-items:stretch !important;
  }
  .home-card{
    grid-template-columns:43% 57% !important;
    min-height:400px !important;
  }
  .home-card .home-info{
    padding:24px 20px 20px !important;
    overflow:hidden !important;
  }
  .home-info h3{
    font-size:clamp(28px,2.15vw,36px) !important;
    line-height:1.04 !important;
    letter-spacing:1px !important;
  }
  .macro-row{
    gap:0 !important;
    padding:14px 0 !important;
  }
  .macro .icon{font-size:20px !important;}
  .macro strong{
    font-size:clamp(23px,1.65vw,28px) !important;
    letter-spacing:-.6px !important;
  }
  .macro small{
    font-size:9px !important;
    letter-spacing:-.15px !important;
  }
  .time-row{
    gap:10px !important;
    margin:16px 0 18px !important;
  }
  .time-row > span > .emoji{font-size:19px !important;}
  .time-row > span > b{
    font-size:clamp(21px,1.6vw,25px) !important;
    letter-spacing:-.35px !important;
  }
  .time-row > span > small{
    font-size:10px !important;
    letter-spacing:-.1px !important;
  }
}

@media (min-width:681px) and (max-width:1180px){
  .recipe-grid{grid-template-columns:1fr 1fr !important;}
}

/* Desktop recovery fix: keep recipe cards roomy on laptop/desktop while preserving mobile fixes */
.recipe-grid{
  grid-template-columns:repeat(auto-fit,minmax(520px,1fr)) !important;
  max-width:1500px !important;
  gap:24px !important;
}
.home-card{
  grid-template-columns:38% 62% !important;
  min-height:385px !important;
}
.home-info{
  padding:24px 24px 20px !important;
}
.home-info h3{
  font-size:clamp(28px,2vw,36px) !important;
}
.macro-row{
  gap:0 !important;
  padding:13px 0 !important;
}
.macro strong{
  font-size:clamp(23px,1.65vw,29px) !important;
  letter-spacing:-.8px !important;
}
.macro small{
  font-size:9px !important;
  letter-spacing:-.2px !important;
}
.time-row{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) !important;
  gap:16px !important;
}
.time-row > span > b{
  font-size:clamp(21px,1.55vw,25px) !important;
}
.time-row > span > small{
  font-size:10px !important;
  letter-spacing:-.2px !important;
}
@media(max-width:1150px){
  .recipe-grid{grid-template-columns:1fr !important;max-width:720px !important;}
  .home-card{grid-template-columns:40% 60% !important;}
  .macro strong{font-size:30px !important;}
  .macro small{font-size:10px !important;}
  .time-row > span > b{font-size:26px !important;}
}
@media(max-width:680px){
  .recipe-grid{max-width:100% !important;grid-template-columns:1fr !important;}
  .home-card{grid-template-columns:1fr !important;}
  .home-info{padding:24px 38px 26px !important;}
  .home-info h3{font-size:clamp(34px,10vw,46px) !important;}
  .macro strong{font-size:clamp(28px,8vw,38px) !important;}
  .macro small{font-size:10px !important;letter-spacing:0 !important;}
  .time-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .time-row > span > b{font-size:clamp(24px,7vw,32px) !important;}
  .time-row > span > small{font-size:12px !important;}
}

/* Category section layout */
.recipe-grid{
  display:block !important;
  max-width:1500px !important;
  margin:0 auto !important;
}
.recipe-category-section{
  margin:0 0 34px !important;
}
.category-heading{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 16px !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid #d9e3f2 !important;
  box-shadow:0 14px 30px rgba(11,34,72,.08) !important;
}
.category-heading-icon{
  width:46px !important;
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  background:#eef5ff !important;
  font-size:25px !important;
}
.category-heading h2{
  margin:0 !important;
  color:#07142b !important;
  font-size:clamp(26px,2.2vw,36px) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:2px !important;
}
.category-heading p{
  margin:5px 0 0 !important;
  color:#4c5b72 !important;
  font-weight:800 !important;
  font-size:13px !important;
}
.category-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(520px,1fr)) !important;
  gap:24px !important;
}
.category-section-chicken .category-heading-icon{background:#e8f2ff !important;}
.category-section-beef .category-heading-icon{background:#fff0e8 !important;}
.category-section-breakfast .category-heading-icon{background:#fff5dc !important;}
.category-section-fresh .category-heading-icon{background:#e9f8ef !important;}
@media(max-width:1150px){
  .category-card-grid{grid-template-columns:1fr !important;max-width:720px !important;margin:0 auto !important;}
}
@media(max-width:680px){
  .recipe-category-section{margin-bottom:28px !important;}
  .category-heading{padding:14px !important;margin-bottom:14px !important;}
  .category-heading-icon{width:42px !important;height:42px !important;font-size:23px !important;}
  .category-heading h2{font-size:24px !important;letter-spacing:1.5px !important;}
  .category-heading p{font-size:12px !important;line-height:1.25 !important;}
  .category-card-grid{max-width:100% !important;grid-template-columns:1fr !important;}
}

/* Category landing cards */
.category-page-header{
  max-width:1500px !important;
  margin:0 auto 18px !important;
  padding:18px 20px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid #d9e3f2 !important;
  box-shadow:0 14px 30px rgba(11,34,72,.08) !important;
}
.category-page-header h2{
  margin:4px 0 6px !important;
  color:#07142b !important;
  font-size:clamp(28px,3vw,44px) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:2px !important;
}
.category-page-header p:last-child{
  margin:0 !important;
  color:#4c5b72 !important;
  font-weight:800 !important;
}
.macroprep-category-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:22px !important;
  max-width:1500px !important;
  margin:0 auto !important;
}
.macroprep-category-card{
  position:relative !important;
  overflow:hidden !important;
  min-height:360px !important;
  border:1px solid #cbd7e8 !important;
  border-radius:16px !important;
  box-shadow:0 16px 40px rgba(11,34,72,.12) !important;
  background:#fff !important;
  cursor:pointer !important;
  padding:0 !important;
  text-align:left !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.macroprep-category-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 20px 46px rgba(11,34,72,.18) !important;
}
.category-card-logo{
  height:220px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:50px !important;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#06152e,#0b4ed8) !important;
}
.category-beef .category-card-logo{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#2d0808,#8f1d1d) !important;}
.category-breakfast .category-card-logo{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#3b2600,#b45f00) !important;}
.category-fresh .category-card-logo{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#052d1c,#096b3a) !important;}
.category-card-logo img{
  width:150px !important;
  height:150px !important;
  border-radius:50% !important;
  object-fit:contain !important;
  box-shadow:0 18px 40px rgba(0,0,0,.32) !important;
}
.category-card-info{
  padding:22px 22px 24px !important;
}
.category-card-info h3{
  margin:0 0 8px !important;
  color:#07142b !important;
  font-size:34px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:2px !important;
}
.category-card-info p{
  margin:0 0 16px !important;
  color:#4c5b72 !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
.category-card-info span{
  color:#116dff !important;
  font-weight:1000 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
}
.back-category-btn{
  margin:0 0 16px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#07142b !important;
  color:#fff !important;
  padding:12px 18px !important;
  font-weight:1000 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
.single-category-page{max-width:1500px !important;margin:0 auto !important;}
.empty-category{
  background:#fff !important;
  border:1px solid #d9e3f2 !important;
  border-radius:16px !important;
  padding:34px !important;
  box-shadow:0 16px 40px rgba(11,34,72,.1) !important;
}
.empty-category h3{margin:0 0 8px !important;font-size:30px !important;color:#07142b !important;text-transform:uppercase !important;}
.empty-category p{margin:0 !important;font-weight:800 !important;color:#4c5b72 !important;}
@media(max-width:680px){
  .macroprep-category-grid{grid-template-columns:1fr !important;gap:16px !important;}
  .macroprep-category-card{min-height:330px !important;}
  .category-card-logo{height:195px !important;}
  .category-card-logo img{width:135px !important;height:135px !important;}
  .category-card-info h3{font-size:30px !important;}
  .category-page-header{padding:16px !important;}
}

/* Seafood category color fix */
.category-seafood .category-strip{
  background:linear-gradient(135deg,#0891b2,#0891b2) !important;
  color:#fff !important;
}
.home-card.category-seafood .card-branding,
.category-seafood .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#00313d,#007c92) !important;
}
.category-section-seafood .category-heading-icon{
  background:#e6fbff !important;
}
.category-seafood .category-card-info span{
  color:#007c92 !important;
}

/* Card cleanup: remove time display, keep servings only */
.time-row.serving-only{grid-template-columns:1fr !important;}
.time-row.serving-only > span{justify-content:flex-start;}


/* MacroPrep About Section Update */
.mp-about-enhanced{
  max-width:980px !important;
  border:1px solid #c7d5e9;
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 42px rgba(11,34,72,.1);
}
.mp-about-enhanced h2{
  color:#071226;
}
.mp-about-enhanced p:not(.eyebrow){
  max-width:780px;
  margin:12px auto 0;
  color:#314b70;
  font-size:17px;
  line-height:1.65;
  font-weight:700;
}

/* MacroPrep Flexible Serving Size Tool */
.mp-portion-tool{
  position:relative;
  z-index:1;
  padding:28px 28px 0;
}
.mp-tool-card{
  border:1px solid #c7d5e9;
  border-radius:18px;
  padding:24px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  box-shadow:0 14px 34px rgba(11,34,72,.1);
}
.mp-tool-header{
  text-align:center;
  margin-bottom:20px;
}
.mp-tool-kicker{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--blue);
  font-weight:900;
  font-size:12px;
}
.mp-tool-header h3{
  margin:0 0 8px;
  text-transform:uppercase;
  color:#071226;
  font-size:clamp(24px,3.5vw,38px);
  line-height:1;
}
.mp-tool-header p,.mp-tool-note{
  margin:0;
  color:#314b70;
  font-weight:750;
  line-height:1.45;
}
.mp-size-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.mp-size-btn{
  appearance:none;
  border:2px solid #c7d5e9;
  border-radius:16px;
  padding:16px 12px;
  background:#fff;
  color:#071226;
  cursor:pointer;
  text-align:center;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.mp-size-btn:hover{
  transform:translateY(-1px);
  border-color:var(--blue);
}
.mp-size-btn.is-active{
  border-color:var(--blue2);
  background:#eaf2ff;
  box-shadow:0 10px 22px rgba(17,109,255,.16);
}
.mp-size-btn span{
  display:block;
  font-size:25px;
  font-weight:950;
  line-height:1;
}
.mp-size-btn small{
  display:block;
  margin-top:6px;
  text-transform:uppercase;
  color:#314b70;
  font-size:11px;
  font-weight:900;
  letter-spacing:.4px;
}
.mp-custom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:14px 0 16px;
  padding:14px;
  border:1px solid #d9e2f1;
  border-radius:14px;
  background:#fff;
}
.mp-custom-row label{
  text-transform:uppercase;
  color:#0b2b62;
  font-weight:900;
  letter-spacing:.4px;
}
.mp-custom-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:150px;
  color:#0b2b62;
  font-weight:900;
}
.mp-custom-size{
  width:100%;
  border:1px solid #b9c7da;
  border-radius:10px;
  padding:11px 12px;
  font:inherit;
  font-weight:900;
}
.mp-selected-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
  color:#102542;
}
.mp-selected-size{
  color:var(--blue2);
  font-weight:950;
}
.mp-macro-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.mp-macro-box{
  border:1px solid #c7d5e9;
  border-radius:14px;
  padding:16px 10px;
  background:#fff;
  text-align:center;
}
.mp-macro-number{
  display:block;
  color:#071226;
  font-size:clamp(24px,3vw,34px);
  font-weight:950;
  line-height:1;
  letter-spacing:-.7px;
}
.mp-macro-box small{
  display:block;
  margin-top:6px;
  color:#5d6b82;
  text-transform:uppercase;
  font-weight:900;
  font-size:11px;
}
.mp-449-check{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--navy),var(--blue2));
  color:#fff;
  font-weight:850;
  text-align:center;
}
.mp-tool-note{
  text-align:center;
  font-size:14px;
}
@media(max-width:680px){
  .mp-portion-tool{padding:22px 16px 0;}
  .mp-tool-card{padding:18px;border-radius:16px;}
  .mp-size-buttons{grid-template-columns:1fr;}
  .mp-custom-row{align-items:flex-start;flex-direction:column;}
  .mp-custom-input-wrap{max-width:100%;width:100%;}
  .mp-macro-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* Hidden background-only macro audit + dynamic portion text */
.mp-449-check{display:none !important;}
.mp-instruction-note{
  margin:18px 0 0;
  padding:14px 16px;
  border:1px solid #c7d5e9;
  border-radius:12px;
  background:#f4f8ff;
  color:#102542;
  font-weight:800;
  line-height:1.45;
}
.mp-instruction-note span{
  color:var(--blue2);
  font-weight:950;
}
.macros-panel h3 span[data-mp-selected-size-output]{
  color:#0b2b62;
}

/* Glass meal prep container icon for serving boxes */
.mp-container-icon{
  display:inline-block !important;
  width:30px !important;
  height:24px !important;
  position:relative !important;
  color:currentColor !important;
  flex:0 0 auto !important;
}
.mp-container-icon:before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  bottom:3px;
  height:13px;
  border:2px solid currentColor;
  border-radius:5px 5px 7px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(175,220,255,.35));
  box-shadow:inset 0 2px 4px rgba(255,255,255,.75),0 1px 2px rgba(7,18,38,.12);
}
.mp-container-icon:after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:4px;
  height:8px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:6px 6px 2px 2px;
  background:rgba(255,255,255,.7);
  transform:skewX(-10deg);
}
.time-row > span > .mp-container-icon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:center !important;
}
.serving-bar .mp-container-icon{
  width:28px !important;
  height:22px !important;
  vertical-align:middle !important;
  margin-right:7px !important;
  transform:translateY(4px) !important;
}


/* Custom glass meal prep container icon */
.mp-container-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:30px !important;
  position:relative !important;
  flex:0 0 auto !important;
  color:#0b4ed8 !important;
  background:transparent !important;
}
.mp-container-icon:before,
.mp-container-icon:after{
  content:none !important;
  display:none !important;
}
.mp-container-icon-svg{
  width:34px !important;
  height:30px !important;
  display:block !important;
  overflow:visible !important;
}
.mp-container-lid,
.mp-container-bowl{
  fill:rgba(220,240,255,.72);
  stroke:currentColor;
  stroke-width:4;
  stroke-linejoin:round;
}
.mp-container-bowl{
  fill:rgba(185,225,255,.5);
}
.mp-container-glass-line,
.mp-container-highlight,
.mp-container-shadow{
  fill:none;
  stroke:currentColor;
  stroke-width:3.5;
  stroke-linecap:round;
  opacity:.55;
}
.mp-container-highlight{stroke:#fff;opacity:.85;stroke-width:3;}
.mp-container-shadow{opacity:.18;stroke-width:4;}
.time-row > span > .mp-container-icon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:center !important;
}
.serving-bar .mp-container-icon{
  color:#fff !important;
  width:30px !important;
  height:26px !important;
  vertical-align:middle !important;
  margin-right:8px !important;
  transform:translateY(4px) !important;
}
.serving-bar .mp-container-icon-svg{
  width:30px !important;
  height:26px !important;
}
.serving-bar .mp-container-lid,
.serving-bar .mp-container-bowl{
  fill:rgba(255,255,255,.18);
}


/* Mobile cleanup fixes requested July 2026 */
.home-card:before,
.full-card:before{
  display:none !important;
}

.serving-bar{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.serving-bar .mp-container-icon{
  flex:0 0 auto;
}
.serving-bar-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.serving-bar-label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.9;
}
.serving-bar-copy strong{
  font-size:24px;
  line-height:1.05;
  letter-spacing:.02em;
}
.serving-bar-copy small{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.mp-instruction-note{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:flex-start;
  line-height:1.4;
}
.mp-instruction-note > span{
  display:inline-block;
}

.panel h3{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  line-height:1.08;
}
.panel h3 .emoji{
  flex:0 0 auto;
}
.panel h3 > span:last-child{
  display:block;
  min-width:0;
}
.macros-panel h3 [data-mp-selected-size-output]{
  display:block;
  margin-top:4px;
}

.mp-about-enhanced h2{
  font-size:clamp(40px,6vw,74px);
  line-height:.96;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:680px){
  .home-card:before,
  .full-card:before{display:none !important;}

  .title-block{
    padding:16px !important;
    overflow:hidden !important;
  }
  .full-brand{
    width:100% !important;
    max-width:100% !important;
    border-bottom-right-radius:18px !important;
    padding:14px 16px !important;
    gap:12px !important;
  }
  .full-brand img{
    width:64px !important;
    height:64px !important;
  }
  .full-brand strong{
    font-size:20px !important;
    line-height:1 !important;
    letter-spacing:1px !important;
  }
  .full-brand small{
    font-size:13px !important;
    letter-spacing:4px !important;
  }
  .title-block h2{
    font-size:clamp(34px, 10.5vw, 54px) !important;
    line-height:.92 !important;
    margin:16px 0 10px !important;
    word-break:break-word;
  }
  .subtitle{
    font-size:12px !important;
    line-height:1.25 !important;
    letter-spacing:1px !important;
  }
  .top-stats{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .stat-box{
    padding:16px 12px !important;
  }
  .stat-box strong{
    font-size:32px !important;
  }
  .serving-bar{
    margin-top:14px !important;
    padding:14px !important;
    align-items:flex-start !important;
  }
  .serving-bar-copy strong{
    font-size:18px !important;
  }
  .serving-bar-copy small{
    font-size:12px !important;
  }
  .feature-strip{
    grid-template-columns:1fr !important;
    padding:16px 18px !important;
    gap:0 !important;
    overflow:hidden !important;
  }
  .feature-strip div{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.18) !important;
    padding:16px 6px !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:12px !important;
    align-items:center !important;
  }
  .feature-strip div:last-child{
    border-bottom:0 !important;
  }
  .feature-strip strong,
  .feature-strip small{
    text-align:left !important;
  }
  .mp-about-enhanced{
    padding:22px 18px !important;
  }
  .mp-about-enhanced h2{
    font-size:clamp(26px, 11vw, 46px) !important;
    line-height:.96 !important;
    max-width:100% !important;
  }
  .mp-about-enhanced p{
    font-size:16px !important;
    line-height:1.5 !important;
  }
  .panel h3{
    font-size:16px !important;
    gap:10px !important;
  }
  .macros-panel h3 [data-mp-selected-size-output]{
    margin-top:6px !important;
    word-break:break-word;
  }
  .panel-row{
    gap:6px !important;
  }
}


/* Testing photos + burrito/bite serving selector updates */
.mp-photo-gallery{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:24px 28px 0;
}
.mp-photo-gallery figure{
  margin:0;
  border:1px solid #c7d5e9;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(11,34,72,.10);
}
.mp-photo-gallery img{
  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
}
.mp-item-portion-tool .mp-size-buttons{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.mp-custom-input-wrap .mp-custom-count{
  width:100%;
}
@media(max-width:680px){
  .mp-photo-gallery{
    grid-template-columns:1fr !important;
    padding:18px 16px 0 !important;
    gap:12px !important;
  }
  .mp-photo-gallery img{
    height:255px !important;
  }
  .mp-item-portion-tool .mp-size-buttons{
    grid-template-columns:1fr 1fr !important;
  }
}


.food-photo{height:100%;background:#fff}.food-photo img{width:100%;height:100%;object-fit:cover;display:block}.mp-photo-gallery{display:none !important;}


/* Final category/logo placement fixes */
.category-card-logo{
  padding-top:0 !important;
  align-items:center !important;
  justify-content:center !important;
}
.category-card-logo img{
  transform:translateY(0) !important;
}

.home-card .food,
.home-card .placeholder,
.home-card .food-photo.placeholder{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.home-card .placeholder,
.home-card .food-photo.placeholder{
  padding:22px !important;
}
.home-card .placeholder img,
.home-card .food-photo.placeholder img{
  width:min(72%,190px) !important;
  max-width:190px !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:50% !important;
  box-shadow:0 18px 40px rgba(0,0,0,.32) !important;
}

/* No-photo recipe logo backgrounds follow each category */
.home-card.category-chicken .food,
.home-card.category-chicken .placeholder,
.home-card.category-chicken .food-photo.placeholder,
.category-chicken .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#081734,#0e3f91) !important;
}
.home-card.category-beef .food,
.home-card.category-beef .placeholder,
.home-card.category-beef .food-photo.placeholder,
.category-beef .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#4a1608,#b5541c) !important;
}
.home-card.category-breakfast .food,
.home-card.category-breakfast .placeholder,
.home-card.category-breakfast .food-photo.placeholder,
.category-breakfast .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#3b2600,#b45f00) !important;
}
.home-card.category-fresh .food,
.home-card.category-fresh .placeholder,
.home-card.category-fresh .food-photo.placeholder,
.category-fresh .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#052d1c,#096b3a) !important;
}
.home-card.category-seafood .food,
.home-card.category-seafood .placeholder,
.home-card.category-seafood .food-photo.placeholder,
.category-seafood .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#00313d,#007c92) !important;
}

@media(max-width:680px){
  .category-card-logo{padding-top:0 !important;}
  .home-card .placeholder img,
  .home-card .food-photo.placeholder img{
    width:min(62%,170px) !important;
    max-width:170px !important;
  }
}


/* Hide old default label in serving bar */
.serving-bar-label{display:none !important;}


/* REAL FIX: make every category landing card use the same structure/heights */
.macroprep-category-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:16px !important;
  padding:0 !important;
  background:#ffffff !important;
}

.macroprep-category-card .category-strip{
  position:absolute !important;
  z-index:2 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 12px !important;
  margin:0 !important;
  border-radius:16px 16px 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.macroprep-category-card .category-card-logo{
  width:100% !important;
  height:270px !important;
  min-height:270px !important;
  flex:0 0 270px !important;
  margin:0 !important;
  padding:52px 24px 0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:0 !important;
}

.macroprep-category-card .category-card-logo img{
  width:150px !important;
  height:150px !important;
  object-fit:contain !important;
}

.macroprep-category-card .category-card-info{
  flex:1 1 auto !important;
  min-height:150px !important;
  margin:0 !important;
  padding:22px 22px 24px !important;
  background:#ffffff !important;
}

/* Keep the original category colors while using the same sizing */
.macroprep-category-card.category-chicken .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#06152e,#0b4ed8) !important;
}
.macroprep-category-card.category-beef .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#2d0808,#8f1d1d) !important;
}
.macroprep-category-card.category-breakfast .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#3b2600,#b45f00) !important;
}
.macroprep-category-card.category-fresh .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#052d1c,#096b3a) !important;
}
.macroprep-category-card.category-seafood .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#00313d,#007c92) !important;
}

@media(max-width:680px){
  .macroprep-category-card .category-strip{
    height:50px !important;
    min-height:50px !important;
  }
  .macroprep-category-card .category-card-logo{
    height:230px !important;
    min-height:230px !important;
    flex-basis:230px !important;
    padding-top:50px !important;
  }
  .macroprep-category-card .category-card-logo img{
    width:135px !important;
    height:135px !important;
  }
  .macroprep-category-card .category-card-info{
    min-height:140px !important;
  }
}


/* Mobile final cleanup: macro g spacing + serving bar + macros panel heading */
.macro strong,
.stat-box strong,
.mp-macro-number{
  line-height:1.14 !important;
}

.macro small,
.stat-box small,
.mp-macro-box small{
  display:block !important;
  margin-top:4px !important;
  line-height:1.05 !important;
}

.serving-bar{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  text-align:left !important;
}

.serving-bar .mp-container-icon{
  flex:0 0 auto !important;
}

.serving-bar-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  min-width:0 !important;
}

.serving-bar-copy strong{
  display:block !important;
  line-height:1.08 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.serving-bar-copy small{
  display:block !important;
  line-height:1.1 !important;
  white-space:normal !important;
  word-break:normal !important;
}

.macros-panel h3{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  line-height:1.12 !important;
}

.macros-panel h3 .emoji{
  flex:0 0 auto !important;
}

.macros-panel h3 > span:last-child{
  display:block !important;
  min-width:0 !important;
}

.macros-panel h3 [data-mp-selected-size-output]{
  display:block !important;
  margin-top:4px !important;
  line-height:1.08 !important;
  white-space:normal !important;
}

@media(max-width:680px){
  .macro strong{
    font-size:39px !important;
    line-height:1.16 !important;
    margin-top:2px !important;
  }
  .macro small{
    font-size:12px !important;
    margin-top:5px !important;
    line-height:1.08 !important;
  }

  .stat-box strong{
    font-size:38px !important;
    line-height:1.16 !important;
    margin-top:4px !important;
  }
  .stat-box small{
    font-size:14px !important;
    margin-top:6px !important;
    line-height:1.08 !important;
  }

  .serving-bar{
    padding:16px 18px !important;
    gap:14px !important;
    align-items:center !important;
  }
  .serving-bar .mp-container-icon{
    width:36px !important;
    height:36px !important;
  }
  .serving-bar-copy strong{
    font-size:21px !important;
    letter-spacing:.02em !important;
  }
  .serving-bar-copy small{
    font-size:13px !important;
    letter-spacing:.05em !important;
  }

  .macros-panel h3{
    font-size:22px !important;
    letter-spacing:.04em !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
  .macros-panel h3 [data-mp-selected-size-output]{
    font-size:21px !important;
    letter-spacing:.04em !important;
    margin-top:6px !important;
  }

  .mp-macro-number{
    line-height:1.16 !important;
  }
  .mp-macro-box small{
    margin-top:6px !important;
  }
}


/* Final mobile fix: prevent serving bar and macros heading text from overlapping */
@media(max-width:680px){
  .serving-bar{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    column-gap:12px !important;
    align-items:center !important;
    padding:16px 18px !important;
    text-align:left !important;
  }

  .serving-bar .mp-container-icon{
    grid-column:1 !important;
    width:30px !important;
    height:30px !important;
    align-self:center !important;
  }

  .serving-bar-copy{
    grid-column:2 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .serving-bar-copy strong{
    display:block !important;
    width:100% !important;
    font-size:17px !important;
    line-height:1.14 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-align:left !important;
  }

  .serving-bar-copy small{
    display:block !important;
    width:100% !important;
    margin-top:5px !important;
    font-size:12px !important;
    line-height:1.14 !important;
    letter-spacing:.04em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-align:left !important;
  }

  .macros-panel h3{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:10px !important;
    align-items:start !important;
    text-align:left !important;
    line-height:1.12 !important;
    letter-spacing:.04em !important;
    font-size:22px !important;
  }

  .macros-panel h3 .emoji{
    grid-column:1 !important;
    display:block !important;
    font-size:27px !important;
    line-height:1 !important;
    margin-top:2px !important;
  }

  .macros-panel h3 > span:last-child{
    grid-column:2 !important;
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:22px !important;
    line-height:1.1 !important;
    letter-spacing:.04em !important;
    white-space:normal !important;
  }

  .macros-panel h3 [data-mp-selected-size-output]{
    display:block !important;
    margin-top:7px !important;
    font-size:17px !important;
    line-height:1.14 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
}


/* FINAL SIMPLE MOBILE FIX: stop text collisions by removing cramped icon/grid layout */
@media(max-width:680px){
  .serving-bar{
    display:block !important;
    width:100% !important;
    padding:16px 18px !important;
    text-align:center !important;
  }

  .serving-bar > .mp-container-icon{
    display:none !important;
  }

  .serving-bar-copy{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .serving-bar-copy strong{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-size:18px !important;
    line-height:1.18 !important;
    letter-spacing:.03em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-align:center !important;
  }

  .serving-bar-copy small{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:7px !important;
    font-size:12px !important;
    line-height:1.18 !important;
    letter-spacing:.04em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-align:center !important;
  }

  .macros-panel h3{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    font-size:24px !important;
    line-height:1.12 !important;
    letter-spacing:.04em !important;
  }

  .macros-panel h3 .emoji{
    display:none !important;
  }

  .macros-panel h3 > span:last-child{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:24px !important;
    line-height:1.12 !important;
    letter-spacing:.04em !important;
    white-space:normal !important;
    text-align:left !important;
  }

  .macros-panel h3 [data-mp-selected-size-output]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:8px !important;
    font-size:16px !important;
    line-height:1.2 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-align:left !important;
  }

  .wide-panel h3,
  .storage-panel h3{
    display:block !important;
    font-size:22px !important;
    line-height:1.15 !important;
    letter-spacing:.04em !important;
  }
  .wide-panel h3 .emoji,
  .storage-panel h3 .emoji{
    display:none !important;
  }
}


/* Emergency mobile no-overlap fix: remove duplicate serving bar and simplify macro panel titles */
@media(max-width:680px){
  .title-block .serving-bar{
    display:none !important;
  }

  .macros-panel h3{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-size:21px !important;
    line-height:1.12 !important;
    letter-spacing:.03em !important;
    text-align:left !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    margin-bottom:18px !important;
  }

  .macros-panel h3 .emoji{
    display:none !important;
  }

  .macros-panel h3 > span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:21px !important;
    line-height:1.12 !important;
    letter-spacing:.03em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .storage-panel h3,
  .wide-panel h3{
    display:block !important;
    width:100% !important;
    font-size:21px !important;
    line-height:1.14 !important;
    letter-spacing:.03em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .storage-panel h3 .emoji,
  .wide-panel h3 .emoji{
    display:none !important;
  }
}


/* Mobile modal scroll lock fix: only the recipe popup scrolls, not the foggy background */
body[style*="position: fixed"]{
  overscroll-behavior:none !important;
}

.recipe-modal{
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

.recipe-modal::backdrop{
  overscroll-behavior:none !important;
}

/* THE RECIPE CARD ON A PHONE (Engineering 2026-10-20, from the owner's phone recording of 2026-10-19). On a phone the
   card is a full-screen page. Four stacked blocks used to size it calc(100vw - 32px) by 92vh, centred, one of them
   position:relative. A phone's vh counts its browser bars, so the card's top and bottom sat under them and could not be
   scrolled into view, the width left a grey strip, and the X scrolled away with nothing else to close the card. Now the
   dialog fills the visible screen (100dvh; 100vh where dvh is unknown) and scrolls itself top to bottom. The X is pinned
   top right inside the safe area. "Back to recipes" (script.js) ends the card. The card had no padding of its own, so the
   safe-area insets are its padding; they are 0 unless the page asks for viewport-fit=cover. This block replaces the four.
   Desktop is unchanged: nothing here applies above 680px but the button's display:none. */
.back-to-recipes{display:none}

@media(max-width:680px){
  dialog.recipe-modal,
  .recipe-modal{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
  }

  /* Fixed to the screen, not stuck in the card's flow: the card scrolls under it, so it can never scroll away. Its size,
     corners and shadow are governance.css's (48 px, 12 px, none), which loads after this file. */
  .close-modal{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 10px) !important;
    left:auto !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    z-index:100 !important;
    font-size:34px !important;
  }

  .recipe-modal .full-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .recipe-modal .title-block,
  .recipe-modal .full-body,
  .recipe-modal .bottom-panels,
  .recipe-modal .mp-portion-tool,
  .recipe-modal .mp-photo-gallery{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .back-to-recipes{
    display:block;
    width:calc(100% - 32px);
    margin:8px 16px 24px;
    padding:16px;
    border:0;
    border-radius:12px;
    background:#005DFA;
    color:#fff;
    font:inherit;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
  }
}


/* Mobile feature strip cleanup */
@media(max-width:680px){
  .feature-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:28px 22px !important;
  }

  .feature{
    display:grid !important;
    grid-template-columns:110px 1fr !important;
    column-gap:18px !important;
    row-gap:6px !important;
    align-items:start !important;
    padding:22px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.18) !important;
  }

  .feature:last-child{
    border-bottom:0 !important;
  }

  .feature span{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    font-size:15px !important;
    letter-spacing:.12em !important;
    margin:0 !important;
  }

  .feature strong{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    margin:0 !important;
    font-size:22px !important;
    line-height:1.1 !important;
    letter-spacing:.04em !important;
    text-align:left !important;
  }

  .feature small,
  .feature p{
    grid-column:2 !important;
    grid-row:2 !important;
    display:block !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1.35 !important;
    text-align:left !important;
    color:rgba(255,255,255,.88) !important;
  }
}


/* REAL mobile feature strip fix: target actual HTML structure */
@media(max-width:680px){
  .feature-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:28px 22px !important;
  }

  .feature-strip > div{
    display:grid !important;
    grid-template-columns:108px minmax(0,1fr) !important;
    column-gap:18px !important;
    row-gap:6px !important;
    align-items:start !important;
    padding:20px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.18) !important;
  }

  .feature-strip > div:last-child{
    border-bottom:0 !important;
  }

  .feature-strip > div > span{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;
    height:42px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:#eaf2ff !important;
    color:#0b4ed8 !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.12em !important;
  }

  .feature-strip > div > strong{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    text-transform:uppercase !important;
    font-size:22px !important;
    line-height:1.12 !important;
    letter-spacing:.03em !important;
    text-align:left !important;
  }

  .feature-strip > div > small{
    grid-column:2 !important;
    grid-row:2 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:16px !important;
    line-height:1.35 !important;
    text-align:left !important;
  }
}


/* Final post-tuna fixes: Seafood link color + uniform category recipe card sizes */
.macroprep-category-card.category-seafood .category-card-info span,
.category-seafood .category-card-info span{
  color:#116dff !important;
}

.single-category-page .category-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(520px, 720px)) !important;
  justify-content:start !important;
  align-items:stretch !important;
  gap:24px !important;
  max-width:1500px !important;
  margin:0 auto !important;
}

.single-category-page .category-card-grid .home-card{
  width:100% !important;
  max-width:720px !important;
  min-height:365px !important;
}

@media(max-width:1150px){
  .single-category-page .category-card-grid{
    grid-template-columns:1fr !important;
    max-width:720px !important;
    justify-content:center !important;
  }
  .single-category-page .category-card-grid .home-card{
    max-width:720px !important;
  }
}

@media(max-width:680px){
  .single-category-page .category-card-grid{
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }
  .single-category-page .category-card-grid .home-card{
    max-width:100% !important;
    min-height:0 !important;
  }
}


/* FINAL FIX: category recipe pages keep 2-column desktop layout + uniform card sizing */
.recipe-grid > .single-category-page{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:1500px !important;
  margin:0 auto !important;
}

.single-category-page .category-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:24px !important;
  width:100% !important;
  max-width:1500px !important;
  margin:0 auto !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}

.single-category-page .category-card-grid .home-card{
  width:100% !important;
  max-width:none !important;
  min-height:385px !important;
}

@media(max-width:820px){
  .single-category-page .category-card-grid{
    grid-template-columns:1fr !important;
    max-width:720px !important;
    justify-content:center !important;
  }

  .single-category-page .category-card-grid .home-card{
    max-width:720px !important;
  }
}

@media(max-width:680px){
  .single-category-page .category-card-grid{
    grid-template-columns:1fr !important;
    max-width:100% !important;
  }

  .single-category-page .category-card-grid .home-card{
    max-width:100% !important;
    min-height:0 !important;
  }
}

/* ==========================================================================
   Pork and Turkey category colours — 2026-09-07

   Added with the Recipe Discovery Taxonomy, which split one flat category list
   into three axes and created Pork and Turkey on the protein axis. Without
   these rules both cards fall through to .category-default and render in
   chicken blue, which reads as a bug rather than a default.

   Follows the Seafood pattern exactly — that was the last category added and
   needed six rule blocks, so these do too. Appended at the end for the same
   reason Seafood's were: the earlier blocks use !important and position is
   what settles it.

   THE HEX VALUES ARE ENGINEERING'S PROPOSAL, NOT A BRANDING DECISION.
   Chosen to sit at the same saturation as the existing five and to be
   distinguishable from them — the palette already holds blue, orange-red,
   amber, green and teal, so rose and plum are what is left that reads as
   distinct rather than as a near-miss of beef or breakfast.

   Branding changes two pairs and everything follows:
     Pork    #e0578a light  #a82f5c dark
     Turkey  #9d5bd2 light  #6b3a9e dark
   ========================================================================== */

/* --- Pork --------------------------------------------------------------- */
.category-pork .category-strip{
  background:linear-gradient(135deg,#e0578a,#a82f5c) !important;
  color:#fff !important;
}
.home-card.category-pork .card-branding,
.category-pork .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#4a0f26,#a82f5c) !important;
}
.category-section-pork .category-heading-icon{
  background:#fdeaf1 !important;
}
.home-card.category-pork .food,
.home-card.category-pork .placeholder,
.home-card.category-pork .food-photo.placeholder{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#4a0f26,#a82f5c) !important;
}
.macroprep-category-card.category-pork .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#4a0f26,#a82f5c) !important;
}
.macroprep-category-card.category-pork .category-card-info span,
.category-pork .category-card-info span{
  color:#a82f5c !important;
}

/* --- Turkey ------------------------------------------------------------- */
.category-turkey .category-strip{
  background:linear-gradient(135deg,#9d5bd2,#6b3a9e) !important;
  color:#fff !important;
}
.home-card.category-turkey .card-branding,
.category-turkey .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#2e1247,#6b3a9e) !important;
}
.category-section-turkey .category-heading-icon{
  background:#f3ebfd !important;
}
.home-card.category-turkey .food,
.home-card.category-turkey .placeholder,
.home-card.category-turkey .food-photo.placeholder{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#2e1247,#6b3a9e) !important;
}
.macroprep-category-card.category-turkey .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#2e1247,#6b3a9e) !important;
}
.macroprep-category-card.category-turkey .category-card-info span,
.category-turkey .category-card-info span{
  color:#6b3a9e !important;
}

/* ==========================================================================
   Category-coloured recipe counts — 2026-09-07

   The "N RECIPES →" link took its colour per category on Pork only, because
   that rule arrived with Pork. Everything else fell back to blue, and Seafood
   had a teal rule that a later block overrode back to blue.

   These match the link to its category everywhere.

   NOT the strip gradient values. Beef and Breakfast are legible on a coloured
   strip and not on white — #d98214 amber sits near 2.9:1 against white, well
   under the 4.5:1 that small text needs. Both use a darker shade of the same
   hue instead, which reads as the same colour while staying readable. The
   others are close enough to their strip colour to use it directly.
   ========================================================================== */

.macroprep-category-card.category-chicken .category-card-info span,
.category-chicken .category-card-info span{
  color:#2563eb !important;
}

/* darkened from #b5541c — the strip value is ~4.0:1 on white */
.macroprep-category-card.category-beef .category-card-info span,
.category-beef .category-card-info span{
  color:#a4161a !important;
}

/* darkened from #d98214 — the strip value is ~2.9:1 on white, unreadable */
.macroprep-category-card.category-breakfast .category-card-info span,
.category-breakfast .category-card-info span{
  color:#374151 !important;
}

.macroprep-category-card.category-fresh .category-card-info span,
.category-fresh .category-card-info span{
  color:#15803d !important;
}

/* restores the teal that line 626 set and a later block overrode to blue */
.macroprep-category-card.category-seafood .category-card-info span,
.category-seafood .category-card-info span{
  color:#374151 !important;
}

/* ==========================================================================
   Snack, and coming-soon cards — 2026-09-07

   Slate rather than another food colour. Every other category is a colour you
   could eat; a card that is not clickable yet should read as chrome, and the
   colour says "not yet" before the text does.

   Coming-soon is derived, not flagged: an active category with no recipes.
   It becomes an ordinary card with no CSS change the moment one is tagged.
   ========================================================================== */

.category-snack .category-strip{
  background:linear-gradient(135deg,#7c8899,#48566b) !important;
  color:#fff !important;
}
.macroprep-category-card.category-snack .category-card-logo,
.category-snack .category-card-logo{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#1d2530,#48566b) !important;
}
.category-section-snack .category-heading-icon{
  background:#eef1f5 !important;
}
.macroprep-category-card.category-snack .category-card-info span,
.category-snack .category-card-info span{
  color:#48566b !important;
}

/* Not a button, so it needs the card's own layout back, and it must not offer
   the affordances of something clickable. */
.macroprep-category-card.coming-soon{
  cursor:default;
}
.macroprep-category-card.coming-soon:hover{
  transform:none !important;
  box-shadow:none !important;
}
.macroprep-category-card.coming-soon .category-card-info span{
  letter-spacing:.8px;
}

/* THE FOOTER (review L12, the privacy page's link): nothing styled it, so it sat flush left in the browser's own type.
   Centred and padded, its text muted and its link brand blue, with governance.css's tokens (their values as fallbacks);
   one rule for phone and desktop. */
.site-footer{
  max-width:1180px;
  margin:0 auto;
  padding:28px 16px 36px;
  text-align:center;
  color:var(--text-muted, #64748B);
  font-family:"Inter", Arial, sans-serif;
  font-size:14px;
  line-height:1.5;
}
.site-footer p{
  margin:0;
}
.site-footer a{
  color:var(--brand-blue, #005DFA);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  text-decoration-thickness:2px;
}

/* THE RECIPE CARD ON A LAPTOP (Engineering 2026-11-02, from the owner's laptop screenshot of 2026-11-01: Tuna Casserole's
   card in a window about 800 px wide, a blank strip at the right, the X by the photo). The X floats right with a negative
   bottom margin so that it takes no room: -54px is the 12px above a 42px X. governance.css draws the X 48px, so the float
   kept 6px of height, and the card (overflow:hidden, a layout box of its own, as is the title-and-photo grid) was laid out
   beside the float instead of under it: 60px narrower (48 + 12) at every laptop width, with the X in the strip.
   -60px is 12 + 48: the float takes no room again and the card fills the dialog. Where the card has two columns (above
   1050px, styles.css's own break), the photo is the card's top right corner, under the X: it starts 72px down (12 + 48 + 12),
   so the X sits on white, not on the photo. The phone is not touched: nothing here applies at 680px and under, and the
   phone block above fixes the X with margin 0 !important. */
@media (min-width:681px){
  .close-modal{
    margin-bottom:-60px;
  }
}
@media (min-width:1051px){
  .recipe-modal .full-photo{
    margin-top:72px;
  }
}

/* The MacroPrep wordmark beside the header logo (Engineering 2026-11-02; the owner: "the logos exact style wording next to it.
   kinda like how the portal does"). The letters are the master logo's own MACROPREP, cut from MacroPrep_Master_Logo.png
   (tools/site/wordmark-cut.js; Branding Standard 1.3, 2.3: exact artwork, no substitute font), carried in index.html as a
   data: image (the CSP's img-src allows data:), so no new site file. Sized as the portal pairs its 54px logo with its name:
   the word about a third of the logo's height, 26px beside the 74px logo, 20px beside the phone's 56px one. One scale for
   both sides (width auto), so the letters keep their proportions. !important because governance.css sizes every .brand img
   74px (56px on a phone) and rounds it 50%, all !important; this one selector is more specific, so it wins for the word only. */
.brand img.brand-word{
  width:auto !important;
  height:26px !important;
  border-radius:0 !important;
  object-fit:contain;
  flex:0 0 auto;
}
@media (max-width:680px){
  .brand img.brand-word{
    height:20px !important;
  }
}

/* THE ABOUT SECTION'S LEAD-INS (the owner, 2026-11-02: "Darker lead-ins: yes."). The About paragraphs are drawn at weight 700
   and the page loads Inter only to 700, so a <strong> lead-in ("Nutrition you can trust.", "What's coming: a lot.") showed
   the same as its paragraph; the heading's dark ink sets it apart. */
.mp-about-enhanced p strong{
  color:var(--text-primary);
}

/* THE NUTRITION BLOCK NEAR THE TOP (Engineering 2026-11-02; the owner, 17:07, with a laptop screenshot of Tuna Casserole's
   card: "i feel like the macros should go in this big empty spot"). script.js draws the block once, as the title and photo
   band's last part, after the photo, and marks the band with-macros; a recipe without an approved block has neither, and
   the band is as before. Two columns (above 1050px): the photo spans both rows of the right column, and the block sits in
   the left column's second row, right under the yield and container, beside the photo; the second row takes the spare
   height, so the block stays under the chips and the space, if any, is below it. One column (1050px and under, the phone
   too): the band's own order, so the block follows the photo, before Ingredients. Its sides line up with the title's and
   the ingredients' (32px; 24px on a phone, as governance.css pads both there). min-height:0 undoes the bottom row's
   min-height:100% (.storage-panel,.macros-panel), which was for the panels side by side. */
.full-top.with-macros > .macros-panel{
  min-height:0;
  margin:0 32px 32px;
}
@media (min-width:1051px){
  .full-top.with-macros{
    grid-template-rows:auto 1fr;
  }
  .full-top.with-macros > .title-block{
    grid-column:1;
    grid-row:1;
  }
  .full-top.with-macros > .full-photo{
    grid-column:2;
    grid-row:1 / span 2;
  }
  .full-top.with-macros > .macros-panel{
    grid-column:1;
    grid-row:2;
    align-self:start;
  }
}
@media (max-width:1050px){
  .full-top.with-macros > .macros-panel{
    margin:32px;
  }
}
@media (max-width:680px){
  .full-top.with-macros > .macros-panel{
    margin:24px;
  }
}

/* THE RECIPE CARD'S TOP ON A PHONE (the owner, 2026-11-02: "phone view should be recipe name, photo, yield/container,
   macros"). At 680px and under the card's top reads: the logo box, the recipe name, the description if any, the photo, the
   yield and container boxes, then the nutrition block when the recipe has one. The boxes are drawn inside .title-block,
   so .title-block steps out of the layout (display:contents) and its parts become the band's own rows, each placed by
   order; the 24px it padded them with (governance.css's phone padding) moves onto them, so the text keeps its edges and
   the photo stays edge to edge. Nothing is drawn twice and nothing moves in the page's markup: above 680px none of this
   applies and the card is as before. The h2 and the boxes need !important because governance.css sets their margins with it. */
@media (max-width:680px){
  .full-top > .title-block{
    display:contents;
  }
  .full-top > .title-block > .full-brand{
    order:1;
    margin:24px 24px 0;
  }
  .full-top > .title-block > h2{
    order:2;
    margin:12px 24px !important;
  }
  .full-top > .title-block > .recipe-description{
    order:3;
    margin:0 24px 12px;
  }
  .full-top > .full-photo{
    order:4;
    margin-top:12px;
  }
  .full-top > .title-block > .recipe-basics{
    order:5;
    margin:24px !important;
  }
  .full-top.with-macros > .macros-panel{
    order:6;
    margin:0 24px 24px;
  }
}