/* School Meals — prototype-faithful page styles + ordering dialog.
 * Keyframes and class names mirror design_reference/student.html; the
 * prototype's {{ narrow }} ternaries become the 760px media block below,
 * and its style-hover attributes become :hover rules.
 */

/* ---------- prototype keyframes ---------- */
@keyframes shFade { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
@keyframes shBlob { 0%{ border-radius:46% 54% 52% 48%/52% 46% 54% 48% } 50%{ border-radius:58% 42% 44% 56%/47% 58% 42% 53% } 100%{ border-radius:46% 54% 52% 48%/52% 46% 54% 48% } }
@keyframes mealSwipe { 0%,16%{ opacity:1 } 22%,94%{ opacity:0 } 100%{ opacity:1 } }
@keyframes omFloat { 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-16px) rotate(8deg) } }
@keyframes omPop { 0%{ transform:scale(.8); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:scale(1); opacity:1 } }
@keyframes omWiggle { 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
@keyframes heroSlideX { 0%{ opacity:0; filter:blur(7px) } 3%{ opacity:1; filter:blur(0) } 10%{ opacity:1; filter:blur(0) } 13%{ opacity:0; filter:blur(7px) } 100%{ opacity:0; filter:blur(7px) } }
@keyframes shFloatA { 0%{ transform:translate(0,0) } 50%{ transform:translate(8px,-16px) } 100%{ transform:translate(0,0) } }
@keyframes shFloatB { 0%{ transform:translate(0,0) } 50%{ transform:translate(-12px,10px) } 100%{ transform:translate(0,0) } }
@keyframes shFloatC { 0%{ transform:translate(0,0) } 50%{ transform:translate(10px,12px) } 100%{ transform:translate(0,0) } }
@keyframes shBob { 0%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } 100%{ transform:translateY(0) } }
@keyframes shTravel { 0%{ left:-2%; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ left:100%; opacity:0 } }
@keyframes shPulse { 0%,100%{ box-shadow:0 12px 26px rgba(92,122,80,0.26) } 50%{ box-shadow:0 16px 36px rgba(92,122,80,0.44) } }
@keyframes shWave { 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(20deg) } }
@keyframes shHeart { 0%,100%{ transform:scale(1) } 14%{ transform:scale(1.2) } 28%{ transform:scale(1) } 42%{ transform:scale(1.12) } 56%{ transform:scale(1) } }

/* ---------- header mascot's graduation cap (School Meals only) ----------
 * The cap falls onto the leaf as the mascot lands. brandPop (style.css) runs
 * .72s from load, so the drop starts at .46s — while the mascot is still
 * settling — and finishes just after it, reading as one move rather than two.
 * Absolutely positioned so the header lockup's margin maths is untouched, and
 * sized in --icon so it tracks the logo all the way down to 320px.
 * The resting state is the base rule and the keyframes only animate *into* it,
 * so the global prefers-reduced-motion `animation:none` leaves the cap on. */
.site-head .brand{ position:relative; }
.brand-cap{
  position:absolute; z-index:2; pointer-events:none;
  /* Fitted to the drawn leaf, not the icon box: the mascot occupies 20.7-80%
     of the file's width and 14.9-80.7% of its height, and the leaf's tip sits
     at ~57% across. The board's top edge has to stay below y=0 or the sticky
     header's own top edge crops it. */
  display:block; aspect-ratio:120 / 96;
  left:calc(var(--icon) * 0.125);
  top:calc(var(--icon) * -0.020);
  width:calc(var(--icon) * 0.46);
  transform-origin:50% 92%;
  animation:capDrop .74s .46s cubic-bezier(.28,1.2,.5,1) backwards;
}
.brand-cap-board{ fill:#1B5099; }
.brand-cap-crown{ fill:#123C7C; }
.brand-cap-tassel{ fill:#1B5099; stroke:#1B5099; transform-box:view-box; transform-origin:103px 41px; }
.brand-cap-tassel{ animation:capTassel 1.5s .95s cubic-bezier(.36,.07,.3,1) backwards; }
.brand:hover .brand-cap{ transform:translateY(-3px) rotate(-4deg) scale(1.04); transition:transform .35s cubic-bezier(.34,1.4,.5,1); }

/* Falls in tilted, overshoots a touch as it seats, then settles level. */
@keyframes capDrop{
  0%  { opacity:0; transform:translateY(-190%) rotate(-30deg) scale(1.05); }
  30% { opacity:1; }
  62% { transform:translateY(6%) rotate(4deg) scale(1); }
  80% { transform:translateY(-4%) rotate(-2deg); }
  100%{ opacity:1; transform:none; }
}
/* The tassel keeps swinging for a beat after the cap has stopped. */
@keyframes capTassel{
  0%,18%{ transform:rotate(-24deg); }
  45%   { transform:rotate(13deg); }
  68%   { transform:rotate(-7deg); }
  85%   { transform:rotate(3deg); }
  100%  { transform:none; }
}

/* ---------- page scaffolding ---------- */
.shpage ::selection{ background:#E3EDD3; }
.sh-scroll::-webkit-scrollbar{ height:0; }
.sh-scroll{ scrollbar-width:none; }

.sh-toast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:90;
  background:#3F5236; color:#FBF8EF; padding:12px 22px; border-radius:999px;
  font:600 13.5px var(--font-b); box-shadow:0 10px 30px rgba(63,82,54,0.3);
  animation:shFade .3s ease;
}

/* hero — {{ heroPad }} / {{ heroGrid }} / {{ heroBlobWrap }} */
.sh-heropad{ padding:52px 22px 20px; }
.sh-herogrid{ display:flex; align-items:center; gap:48px; }
.sh-heroblob{ position:relative; flex:none; width:380px; height:380px; }
.sh-cta:hover{ transform:translateY(-2px); }

/* steps — {{ stepsRow }} */
.sh-stepsrow{ display:flex; align-items:flex-start; gap:20px; position:relative; }

/* trust — {{ trustRow }} */
.sh-trustrow{ display:flex; align-items:flex-start; gap:18px; }

/* The set-up band's three chips (school / time / child) and their inline
 * editors were removed — that section now shows the gate animation alone.
 * They were a localStorage-only convenience; checkout collects school, child
 * name and class as its own server-side fields, so no data path was lost.
 * The .sh-chip*, .sh-sugg and .sh-timepill rules went with them. */

/* order-card decoration — confined to the card's top-right safe zone (see the
 * note in page-school-meals.php). Below 760px the copy fills the full width
 * and there is no safe zone left, so the glyphs go; the blurred colour blobs
 * stay and carry the playfulness. */
.om-deco{ position:absolute; }
@media (max-width:760px){ .om-deco{ display:none; } }

/* date pills — datePill() */
.sh-datepill{
  flex:0 0 auto; border-radius:999px; padding:11px 17px;
  font:700 13.5px var(--font-b); cursor:pointer; white-space:nowrap;
  transition:all .15s; border:1.5px solid #dfd9c8; background:#fff; color:#3F5236;
}
.sh-datepill.is-on{
  background:#5C7A50; color:#FBF8EF; border-color:#5C7A50;
  box-shadow:0 8px 18px rgba(92,122,80,0.26);
}
.sh-datepill.is-locked{
  background:#F3F1E8; color:#c3c0ad; border-color:#ece6d8; cursor:not-allowed;
}

/* meal circles — floating "sticker" thumbs: a white halo + soft drop shadow so
 * they lift off the gradient, a hover that raises the card and zooms the photo
 * inside, and a selected state with an accent ring (via box-shadow, concentric
 * with the halo), a bob, and a tick badge. The row scrolls on overflow-x — which
 * clips the cross axis too — so it carries generous vertical padding to give the
 * bob + ring + badge room without clipping. */
.sh-mealthumb{
  box-shadow:0 0 0 3px #fff, 0 10px 22px -12px rgba(63,82,54,.4);
  transition:transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease;
}
.sh-mealimg{ transition:transform .4s cubic-bezier(.22,.61,.36,1); } /* photo, zoomable in its clip */
.sh-mealthumb:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 0 0 3px #fff, 0 18px 34px -14px rgba(63,82,54,.5);
}
.sh-mealthumb:hover .sh-mealimg{ transform:scale(1.09); }

.sh-mealthumb.is-on{
  transform:scale(1.04); animation:shBob 2.6s ease-in-out infinite;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--acc), 0 14px 30px -12px rgba(63,82,54,.5);
}
/* tick badge that springs in on selection */
.sh-mealthumb::after{
  content:"✓"; position:absolute; top:-3px; right:-3px; z-index:5;
  width:24px; height:24px; border-radius:50%;
  background:var(--acc); color:#fff; font:900 12px/24px var(--font-b); text-align:center;
  box-shadow:0 4px 10px -3px rgba(63,82,54,.5);
  transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sh-mealthumb.is-on::after{ transform:scale(1); }

/* staggered fade-up as the row reveals */
.shmealcard{ animation:shMealIn .45s both; animation-delay:calc(var(--i,0) * .05s); }
@keyframes shMealIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* Price as a floating tag pinned to the bowl — always visible (touch too), with
 * the dish's accent on the border so it stays readable (dark text on white). */
.sh-mealprice{
  position:absolute; bottom:-3px; right:-6px; z-index:4;
  background:#fff; color:#3F5236; border:2px solid var(--acc);
  font:800 12px var(--font-b); padding:2px 9px; border-radius:999px;
  box-shadow:0 5px 12px -5px rgba(63,82,54,.45);
}
.sh-mealthumb:hover .sh-mealprice{ box-shadow:0 8px 16px -6px rgba(63,82,54,.5); }

/* Two-line names ("Veg Energy Nuggets") share a baseline with one-liners by
 * reserving two lines on every name. */
.sh-mealname{
  font-weight:700; font-size:13.5px; color:#3F5236;
  margin-top:15px; line-height:1.15; min-height:30px;
}

/* Eleven meals overflow the row, but the hidden scrollbar left no hint and the
 * last card just clipped. Mask the trailing edge instead of a colour fade —
 * the card sits on a three-stop gradient, so no solid fade would match. */
.shmealrow{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
}
.shmealrow.is-end{ -webkit-mask-image:none; mask-image:none; }

/* fade-in helper for the gated meal row */
.sh-fadein{ animation:shFade .35s ease; }

.sh-wave{ max-width:1000px; margin:0 auto; padding:0 22px; }

/* =====================================================================
 * One SCREEN per viewport (desktop only, mirroring the home page).
 *
 * A screen is what one viewport holds, and it is not always one section:
 * hero + steps share a screen, so do pickup + trust, and the closing band
 * pairs with the footer. Giving every section its own screen left the short
 * ones looking half-empty. The two dense sections — Set up once and Order a
 * meal — still get a screen each.
 *
 * Measured against a 1300x641 window, the shortest this gets reviewed at,
 * which leaves 566px of room. Everything that had to shrink is expressed in
 * vh, so it scales with the window instead of being pinned to one size.
 *
 * 881px matches the home page's MIN_WIDTH; below it the page scrolls
 * normally and every section keeps its natural height.
 * ===================================================================== */
@media (min-width:881px){
  .sh-screen{
    min-height:calc(100vh - 75px);
    display:flex; flex-direction:column; justify-content:center;
  }
  /* Sections share the screen in proportion to what they need, and each grows
     to meet its neighbour so a colour band reaches the screen edge rather than
     floating with a sliver of cream above it.
     width:100% for the same reason as below — most of these sections carry
     `margin:0 auto`, and as flex items that auto margin cancels the stretch
     they used to get as blocks. Without it the trust row lost ~20px and
     "Same-morning cooking" started wrapping. */
  .sh-screen > section{ flex:1 1 auto; width:100%; }
  .shpage section{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    margin-top:0 !important; margin-bottom:0 !important;
    position:relative;
  }
  /* align-items:center rather than the default stretch, because these wrappers
     carry `margin:0 auto` — and an auto cross-axis margin cancels stretch, which
     collapsed each one to fit-content (the setup band shrank from 900 to 737,
     sized by its own heading). Centring plus an explicit width restores it. */
  .shpage section > *{ width:100%; }
  /* Breathing room under the sticky header — without it the hero badge sits
     flush against the rule and the whole screen reads as jammed upward. */
  .sh-heropad{ padding-top:clamp(14px,3vh,52px) !important; padding-bottom:0 !important; }
  .sh-heroblob{ width:clamp(250px,50vh,380px); height:clamp(250px,50vh,380px); }
  .sh-wave{ margin-top:clamp(6px,1.4vh,26px); }

  /* --- hero + steps share a screen ---
     The steps are the junior half of this pairing: they explain the hero, they
     don't compete with it. At prototype size (76px numerals, 23px titles) the
     rail landed level with the "Order a meal" button and read as part of the
     hero rather than a step below it. So the whole flow scales down, and a real
     gap separates it from the CTA. The headline and body copy are untouched. */
  .sh-sec-steps{ padding-top:clamp(20px,4.6vh,30px) !important; padding-bottom:0 !important; }
  .sh-sec-steps .sh-stepnum{
    width:clamp(40px,6.8vh,76px) !important; height:clamp(40px,6.8vh,76px) !important;
    margin-bottom:clamp(7px,1.5vh,16px) !important;
    font-size:clamp(17px,3vh,30px) !important;
    box-shadow:0 5px 14px rgba(63,82,54,0.07) !important;
  }
  /* The rail threads the numerals, so it tracks half their height. */
  .sh-stepline{ top:calc(clamp(40px,6.8vh,76px) / 2) !important; }
  .sh-steptitle{ font-size:clamp(16px,2.9vh,23px) !important; margin-bottom:clamp(3px,0.7vh,6px) !important; }
  /* Widened as it shrank: at 210px the middle step ran to three lines while its
     neighbours ran to two, which is what made the row look ragged. */
  .sh-steptext{ font-size:clamp(12px,2vh,14px) !important; max-width:250px !important; line-height:1.5 !important; }

  /* --- closing band pairs with the footer, whose height is fixed content;
     the band's own padding is what has to give. --- */
  .sh-sec-close{ padding-top:clamp(20px,4vh,58px) !important; padding-bottom:clamp(20px,4vh,58px) !important; }

  /* --- pickup + trust share a screen: both are generously padded bands, and
     that padding is the whole overage. --- */
  .sh-sec-pickup{ padding-top:clamp(24px,5vh,54px) !important; padding-bottom:clamp(24px,5vh,54px) !important; }
  .sh-sec-trust{ padding-top:clamp(20px,4.4vh,56px) !important; padding-bottom:clamp(16px,3.4vh,40px) !important; }
  .sh-sec-trust > h2{ margin-bottom:clamp(16px,3.6vh,36px) !important; }

  /* Lifted out of the flow: this rule leads the order section, and at 48px of
     flow height it was the difference between that section fitting and not. */
  .sh-wave-lead{ position:absolute; top:14px; left:0; right:0; margin:0 auto; }

  /* --- Set up once: the gate animation alone now. With the chips gone the
     video takes the freed height — sized to whatever is left after the heading
     and padding (aspect 1787/880, so a height budget of H buys 2.03H of width),
     capped at the wrapper's 900px. !important because the prototype's
     max-width is inline on the element. --- */
  .sh-sec-setup{ padding-top:22px !important; padding-bottom:22px !important; }
  .sh-sec-setup #shScene{
    max-width:min(900px, calc((100vh - 179px) * 2.03)) !important;
    margin:10px auto 0 !important;
  }

  /* --- Order a meal: 715 → fits. Spread the reduction across the card so
     nothing looks starved; the meal circles carry the most. --- */
  .shorder{ padding-top:6px !important; padding-bottom:6px !important; }
  .shordercard{ padding:clamp(18px,3.4vh,44px) 34px clamp(16px,3vh,40px) !important; }
  .shorder h2{ font-size:clamp(24px,4.8vh,48px) !important; margin:6px 0 4px !important; }
  .sh-orderlede{ margin-bottom:clamp(12px,2.4vh,32px) !important; }
  .sh-cutoffnote{ margin:2px 0 clamp(10px,2.2vh,30px) !important; }
  .sh-datelabel, .sh-meallabel{ margin-bottom:clamp(8px,1.8vh,14px) !important; }
  .sh-datepill{ padding-top:clamp(8px,1.6vh,11px); padding-bottom:clamp(8px,1.6vh,11px); }
  .sh-mealthumb{ width:clamp(60px,11vh,90px) !important; height:clamp(60px,11vh,90px) !important; }
  /* Drop the row into the empty space below so the selected circle's bob + ring
     clears the "Choose a meal" label above and the name below without clipping. */
  .shmealrow{ margin-top:10px !important; padding-top:22px !important; padding-bottom:18px !important; }
  .sh-mealname{ margin-top:16px; }
}

/* reduced motion: prototype disabled all animation */
@media (prefers-reduced-motion: reduce){
  .shpage *{ animation:none !important; }
}

/* ---------- {{ narrow }} → 760px media block (prototype breakpoint) ---------- */
@media (max-width:760px){
  .sh-heropad{ padding:26px 22px 8px; }
  .sh-herogrid{ flex-direction:column-reverse; gap:26px; align-items:stretch; }
  .sh-heroblob{ width:248px; height:248px; flex:none; align-self:center; margin:0 auto; }
  .sh-stepsrow{ flex-direction:column; gap:30px; }
  .sh-stepline{ display:none; }
  .sh-trustrow{ display:grid; grid-template-columns:1fr 1fr; gap:30px 14px; }
  .shorder{ padding:12px 10px 34px !important; }
  .shordercard{ padding:26px 15px 28px !important; border-radius:24px !important; }
  .shmealrow{ gap:15px !important; padding-left:2px !important; padding-right:2px !important; }
  .shmealcard{ width:112px !important; }
}

/* =====================================================================
 * Order drawer — the "Order a meal" card, relocated into a right-side panel
 * opened from the hero CTA. Same gradient, badge, floating produce, date pills
 * and meal circles as the old inline section; a native <dialog> supplies the
 * focus trap + Esc, and the CSS below supplies the slide-in and the backdrop.
 *
 * The slide uses transition + @starting-style + `allow-discrete` so the panel
 * animates OUT as well as in with no JS; browsers without that support just
 * open/close it instantly — fully functional either way.
 * ===================================================================== */
body.drawer-open{ overflow:hidden; } /* freeze the page behind the panel */

.sh-drawer{
  position:fixed; top:0; bottom:0; right:0; left:auto; margin:0;
  /* Roughly half the screen on desktop, floored so it never gets cramped. */
  height:auto; max-height:100dvh; width:clamp(420px,50vw,900px);
  /* Override the UA <dialog> `max-width:calc(100% - 38px)`, which otherwise
     leaves a sliver of backdrop down the panel's left edge. */
  max-width:100vw;
  border:none; padding:0; overflow:hidden;
  color:#3F5236; font-family:var(--font-b);
  background:linear-gradient(155deg,#EAF3DA 0%,#FBEFD0 46%,#F6E1EC 100%);
  border-radius:28px 0 0 28px;
  box-shadow:-34px 0 90px -30px rgba(40,55,35,.5);
  transform:translateX(100%);
  transition:transform .36s cubic-bezier(.22,.61,.36,1),
             overlay .36s allow-discrete, display .36s allow-discrete;
}
.sh-drawer[open]{ transform:translateX(0); }
@starting-style{ .sh-drawer[open]{ transform:translateX(100%); } }

.sh-drawer::backdrop{
  background:rgba(44,58,46,.45); backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .36s ease, overlay .36s allow-discrete, display .36s allow-discrete;
}
.sh-drawer[open]::backdrop{ opacity:1; }
@starting-style{ .sh-drawer[open]::backdrop{ opacity:0; } }

/* Fixed frame: a column of [stepper][wizard]; the wizard clips the sliding
   track and each screen scrolls itself. */
.sh-drawer-in{
  position:relative; display:flex; flex-direction:column;
  height:100%; max-height:100dvh; overflow:hidden;
}

.sh-drawer-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%; cursor:pointer; line-height:1;
  background:#fff; border:1px solid rgba(110,145,82,.22); color:#626757; font-size:15px;
  box-shadow:0 6px 16px -8px rgba(63,82,54,.4);
  transition:background .15s ease, color .15s ease, transform .2s ease;
}
.sh-drawer-close:hover{ background:#EEF4E6; color:#3F5236; transform:rotate(90deg); }

/* --- progress stepper: Date · Meal · Customise, themed sage/cream. Connectors
   stretch between the dots; a completed leg fills sage. Right padding clears the
   close button (the last dot otherwise lands under it). --- */
.sh-steps{
  flex:0 0 auto; display:flex; align-items:center; list-style:none;
  margin:0; padding:20px 60px 15px 26px;
  border-bottom:1px solid rgba(110,145,82,.14);
}
.sh-step{ display:flex; align-items:center; gap:9px; }
.sh-step:not(:last-child){ flex:1; }
.sh-step-dot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:800 12px var(--font-b); background:var(--sage-c1); color:#8A9079;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.sh-step-name{
  font:800 11.5px var(--font-b); letter-spacing:.07em; text-transform:uppercase;
  color:#8A9079; white-space:nowrap; transition:color .25s ease;
}
.sh-step:not(:last-child)::after{
  content:""; flex:1; height:2px; min-width:12px; margin-left:9px;
  background:var(--line2); border-radius:2px; transition:background .3s ease;
}
.sh-step.is-done .sh-step-dot{ background:var(--sage); color:var(--cream); }
.sh-step.is-done .sh-step-name{ color:#626757; }
.sh-step.is-done::after{ background:var(--sage); }
.sh-step.is-active .sh-step-dot{ background:var(--sage); color:var(--cream); box-shadow:0 0 0 4px rgba(92,122,80,.18); }
.sh-step.is-active .sh-step-name{ color:#3F5236; }

/* --- push/pop wizard: two screens side by side; the track slides one panel
   width to push screen 2 in, and back to pop it. Each screen owns its own
   vertical scroll, so tall customise content never crops the meal circles. --- */
.sh-wiz{
  display:flex; flex:1 1 auto; min-height:0; width:100%;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.sh-wiz[data-step="2"]{ transform:translateX(-100%); }
.sh-wiz-screen{
  flex:0 0 100%; height:100%; overflow-y:auto; position:relative;
  padding:34px 30px 40px; scrollbar-width:none;
}
.sh-wiz-screen::-webkit-scrollbar{ width:0; }
/* Whichever screen is off-stage takes no tab stops or pointer events. */
.sh-wiz[data-step="1"] #wizCustomise,
.sh-wiz[data-step="2"] #wizSelect{ visibility:hidden; }

/* The heading carries an inline clamp sized for a whole screen; !important
   (as the old section's media query also used) calms it for a 560px panel. */
.sh-drawer-body h2{ font-size:clamp(30px,8vw,42px) !important; margin:12px 0 6px !important; }

/* Full-bleed on phones, where a 560px panel would leave no backdrop to tap. */
@media (max-width:600px){
  .sh-drawer{ width:100vw; border-radius:0; }
  .sh-wiz-screen{ padding:30px 18px 34px; }
  .sh-cust-scroll{ padding:26px 18px 22px; }
  .sh-cust-bar{ padding-left:18px; padding-right:18px; }
}

@media (prefers-reduced-motion: reduce){
  .sh-drawer, .sh-drawer::backdrop, .sh-wiz{ transition:none; }
  .sh-drawer *{ animation:none !important; }
}

/* =====================================================================
 * Meal detail (selection screen) — revealed under the bowls when a dish is
 * tapped: its tagline, ingredients and "why it's good". A white card on the
 * gradient, reusing the .sh-cust-ings / -why / -benefits type styles. The Next
 * button pushes the customise screen (selection never auto-advances).
 * ===================================================================== */
.sh-mealdetail{
  /* Theme's soft sage-cream surface rather than stark white, so the card belongs
     on the gradient; the border + shadow still define its edges. */
  background:var(--band); border-radius:20px; padding:20px 22px;
  border:1.5px solid rgba(110,145,82,.2);
  box-shadow:0 18px 44px -28px rgba(92,122,80,.55);
  margin-top:10px; animation:shFade .3s ease;
}
.sh-mealdetail-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.sh-mealdetail-name{ font-family:var(--font-d); font-size:20px; font-weight:600; color:#3F5236; }
.sh-mealdetail-tag{ font:italic 400 14px var(--font-d); color:#626757; }
.sh-mealdetail-next{ width:100%; margin-top:6px; }

/* =====================================================================
 * Customise screen (wizard step 2) — ported from the prototype's inline
 * customise sheet (student.html), now the pushed second panel. The prototype's
 * light muted greys (#9AA088 / #8A9079) are lifted to #626757 for AA, per the
 * design-polish pass. Server data + leafyAddToCart drive it, same as before.
 * ===================================================================== */

/* The customise screen is a column — a scrolling body plus a sticky action bar,
   so the CTA is always in reach (a modern app pattern). Overrides the shared
   .sh-wiz-screen scroll + padding. */
#wizCustomise{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.sh-cust-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:30px 30px 26px; scrollbar-width:none;
}
.sh-cust-scroll::-webkit-scrollbar{ width:0; }

/* Back — a ghost button; the arrow rides in a sage coin that fills on hover. */
.sh-cust-back{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:none; color:#5C7A50; padding:0; margin-bottom:20px;
  font:800 13px var(--font-b); letter-spacing:.01em; transition:color .15s ease;
}
.sh-cust-back .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; font-size:16px; line-height:1;
  background:var(--sage-c1); color:#3F5236;
  box-shadow:0 5px 12px -7px rgba(63,82,54,.4);
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.sh-cust-back:hover{ color:#3F5236; }
.sh-cust-back:hover .ic{ background:var(--sage); color:var(--cream); transform:translateX(-3px); }

/* hero — the chosen dish's photo, date and name */
.sh-cust-hero{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.sh-cust-hero-img{
  flex:0 0 auto; width:68px; height:68px; border-radius:20px; overflow:hidden;
  background:var(--sage-c1); box-shadow:0 10px 24px -10px rgba(63,82,54,.45);
}
.sh-cust-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-cust-hero-meta{ min-width:0; }
.sh-cust-date{
  display:inline-block; margin-bottom:7px; padding:3px 11px; border-radius:999px;
  background:#F7E3D4; color:#B0623E; font:800 11px var(--font-b); letter-spacing:.03em;
}
.sh-cust-title{ font-family:var(--font-d); font-size:24px; font-weight:600; color:#3F5236; margin:0; line-height:1.05; }

/* each option group */
.sh-cust-group{ margin-bottom:24px; }
.sh-cust-group:last-child{ margin-bottom:4px; }

.sh-cust-label{
  display:block; font:700 11px var(--font-b); letter-spacing:.08em;
  text-transform:uppercase; color:#626757; margin-bottom:10px;
}
.sh-cust-label small{ font-weight:600; text-transform:none; letter-spacing:0; color:#8A9079; }

/* ingredients — leaf-shaped dot + label */
.sh-cust-ings{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:22px; }
.sh-cust-ings .ing{ display:inline-flex; align-items:center; gap:8px; font:600 13.5px var(--font-b); color:#4A5A3E; }
.sh-cust-ings .ing i{ width:9px; height:9px; border-radius:50% 50% 50% 0; transform:rotate(45deg); flex:none; }

/* "Why this is good for them" */
.sh-cust-why{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.sh-cust-why span:first-child{ font-size:16px; }
.sh-cust-why-t{ font-family:var(--font-d); font-size:16px; font-weight:600; font-style:italic; color:#3F5236; line-height:1; }
.sh-cust-benefits{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.sh-cust-benefits .b{ display:flex; align-items:flex-start; gap:12px; }
.sh-cust-benefits .b .ic{ flex:0 0 auto; font-size:18px; line-height:1.3; }
.sh-cust-benefits .b .bt{ font:800 13.5px var(--font-b); color:#3F5236; margin-bottom:2px; }
.sh-cust-benefits .b .bx{ font-size:12.5px; line-height:1.5; color:#626757; }

/* group header + "Required" badge */
.sh-cust-labelrow{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.sh-cust-labelrow .sh-cust-label{ margin-bottom:0; }
.sh-cust-req{ font:800 10px var(--font-b); letter-spacing:.05em; text-transform:uppercase; color:#C77E5A; background:#F7E3D4; border-radius:999px; padding:3px 9px; }

/* base — larger selectable tiles: emoji in a white coin, corner tick on select */
.sh-cust-tiles{ display:flex; flex-wrap:wrap; gap:11px; }
.sh-cust-tile{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:11px 20px 11px 11px; border-radius:16px; cursor:pointer;
  background:#FBF7EE; border:1.6px solid #E7E0CE; color:#3F5236; font:700 14px var(--font-b);
  box-shadow:0 5px 12px -8px rgba(63,82,54,.35); transition:all .18s ease;
}
.sh-cust-tile .em{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:12px; background:#fff; font-size:20px; line-height:1;
  box-shadow:0 3px 9px -4px rgba(63,82,54,.3);
}
.sh-cust-tile:hover{ border-color:var(--sage2); transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(63,82,54,.4); }
.sh-cust-tile[aria-pressed="true"]{ border-color:var(--sage); background:var(--sage-c1); box-shadow:0 10px 22px -10px rgba(92,122,80,.5); }
.sh-cust-tile[aria-pressed="true"]::after{
  content:"✓"; position:absolute; top:-7px; right:-7px;
  width:22px; height:22px; border-radius:50%; background:var(--sage); color:var(--cream);
  font:900 11px/22px var(--font-b); text-align:center; box-shadow:0 4px 10px -3px rgba(63,82,54,.5);
}

/* chips (options / dips) — soft cream tokens with a leading badge that flips
   from ＋ (add) to ✓ (added). Rounded-rect, not plain white stadiums. */
.sh-cust-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.sh-cust-pill{
  display:inline-flex; align-items:center; gap:8px;
  font:700 13px var(--font-b); color:#3F5236;
  background:#FBF7EE; border:1.5px solid #E7E0CE; border-radius:13px;
  padding:8px 15px 8px 9px; cursor:pointer; transition:all .16s ease;
  box-shadow:0 3px 8px -6px rgba(63,82,54,.35);
}
.sh-cust-pill::before{
  content:"+"; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; background:#ECE4D0; color:#8A9079;
  font:800 13px/1 var(--font-b); transition:all .16s ease;
}
.sh-cust-pill:hover{ border-color:#6E9152; transform:translateY(-2px); box-shadow:0 9px 18px -9px rgba(63,82,54,.4); }
.sh-cust-pill:hover::before{ background:#DCE8CC; color:#5C7A50; }
.sh-cust-pill[aria-pressed="true"]{
  background:var(--sage); border-color:var(--sage); color:var(--cream);
  box-shadow:0 9px 20px -9px rgba(92,122,80,.55);
}
.sh-cust-pill[aria-pressed="true"]::before{ content:"✓"; background:rgba(255,255,255,.28); color:var(--cream); }

/* sticky action bar — quantity + add-to-cart, frosted over the content */
.sh-cust-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(244,247,238,.9); backdrop-filter:blur(12px);
  border-top:1px solid rgba(110,145,82,.2);
  box-shadow:0 -10px 30px -18px rgba(63,82,54,.4);
}
.sh-cust-qty{
  flex:0 0 auto; display:flex; align-items:center; gap:2px;
  background:#fff; border:1.5px solid #e3ddcc; border-radius:999px; padding:3px;
}
.sh-cust-qty button{
  width:36px; height:36px; border-radius:50%; cursor:pointer; border:none;
  background:transparent; color:#3F5236; font-size:20px; line-height:1;
  transition:background .15s ease;
}
.sh-cust-qty button:hover{ background:var(--sage-c1); }
.sh-cust-qty span{ font-family:var(--font-d); font-size:18px; font-weight:600; color:#3F5236; min-width:26px; text-align:center; }

.sh-cust-add{ flex:1 1 auto; margin:0; padding-top:15px; padding-bottom:15px; }
.sh-cust-add:disabled{ background:#CDD6C4; box-shadow:none; cursor:not-allowed; transform:none; }

/* Posting: hide the label and spin a ring in its place. */
.sh-cust-add.is-busy{ color:transparent !important; position:relative; opacity:1; }
.sh-cust-add.is-busy::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%;
  border:2.5px solid rgba(251,248,239,.4); border-top-color:var(--cream);
  animation:shSpin .6s linear infinite;
}
@keyframes shSpin{ to{ transform:rotate(360deg); } }

/* Success: the button pops, a tick springs in, then the panel dismisses. */
.sh-cust-add.is-added,
.sh-cust-add.is-added:disabled{
  background:var(--sage); color:var(--cream); box-shadow:0 10px 22px -10px rgba(92,122,80,.55);
  cursor:default; opacity:1;
  display:flex; align-items:center; justify-content:center;
  animation:shAddedPop .45s ease;
}
@keyframes shAddedPop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.04) } 100%{ transform:scale(1) } }
.sh-cust-tick{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:9px; border-radius:50%;
  background:var(--cream); color:var(--sage); font:900 12px/1 var(--font-b);
  animation:shTickPop .4s .05s ease both;
}
@keyframes shTickPop{ 0%{ transform:scale(0) } 60%{ transform:scale(1.3) } 100%{ transform:scale(1) } }