/* ============================================================================
   MAGIC BOX — GLOBAL DESIGN SYSTEM (Phase 1)
   ----------------------------------------------------------------------------
   Loaded AFTER magicbox-customer.css. Nothing in the original stylesheet is
   deleted; this layer redefines the token VALUES it already consumes, so the
   whole site rethemes from one place instead of 100KB being rewritten.

   Palette: deep navy · fresh sky · natural green · olive earth · warm cream,
   with a restrained berry/blush reserved for Magic Made.

   Reversible: remove the <link> in MB_Shell::head() and the site returns to
   its previous appearance exactly.
   ========================================================================= */

:root{
  /* ---------- NEW SEMANTIC SCALE ---------------------------------------- */

  /* NAVY — primary brand environment */
  --mb-navy-900:#0B2239;
  --mb-navy-800:#0E2A47;
  --mb-navy-700:#14395E;
  --mb-navy-600:#1E4E7A;
  --mb-navy-500:#2E6A9E;
  --mb-navy-400:#4A87BB;

  /* SKY — air, freshness, movement */
  --mb-sky-50:#F4FAFD;
  --mb-sky-100:#E7F3FA;
  --mb-sky-200:#D2E8F5;
  --mb-sky-300:#B3D9EE;
  --mb-sky-400:#8AC4E4;
  --mb-sky-500:#5AA8D4;

  /* GREEN — natural, the action colour */
  --mb-green-700:#1C5334;
  --mb-green-600:#256A42;
  --mb-green-500:#2E7D4F;
  --mb-green-400:#4C9B6C;
  --mb-green-100:#E8F4EC;
  --mb-green-200:#CBE6D6;

  /* OLIVE — earth */
  --mb-olive-700:#4A5C26;
  --mb-olive-600:#55682A;
  --mb-olive-500:#667A33;
  --mb-olive-100:#F0F3E6;
  --mb-olive-200:#DDE5C6;

  /* CREAM / BASE */
  --mb-cream:#FCFAF5;
  --mb-cream-2:#F6F2E9;
  --mb-white:#FFFFFF;

  /* BERRY / BLUSH — Magic Made only */
  --mb-berry-600:#8E2F4C;
  --mb-berry-500:#A63A5B;
  --mb-blush-100:#F9EDF1;
  --mb-blush-200:#EFD5DE;

  /* TEXT */
  --mb-text:#14293D;
  --mb-text-2:#3E5468;
  --mb-text-3:#5E7387;
  --mb-text-muted:#78899A;
  --mb-text-inverse:#F4FAFD;

  /* BORDER */
  --mb-border:#DDE7EE;
  --mb-border-strong:#C6D6E2;
  --mb-border-brand:#BFDDCB;
  --mb-focus:#2E6A9E;

  /* STATUS */
  --mb-success:#2E7D4F;
  --mb-success-bg:#E8F4EC;
  --mb-warning:#B07A1E;
  --mb-warning-bg:#FBF2DF;
  --mb-error:#B3352A;
  --mb-error-bg:#FBEBE8;
  --mb-info:#1E4E7A;
  --mb-info-bg:#E7F3FA;

  /* ---------- REMAP OF THE EXISTING TOKENS -------------------------------
     The original stylesheet is entirely variable-driven, so redefining these
     rethemes every existing component without touching its rules.          */

  --bone:var(--mb-cream);
  --paper:var(--mb-white);
  --sand:var(--mb-sky-100);
  --sand-2:var(--mb-sky-200);
  --line:var(--mb-border);
  --line-2:var(--mb-border-strong);

  --ink:var(--mb-text);
  --ink-2:var(--mb-text-2);
  --ink-3:var(--mb-text-3);
  --ink-4:var(--mb-text-muted);

  /* primary action becomes green — this retires the old rust/orange buttons */
  --clay:var(--mb-green-500);
  --clay-2:var(--mb-green-600);
  --clay-3:var(--mb-green-700);
  --clay-tint:var(--mb-green-100);
  --clay-line:var(--mb-border-brand);

  --sage:var(--mb-olive-500);
  --sage-tint:var(--mb-olive-100);
  --sage-line:var(--mb-olive-200);

  --sun:#C98A2E;
  --sun-tint:#FBF3E2;
  --sun-line:#EBD7AF;

  --plum:var(--mb-berry-500);
  --plum-tint:var(--mb-blush-100);
  --plum-line:var(--mb-blush-200);

  --danger:var(--mb-error);
  --danger-tint:var(--mb-error-bg);
  --danger-line:#EFC9C3;

  --info:var(--mb-info);
  --info-tint:var(--mb-info-bg);
  --info-line:var(--mb-sky-200);

  /* ---------- CONTAINERS ------------------------------------------------ */
  --mb-w-full:100%;
  --mb-w-wide:1320px;
  --mb-w-normal:1180px;
  --mb-w-narrow:820px;
  --mb-w-measure:68ch;

  /* ---------- HEADER ---------------------------------------------------- */
  --mb-utility-h:36px;
  --header-h:72px;

  /* ---------- ELEVATION — cool, not warm -------------------------------- */
  --e1:0 1px 2px rgba(20,41,61,.05);
  --e2:0 1px 3px rgba(20,41,61,.06), 0 6px 16px rgba(20,41,61,.05);
  --e3:0 2px 6px rgba(20,41,61,.07), 0 14px 34px rgba(20,41,61,.08);
  --e4:0 8px 44px rgba(20,41,61,.16);
}

/* ============================================================================
   BACKGROUND SYSTEM
   Flowing fields and thin contour lines living INSIDE the background, not as a
   giant wave on every section boundary.
   ========================================================================= */

body{ background:var(--mb-cream); color:var(--mb-text-2); }

.mb-bg{ position:relative; isolation:isolate; }
.mb-bg > *{ position:relative; z-index:1; }
.mb-bg::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:cover; background-position:center;
}

/* AIR — light sky over cream, the default open environment */
.mb-bg-air{ background:linear-gradient(180deg,var(--mb-sky-50) 0%,var(--mb-cream) 62%); }
.mb-bg-air::before{
  background-image:
    radial-gradient(60% 38% at 12% 8%, rgba(138,196,228,.20), transparent 70%),
    radial-gradient(48% 30% at 92% 4%, rgba(179,217,238,.22), transparent 72%);
}

/* NATURAL — cream through pale green/olive */
.mb-bg-natural{ background:linear-gradient(180deg,var(--mb-cream) 0%,var(--mb-olive-100) 100%); }
.mb-bg-natural::before{
  background-image:
    radial-gradient(56% 34% at 88% 12%, rgba(102,122,51,.10), transparent 72%),
    radial-gradient(44% 28% at 6% 82%, rgba(46,125,79,.08), transparent 74%);
}

/* DEEP — navy environment with restrained blue/green flow */
.mb-bg-deep{ background:linear-gradient(165deg,var(--mb-navy-800) 0%,var(--mb-navy-900) 100%); color:var(--mb-text-inverse); }
.mb-bg-deep::before{
  background-image:
    radial-gradient(50% 40% at 6% 0%, rgba(90,168,212,.20), transparent 70%),
    radial-gradient(46% 36% at 96% 100%, rgba(46,125,79,.20), transparent 72%);
}
.mb-bg-deep h1,.mb-bg-deep h2,.mb-bg-deep h3{ color:#fff; }
.mb-bg-deep p,.mb-bg-deep li{ color:rgba(244,250,253,.84); }

/* MADE — cream through blush, Magic Made only */
.mb-bg-made{ background:linear-gradient(180deg,var(--mb-cream) 0%,var(--mb-blush-100) 100%); }
.mb-bg-made::before{
  background-image:radial-gradient(52% 34% at 90% 10%, rgba(166,58,91,.10), transparent 72%);
}

/* SERVED — airy blue/green */
.mb-bg-served{ background:linear-gradient(180deg,var(--mb-sky-100) 0%,var(--mb-green-100) 100%); }
.mb-bg-served::before{
  background-image:radial-gradient(54% 36% at 10% 6%, rgba(90,168,212,.18), transparent 72%);
}

/* Thin contour lines — the recognisable device, used sparingly */
.mb-flowlines{ position:relative; }
.mb-flowlines::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:0;
  pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23B3D9EE' stroke-width='1.25'%3E%3Cpath d='M0 74C240 34 420 96 720 66s520-52 720-16'/%3E%3Cpath d='M0 92C260 56 430 112 720 84s500-44 720-10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% 100%;
}

/* ============================================================================
   CONTAINERS
   ========================================================================= */
.mb-container{ width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.mb-container--wide{ max-width:var(--mb-w-wide); }
.mb-container--normal{ max-width:var(--mb-w-normal); }
.mb-container--narrow{ max-width:var(--mb-w-narrow); }
.mb-container--full{ max-width:none; padding-inline:0; }

/* Vertical rhythm */
.mb-section{ padding-block:clamp(40px,6vw,88px); }
.mb-section--tight{ padding-block:clamp(28px,4vw,56px); }
.mb-section--loose{ padding-block:clamp(56px,8vw,120px); }

/* ============================================================================
   TYPOGRAPHY
   ========================================================================= */
h1,.mb-h1{ font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.015em;
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem); color:var(--mb-text); }
h2,.mb-h2{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.012em;
  font-size:clamp(1.65rem,1.3rem + 1.5vw,2.6rem); color:var(--mb-text); }
h3,.mb-h3{ font-family:var(--display); font-weight:600; line-height:1.2;
  font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem); color:var(--mb-text); }
h4,.mb-h4{ font-family:var(--sans); font-weight:650; line-height:1.3;
  font-size:clamp(1rem,.96rem + .2vw,1.12rem); color:var(--mb-text); }

.mb-body-lg{ font-size:clamp(1.03rem,1rem + .25vw,1.18rem); line-height:1.65; color:var(--mb-text-2); }
.mb-body{ font-size:1rem; line-height:1.65; color:var(--mb-text-2); }
.mb-small{ font-size:.875rem; line-height:1.55; color:var(--mb-text-3); }
.mb-label{ font-family:var(--sans); font-size:.75rem; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mb-text-3); }
.mb-eyebrow{ font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mb-green-600); }
.mb-price{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,1.15rem + .6vw,1.75rem);
  color:var(--mb-text); letter-spacing:-.01em; }
.mb-meta{ font-size:.8125rem; color:var(--mb-text-muted); }
.mb-prose{ max-width:var(--mb-w-measure); }
.mb-script{ font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:500;
  color:var(--mb-green-600); font-size:clamp(1rem,.95rem + .35vw,1.25rem); line-height:1.35; }

/* ===================== BUTTONS ===================== */
.mb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.5rem; border-radius:10px;
  font-family:var(--sans); font-size:.95rem; font-weight:650; line-height:1;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease; }
.mb-btn:active{ transform:translateY(1px); }
.mb-btn:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }
.mb-btn--primary{ background:var(--mb-green-500); border-color:var(--mb-green-500); color:#fff; }
.mb-btn--primary:hover{ background:var(--mb-green-600); border-color:var(--mb-green-600); color:#fff; }
.mb-btn--secondary{ background:transparent; border-color:var(--mb-navy-600); color:var(--mb-navy-700); }
.mb-btn--secondary:hover{ background:var(--mb-navy-700); border-color:var(--mb-navy-700); color:#fff; }
.mb-btn--tertiary{ min-height:auto; padding:.25rem 0; border:0; background:none;
  color:var(--mb-green-600); text-decoration:underline; text-underline-offset:3px; }
.mb-btn--tertiary:hover{ color:var(--mb-green-700); }
.mb-btn--on-deep{ background:var(--mb-green-500); border-color:var(--mb-green-500); color:#fff; }
.mb-btn--on-deep-ghost{ background:transparent; border-color:rgba(244,250,253,.55); color:#fff; }
.mb-btn--on-deep-ghost:hover{ background:rgba(244,250,253,.12); border-color:#fff; }
.mb-btn--lg{ min-height:54px; padding:0 1.9rem; font-size:1rem; }
.mb-btn--block{ display:flex; width:100%; }
.mb-btn[disabled],.mb-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn:focus-visible,.navcta:focus-visible,.cartbtn:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }

/* ===================== CARD FAMILIES ===================== */
.mb-card{ background:var(--mb-white); border:1px solid var(--mb-border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; }
.mb-card--product{ border-radius:12px; }
.mb-card--product .mb-card__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.mb-card--box{ border-radius:16px; box-shadow:var(--e2); }
.mb-card--box .mb-card__body{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.mb-card--meal{ border-radius:12px; }
.mb-card--meal .mb-card__body{ padding:14px 16px 16px; }
.mb-card--made{ border-radius:16px; border-color:var(--mb-blush-200); background:var(--mb-white); }
.mb-card--made .mb-card__body{ padding:18px; }
.mb-card--trust{ background:var(--mb-white); border-color:var(--mb-border); border-radius:14px; padding:20px 22px; display:block; }
.mb-card--form{ background:var(--mb-white); border-color:var(--mb-border); border-radius:14px; padding:clamp(20px,3vw,32px); display:block; }
.mb-card__media{ aspect-ratio:4/3; background:var(--mb-sky-100); display:block; width:100%; object-fit:cover; }
.mb-card__title{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--mb-text); }

/* ===================== FORMS (presentation only) ===================== */
.mb-field{ display:flex; flex-direction:column; gap:6px; }
.mb-field > label,.mb-label-text{ font-size:.875rem; font-weight:600; color:var(--mb-text-2); }
.mb-help{ font-size:.8125rem; color:var(--mb-text-muted); }
.mb-input,.mb-select,.mb-textarea,
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="search"],select,textarea{
  font-family:var(--sans); font-size:1rem; color:var(--mb-text);
  background:var(--mb-white); border:1.5px solid var(--mb-border-strong);
  border-radius:10px; padding:.72rem .9rem; min-height:48px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease; }
textarea,.mb-textarea{ min-height:120px; line-height:1.55; }
.mb-input:hover,input:hover,select:hover,textarea:hover{ border-color:var(--mb-navy-400); }
.mb-input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--mb-focus); box-shadow:0 0 0 3px rgba(46,106,158,.18); }
input[disabled],select[disabled],textarea[disabled]{ background:var(--mb-cream-2); opacity:.7; cursor:not-allowed; }
.mb-field--error .mb-input,.mb-field--error input,input[aria-invalid="true"]{
  border-color:var(--mb-error); box-shadow:0 0 0 3px rgba(179,53,42,.14); }
.mb-field-error{ font-size:.8125rem; color:var(--mb-error); font-weight:600; }
.mb-field--success .mb-input,.mb-field--success input{ border-color:var(--mb-success); }
input[type="checkbox"],input[type="radio"]{ width:20px; height:20px; min-height:20px; accent-color:var(--mb-green-500); cursor:pointer; }
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }
.mb-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--mb-border-strong); border-radius:10px; overflow:hidden; background:var(--mb-white); }
.mb-qty button{ min-width:44px; min-height:44px; border:0; background:none; cursor:pointer; font-size:1.1rem; color:var(--mb-text-2); }
.mb-qty button:hover{ background:var(--mb-sky-100); }
.mb-qty input{ width:56px; min-height:44px; border:0; text-align:center; border-radius:0; }

/* ===================== HEADER ===================== */
.mb-utility{ background:var(--mb-navy-800); color:rgba(244,250,253,.88); font-size:.78rem; line-height:1; }
.mb-utility-in{ max-width:var(--mb-w-wide); margin-inline:auto; padding-inline:var(--gutter);
  min-height:var(--mb-utility-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mb-utility a{ color:rgba(244,250,253,.88); text-decoration:none; }
.mb-utility a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.mb-utility a:focus-visible{ outline:2px solid var(--mb-sky-300); outline-offset:2px; }
.mb-utility-right{ display:flex; align-items:center; gap:18px; }
.mb-utility-loc{ display:inline-flex; align-items:center; gap:7px; }
.mb-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--mb-border); }
.mb-header-in{ max-width:var(--mb-w-wide); margin-inline:auto; padding-inline:var(--gutter);
  min-height:var(--header-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; }
.mb-header .logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.mb-header .logo-word{ font-family:var(--display); font-weight:600; font-size:1.28rem; letter-spacing:-.01em; color:var(--mb-navy-800); }
.mb-header .logo-mark{ font-size:1.15rem; }
.mb-nav{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.7vw,30px); margin:0; }
.mb-nav a{ font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--mb-text-2); text-decoration:none; white-space:nowrap; padding:10px 0; position:relative; }
.mb-nav a:hover{ color:var(--mb-green-600); }
.mb-nav a[aria-current="page"]{ color:var(--mb-green-600); }
.mb-nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--mb-green-500); border-radius:2px; }
.mb-nav a:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:3px; border-radius:4px; }
.mb-header-actions{ display:flex; align-items:center; gap:6px; justify-self:end; }
.mb-iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:10px; border:1px solid transparent; background:none; color:var(--mb-navy-700); text-decoration:none; cursor:pointer; position:relative; }
.mb-iconbtn:hover{ background:var(--mb-sky-100); }
.mb-iconbtn:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }
.mb-iconbtn svg{ width:21px; height:21px; }
.mb-cart-count{ position:absolute; top:4px; right:3px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--mb-green-500); color:#fff; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.menu-toggle{ display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--mb-border-strong); border-radius:10px; color:var(--mb-navy-800); cursor:pointer; }
.menu-toggle:focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }
.menu-toggle svg{ width:22px; height:22px; }
@media (max-width:1080px){
  .menu-toggle{ display:inline-flex; order:3; }
  .mb-header-actions{ order:2; }
  .mb-nav{ order:4; grid-column:1 / -1; display:none; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:0; padding:6px 0 14px; border-top:1px solid var(--mb-border);
    max-height:calc(100dvh - var(--header-h) - var(--mb-utility-h)); overflow-y:auto; }
  .mb-nav.is-open{ display:flex; }
  .mb-nav a{ padding:15px 4px; font-size:1rem; border-bottom:1px solid var(--mb-border); min-height:52px; display:flex; align-items:center; }
  .mb-nav a[aria-current="page"]::after{ display:none; }
  .mb-nav a:last-of-type{ border-bottom:0; } }
@media (max-width:560px){
  .mb-utility-in{ font-size:.72rem; gap:10px; }
  .mb-utility-right{ gap:12px; }
  .mb-utility .mb-utility-hide-sm{ display:none; }
  .mb-header .logo-word{ font-size:1.12rem; } }

/* ===================== FOOTER ===================== */
.mb-footer{ position:relative; margin-top:clamp(48px,7vw,96px);
  background:linear-gradient(165deg,var(--mb-navy-800) 0%,var(--mb-navy-900) 100%);
  color:rgba(244,250,253,.82); padding:0 0 24px; overflow:hidden; }
.mb-footer::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(46% 40% at 4% 0%, rgba(90,168,212,.20), transparent 70%),
    radial-gradient(42% 34% at 98% 92%, rgba(46,125,79,.20), transparent 72%); }
.mb-footer-wave{ display:block; width:100%; height:52px; }
.mb-footer-in{ position:relative; max-width:var(--mb-w-wide); margin-inline:auto;
  padding:clamp(28px,4vw,52px) var(--gutter) 0;
  display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px) clamp(20px,3vw,44px); align-content:start; }
.mb-footer h3{ font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; margin:0 0 12px; }
.mb-footer a{ display:block; color:rgba(244,250,253,.78); text-decoration:none; font-size:.9rem; padding:5px 0; min-height:30px; }
.mb-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.mb-footer a:focus-visible{ outline:2px solid var(--mb-sky-300); outline-offset:2px; border-radius:3px; }
.mb-footer .logo-word{ font-family:var(--display); font-weight:600; font-size:1.25rem; color:#fff; }
.mb-footer-brandline{ color:rgba(244,250,253,.68); font-size:.9rem; line-height:1.6; margin:12px 0 0; max-width:34ch; }
.mb-footer-base{ position:relative; max-width:var(--mb-w-wide); margin:clamp(24px,3vw,40px) auto 0;
  padding:18px var(--gutter) 0; border-top:1px solid rgba(244,250,253,.16); }
.mb-footer-base p{ color:rgba(244,250,253,.62); font-size:.8rem; line-height:1.7; margin:0; }
.mb-footer-base a{ display:inline; color:rgba(244,250,253,.82); }
@media (max-width:1080px){ .mb-footer-in{ grid-template-columns:1.4fr repeat(3,1fr); } }
@media (max-width:860px){ .mb-footer-in{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mb-footer-in{ grid-template-columns:1fr; gap:22px; }
  .mb-footer a{ min-height:40px; padding:8px 0; } }

/* ===================== ACCESSIBILITY ===================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:3px solid var(--mb-focus); outline-offset:2px; }
.skiplink{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--mb-navy-800); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:600; text-decoration:none; }
.skiplink:focus{ left:0; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ===================== RESPONSIVE GUARDS ===================== */
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video{ max-width:100%; height:auto; }
table{ max-width:100%; }
.mb-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mb-hstack{ display:flex; gap:16px; }
@media (max-width:720px){ .mb-hstack--scroll{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .mb-hstack--scroll > *{ flex:0 0 78%; scroll-snap-align:start; } }


/* Phase 1 GREEN repair: 7 footer blocks in a 5-column grid left three dead cells.
   Four columns fill the grid with a single trailing gap instead. */
.mb-footer-col{ min-width:0; }
.mb-footer-col h3{ margin-top:2px; }
@media (max-width:1080px){ .mb-footer-in{ grid-template-columns:1.4fr repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .mb-footer-in{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .mb-footer-in{ grid-template-columns:1fr; } }

/* ============================================================================
   PHASE 2 — HOMEPAGE
   The shell wraps pages in main.wrap; the homepage runs full-bleed sections, so
   the wrap is neutralised only on the page that contains the hero.
   ========================================================================= */
main.wrap:has(.mb-home-hero){ max-width:none; padding-left:0; padding-right:0; }

.mb-sec-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,40px); }
.mb-sec-head h2{ margin:0 0 6px; }
.mb-sec-head p{ margin:0; max-width:52ch; }
.mb-sec-head--center{ justify-content:center; text-align:center; }
.mb-sec-head--center h2{ margin-bottom:0; }

/* ---------- HERO ---------- */
.mb-home-hero{ padding-block:clamp(36px,5vw,76px) clamp(48px,7vw,104px); }
.mb-home-hero-grid{ display:grid; grid-template-columns:1.02fr 1.18fr; gap:clamp(28px,4vw,64px); align-items:center; }
.mb-home-hero-copy h1{ margin:.18em 0 .3em; }
.mb-home-hero-lede{ max-width:44ch; margin:0 0 26px; }
.mb-home-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.mb-home-zip{ display:inline-flex; align-items:center; gap:8px; color:var(--mb-navy-700);
  font-size:.9rem; font-weight:600; text-decoration:none; padding:6px 0; }
.mb-home-zip svg{ width:17px; height:17px; }
.mb-home-zip:hover{ color:var(--mb-green-600); text-decoration:underline; text-underline-offset:3px; }

/* mission film placeholder — deliberate composition, not stock photography */
.mb-film-frame{ position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:linear-gradient(150deg,var(--mb-sky-200) 0%,var(--mb-sky-100) 42%,var(--mb-green-100) 100%);
  border:1px solid var(--mb-border); box-shadow:var(--e3);
  display:flex; align-items:center; justify-content:center; }
.mb-film-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(46% 40% at 18% 14%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(40% 34% at 88% 86%, rgba(46,125,79,.16), transparent 72%); }
.mb-film-play{ position:relative; z-index:2; width:74px; height:74px; border-radius:999px;
  background:rgba(255,255,255,.92); box-shadow:var(--e2); display:flex; align-items:center; justify-content:center;
  color:var(--mb-navy-800); }
.mb-film-play svg{ width:30px; height:30px; margin-left:3px; }
.mb-film-journey{ position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:10px; padding:12px 16px; background:rgba(14,42,71,.82);
  color:rgba(244,250,253,.95); font-size:.76rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.mb-film-journey i{ width:16px; height:1px; background:rgba(244,250,253,.5); display:block; }
.mb-film-cap{ margin:14px 0 0; text-align:right; }

/* ---------- OUR MAGIC BOXES ---------- */
.mb-home-boxgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); align-items:start; }
.mb-home-boxcell{ position:relative; }
.mb-home-boxcell.is-feature{ transform:translateY(-10px); }
.mb-home-boxcell.is-feature .boxcard,.mb-home-boxcell.is-feature .card{ box-shadow:var(--e3); border-color:var(--mb-border-brand); }
.mb-home-boxbadge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:3;
  background:var(--mb-green-500); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:6px 14px; border-radius:999px; box-shadow:var(--e2); white-space:nowrap; }

/* ---------- MAKE YOUR MAGIC BOX ---------- */
.mb-home-build-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:center; }
.mb-home-build-grid h2{ margin:.1em 0 .35em; }
.mb-home-build-grid > div > p{ max-width:44ch; margin:0 0 24px; }
.mb-home-buildsteps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mb-home-buildsteps li{ background:rgba(255,255,255,.72); border:1px solid var(--mb-border);
  border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:5px; }
.mb-home-buildsteps strong{ color:var(--mb-text); font-size:1rem; }
.mb-home-stepn{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--mb-green-600); }

/* ---------- MAGIC MADE ---------- */
.mb-eyebrow--made{ color:var(--mb-berry-500); }
.mb-home-made-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.mb-home-made-grid h2{ margin:.1em 0 .35em; max-width:16ch; }
.mb-home-made-grid > div > p{ max-width:44ch; margin:0 0 24px; }
.mb-home-made-art{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.mb-home-made-tile{ border-radius:16px; border:1px solid var(--mb-blush-200); box-shadow:var(--e2); }
.mb-home-made-tile--a{ aspect-ratio:4/5; background:linear-gradient(160deg,var(--mb-blush-100),#fff 70%); }
.mb-home-made-tile--b{ aspect-ratio:3/4; align-self:end; background:linear-gradient(200deg,#fff,var(--mb-blush-200)); }

/* ---------- SHOP ALL PRODUCTS ---------- */
.mb-home-cats{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(10px,1.3vw,18px); }
.mb-home-cat{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
  padding:6px 4px 12px; border-radius:14px; }
.mb-home-cat:hover{ background:var(--mb-sky-50); }
.mb-home-cat-art{ width:100%; aspect-ratio:1; border-radius:999px; display:block;
  background:radial-gradient(circle at 34% 28%, #fff, var(--mb-sky-100) 62%, var(--mb-green-100));
  border:1px solid var(--mb-border); }
.mb-home-cat-label{ font-size:.84rem; font-weight:600; color:var(--mb-text-2); text-align:center; line-height:1.3; }

/* ---------- MAGIC SERVED ---------- */
.mb-home-served-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.mb-home-served-grid h2{ margin:.1em 0 .35em; max-width:16ch; }
.mb-home-served-grid > div > p{ max-width:44ch; margin:0 0 24px; }
.mb-home-served-art{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mb-home-served-art span{ display:block; aspect-ratio:3/4; border-radius:14px; border:1px solid var(--mb-border);
  background:linear-gradient(170deg,#fff,var(--mb-sky-100) 60%,var(--mb-green-100)); box-shadow:var(--e1); }
.mb-home-served-art span:nth-child(2){ transform:translateY(16px); }

/* ---------- HOW IT WORKS + TRUST ---------- */
.mb-home-steps{ list-style:none; margin:0 0 clamp(34px,5vw,64px); padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.2vw,30px); }
.mb-home-steps li{ display:flex; flex-direction:column; gap:6px; }
.mb-home-steps h3{ margin:0; font-size:1.08rem; }
.mb-home-steps p{ margin:0; }
.mb-home-trust{ list-style:none; margin:0; padding:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,30px);
  background:var(--mb-white); border:1px solid var(--mb-border); border-radius:16px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.mb-home-trust li{ display:flex; flex-direction:column; gap:4px; }
.mb-home-trust strong{ font-size:.95rem; color:var(--mb-text); }

/* ---------- FINAL CTA ---------- */
.mb-home-final{ padding-block:clamp(40px,5.5vw,80px); }
.mb-home-final-in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,48px); flex-wrap:wrap; }
.mb-home-final h2{ margin:0 0 6px; }
.mb-home-final p{ margin:0; }
.mb-home-final-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- HOMEPAGE RESPONSIVE ---------- */
@media (max-width:1080px){
  .mb-home-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .mb-home-build-grid,.mb-home-made-grid,.mb-home-served-grid{ grid-template-columns:1fr; gap:30px; }
  .mb-home-cats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mb-home-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-home-trust{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mb-film-cap{ text-align:left; }
}
@media (max-width:820px){
  /* Boxes become a snap carousel rather than three stacked full-width cards. */
  .mb-home-boxgrid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:16px 0 10px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
  .mb-home-boxcell{ flex:0 0 76%; scroll-snap-align:start; }
  .mb-home-boxcell.is-feature{ transform:none; }
  .mb-home-boxbadge{ top:-11px; }
  .mb-sec-head{ align-items:flex-start; }
  .mb-sec-head .mb-btn{ width:100%; }
}
@media (max-width:560px){
  .mb-home-hero{ padding-block:26px 40px; }
  .mb-home-hero-actions{ gap:10px; }
  .mb-home-hero-actions .mb-btn{ flex:1 1 100%; }
  .mb-home-buildsteps{ grid-template-columns:1fr; gap:10px; }
  .mb-home-buildsteps li{ padding:14px; }
  /* Two-column micro grid keeps categories scannable without endless scrolling. */
  .mb-home-cats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .mb-home-cat-label{ font-size:.78rem; }
  .mb-home-steps{ grid-template-columns:1fr; gap:14px; }
  .mb-home-trust{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .mb-home-made-art{ grid-template-columns:1fr 1fr; }
  .mb-home-served-art{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .mb-home-final-in{ flex-direction:column; align-items:flex-start; }
  .mb-home-final-actions{ width:100%; }
  .mb-home-final-actions .mb-btn{ flex:1 1 100%; }
  .mb-film-journey{ font-size:.66rem; gap:7px; padding:10px; }
  .mb-film-journey i{ width:10px; }
  .mb-film-play{ width:60px; height:60px; }
}


/* Our Magic Boxes now sits in the deep navy environment shown in the approved
   reference. The cards stay light so the food and price keep full contrast. */
.mb-home-boxes.mb-bg-deep .mb-sec-head h2{ color:#fff; }
.mb-home-boxes.mb-bg-deep .mb-sec-head p{ color:rgba(244,250,253,.80); }
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .card,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell > a,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell > article{ background:var(--mb-white); border-radius:16px; }
.mb-home-boxes.mb-bg-deep .mb-home-boxcell.is-feature{ transform:translateY(-14px); }
.mb-home-boxes.mb-bg-deep .mb-home-boxcell.is-feature .boxcard,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell.is-feature .card,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell.is-feature > article{ box-shadow:0 18px 50px rgba(4,16,28,.42); }
@media (max-width:820px){ .mb-home-boxes.mb-bg-deep .mb-home-boxcell.is-feature{ transform:none; } }


/* The deep-navy band paints its own text near-white. The box cards inside it are
   light, so that inherited colour has to be reset or the card copy goes
   white-on-white. Restore the normal light-surface text scale inside the cards. */
.mb-home-boxes.mb-bg-deep .mb-home-boxcell,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell *{ color:var(--mb-text); }
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard-blurb,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard-meta,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell dt,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .muted,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell small{ color:var(--mb-text-soft); }
.mb-home-boxes.mb-bg-deep .mb-home-boxcell h2,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell h3,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard-price{ color:var(--mb-ink-900,var(--mb-text)); }
/* badges and the card button keep their own white-on-colour treatment */
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard-badge,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .boxcard-badge *,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .mb-btn--primary,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .mb-btn--primary *,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .btn.primary,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .btn.primary *{ color:#fff; }


/* The card CTA uses .btn--primary (double dash) in the base sheet; the colour
   reset above must not repaint it, or it renders ink-on-green at 2.9:1. */
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .btn--primary,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell .btn--primary *,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell button.btn,
.mb-home-boxes.mb-bg-deep .mb-home-boxcell a.btn:not(.btn--ghost):not(.btn--link){ color:#fff; }

/* Explicit definition for the ghost button that sits on the navy band. */
.mb-btn--on-deep-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; font-weight:600;
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
  text-decoration:none; transition:background .18s ease, border-color .18s ease;
}
.mb-btn--on-deep-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.mb-btn--on-deep-ghost:focus-visible{ outline:3px solid rgba(255,255,255,.75); outline-offset:2px; }


/* The final CTA band ends flush against the footer wave; the cream strip
   between them was dead space, not a designed pause. */
.mb-home-final{ margin-bottom:0; }
.mb-home-final + *{ margin-top:0; }
main.wrap:has(.mb-home-hero) > .mb-home-final:last-child{ margin-bottom:0; padding-bottom:var(--s8,64px); }
body:has(.mb-home-hero) main.wrap{ padding-bottom:0; margin-bottom:0; }
body:has(.mb-home-hero) .mb-footer, body:has(.mb-home-hero) footer{ margin-top:0; }


/* The hero must start flush under the header; the cream strip above it was
   inherited main padding, not a designed gap. */
body:has(.mb-home-hero) main.wrap{ padding-top:0; margin-top:0; }
.mb-home-hero{ margin-top:0; }


/* Magic Made and Magic Served art tiles held no imagery yet and read as empty
   rectangles. They now carry the same honest chip the box cards use, and a
   faint line-art motif so the shape reads as art rather than a broken image. */
.mb-home-made-tile, .mb-home-served-art > span{ position:relative; overflow:hidden; }
.mb-home-made-tile::after, .mb-home-served-art > span::after{
  content:""; position:absolute; inset:14%;
  border:1.25px solid currentColor; color:rgba(20,41,61,.13);
  border-radius:12px; pointer-events:none;
}
.mb-home-made-tile::before, .mb-home-served-art > span::before{
  content:""; position:absolute; left:50%; top:50%; width:38%; padding-top:38%;
  transform:translate(-50%,-58%) rotate(45deg);
  border:1.25px solid rgba(20,41,61,.11); border-radius:6px; pointer-events:none;
}
.mb-shot-pending{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-block; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.86); color:var(--mb-text-soft);
  font-size:11px; font-weight:600; font-style:normal;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}

/* The category bubbles were flat pale discs; a faint motif keeps them reading
   as brand shapes while their real labels sit underneath. */
.mb-home-cats a > span:first-child, .mb-home-cats .mb-cat-art{ position:relative; overflow:hidden; }
.mb-home-cats a > span:first-child::after, .mb-home-cats .mb-cat-art::after{
  content:""; position:absolute; inset:26%;
  border:1.25px solid rgba(20,41,61,.12); border-radius:50%; pointer-events:none;
}


/* ==========================================================================
   ALL MAGIC BOXES / curated collection
   Same system as the homepage: navy collection band, light cards, cream
   comparison, navy close. Nothing here introduces a second visual language.
   ========================================================================== */
body:has(.mb-boxes-hero) main.wrap{ max-width:none; padding:0; margin:0; }

.mb-boxes-hero{ padding-block:clamp(40px,6vw,76px); }
.mb-boxes-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,64px); align-items:center; }
.mb-boxes-hero h1{ margin:.18em 0 .3em; font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.02; letter-spacing:-.02em; }
.mb-boxes-hero .mb-body-lg{ max-width:34ch; }
.mb-boxes-hero-chips{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mb-boxes-hero-chips li{ padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(20,41,61,.10); color:var(--mb-text-soft); font-size:13px; font-weight:600; }
.mb-boxes-hero-art{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 22px 60px rgba(4,16,28,.16); }
.mb-boxes-hero-img{ display:block; width:100%; height:auto; }

.mb-boxes-collection{ padding-block:clamp(44px,6vw,84px); }
.mb-boxes-collection .mb-sec-head h2{ color:#fff; }
.mb-boxes-collection .mb-sec-head p{ color:rgba(244,250,253,.80); }
.mb-boxes-count{ margin:0; align-self:end; color:rgba(244,250,253,.72); font-size:14px; white-space:nowrap; }
.mb-boxes-count strong{ color:#fff; }

/* Filters: a real drawer on small screens, an always-open row on desktop. */
.mb-boxfilters{ margin:22px 0 28px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.05); }
.mb-boxfilters > summary{ list-style:none; cursor:pointer; padding:14px 18px; color:#fff; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mb-boxfilters > summary::-webkit-details-marker{ display:none; }
.mb-boxfilters > summary::after{ content:""; width:9px; height:9px; border-right:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7); transform:rotate(45deg); transition:transform .18s ease; }
.mb-boxfilters[open] > summary::after{ transform:rotate(-135deg); }
.mb-boxfilters-row{ display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:0 18px 18px; }
.mb-boxfilters .mb-field{ display:flex; flex-direction:column; gap:6px; min-width:170px; flex:1 1 170px; }
.mb-boxfilters .mb-field > span{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,250,253,.66); }
.mb-boxfilters select{ width:100%; min-height:46px; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.96); color:var(--mb-text); font:inherit; font-size:15px; }
.mb-boxfilters select:focus-visible{ outline:3px solid rgba(255,255,255,.75); outline-offset:2px; }
.mb-boxfilters-clear{ min-height:46px; }
.mb-boxfilters-note{ padding:0 18px 16px; color:rgba(244,250,253,.72); }
@media (min-width:821px){
  .mb-boxfilters > summary{ display:none; }
  .mb-boxfilters .mb-boxfilters-row{ display:flex !important; padding:18px; }
}

.mb-boxgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); align-items:stretch; }
.mb-boxgrid-empty{ margin:26px 0 0; color:rgba(244,250,253,.84); }
.mb-linkbtn{ background:none; border:0; padding:0; color:#fff; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }

.mb-boxcard{ display:flex; flex-direction:column; background:var(--mb-white); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(4,16,28,.20); }
.mb-boxcard.is-feature{ outline:2px solid var(--mb-green-500); outline-offset:0; box-shadow:0 20px 54px rgba(4,16,28,.42); }
.mb-boxcard-art{ position:relative; display:block; }
.mb-boxcard-img{ display:block; width:100%; height:auto; }
.mb-boxcard-badge{ position:absolute; top:12px; left:12px; z-index:2; padding:6px 12px; border-radius:999px; background:var(--mb-green-600,#2e7d4f); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mb-boxcard-body{ flex:1 1 auto; padding:18px 18px 6px; }
.mb-boxcard-name{ margin:0 0 6px; font-size:1.32rem; line-height:1.15; }
.mb-boxcard-name a{ color:var(--mb-text); text-decoration:none; }
.mb-boxcard-name a:hover{ text-decoration:underline; }
.mb-boxcard-purpose{ margin:0 0 14px; color:var(--mb-text-soft); font-size:14.5px; line-height:1.5; }
.mb-boxcard-facts{ list-style:none; margin:0; padding:14px 0 0; border-top:1px dashed rgba(20,41,61,.14); display:grid; gap:9px; }
.mb-boxcard-facts li{ display:grid; gap:1px; }
.mb-boxcard-facts span{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-boxcard-facts strong{ font-size:14.5px; font-weight:600; color:var(--mb-text); }
.mb-boxcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 18px; }
.mb-boxcard-price strong{ display:block; font-size:1.45rem; line-height:1.1; color:var(--mb-text); }
.mb-boxcard-price span{ font-size:12px; color:var(--mb-text-soft); }
.mb-boxcard .mb-btn--sm{ padding:10px 14px; font-size:14px; white-space:nowrap; }
.mb-tbd{ color:var(--mb-text-soft); font-size:13px; font-style:italic; }

/* The navy band paints its own text near-white; the light cards must opt out or
   their copy renders white-on-white. Same guard the homepage collection uses. */
.mb-boxes-collection .mb-boxcard, .mb-boxes-collection .mb-boxcard *{ color:var(--mb-text); }
.mb-boxes-collection .mb-boxcard .mb-boxcard-purpose,
.mb-boxes-collection .mb-boxcard .mb-boxcard-facts span,
.mb-boxes-collection .mb-boxcard .mb-boxcard-price span,
.mb-boxes-collection .mb-boxcard .mb-tbd{ color:var(--mb-text-soft); }
.mb-boxes-collection .mb-boxcard .mb-boxcard-badge,
.mb-boxes-collection .mb-boxcard .mb-btn--primary,
.mb-boxes-collection .mb-boxcard .mb-btn--primary *,
.mb-boxes-collection .mb-boxcard .btn--primary,
.mb-boxes-collection .mb-boxcard .btn--primary *{ color:#fff; }


/* Comparison ------------------------------------------------------------- */
.mb-boxes-compare{ padding-block:clamp(44px,6vw,80px); }
.mb-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid rgba(20,41,61,.10); border-radius:16px; background:var(--mb-white); }
.mb-compare{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:720px; }
.mb-compare th, .mb-compare td{ padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(20,41,61,.09); }
.mb-compare thead th{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mb-text-soft); background:var(--mb-cream); white-space:nowrap; }
.mb-compare tbody th{ font-weight:700; white-space:nowrap; }
.mb-compare tbody th a{ color:var(--mb-text); text-decoration:none; }
.mb-compare tbody th a:hover{ text-decoration:underline; }
.mb-compare tbody tr:last-child th, .mb-compare tbody tr:last-child td{ border-bottom:0; }
.mb-compare tr.is-feature{ background:rgba(46,125,79,.07); }
.mb-compare tr.is-feature th{ box-shadow:inset 3px 0 0 var(--mb-green-500); }
.mb-compare-price{ font-weight:700; white-space:nowrap; }
.mb-compare-note{ margin:14px 2px 0; }

/* Closing band ------------------------------------------------------------ */
.mb-boxes-help{ padding-block:clamp(40px,5vw,72px); }
.mb-boxes-help-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,4vw,52px); align-items:center; }
.mb-boxes-help h2{ color:#fff; margin:.1em 0 .35em; }
.mb-boxes-help .mb-body-lg{ color:rgba(244,250,253,.84); max-width:52ch; margin:0; }
.mb-eyebrow--on-deep{ color:rgba(244,250,253,.72); }
.mb-boxes-help-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width:1080px){
  .mb-boxgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .mb-boxes-hero-grid{ grid-template-columns:1fr; }
  .mb-boxes-hero-art{ order:-1; }
  .mb-boxgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-boxes-help-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .mb-boxgrid{ grid-template-columns:1fr; gap:16px; }
  .mb-boxes-count{ align-self:start; }
  .mb-boxcard-foot{ flex-wrap:wrap; }
  .mb-boxcard .mb-btn--sm{ flex:1 1 auto; min-height:46px; }
  .mb-boxes-help-cta .mb-btn{ flex:1 1 100%; min-height:50px; }
  .mb-boxes-hero-chips li{ font-size:12.5px; }
}


/* Full-bleed colour bands have to sit flush. .mb-section carries a 40px top
   margin, which showed as a cream sliver under the header and a seam between
   every band on this page. */
body:has(.mb-boxes-hero) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-boxes-hero) .mb-footer, body:has(.mb-boxes-hero) footer{ margin-top:0; }

/* The collection page hero is deliberately shorter than the homepage hero. */
.mb-boxes-hero{ padding-block:clamp(32px,4vw,56px); }
.mb-boxes-hero-art{ max-width:520px; margin-left:auto; }
.mb-boxes-hero-grid{ align-items:center; }
@media (max-width:900px){ .mb-boxes-hero-art{ max-width:none; margin:0; } }


/* "Filled from" shows the leading categories plus how many more the box draws
   from, so the four everything-boxes stop reading identically. */
.mb-more{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--mb-sky-100); color:var(--mb-text-soft); font-size:11.5px; font-weight:700; vertical-align:1px; }
.mb-boxes-collection .mb-boxcard .mb-more{ color:var(--mb-text-soft); }

/* Family Box is the primary merchandising box, so it is lifted out of the row
   rather than just outlined. Badge text still comes from the database. */
.mb-boxcard.is-feature{ transform:translateY(-10px); }
.mb-boxcard.is-feature .mb-boxcard-art::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--mb-green-500); z-index:3; }
.mb-boxcard.is-feature .mb-boxcard-name{ font-size:1.42rem; }
@media (max-width:640px){ .mb-boxcard.is-feature{ transform:none; } }


/* ==========================================================================
   BOX DETAIL — one reusable template for every curated box
   ========================================================================== */
body:has(.mb-bd-hero) main.wrap{ max-width:none; padding:0; margin:0; }
body:has(.mb-bd-hero) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-bd-hero) .mb-footer, body:has(.mb-bd-hero) footer{ margin-top:0; }

.mb-crumbs{ background:var(--mb-cream); padding:14px 0 0; font-size:13.5px; color:var(--mb-text-soft); }
.mb-crumbs a{ color:var(--mb-text-soft); text-decoration:none; }
.mb-crumbs a:hover{ text-decoration:underline; }
.mb-crumbs span{ opacity:.5; margin:0 4px; }
.mb-crumbs strong{ color:var(--mb-text); font-weight:600; }

.mb-bd-hero{ padding-block:clamp(26px,3.4vw,52px); }
.mb-bd-hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,4vw,60px); align-items:start; }
.mb-bd-art{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 22px 60px rgba(4,16,28,.16); }
.mb-bd-img{ display:block; width:100%; height:auto; }
.mb-bd-buy h1{ margin:.12em 0 .26em; font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.04; letter-spacing:-.02em; }
.mb-bd-badge{ display:inline-block; padding:6px 13px; border-radius:999px; background:var(--mb-green-600,#2e7d4f); color:#fff; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.mb-bd-intro{ margin:0 0 10px; font-size:1.12rem; font-weight:600; color:var(--mb-text); }
.mb-bd-desc{ margin:0 0 22px; max-width:46ch; }
.mb-bd-price{ display:flex; align-items:baseline; gap:10px; margin:0 0 16px; }
.mb-bd-price strong{ font-size:2.3rem; line-height:1; letter-spacing:-.02em; }
.mb-bd-price span{ font-size:13.5px; color:var(--mb-text-soft); }
.mb-bd-add{ width:100%; justify-content:center; }
.mb-bd-reassure{ margin:12px 0 22px; font-size:13.5px; color:var(--mb-text-soft); }
.mb-bd-facts{ list-style:none; margin:0; padding:20px 0 0; border-top:1px solid rgba(20,41,61,.12); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
.mb-bd-facts li{ display:grid; gap:2px; }
.mb-bd-facts span{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-bd-facts strong{ font-size:15px; font-weight:600; }

/* Contents at a glance ---------------------------------------------------- */
.mb-bd-glance{ padding-block:clamp(40px,5vw,74px); }
.mb-glance-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(12px,1.4vw,18px); }
.mb-glance{ background:var(--mb-white); border:1px solid rgba(20,41,61,.09); border-radius:16px; padding:18px; text-align:center; }
.mb-glance-art{ height:74px; margin:0 auto 12px; border-radius:12px; background:linear-gradient(160deg,var(--mb-sky-100),var(--mb-white)); position:relative; }
.mb-glance-art::after{ content:""; position:absolute; inset:22%; border:1.25px solid rgba(20,41,61,.13); border-radius:8px; }
.mb-glance h3{ margin:0 0 6px; font-size:1.02rem; }
.mb-glance-weight{ margin:0 0 2px; font-size:1.35rem; font-weight:700; line-height:1.1; }
.mb-glance-count{ margin:0 0 8px; font-size:1.1rem; font-weight:700; color:var(--mb-text); }
.mb-glance-count span{ font-weight:600; color:var(--mb-text-soft); font-size:.86em; }
.mb-glance-note{ margin:0; font-size:12.5px; line-height:1.45; color:var(--mb-text-soft); }
.mb-glance-note-all{ margin:16px 2px 0; }

/* This week --------------------------------------------------------------- */
.mb-bd-week{ padding-block:clamp(40px,5vw,74px); }
.mb-bd-week .mb-sec-head h2{ color:#fff; }
.mb-bd-week .mb-sec-head p{ color:rgba(244,250,253,.80); }
.mb-bd-weektotal{ margin:0; align-self:end; text-align:right; white-space:nowrap; }
.mb-bd-weektotal strong{ display:block; color:#fff; font-size:1.5rem; line-height:1.1; }
.mb-bd-weektotal span{ color:rgba(244,250,253,.70); font-size:12.5px; }
.mb-week-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(12px,1.4vw,18px); }
.mb-week-cat{ background:var(--mb-white); border-radius:14px; padding:16px 18px; }
.mb-week-cat h3{ margin:0 0 10px; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-week-cat ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mb-week-cat li{ display:grid; gap:1px; }
.mb-week-cat a{ color:var(--mb-text); font-weight:600; font-size:15px; text-decoration:none; }
.mb-week-cat a:hover{ text-decoration:underline; }
.mb-week-meta{ font-size:12.5px; color:var(--mb-text-soft); }
.mb-week-notes{ margin:18px 0 0; padding-left:18px; color:rgba(244,250,253,.84); font-size:14px; }
.mb-bd-week .mb-week-cat, .mb-bd-week .mb-week-cat *{ color:var(--mb-text); }
.mb-bd-week .mb-week-cat h3, .mb-bd-week .mb-week-meta{ color:var(--mb-text-soft); }


/* Info cards -------------------------------------------------------------- */
.mb-bd-info{ padding-block:clamp(36px,4.4vw,66px); }
.mb-bd-info-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.mb-infocard{ background:var(--mb-white); border:1px solid rgba(20,41,61,.09); border-radius:16px; padding:22px; }
.mb-infocard h3{ margin:0 0 10px; font-size:1.15rem; }
.mb-infocard p{ margin:0 0 12px; font-size:14.5px; line-height:1.55; color:var(--mb-text-soft); }
.mb-ticks{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px; }
.mb-ticks li{ position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--mb-text-soft); }
.mb-ticks li::before{ content:""; position:absolute; left:2px; top:.42em; width:11px; height:6px; border-left:2px solid var(--mb-green-500); border-bottom:2px solid var(--mb-green-500); transform:rotate(-45deg); }
.mb-ticks strong{ color:var(--mb-text); }
.mb-inlink{ font-weight:600; font-size:14px; color:var(--mb-green-600,#2e7d4f); text-decoration:underline; text-underline-offset:3px; }

/* Related ----------------------------------------------------------------- */
.mb-bd-related{ padding-block:clamp(36px,4.4vw,66px); }
.mb-related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.mb-relcard{ display:flex; flex-direction:column; background:var(--mb-white); border:1px solid rgba(20,41,61,.09); border-radius:16px; overflow:hidden; }
.mb-relcard-art{ display:block; position:relative; }
.mb-relcard-img{ display:block; width:100%; height:auto; }
.mb-relcard-body{ flex:1 1 auto; padding:16px 18px 8px; }
.mb-relcard-body h3{ margin:0 0 4px; font-size:1.12rem; }
.mb-relcard-body h3 a{ color:var(--mb-text); text-decoration:none; }
.mb-relcard-body h3 a:hover{ text-decoration:underline; }
.mb-relcard-meta{ margin:0 0 6px; font-size:13px; color:var(--mb-text-soft); }
.mb-relcard-price{ margin:0; font-size:1.18rem; font-weight:700; }
.mb-relcard > .mb-btn{ margin:0 18px 18px; justify-content:center; }

/* Closing + sticky --------------------------------------------------------- */
.mb-bd-final{ padding-block:clamp(36px,4.4vw,64px); }
.mb-bd-final-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,4vw,52px); align-items:center; }
.mb-bd-final h2{ color:#fff; margin:0 0 .3em; }
.mb-bd-final .mb-body-lg{ color:rgba(244,250,253,.84); margin:0; }
.mb-bd-final-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.mb-bd-final-cta form{ margin:0; }

.mb-bd-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--mb-white); border-top:1px solid rgba(20,41,61,.12); box-shadow:0 -8px 28px rgba(4,16,28,.14); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.mb-bd-sticky[hidden]{ display:none; }
.mb-bd-sticky-in{ display:flex; align-items:center; gap:12px; max-width:var(--max,1200px); margin:0 auto; }
.mb-bd-sticky-txt{ flex:1 1 auto; min-width:0; display:grid; gap:1px; }
.mb-bd-sticky-txt strong{ font-size:14.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-bd-sticky-txt span{ font-size:12.5px; color:var(--mb-text-soft); }
.mb-bd-sticky form{ margin:0; flex:0 0 auto; }
.mb-bd-sticky .mb-btn{ min-height:46px; padding:12px 20px; }
@media (min-width:821px){ .mb-bd-sticky{ display:none !important; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width:980px){
  .mb-bd-hero-grid{ grid-template-columns:1fr; }
  .mb-bd-info-grid{ grid-template-columns:1fr; }
  .mb-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-bd-final-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .mb-glance-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-glance-art{ height:56px; }
  .mb-week-grid{ grid-template-columns:1fr; }
  .mb-related-grid{ grid-template-columns:1fr; }
  .mb-bd-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-bd-weektotal{ text-align:left; align-self:start; }
  .mb-bd-final-cta .mb-btn, .mb-bd-final-cta form{ flex:1 1 100%; }
  .mb-bd-final-cta .mb-btn{ width:100%; justify-content:center; min-height:50px; }
  body:has(.mb-bd-sticky:not([hidden])) .mb-footer{ padding-bottom:84px; }
}


/* Four across reads better than six: seven categories land 4 + 3 instead of
   leaving a single orphan tile on its own row. */
.mb-glance-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mb-glance-art{ height:88px; }
.mb-glance-art::before{ content:""; position:absolute; left:50%; top:50%; width:34%; padding-top:34%; transform:translate(-50%,-50%) rotate(45deg); border:1.25px solid rgba(20,41,61,.14); border-radius:6px; }
.mb-glance-art::after{ inset:16%; border-radius:10px; }

/* Category cards size to their contents; stretching a one-item category to match
   a seven-item one left large empty panels. */
.mb-week-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }

@media (max-width:1080px){
  .mb-glance-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mb-week-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .mb-week-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .mb-glance-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-week-grid{ grid-template-columns:1fr; }
}


/* The rotated motif was escaping its panel and reading as a stray scribble. */
.mb-glance-art{ overflow:hidden; }
.mb-glance-art::before{ width:26%; padding-top:26%; border-color:rgba(20,41,61,.10); }
.mb-glance-art::after{ inset:20%; border-color:rgba(20,41,61,.10); }


/* ==========================================================================
   MAKE YOUR MAGIC BOX — size chooser and the market
   ========================================================================== */
body:has(.mb-mymb-hero) main.wrap, body:has(.mb-mymb-bar) main.wrap{ max-width:none; padding:0; margin:0; }
body:has(.mb-mymb-hero) main.wrap > .mb-section, body:has(.mb-mymb-bar) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-mymb-bar) main.wrap > section{ margin-top:0; margin-bottom:0; }
body:has(.mb-mymb-hero) .mb-footer, body:has(.mb-mymb-bar) .mb-footer{ margin-top:0; }

/* Progress rail ----------------------------------------------------------- */
.mb-flow{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; margin:18px 0 0; padding:0; }
.mb-flow-i{ display:flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid rgba(20,41,61,.10); }
.mb-flow-n{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(20,41,61,.10); color:var(--mb-text-soft); font-size:12px; font-weight:700; }
.mb-flow-l{ font-size:13.5px; font-weight:600; color:var(--mb-text-soft); white-space:nowrap; }
.mb-flow-i.is-now{ background:var(--mb-green-600,#2e7d4f); border-color:transparent; }
.mb-flow-i.is-now .mb-flow-n{ background:rgba(255,255,255,.24); color:#fff; }
.mb-flow-i.is-now .mb-flow-l{ color:#fff; }
.mb-flow-i.is-done .mb-flow-n{ background:var(--mb-green-500); color:#fff; }
.mb-flow-i.is-done .mb-flow-l{ color:var(--mb-text); }

/* Size chooser ------------------------------------------------------------ */
.mb-mymb-hero{ padding-block:clamp(26px,3.4vw,52px); }
.mb-mymb-hero h1{ margin:.1em 0 .28em; font-size:clamp(2.2rem,4.6vw,3.5rem); line-height:1.03; letter-spacing:-.02em; }
.mb-mymb-hero .mb-body-lg{ max-width:56ch; }
.mb-mymb-sizes{ padding-block:clamp(34px,4.4vw,66px); }
.mb-sizegrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.mb-sizecard{ position:relative; display:flex; flex-direction:column; background:var(--mb-white); border:1px solid rgba(20,41,61,.10); border-radius:18px; padding:22px; }
.mb-sizecard.is-chosen{ outline:2px solid var(--mb-green-500); }
.mb-sizecard-flag{ position:absolute; top:-11px; left:22px; padding:5px 12px; border-radius:999px; background:var(--mb-green-600,#2e7d4f); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mb-sizecard-art{ height:96px; margin:4px 0 16px; border-radius:14px; background:linear-gradient(160deg,var(--mb-sky-100),var(--mb-white)); position:relative; overflow:hidden; }
.mb-sizecard-art::after{ content:""; position:absolute; inset:20%; border:1.25px solid rgba(20,41,61,.12); border-radius:10px; }
.mb-sizecard h3{ margin:0 0 6px; font-size:1.28rem; }
.mb-sizecard-desc{ margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--mb-text-soft); }
.mb-sizecard-facts{ list-style:none; margin:0 0 18px; padding:14px 0 0; border-top:1px dashed rgba(20,41,61,.14); display:grid; gap:9px; flex:1 1 auto; }
.mb-sizecard-facts li{ display:flex; justify-content:space-between; gap:12px; font-size:14.5px; }
.mb-sizecard-facts span{ color:var(--mb-text-soft); }
.mb-sizecard-facts strong{ font-weight:600; text-align:right; }
.mb-sizecard form{ margin:0; }
.mb-btn--block{ display:flex; width:100%; justify-content:center; }
.mb-sizegrid-note{ margin:16px 2px 0; }
.mb-mymb-alt{ margin:22px 0 0; font-size:14px; color:var(--mb-text-soft); }
.mb-mymb-alt a{ color:var(--mb-green-600,#2e7d4f); font-weight:600; }

/* Builder header + live state --------------------------------------------- */
.mb-mymb-bar{ padding-block:clamp(18px,2.4vw,34px); }
.mb-mymb-bar-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; }
.mb-mymb-bar h1{ margin:.06em 0 0; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; letter-spacing:-.02em; }
.mb-mymb-bar .mb-flow{ margin:0; }

.mb-mymb-state{ position:sticky; top:0; z-index:40; background:var(--mb-white); border-bottom:1px solid rgba(20,41,61,.12); box-shadow:0 6px 22px rgba(4,16,28,.07); padding:12px 0; }
.mb-mymb-state-in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.mb-mymb-cap{ flex:1 1 320px; min-width:260px; }
.mb-mymb-capline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.mb-mymb-capline strong{ font-size:15px; }
.mb-mymb-capline span{ font-size:13px; color:var(--mb-text-soft); }
.mb-mymb-track{ height:8px; margin:7px 0 5px; border-radius:999px; background:rgba(20,41,61,.10); overflow:hidden; }
.mb-mymb-fill{ height:100%; border-radius:999px; background:var(--mb-green-500); transition:width .2s ease; }
.mb-mymb-track.is-warn .mb-mymb-fill{ background:var(--mb-sun,#d9a441); }
.mb-mymb-track.is-over .mb-mymb-fill{ background:var(--mb-berry-500,#a63d5e); }
.mb-mymb-caphint{ margin:0; font-size:12px; color:var(--mb-text-soft); }
.mb-mymb-caphint a{ color:var(--mb-green-600,#2e7d4f); font-weight:600; }
.mb-mymb-totals{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.mb-mymb-totals > div{ display:grid; gap:1px; }
.mb-mymb-totals span{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-mymb-totals strong{ font-size:1.15rem; line-height:1.1; white-space:nowrap; }
.mb-mymb-over{ margin:10px 0 0; padding:12px 16px; border-radius:12px; background:rgba(166,61,94,.10); border:1px solid rgba(166,61,94,.28); font-size:14.5px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mb-inlineform{ display:inline; margin:0; }


/* Market tools ------------------------------------------------------------ */
.mb-mymb-market{ padding-block:clamp(24px,3vw,44px); }
.mb-mymb-tools{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; }
.mb-cattabs{ display:flex; flex-wrap:wrap; gap:8px; }
.mb-cattab{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:var(--mb-white); border:1px solid rgba(20,41,61,.12); color:var(--mb-text); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.mb-cattab span{ font-size:11.5px; font-weight:700; color:var(--mb-text-soft); background:var(--mb-sky-100); border-radius:999px; padding:1px 7px; }
.mb-cattab:hover{ border-color:rgba(20,41,61,.3); }
.mb-cattab.is-on{ background:var(--mb-green-600,#2e7d4f); border-color:transparent; color:#fff; }
.mb-cattab.is-on span{ background:rgba(255,255,255,.22); color:#fff; }
.mb-mymb-search{ display:flex; gap:8px; margin:0; }
.mb-mymb-search input{ min-width:210px; min-height:44px; padding:10px 14px; border-radius:10px; border:1px solid rgba(20,41,61,.16); background:var(--mb-white); font:inherit; font-size:15px; }
.mb-mymb-search input:focus-visible{ outline:3px solid rgba(46,125,79,.4); outline-offset:1px; }
.mb-mymb-resultline{ margin:16px 2px 14px; font-size:13.5px; color:var(--mb-text-soft); }
.mb-mymb-resultline strong{ color:var(--mb-text); }

/* Product cards ----------------------------------------------------------- */
.mb-prodgrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.3vw,18px); align-items:stretch; }
.mb-prod{ display:flex; flex-direction:column; background:var(--mb-white); border:1px solid rgba(20,41,61,.09); border-radius:14px; overflow:hidden; }
.mb-prod.is-in{ border-color:var(--mb-green-500); box-shadow:0 0 0 1px var(--mb-green-500) inset; }
.mb-prod[hidden]{ display:none; }
.mb-prod-art{ position:relative; display:block; background:var(--mb-sky-100); }
.mb-prod-img{ display:block; width:100%; height:auto; }
.mb-prod-inflag{ position:absolute; top:8px; left:8px; padding:4px 9px; border-radius:999px; background:var(--mb-green-600,#2e7d4f); color:#fff; font-size:11px; font-weight:700; }
.mb-prod-body{ flex:1 1 auto; padding:12px 13px 4px; }
.mb-prod-name{ margin:0 0 3px; font-size:15px; line-height:1.25; font-family:inherit; font-weight:700; }
.mb-prod-name a{ color:var(--mb-text); text-decoration:none; }
.mb-prod-name a:hover{ text-decoration:underline; }
.mb-prod-producer{ margin:0 0 6px; font-size:12.5px; line-height:1.35; color:var(--mb-text-soft); }
.mb-prod-claims{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px; }
.mb-prod-claims span{ padding:2px 7px; border-radius:999px; background:rgba(46,125,79,.10); color:var(--mb-green-600,#2e7d4f); font-size:10.5px; font-weight:700; letter-spacing:.03em; }
.mb-prod-avail{ margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mb-sun-700,#8a6320); }
.mb-prod-foot{ padding:8px 13px 13px; display:grid; gap:9px; }
.mb-prod-price{ margin:0; display:flex; align-items:baseline; gap:5px; }
.mb-prod-price strong{ font-size:1.08rem; }
.mb-prod-price span{ font-size:12px; color:var(--mb-text-soft); }
.mb-prod-add{ width:100%; justify-content:center; min-height:40px; }
.mb-qty{ display:flex; align-items:center; gap:6px; }
.mb-qty-b{ width:38px; height:38px; flex:0 0 38px; border-radius:9px; border:1px solid rgba(20,41,61,.16); background:var(--mb-white); color:var(--mb-text); font-size:19px; line-height:1; cursor:pointer; }
.mb-qty-b:hover{ border-color:var(--mb-green-500); color:var(--mb-green-600,#2e7d4f); }
.mb-qty-n{ min-width:26px; text-align:center; font-weight:700; font-size:15px; }
.mb-qty-x{ margin-left:auto; background:none; border:0; padding:4px 2px; color:var(--mb-text-soft); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; }
.mb-qty-x:hover{ color:var(--mb-berry-500,#a63d5e); }
.mb-prodgrid-empty{ margin:22px 2px 0; color:var(--mb-text-soft); }
.mb-prodgrid-empty[hidden]{ display:none; }
.mb-empty{ padding:34px 0; color:var(--mb-text-soft); }

/* Next steps -------------------------------------------------------------- */
.mb-mymb-next{ padding-block:clamp(34px,4.2vw,62px); }
.mb-mymb-next-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(20px,3vw,48px); align-items:center; }
.mb-mymb-next h2{ color:#fff; margin:0 0 .35em; }
.mb-mymb-next .mb-body-lg{ color:rgba(244,250,253,.84); margin:0 0 20px; max-width:56ch; }
.mb-mymb-next-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.mb-mymb-nextbox{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:22px; }
.mb-mymb-nextsum{ margin:2px 0 16px; color:#fff; font-size:1.1rem; }
.mb-mymb-nextnote{ margin:12px 0 0; color:rgba(244,250,253,.72); }

/* Sticky mobile summary --------------------------------------------------- */
.mb-mymb-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--mb-white); border-top:1px solid rgba(20,41,61,.12); box-shadow:0 -8px 28px rgba(4,16,28,.14); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.mb-mymb-sticky-in{ display:flex; align-items:center; gap:12px; max-width:var(--max,1200px); margin:0 auto; }
.mb-mymb-sticky-txt{ flex:1 1 auto; min-width:0; display:grid; gap:1px; }
.mb-mymb-sticky-txt strong{ font-size:14.5px; line-height:1.2; }
.mb-mymb-sticky-txt span{ font-size:12px; color:var(--mb-text-soft); }
.mb-mymb-sticky .mb-btn{ min-height:46px; padding:12px 22px; }
@media (min-width:821px){ .mb-mymb-sticky{ display:none; } }
@media (max-width:820px){ body:has(.mb-mymb-sticky) .mb-footer{ padding-bottom:84px; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width:1280px){ .mb-prodgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1024px){
  .mb-prodgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mb-sizegrid{ grid-template-columns:1fr; }
  .mb-mymb-next-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .mb-mymb-state{ position:static; }
  .mb-mymb-totals{ margin-left:0; width:100%; justify-content:space-between; }
  .mb-mymb-totals .mb-btn{ min-height:44px; }
  /* the category rail becomes a thumb-swipeable strip rather than a tall block */
  .mb-cattabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(var(--gutter,20px) * -1); padding:2px var(--gutter,20px); }
  .mb-cattabs::-webkit-scrollbar{ display:none; }
  .mb-cattab{ flex:0 0 auto; min-height:42px; }
  .mb-mymb-search{ width:100%; }
  .mb-mymb-search input{ flex:1 1 auto; min-width:0; }
}
@media (max-width:640px){
  .mb-prodgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-prod-body{ padding:10px 11px 4px; }
  .mb-prod-foot{ padding:6px 11px 11px; }
  .mb-qty-b{ width:36px; height:36px; flex:0 0 36px; }
  .mb-mymb-bar-in{ gap:12px; }
  .mb-flow-i{ padding:6px 11px 6px 6px; }
  .mb-flow-l{ font-size:12.5px; }
}


/* ==========================================================================
   SHOP ALL PRODUCTS
   Product-dense, so the brand shows in the frame — hero, rail, trust band and
   close — rather than striping every row. The grid stays quiet on cream.
   ========================================================================== */
body:has(.mb-shop-hero) main.wrap{ max-width:none; padding:0; margin:0; }
body:has(.mb-shop-hero) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-shop-hero) .mb-footer{ margin-top:0; }

.mb-shop-hero{ padding-block:clamp(24px,3.2vw,50px); }
.mb-shop-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,56px); align-items:center; }
.mb-shop-hero h1{ margin:.1em 0 .26em; font-size:clamp(2.2rem,4.8vw,3.7rem); line-height:1.02; letter-spacing:-.02em; }
.mb-shop-hero .mb-body-lg{ max-width:44ch; margin:0; }
.mb-shop-chips{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mb-shop-chips li{ padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(20,41,61,.10); color:var(--mb-text-soft); font-size:13px; font-weight:600; }
.mb-shop-hero-art{ border-radius:18px; overflow:hidden; box-shadow:0 20px 54px rgba(4,16,28,.15); max-width:560px; margin-left:auto; }
.mb-shop-hero-img{ display:block; width:100%; height:auto; }

.mb-shop-main{ padding-block:clamp(26px,3.4vw,54px); }
.mb-shop-layout{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:clamp(20px,2.4vw,36px); align-items:start; }

/* Rail -------------------------------------------------------------------- */
.mb-shop-rail{ position:sticky; top:18px; }
.mb-shop-panel{ background:var(--mb-white); border:1px solid rgba(20,41,61,.09); border-radius:16px; }
.mb-shop-panel > summary{ display:none; }
.mb-shop-panel-in{ padding:18px; }
.mb-shop-cats h2, .mb-shop-filters h2{ margin:0 0 10px; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase; color:var(--mb-text-soft); font-family:inherit; font-weight:700; }
.mb-shop-cat{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:10px; color:var(--mb-text); font-size:14.5px; font-weight:600; text-decoration:none; }
.mb-shop-cat span{ font-size:11.5px; font-weight:700; color:var(--mb-text-soft); background:var(--mb-sky-100); border-radius:999px; padding:1px 7px; }
.mb-shop-cat:hover{ background:var(--mb-cream); }
.mb-shop-cat.is-on{ background:var(--mb-green-600,#2e7d4f); color:#fff; }
.mb-shop-cat.is-on span{ background:rgba(255,255,255,.22); color:#fff; }
.mb-shop-filters{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(20,41,61,.10); }
.mb-shop-fset{ border:0; margin:0 0 16px; padding:0; }
.mb-shop-fset legend{ padding:0; margin:0 0 8px; font-size:13px; font-weight:700; color:var(--mb-text); }
.mb-check{ display:flex; align-items:center; gap:9px; padding:6px 2px; font-size:14px; color:var(--mb-text-soft); cursor:pointer; min-height:32px; }
.mb-check input{ width:17px; height:17px; flex:0 0 17px; accent-color:var(--mb-green-600,#2e7d4f); }
.mb-check span{ flex:1 1 auto; }
.mb-check em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--mb-text-soft); background:var(--mb-cream); border-radius:999px; padding:1px 7px; }
.mb-shop-clear{ color:var(--mb-green-600,#2e7d4f); }

/* Toolbar ----------------------------------------------------------------- */
.mb-shop-strip{ display:none; }
.mb-shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
.mb-shop-search{ display:flex; gap:8px; margin:0; flex:1 1 280px; max-width:420px; }
.mb-shop-search input{ flex:1 1 auto; min-width:0; min-height:44px; padding:10px 14px; border-radius:10px; border:1px solid rgba(20,41,61,.16); background:var(--mb-white); font:inherit; font-size:15px; }
.mb-shop-search input:focus-visible{ outline:3px solid rgba(46,125,79,.4); outline-offset:1px; }
.mb-shop-sortwrap{ display:flex; align-items:center; gap:9px; }
.mb-shop-sortwrap label{ font-size:13.5px; color:var(--mb-text-soft); white-space:nowrap; }
.mb-shop-sortwrap select{ min-height:44px; padding:10px 13px; border-radius:10px; border:1px solid rgba(20,41,61,.16); background:var(--mb-white); font:inherit; font-size:14.5px; }
.mb-shop-count{ margin:16px 2px 14px; font-size:13.5px; color:var(--mb-text-soft); }
.mb-shop-count strong{ color:var(--mb-text); }
.mb-shop-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mb-shop-more{ display:flex; justify-content:center; margin:26px 0 0; }
.mb-shop-more .mb-btn[hidden]{ display:none; }

/* Trust + close ----------------------------------------------------------- */
.mb-shop-trust{ padding-block:clamp(28px,3.4vw,52px); }
.mb-trustrow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,32px); }
.mb-trustrow li{ display:grid; gap:5px; }
.mb-trustrow strong{ font-size:15px; }
.mb-trustrow span{ font-size:13.5px; line-height:1.5; color:var(--mb-text-soft); }
.mb-shop-final{ padding-block:clamp(34px,4.2vw,62px); }
.mb-shop-final-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,4vw,52px); align-items:center; }
.mb-shop-final h2{ color:#fff; margin:0 0 .3em; }
.mb-shop-final .mb-body-lg{ color:rgba(244,250,253,.84); margin:0; }
.mb-shop-final-cta{ display:flex; flex-wrap:wrap; gap:12px; }


/* Shop responsive --------------------------------------------------------- */
@media (max-width:1240px){ .mb-shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1080px){
  .mb-shop-layout{ grid-template-columns:1fr; }
  .mb-shop-rail{ position:static; }
  /* the desktop sidebar becomes a drawer, and a swipeable strip carries the
     categories so products stay one screen away on a phone */
  .mb-shop-panel > summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; font-weight:700; font-size:15px; }
  .mb-shop-panel > summary::-webkit-details-marker{ display:none; }
  .mb-shop-panel > summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--mb-text-soft); border-bottom:2px solid var(--mb-text-soft); transform:rotate(45deg); }
  .mb-shop-panel[open] > summary::after{ transform:rotate(-135deg); }
  .mb-shop-panel-in{ padding:0 16px 16px; }
  .mb-shop-cats{ display:none; }
  .mb-shop-filters{ margin-top:0; padding-top:0; border-top:0; }
  .mb-shop-strip{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:8px; margin:14px calc(var(--gutter,20px) * -1) 4px; padding:2px var(--gutter,20px); }
  .mb-shop-strip::-webkit-scrollbar{ display:none; }
  .mb-shop-strip .mb-cattab{ flex:0 0 auto; min-height:42px; }
  .mb-shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mb-trustrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-shop-final-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .mb-shop-hero-grid{ grid-template-columns:1fr; }
  .mb-shop-hero-art{ order:-1; max-width:none; margin:0; }
  .mb-shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-shop-toolbar{ gap:10px; }
  .mb-shop-search{ flex:1 1 100%; max-width:none; }
  .mb-shop-sortwrap{ width:100%; }
  .mb-shop-sortwrap select{ flex:1 1 auto; }
}
@media (max-width:430px){
  .mb-shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mb-prod-name{ font-size:14px; }
  .mb-prod-producer{ font-size:12px; }
  .mb-trustrow{ grid-template-columns:1fr; }
  .mb-shop-final-cta .mb-btn{ flex:1 1 100%; justify-content:center; min-height:50px; }
}


/* Grid items default to min-width:auto, so the category strip grew to its content
   width (1137px) inside a clipped parent — the tabs were cut off with no way to
   scroll them. Constraining the track lets the strip scroll as intended. */
.mb-shop-layout > *{ min-width:0; }
.mb-shop-body{ min-width:0; }
.mb-shop-strip{ max-width:100%; }


/* A closed <details> hides its contents whatever the summary is doing, so hiding
   the summary on desktop left the whole rail blank. Force the panel open above
   the drawer breakpoint; below it, it stays a real drawer. */
@media (min-width:1081px){
  .mb-shop-panel > summary{ display:none; }
  .mb-shop-panel .mb-shop-panel-in{ display:block !important; }
}


/* The Remove link was reaching past the card edge on narrow columns. */
.mb-qty{ flex-wrap:wrap; }
.mb-qty-x{ margin-left:auto; max-width:100%; }
.mb-prod-foot{ overflow:hidden; }
@media (max-width:1240px){ .mb-qty-x{ margin-left:6px; } }


/* ==========================================================================
   PRODUCT DETAIL — one reusable template for every sellable product
   ========================================================================== */
body:has(.mb-pd-hero) main.wrap{ max-width:none; padding:0; margin:0; }
body:has(.mb-pd-hero) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-pd-hero) .mb-footer{ margin-top:0; }

.mb-pd-hero{ padding-block:clamp(24px,3.2vw,52px); }
.mb-pd-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.mb-pd-art{ position:relative; border-radius:20px; overflow:hidden; background:var(--mb-sky-100); box-shadow:0 22px 60px rgba(4,16,28,.16); }
.mb-pd-img{ display:block; width:100%; height:auto; }
.mb-pd-buy .mb-eyebrow a{ color:inherit; text-decoration:none; }
.mb-pd-buy .mb-eyebrow a:hover{ text-decoration:underline; }
.mb-pd-buy h1{ margin:.1em 0 .3em; font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.02em; }
.mb-pd-by{ margin:0 0 12px; font-size:15px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.mb-pd-by > span{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-pd-by a{ color:var(--mb-text); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--mb-green-500); }
.mb-pd-by a:hover{ color:var(--mb-green-600,#2e7d4f); }
.mb-pd-by em{ font-style:normal; color:var(--mb-text-soft); font-size:14px; }
.mb-pd-claims{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.mb-pd-claims span{ padding:4px 11px; border-radius:999px; background:rgba(46,125,79,.10); color:var(--mb-green-600,#2e7d4f); font-size:12px; font-weight:700; }
.mb-pd-desc{ margin:0 0 22px; max-width:48ch; }
.mb-pd-pricerow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; padding:18px 0; border-top:1px solid rgba(20,41,61,.12); border-bottom:1px solid rgba(20,41,61,.12); }
.mb-pd-price{ margin:0; display:flex; align-items:baseline; gap:8px; }
.mb-pd-price strong{ font-size:2.4rem; line-height:1; letter-spacing:-.02em; }
.mb-pd-price span{ font-size:14.5px; color:var(--mb-text-soft); }
.mb-pd-avail{ margin:0; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(46,125,79,.10); color:var(--mb-green-600,#2e7d4f); }
.mb-pd-avail.is-seasonal, .mb-pd-avail.is-limited, .mb-pd-avail.is-coming_soon{ background:rgba(217,164,65,.16); color:var(--mb-sun-700,#8a6320); }
.mb-pd-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 0; }
.mb-pd-addform{ flex:1 1 240px; }
.mb-pd-add{ width:100%; justify-content:center; }
.mb-pd-qty{ flex:1 1 240px; padding:8px 12px; border:1px solid rgba(20,41,61,.16); border-radius:12px; }
.mb-pd-qty .mb-qty-n{ min-width:auto; font-size:14.5px; }
.mb-pd-note{ margin:14px 0 0; font-size:13.5px; color:var(--mb-text-soft); }
.mb-pd-pref{ margin:22px 0 0; padding:16px 18px; border-radius:14px; background:var(--mb-cream); }
.mb-pd-preflabel{ margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mb-text-soft); }
.mb-pd-prefbtns{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }

/* Information ------------------------------------------------------------- */
.mb-pd-info{ padding-block:clamp(34px,4.2vw,62px); }
.mb-pd-info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(14px,1.6vw,22px); align-items:start; }
.mb-pd-info .mb-infocard h2{ margin:0 0 14px; font-size:1.15rem; }
.mb-pd-dl{ margin:0; display:grid; gap:0; }
.mb-pd-dl > div{ display:grid; grid-template-columns:minmax(96px,38%) 1fr; gap:12px; padding:10px 0; border-bottom:1px solid rgba(20,41,61,.08); }
.mb-pd-dl > div:last-child{ border-bottom:0; }
.mb-pd-dl dt{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--mb-text-soft); }
.mb-pd-dl dd{ margin:0; font-size:14.5px; color:var(--mb-text); }
.mb-pd-dl > div.is-allergen dd{ font-weight:700; color:var(--mb-berry-500,#a63d5e); }

/* Producer ---------------------------------------------------------------- */
.mb-pd-producer{ padding-block:clamp(32px,4vw,60px); }
.mb-pd-producer-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(20px,3vw,48px); align-items:center; }
.mb-pd-producer h2{ color:#fff; margin:.1em 0 .2em; }
.mb-pd-producer-where{ margin:0 0 12px; color:rgba(244,250,253,.72); font-size:14px; }
.mb-pd-producer .mb-body-lg{ color:rgba(244,250,253,.86); margin:0 0 20px; max-width:56ch; }
.mb-pd-producer-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.mb-pd-producer-art{ min-height:200px; border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14); position:relative; overflow:hidden; }
.mb-pd-producer-art::after{ content:""; position:absolute; inset:22%; border:1.25px solid rgba(255,255,255,.16); border-radius:12px; }

/* Related + close ---------------------------------------------------------- */
.mb-pd-related{ padding-block:clamp(32px,4vw,60px); }
.mb-pd-relgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mb-pd-final{ padding-block:clamp(32px,4vw,58px); }
.mb-pd-final-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,4vw,52px); align-items:center; }
.mb-pd-final h2{ color:#fff; margin:0 0 .3em; }
.mb-pd-final .mb-body-lg{ color:rgba(244,250,253,.84); margin:0; }
.mb-pd-final-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* Sticky ------------------------------------------------------------------- */
.mb-pd-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--mb-white); border-top:1px solid rgba(20,41,61,.12); box-shadow:0 -8px 28px rgba(4,16,28,.14); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.mb-pd-sticky[hidden]{ display:none; }
.mb-pd-sticky-in{ display:flex; align-items:center; gap:12px; max-width:var(--max,1200px); margin:0 auto; }
.mb-pd-sticky-txt{ flex:1 1 auto; min-width:0; display:grid; gap:1px; }
.mb-pd-sticky-txt strong{ font-size:14.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-pd-sticky-txt span{ font-size:12.5px; color:var(--mb-text-soft); }
.mb-pd-sticky .mb-btn{ min-height:46px; padding:12px 20px; }
@media (min-width:821px){ .mb-pd-sticky{ display:none !important; } }

@media (max-width:1080px){ .mb-pd-relgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){
  .mb-pd-grid{ grid-template-columns:1fr; }
  .mb-pd-art{ max-width:520px; }
  .mb-pd-producer-grid{ grid-template-columns:1fr; }
  .mb-pd-producer-art{ display:none; }
  .mb-pd-final-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .mb-pd-relgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-pd-price strong{ font-size:2rem; }
  .mb-pd-actions .mb-btn{ width:100%; justify-content:center; min-height:50px; }
  .mb-pd-actions > a.mb-btn{ flex:1 1 100%; }
  .mb-pd-dl > div{ grid-template-columns:1fr; gap:2px; }
  body:has(.mb-pd-sticky:not([hidden])) .mb-footer{ padding-bottom:84px; }
}


/* ==========================================================================
   MAGIC MADE — the Magic Box kitchen line
   Warmer than the grocery pages: blush and berry over cream, navy type kept.
   ========================================================================== */
body:has(.mb-mm-hero) main.wrap{ max-width:none; padding:0; margin:0; }
body:has(.mb-mm-hero) main.wrap > .mb-section{ margin-top:0; margin-bottom:0; }
body:has(.mb-mm-hero) .mb-footer{ margin-top:0; }

.mb-mm-hero{ padding-block:clamp(28px,3.6vw,58px); }
.mb-mm-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(22px,4vw,58px); align-items:center; }
.mb-mm-hero h1{ margin:.1em 0 .26em; font-size:clamp(2.4rem,5vw,3.9rem); line-height:1.02; letter-spacing:-.02em; }
.mb-mm-hero .mb-body-lg{ max-width:46ch; margin:0; }
.mb-eyebrow--made{ color:var(--mb-berry-600,#8d2f4d); }
.mb-mm-chips{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mb-mm-chips li{ padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.76); border:1px solid rgba(141,47,77,.16); color:var(--mb-text-soft); font-size:13px; font-weight:600; }
.mb-mm-hero-art{ border-radius:20px; overflow:hidden; box-shadow:0 24px 62px rgba(80,20,45,.16); }
.mb-mm-hero-img{ display:block; width:100%; height:auto; }

.mb-mm-shop{ padding-block:clamp(30px,3.8vw,60px); }
.mb-mm-count{ margin:0; align-self:end; font-size:13.5px; color:var(--mb-text-soft); white-space:nowrap; }
.mb-mm-count strong{ color:var(--mb-text); }
.mb-mm-tabs{ margin:0 0 18px; }
.mb-mm-tabs .mb-cattab{ cursor:pointer; font:inherit; font-size:14px; font-weight:600; }
.mb-mm-tabs .mb-cattab.is-on{ background:var(--mb-berry-600,#8d2f4d); border-color:transparent; color:#fff; }
.mb-mm-tabs .mb-cattab.is-on span{ background:rgba(255,255,255,.22); color:#fff; }
.mb-mm-reviewnote{ margin:0 0 20px; padding:14px 18px; border-radius:12px; background:rgba(217,164,65,.12); border:1px solid rgba(217,164,65,.34); font-size:14px; line-height:1.55; color:var(--mb-text); }

/* Editorial cards ---------------------------------------------------------- */
.mb-mm-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); align-items:start; }
.mb-mm-card{ display:flex; flex-direction:column; background:var(--mb-white); border:1px solid rgba(141,47,77,.10); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(80,20,45,.07); }
.mb-mm-card[hidden]{ display:none; }
.mb-mm-card.is-review{ border-style:dashed; border-color:rgba(217,164,65,.55); box-shadow:none; }
.mb-mm-art{ position:relative; display:block; background:var(--mb-blush,#f8eef1); }
.mb-mm-img{ display:block; width:100%; height:auto; }
.mb-mm-flag{ position:absolute; top:10px; left:10px; padding:5px 11px; border-radius:999px; background:rgba(217,164,65,.95); color:#3a2a08; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.mb-mm-inflag{ position:absolute; top:10px; right:10px; padding:5px 11px; border-radius:999px; background:var(--mb-green-600,#2e7d4f); color:#fff; font-size:10.5px; font-weight:800; }
.mb-mm-body{ flex:1 1 auto; padding:16px 18px 6px; }
.mb-mm-body h3{ margin:0 0 6px; font-size:1.18rem; line-height:1.2; }
.mb-mm-body h3 a{ color:var(--mb-text); text-decoration:none; }
.mb-mm-body h3 a:hover{ text-decoration:underline; }
.mb-mm-desc{ margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--mb-text-soft); }
.mb-mm-allergen{ margin:0 0 6px; font-size:12.5px; line-height:1.45; color:var(--mb-berry-600,#8d2f4d); }
.mb-mm-allergen span{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:10.5px; }
.mb-mm-keep{ margin:0 0 6px; font-size:12.5px; line-height:1.45; color:var(--mb-text-soft); }
.mb-mm-foot{ padding:10px 18px 18px; display:grid; gap:10px; }
.mb-mm-price{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mb-mm-price strong{ font-size:1.3rem; }
.mb-mm-price span{ font-size:12.5px; color:var(--mb-text-soft); }
.mb-mm-add{ width:100%; justify-content:center; min-height:42px; }
.mb-mm-blocked{ display:block; padding:11px 0; text-align:center; border-radius:10px; background:var(--mb-cream); color:var(--mb-text-soft); font-size:13.5px; font-weight:700; }

.mb-mm-info{ padding-block:clamp(30px,3.8vw,58px); }
.mb-mm-info-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.mb-mm-final{ padding-block:clamp(32px,4vw,58px); }
.mb-mm-final-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,4vw,52px); align-items:center; }
.mb-mm-final h2{ color:#fff; margin:0 0 .3em; }
.mb-mm-final .mb-body-lg{ color:rgba(244,250,253,.84); margin:0; }
.mb-mm-final-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* In-review state on the shared product template ---------------------------- */
.mb-pd-review{ margin:18px 0 0; padding:14px 18px; border-radius:12px; background:rgba(217,164,65,.12); border:1px solid rgba(217,164,65,.4); }
.mb-pd-review-flag{ margin:0 0 4px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mb-sun-700,#8a6320); }
.mb-pd-review p.mb-small{ margin:0; color:var(--mb-text-soft); }

@media (max-width:1180px){ .mb-mm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:960px){
  .mb-mm-hero-grid{ grid-template-columns:1fr; }
  .mb-mm-hero-art{ order:-1; }
  .mb-mm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-mm-info-grid{ grid-template-columns:1fr; }
  .mb-mm-final-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .mb-mm-grid{ grid-template-columns:1fr; }
  .mb-mm-count{ align-self:start; }
  .mb-mm-final-cta .mb-btn{ flex:1 1 100%; justify-content:center; min-height:50px; }
}


/* The shared placeholder art is drawn in the grocery palette. On Magic Made it is
   warmed to the blush end so the page reads as one palette. The real Adobe
   photograph drops into the same slot and simply covers this. */
.mb-mm-art, .mb-mm-hero-art{ position:relative; }
.mb-mm-art > *, .mb-mm-hero-art > *{ position:relative; z-index:0; }
.mb-mm-art::after, .mb-mm-hero-art::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(155deg, rgba(248,238,241,.58), rgba(141,47,77,.14));
  mix-blend-mode:multiply;
}
.mb-mm-art .mb-shot-pending, .mb-mm-hero-art .mb-shot-pending,
.mb-mm-flag, .mb-mm-inflag{ z-index:3; }
/* the media service prints its own pending chip inside the art */
.mb-mm-art [class*="pending"], .mb-mm-hero-art [class*="pending"]{ position:relative; z-index:3; }


/* Homepage Magic Made feature — renders once approved products exist. */
.mb-home-made-feat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:14px; }
.mb-home-madecard{ display:grid; gap:8px; text-decoration:none; color:inherit; background:var(--mb-white); border:1px solid rgba(141,47,77,.10); border-radius:16px; overflow:hidden; padding-bottom:14px; }
.mb-home-madecard-art{ display:block; position:relative; background:var(--mb-blush,#f8eef1); }
.mb-home-madecard-img{ display:block; width:100%; height:auto; }
.mb-home-madecard-name{ display:block; padding:0 14px; font-weight:700; font-size:15px; line-height:1.25; }
.mb-home-madecard-price{ display:block; padding:0 14px; font-size:14px; color:var(--mb-text-soft); }
.mb-home-madecard:hover .mb-home-madecard-name{ text-decoration:underline; }
@media (max-width:640px){ .mb-home-made-feat{ grid-template-columns:repeat(2,minmax(0,1fr)); } }