/* =====================================================================
   MAGIC BOX — STEP 3 MISSION DESIGN LAYER
   WE ORGANIZE HEALTHY LIVING. / HEALTHY. ORGANIZED. PLEASURABLE.

   Loads LAST, after magicbox-customer.css, -design-system.css, -family.css.
   Additive only: colour, type, rhythm, depth, motion, media slots.
   No structural rewrites — every existing template keeps working.
   Remove this one <link> to revert the entire site's appearance.
   ===================================================================== */

:root{
  /* warm cream / ivory */
  --mb2-ivory:#FFFDF9;  --mb2-cream:#FBF7F0;  --mb2-sand:#F4ECDF;  --mb2-shell:#EFE4D2;
  /* deep charcoal / navy */
  --mb2-ink:#201E1B;    --mb2-navy:#1B2730;   --mb2-deep:#151E25;
  /* natural olive / restrained green */
  --mb2-olive:#5E6B4F;  --mb2-olive-lt:#8A9779; --mb2-olive-bg:#EDF0E7;
  /* rust / copper */
  --mb2-copper:#B0592B; --mb2-rust:#8E4523;   --mb2-glow:#E8A56A;
  --mb2-line:#E3DACB;   --mb2-mute:#6B6358;
  --mb2-r:14px; --mb2-r-lg:22px;
  --mb2-serif:"Zilla Slab",Georgia,"Times New Roman",serif;
  --mb2-shadow:0 1px 2px rgba(32,30,27,.04),0 10px 34px rgba(32,30,27,.07);
  --mb2-shadow-lg:0 2px 4px rgba(32,30,27,.05),0 24px 60px rgba(32,30,27,.12);
}

/* ---------- ground ---------- */
body{background:var(--mb2-ivory);color:var(--mb2-ink)}

h1,h2,h3,.mb-sec-head,.mb-home-hero-copy h1{
  font-family:var(--mb2-serif);font-weight:600;letter-spacing:-.012em;color:var(--mb2-ink)}
h1{line-height:1.06}
h2{line-height:1.16}
.mb-body-lg,.lede,.mb-home-hero-lede{
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.62;color:#3C372F;max-width:66ch}
.mb-eyebrow{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--mb2-olive)}
.mb-eyebrow--on-deep{color:var(--mb2-glow)}
.mb-muted,.faint,.hint,.mb-small,.xs{color:var(--mb2-mute)}

/* ---------- rhythm: generous whitespace ---------- */
.mb-section{padding-block:clamp(3.25rem,7vw,6.5rem)}
.mb-container{max-width:74ch;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.mb-container--wide{max-width:1240px}

/* ---------- grounds ---------- */
.mb-bg-air{background:linear-gradient(180deg,var(--mb2-ivory),var(--mb2-cream))}
.mb-bg-natural{background:var(--mb2-olive-bg)}
.mb-bg-made{background:linear-gradient(160deg,var(--mb2-shell),var(--mb2-sand))}
.mb-bg-deep{background:var(--mb2-deep);color:#F6F1E8}
.mb-bg-deep h1,.mb-bg-deep h2,.mb-bg-deep h3{color:#FFFDF9}
.mb-bg-deep p,.mb-bg-deep li{color:rgba(246,241,232,.84)}

/* organic curve: soft crest between bands */
.mb-bg-deep,.mb-bg-natural,.mb-bg-made{position:relative}
.mb-bg-deep::before,.mb-bg-natural::before,.mb-bg-made::before{
  content:"";position:absolute;inset:-1px 0 auto 0;height:36px;
  background:inherit;border-radius:0 0 50% 50%/0 0 100% 100%;transform:translateY(-34px);
  pointer-events:none}

/* ---------- buttons ---------- */
.mb-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.6rem;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:.96rem;font-weight:600;line-height:1;text-decoration:none;
  cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,color .16s}
.mb-btn--primary,.btn--primary{background:var(--mb2-copper);color:#FFFDF9;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(176,89,43,.24)}
.mb-btn--primary:hover,.btn--primary:hover{background:var(--mb2-rust);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 26px rgba(176,89,43,.32)}
.mb-btn--secondary,.btn--ghost{background:transparent;color:var(--mb2-ink);
  border-color:var(--mb2-line)}
.mb-btn--secondary:hover,.btn--ghost:hover{border-color:var(--mb2-copper);color:var(--mb2-rust);
  background:#FDF4EC}
.mb-btn--on-deep-ghost{background:transparent;color:#FFFDF9;border-color:rgba(255,253,249,.42)}
.mb-btn--on-deep-ghost:hover{background:rgba(255,253,249,.1);border-color:#FFFDF9}
.mb-btn--lg,.btn--lg{min-height:56px;padding:.95rem 2.1rem;font-size:1.02rem}
.mb-btn--sm,.btn--sm{min-height:40px;padding:.55rem 1.05rem;font-size:.86rem}
.btn--block{width:100%}
.mb-linkbtn,.mb-inlink,.mb-link{color:var(--mb2-rust);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.mb-linkbtn:hover,.mb-inlink:hover,.mb-link:hover{color:var(--mb2-copper)}

/* ---------- cards & surfaces ---------- */
.mb-infocard,.card,.mb-prod-body{background:var(--mb2-ivory);border:1px solid var(--mb2-line);
  border-radius:var(--mb2-r);box-shadow:var(--mb2-shadow)}
.mb-infocard{padding:1.5rem}
.mb-prodgrid{display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mb-prod-art,.mb-home-cat-art,.mb-home-madecard-art,.mb-home-made-art{
  background:radial-gradient(120% 90% at 78% 12%,rgba(176,89,43,.13),transparent 62%),
             linear-gradient(145deg,var(--mb2-cream),var(--mb2-shell));
  border-radius:var(--mb2-r) var(--mb2-r) 0 0;position:relative;overflow:hidden}
.mb-prod-art{aspect-ratio:1/1}
.mb-home-cat-art{aspect-ratio:3/2}
.mb-home-madecard-art{aspect-ratio:4/5}
.mb-prod-name,.mb-home-madecard-name{font-family:var(--mb2-serif);font-size:1.05rem}
.mb-prod-price,.mb-home-madecard-price{font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--mb2-navy)}
.mb-prod-claims,.mb-badge,.badge{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--mb2-olive-bg);color:var(--mb2-olive);border-radius:999px;padding:.16rem .55rem}
.mb-prod-producer{color:var(--mb2-mute);font-size:.86rem}

/* honest unavailability — Made / Served must never look purchasable when they are not */
.mb-prod-avail,.mb-prod-inflag,.mb-tbd,.mb-shot-pending{
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mb2-mute);
  border:1px dashed var(--mb2-line);border-radius:999px;padding:.2rem .6rem;display:inline-block}

/* ---------- MEDIA SLOTS (manifest-aligned, no redesign when assets land) ---------- */
.mb-film-frame,.mb-home-hero-art,.mb-slot{
  background:radial-gradient(130% 100% at 75% 8%,rgba(232,165,106,.22),transparent 62%),
             linear-gradient(150deg,var(--mb2-cream),var(--mb2-shell));
  border:1px solid var(--mb2-line);border-radius:var(--mb2-r-lg);position:relative;overflow:hidden}
.mb-film-frame{aspect-ratio:16/9}                    /* M1 mission film */
.mb-slot--loop{aspect-ratio:21/9}                    /* M2 silent hero loop */
.mb-slot--week{aspect-ratio:4/3}                     /* S1 Magic Week card */
.mb-slot--square{aspect-ratio:1/1}
.mb-film-frame::after,.mb-slot::after{
  content:attr(data-slot);position:absolute;left:0;right:0;bottom:.7rem;text-align:center;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(107,99,88,.62)}
.mb-film-play{width:68px;height:68px;border-radius:50%;background:rgba(255,253,249,.92);
  color:var(--mb2-rust);display:grid;place-items:center;box-shadow:var(--mb2-shadow-lg);
  border:0;cursor:pointer;transition:transform .18s}
.mb-film-play:hover{transform:scale(1.06)}
.mb-film-cap{font-size:.84rem;color:var(--mb2-mute);margin-top:.6rem}

/* ---------- THE MAGIC: something wonderful is inside ---------- */
/* A restrained warm glow reserved for the box motif. Never decorative confetti. */
.mb-glow{position:relative}
.mb-glow::before{content:"";position:absolute;left:50%;top:38%;width:min(60%,420px);
  aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(232,165,106,.42),rgba(232,165,106,.12) 45%,transparent 70%);
  filter:blur(6px)}
.mb-home-hero{position:relative;overflow:hidden}
.mb-home-hero::after{content:"";position:absolute;right:-8%;top:-14%;width:52vmax;aspect-ratio:1;
  background:radial-gradient(circle,rgba(232,165,106,.16),transparent 62%);pointer-events:none}
.mb-spark{display:inline-block;width:.62em;height:.62em;margin-left:.18em;
  background:var(--mb2-glow);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  vertical-align:.04em}

/* ---------- RONNY: reserved placements only (R1-R5) ---------- */
.mb-ronny{display:block;background:none;border:0}
.mb-ronny--r1{width:clamp(96px,14vw,168px);aspect-ratio:1}
.mb-ronny--r2{width:84px;aspect-ratio:1}
.mb-ronny--r3{width:clamp(120px,18vw,220px);aspect-ratio:3/2}
.mb-ronny--r4{width:clamp(96px,14vw,160px);aspect-ratio:1}
.mb-ronny--r5{width:56px;aspect-ratio:1;opacity:.85}
.mb-ronny:empty::after{content:"";display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(232,165,106,.26),transparent 66%)}

/* ---------- home: the eight boxes ---------- */
.mb-home-boxgrid{display:grid;gap:1.35rem;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.mb-home-stepn{width:40px;height:40px;border-radius:50%;background:var(--mb2-olive-bg);
  color:var(--mb2-olive);display:grid;place-items:center;font-family:var(--mb2-serif);
  font-size:1.05rem;font-weight:600;flex:0 0 auto}
.mb-bg-deep .mb-home-stepn{background:rgba(232,165,106,.18);color:var(--mb2-glow)}
.mb-flowlines{opacity:.5}
.mb-hstack--scroll{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:.5rem;scrollbar-width:thin}
.mb-hstack--scroll>*{scroll-snap-align:start;flex:0 0 clamp(230px,72vw,300px)}

/* ---------- forms, cart, checkout, account ---------- */
.mb-field,.field,input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],select,textarea{
  border:1px solid var(--mb2-line);border-radius:10px;background:var(--mb2-ivory);
  padding:.8rem .95rem;font:inherit;color:var(--mb2-ink);min-height:48px;width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible,
.mb-btn:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--mb2-copper);outline-offset:2px}
.sumrow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px dotted var(--mb2-line);font-variant-numeric:tabular-nums}
.sumrow:last-child{border-bottom:0;font-weight:600;color:var(--mb2-navy)}
.mb-qty{display:inline-flex;align-items:center;border:1px solid var(--mb2-line);
  border-radius:999px;overflow:hidden}
.mb-qty-b,.mb-iconbtn{min-width:44px;min-height:44px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--mb2-ink)}
.mb-qty-b:hover,.mb-iconbtn:hover{background:var(--mb2-cream)}
.mb-qty-n{min-width:2.5rem;text-align:center;font-variant-numeric:tabular-nums}
.msg,.mb-empty,.mb-prodgrid-empty{background:var(--mb2-cream);border:1px solid var(--mb2-line);
  border-radius:var(--mb2-r);padding:1.25rem;color:var(--mb2-mute)}
.choice{border:1px solid var(--mb2-line);border-radius:12px;padding:.9rem 1.1rem;
  background:var(--mb2-ivory);min-height:48px;display:flex;align-items:center;gap:.7rem}
.choice:hover{border-color:var(--mb2-copper)}
.mb-check{accent-color:var(--mb2-copper);width:20px;height:20px}
.mb-cattabs{display:flex;gap:.5rem;flex-wrap:wrap}
.mb-cattab{border:1px solid var(--mb2-line);border-radius:999px;padding:.5rem 1rem;
  min-height:44px;display:inline-flex;align-items:center;text-decoration:none;
  color:var(--mb2-ink);background:var(--mb2-ivory)}
.mb-cattab:hover{border-color:var(--mb2-copper);background:#FDF4EC;color:var(--mb2-rust)}
.mb-crumbs{font-size:.85rem;color:var(--mb2-mute)}
.mb-ticks{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.mb-ticks li{position:relative;padding-left:1.55rem;line-height:1.55}
.mb-ticks li::before{content:"";position:absolute;left:0;top:.56em;width:.52rem;height:.52rem;
  border-radius:50%;background:var(--mb2-olive)}
.mb-bg-deep .mb-ticks li::before{background:var(--mb2-glow)}

/* ---------- header / footer ---------- */
.mb-footer-col h3,.mb-footer-col h4{font-family:var(--mb2-serif);font-size:.95rem;
  color:var(--mb2-ink);margin-bottom:.7rem}
.mb-bg-deep .mb-footer-col h3,.mb-bg-deep .mb-footer-col h4{color:#FFFDF9}
.mb-footer-col a{color:inherit;text-decoration:none;opacity:.86}
.mb-footer-col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.mb-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem;
  margin-bottom:1.5rem}

/* ---------- responsive: 375 / 430 / tablet / desktop ---------- */
@media (max-width:430px){
  h1{font-size:clamp(1.75rem,8vw,2.1rem)}
  h2{font-size:1.32rem}
  .mb-section{padding-block:2.5rem}
  .mb-prodgrid,.mb-home-boxgrid{grid-template-columns:1fr}
  .mb-btn,.btn{width:100%}
  .mb-btn--sm,.btn--sm,.mb-cattab,.mb-qty-b,.mb-iconbtn{width:auto}
  .mb-film-frame{aspect-ratio:4/3}
  .mb-slot--loop{aspect-ratio:4/5}
  .mb-infocard{padding:1.15rem}
  .mb-utility-hide-sm{display:none}
}
@media (min-width:431px) and (max-width:767px){
  .mb-prodgrid,.mb-home-boxgrid{grid-template-columns:repeat(2,1fr)}
  .mb-slot--loop{aspect-ratio:3/2}
}
@media (min-width:768px) and (max-width:1023px){
  .mb-prodgrid{grid-template-columns:repeat(3,1fr)}
  .mb-home-boxgrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .mb-home-boxgrid{grid-template-columns:repeat(4,1fr)}
}
/* never let anything scroll the page sideways */
html,body{overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}
table{display:block;overflow-x:auto;max-width:100%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .mb-btn:hover,.btn:hover{transform:none}
}
@media print{.mb-btn,.btn,.mb-film-play{display:none}}

/* ============================================================
   MAGIC BOX — mission sections (appended to magicbox-mission.css)
   Styles only the new section markup. Additive, reversible.
   ============================================================ */

/* ---- credo line ---- */
.mb-home-credo{font-family:var(--mb2-serif);font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.01em;margin:.9rem 0 1.4rem;color:var(--mb2-ink)}
.mb-home-credo span{color:var(--mb2-olive)}
.mb-home-credo em{font-style:italic;color:var(--mb2-copper)}
.mb-bg-deep .mb-home-credo,.mb-mission-hero .mb-home-credo{color:var(--mb2-ink)}

/* ---- brand symbol slot: reserves space, draws nothing ---- */
.mb-brandmark{display:block;border-radius:var(--mb2-r);
  background:radial-gradient(circle at 50% 42%,rgba(232,165,106,.20),transparent 68%)}
.mb-brandmark--sm{width:48px;height:48px}
.mb-brandmark--md{width:88px;height:88px}
.mb-brandmark--lg{width:clamp(96px,13vw,148px);aspect-ratio:1;margin-bottom:1.25rem}

/* ---- what does your week need ---- */
.mb-weekneeds-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;margin-bottom:2rem}
.mb-weekneeds-grid{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.mb-weekneeds-grid a{display:flex;flex-direction:column;gap:.35rem;min-height:104px;
  padding:1.2rem 1.35rem;background:var(--mb2-ivory);border:1px solid var(--mb2-line);
  border-radius:var(--mb2-r);text-decoration:none;color:var(--mb2-ink);
  box-shadow:var(--mb2-shadow);transition:transform .16s,border-color .16s,background .16s}
.mb-weekneeds-grid a:hover,.mb-weekneeds-grid a:focus-visible{
  transform:translateY(-2px);border-color:var(--mb2-copper);background:#FDF4EC}
.mb-weekneed-title{font-family:var(--mb2-serif);font-size:1.16rem;color:var(--mb2-ink)}
.mb-weekneeds-grid a:hover .mb-weekneed-title{color:var(--mb2-rust)}
.mb-weekneed-sub{font-size:.9rem;line-height:1.45;color:var(--mb2-mute)}
.mb-weekneeds-cta{margin-top:2rem}

/* ---- your magic week ---- */
.mb-magicweek-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;margin-bottom:2.25rem}
.mb-magicweek-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
.mb-magicweek-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.mb-magicweek-list li{background:rgba(255,253,249,.06);
  border:1px solid rgba(255,253,249,.14);border-radius:12px;padding:1.05rem 1.15rem}
.mb-magicweek-list h3{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mb2-glow);margin:0 0 .5rem}
.mb-magicweek-list p{font-size:.93rem;line-height:1.5;margin:0;color:rgba(246,241,232,.86)}
.mb-magicweek-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.25rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,253,249,.16)}
.mb-magicweek-foot span{font-family:var(--mb2-serif);font-size:1.08rem;color:#FFFDF9}
.mb-magicweek-note{font-size:.85rem;color:rgba(246,241,232,.62);margin-top:1rem}

/* ---- mission page ---- */
.mb-mission-hero{text-align:left}
.mb-mission-lede{max-width:60ch}
.mb-mission-beats{list-style:none;padding:0;margin:0;display:grid;gap:2.25rem;max-width:80ch}
.mb-mission-beats li{display:flex;gap:1.25rem;align-items:flex-start}
.mb-mission-beats h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:.15rem 0 .5rem}
.mb-missionband h2{margin-top:.35rem}

/* ---- good food / real people ---- */
.mb-realpeople-grid{display:grid;gap:1rem;margin:1.75rem 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---- responsive ---- */
@media (max-width:430px){
  .mb-weekneeds-head,.mb-magicweek-head{flex-direction:column;gap:1.25rem}
  .mb-weekneeds-grid,.mb-magicweek-list,.mb-realpeople-grid{grid-template-columns:1fr}
  .mb-magicweek-foot{flex-direction:column;align-items:flex-start}
  .mb-magicweek-foot .mb-btn{width:100%}
  .mb-mission-beats li{flex-direction:column;gap:.75rem}
  .mb-weekneeds-cta .mb-btn{width:100%}
}
@media (min-width:431px) and (max-width:767px){
  .mb-weekneeds-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .mb-magicweek-grid{grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:2.75rem}
}

/* ============================================================
   MAKE YOUR MAGIC BOX (Step 4, 2026-09-21) - new builder parts only.
   Existing builder layout stays in magicbox-design-system.css.
   ============================================================ */

/* visual box */
.mb-vbox{margin:0;display:flex;align-items:center;gap:14px;position:relative;min-width:0}
.mb-vbox svg{width:clamp(84px,9vw,118px);height:auto;flex:0 0 auto;overflow:visible;display:block}
.mb-vbox-line{fill:var(--mb2-ivory);fill-opacity:.35;stroke:var(--mb2-ink);stroke-width:2.4;stroke-linejoin:round}
.mb-vbox-flap{fill:var(--mb2-sand);stroke:var(--mb2-ink);stroke-width:2;stroke-linejoin:round}
.mb-vbox-fill{fill:var(--mb2-olive-lt)}
.mb-vbox.is-good .mb-vbox-fill{fill:var(--mb2-olive)}
.mb-vbox.is-tight .mb-vbox-fill{fill:var(--mb2-copper)}
.mb-vbox.is-over .mb-vbox-fill{fill:var(--mb2-rust)}
.mb-vbox-spark{fill:var(--mb2-glow);transform-box:fill-box;transform-origin:center;animation:mbspark 3.6s ease-in-out infinite}
@keyframes mbspark{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
.mb-vbox figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.mb-vbox figcaption strong{font-family:var(--mb2-serif);font-size:1.1rem;line-height:1.2;color:var(--mb2-ink)}
.mb-vbox-state{font-size:.88rem;color:var(--mb2-ink)}
.mb-vbox-left{font-size:.8rem;color:var(--mb2-mute)}
.mb-vbox.is-tight .mb-vbox-state,.mb-vbox.is-over .mb-vbox-state{color:var(--mb2-rust);font-weight:600}
.mb-ronny--rb{position:absolute;left:clamp(58px,6.5vw,86px);bottom:-4px;width:44px;height:44px;pointer-events:none}
.mb-ronny--rb:empty{display:none}

/* size chooser art (replaces the plain placeholder box) */
.mb-sizecard-art:has(svg)::after{display:none}
.mb-sizecard-art:has(svg){display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 20%,rgba(232,165,106,.18),transparent 60%),var(--mb2-cream)}
.mb-sizecard-art svg{height:88%;width:auto;display:block}

/* live-updating product card */
.mb-prod.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s}

/* review panel (cart) */
.mb-review{background:var(--mb2-cream);border:1px solid var(--mb2-line);border-radius:var(--mb2-r-lg);
  padding:clamp(18px,3vw,28px);margin:0 0 28px;display:grid;gap:22px}
.mb-review-top{display:grid;gap:22px;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center}
.mb-review h2{margin:4px 0 12px}
.mb-review-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px;max-width:440px}
.mb-review-list li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted var(--mb2-line);
  padding-bottom:6px;font-variant-numeric:tabular-nums}
.mb-review-list span{color:var(--mb2-mute)}
.mb-review-edit{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.mb-review-prefs,.mb-review form{border-top:1px solid var(--mb2-line);padding-top:18px;display:grid;gap:14px;margin:0}
.mb-review h3{margin:0;font-size:1.1rem}
.mb-review-modes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mb-review-modes .choice{display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:var(--mb2-ivory);
  border:1px solid var(--mb2-line);border-radius:var(--mb2-r);padding:12px 14px;min-height:44px}
.mb-review-modes .choice:has(input:checked){border-color:var(--mb2-copper);box-shadow:inset 0 0 0 1px var(--mb2-copper)}
.mb-review-modes .choice span{display:flex;flex-direction:column;gap:3px}
.mb-review-modes .choice em{font-style:normal;font-size:.84rem;color:var(--mb2-mute);line-height:1.4}
.mb-review-modes input{accent-color:var(--mb2-copper);margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.mb-review-never summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--mb2-rust)}
.mb-review-never ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.mb-review-never label{display:flex;gap:9px;align-items:center;min-height:40px;cursor:pointer}
.mb-review-never input{accent-color:var(--mb2-rust);width:18px;height:18px}
.mb-reorder{margin:12px 0}

/* live update message */
.mb-live-msg{position:fixed;left:50%;bottom:20px;transform:translate(-50%,180%);z-index:60;
  width:max-content;max-width:min(92vw,520px);background:var(--mb2-deep);color:#FFFDF9;border-radius:14px;
  padding:12px 18px;font-size:.92rem;line-height:1.4;box-shadow:var(--mb2-shadow-lg);transition:transform .25s ease}
.mb-live-msg.is-on{transform:translate(-50%,0)}
.mb-live-msg.is-err{background:var(--mb2-rust)}

@media (max-width:767px){
  .mb-review-top{grid-template-columns:1fr}
  .mb-live-msg{bottom:calc(92px + env(safe-area-inset-bottom))}
  .mb-mymb-state-in .mb-vbox svg{width:72px}
  .mb-mymb-state-in .mb-vbox{flex:1 1 100%}
  .mb-mymb-state-in .mb-ronny--rb{left:48px}
}
@media (prefers-reduced-motion:reduce){.mb-vbox-spark{animation:none}.mb-live-msg{transition:none}}