/** Shopify CDN: Minification failed

Line 954:0 Unexpected "/"
Line 954:49 Unexpected "/"
Line 954:90 Expected identifier but found "/"

**/
/* redesign-allergy.css — /pages/baby-allergy-risk-calculator.
   Loaded behind rd_alg (snippets/redesign-active.liquid).

   THIS IS AN OVERRIDE SHEET, NOT A PORT. The template's own ~500 lines of
   inline CSS stay exactly where they are, and so does allergy-app.js, which
   carries the real scoring model.

   WHY, when the comparison charts got a full port: that page's inline block was
   363 lines of unscoped rules leaking `*`, `body` and bare `table` selectors
   across the whole page. This one is 248 rules ALREADY scoped to
   `#allergy-calculator` / `#calc-side-nav`, with 21 media queries, a chart
   pager that repaginates the bars by breakpoint, an equal-height product grid,
   a collapsed summary bar, a print stylesheet and an easter-egg animation.
   Rewriting that is all risk and no benefit — Sam's steer is that these pages
   were heavily optimised for mobile in their live environment and the layout
   should stay theirs. So nothing here changes a grid, a breakpoint or a
   position; it changes colour, type, radius and weight.

   HOW IT WINS. Live's rules are `#allergy-calculator .card` — (1,1,0) — and
   they sit in the body, so they load after this file. Every override below is
   prefixed `.rd-alg`, making it (1,2,0), which beats them on specificity
   regardless of order. No !important except where live itself used one.

   MOST OF THE WORK IS DONE BY THE VARIABLES. The calculator declares its whole
   palette as custom properties on #allergy-calculator and reads them 57 times,
   so re-pointing them at the redesign tokens restyles the bulk of the tool
   without touching a single rule that owns layout. */

/* ------------------------------------------------------------------ *
   1. THE PALETTE — re-pointed at the redesign's tokens
 * ------------------------------------------------------------------ */

.rd-alg #allergy-calculator {
  --border: #e7dfcd;              /* was #eeeeee */
  --muted: #54604f;               /* was #5f6368 */
  --bg: #faf7f0;                  /* was #f4f1eb */
  --ink: #14323c;                 /* was #202124 */
  --primary: #17402c;             /* was #4a694f */
  --warn: #a2561b;                /* was #ff7143 */
  --chip: #f3ecdd;                /* was #eef2f7 */
  --chip-border: #e0d7c2;         /* was #d6dbe1 */
  --chip-muted: #6f6a4f;          /* was #6b7280 */
  --line: #e7dfcd;                /* was #262613 */
  /* The chart's two series, measured off the design: Current in the orange
     accent, Future in the softer green. */
  --bar-current: #a2561b;
  --bar-future: #3f6b4f;
  /* Live pinned 120px for the legacy header. The redesign's header is 76px
     (--rd-header-h), so anchors and the sticky sidebar were parking ~44px
     lower than they needed to. */
  --stick-top: 100px;
}

/* ------------------------------------------------------------------ *
   2. PAGE HEAD  — h1 and the intro, which live prints above the tool
 * ------------------------------------------------------------------ */

.rd-alg { padding: 34px 0 72px; }

.rd-alg h1,
.rd-alg h1.h3 {
  font-family: var(--rd-display, 'Source Serif 4'), Georgia, serif;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--rd-ink);
  letter-spacing: normal;
  margin: 0 0 14px;
}

/* `The Most Comprehensive Baby Allergy Tool On The Internet` — live's own
   line, carrying an inline `style="color:#ff7143"`, so the colour needs
   !important to reach the design's accent. It now sits ABOVE the h1, where the
   artboard draws it, so the selectors no longer reach through
   .content-block--page. (0,2,1) is still enough: the only thing it competed
   with in there was `.content-block--page p` at the same weight, and outside
   it the field is clear apart from redesign-base's bare `p`. */
.rd-alg p.subtop {
  font-family: var(--rd-ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rd-accent) !important;      /* inline #ff7143 */
  margin: 0 0 12px;   /* the artboard's */
}
.rd-alg .content-block--page { font-family: var(--rd-ui); font-size: 15px; line-height: 1.75; color: #3f4d47; max-width: 840px; }
.rd-alg .content-block--page p { font-size: 15px; line-height: 1.75; }
.rd-alg .content-block--page a { font-size: inherit; color: var(--rd-forest); text-decoration: underline; text-underline-offset: 2px; }

/* Live shows this only below 900px and styles it there; only the paint moves. */
.rd-alg #ic-mobile-message {
  background: var(--rd-surface-alt);
  color: #8a6d3b;
  border: 1px solid #e0d7c2;
  border-radius: 12px;
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
   3. THE SIDEBAR
 * ------------------------------------------------------------------ */

/* Nav links. Live's active state is a blue chip (#e5f0ff / #1d4ed8) left over
   from the tool's original palette; the design's is the cream pill. */
.rd-alg #calc-side-nav.side-nav a {
  font-family: var(--rd-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-ink-muted);
  border-radius: 10px;
  padding: 8px 10px;
}
.rd-alg #calc-side-nav.side-nav a:hover { background: var(--rd-bg); color: var(--rd-forest); }
.rd-alg #calc-side-nav.side-nav a.active,
.rd-alg #calc-side-nav.side-nav a[aria-current="true"] {
  background: var(--rd-surface-alt);
  color: var(--rd-forest);
  font-weight: 600;
}

/* The sidebar is laid out like live's, not the artboard's: a progress strip,
   the plain list, then Overall Risk under a hairline and the factors box —
   no cards. The two cards the first pass drew (18/20 padding inside a 260px
   column, then the factors box inside that) left "Not yet introduced:
   Peanuts" wrapping onto three lines; Sam asked for live's layout back
   (7 Sep 2026). Only the palette is the design's.

   `.side-overall` ALSO carries `.card` in the markup, so the generic card rule
   further down this file matches it at equal specificity and wins on source
   order; `.side-overall.card` is (1,3,0) and settles it. */
.rd-alg #calc-side-nav .side-progress {
  background: var(--rd-surface-alt);
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 0 12px;
}
.rd-alg #calc-side-nav .side-overall,
.rd-alg #calc-side-nav .side-overall.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--rd-line);
  border-radius: 0;
  padding: 16px 0 0;
  margin-top: 14px;
}
.rd-alg #calc-side-nav .why {
  margin-top: 12px;
  padding: 12px;
  background: var(--rd-surface-alt);
  border: 1px solid var(--rd-line);
  border-radius: 12px;
}

/* The completion chip. */
.rd-alg #completion-chip,
.rd-alg #calc-side-nav .side-progress .chip {
  display: inline-block;
  background: var(--rd-surface-alt);
  border: 0;
  color: var(--rd-forest);
  font-family: var(--rd-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: 999px;
}

/* `Overall Risk` is an h4 on live and STAYS an h4 — the handoff draws these
   section titles as h2s and every one of them is frozen. Only the face moves,
   to the design's small uppercase label. */
.rd-alg #calc-side-nav .side-overall-head h4,
.rd-alg #calc-side-nav .side-overall-head h4.h5 {
  font-family: var(--rd-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
  margin: 0 0 8px;
}

.rd-alg #calc-side-nav .side-overall .risk-number,
.rd-alg #risk-percentage {
  font-family: var(--rd-display, 'Source Serif 4'), Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rd-ink);
}
.rd-alg #calc-side-nav .side-overall .risk-bands,
.rd-alg #risk-range { font-family: var(--rd-ui); font-size: 12px; color: var(--rd-ink-soft); }

/* The Low / Medium / High pill. */
.rd-alg #allergy-calculator .pill,
.rd-alg #calc-side-nav .side-overall .pill {
  display: inline-block;
  font-family: var(--rd-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
}
.rd-alg #allergy-calculator .pill.low { background: #3f6b4f; }
.rd-alg #allergy-calculator .pill.medium { background: #a2561b; }
.rd-alg #allergy-calculator .pill.high { background: #a4552f; }

.rd-alg #calc-side-nav .why { font-family: var(--rd-ui); font-size: 12.5px; color: #3f4d47; }

/* ------------------------------------------------------------------ *
   4. THE STEPPER AND THE FORM
 * ------------------------------------------------------------------ */

/* THE STEPPER SITS ON A DARK GROUND. Live puts it inside a #193a43 band at
   the head of the form card, which the desktop artboard does not show — the
   design draws the stepper on cream. Colouring it for a light ground made the
   ACTIVE step forest-on-dark-teal, i.e. invisible, and the inactive steps
   barely better. Measured off the rendered page, not the design file.

   So the palette inverts here: light text on the band, and the active badge
   goes cream-with-dark-text rather than dark-on-dark. */
.rd-alg #allergy-calculator .stepper li {
  font-family: var(--rd-ui);
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 239, 226, .62);
}
.rd-alg #allergy-calculator .stepper li.active { color: var(--rd-cream); }
.rd-alg #allergy-calculator .stepper li span {
  background: rgba(245, 239, 226, .16);
  color: rgba(245, 239, 226, .72);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
}
.rd-alg #allergy-calculator .stepper li.active span { background: var(--rd-cream); color: var(--rd-forest); }

.rd-alg #allergy-calculator legend {
  font-family: var(--rd-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-ink);
}
.rd-alg #allergy-calculator .label,
.rd-alg #allergy-calculator .inline > .label {
  font-family: var(--rd-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--rd-ink);
}
.rd-alg #allergy-calculator .helper { font-size: 12.5px; color: var(--rd-ink-soft); }

/* Inputs — measured 14px on the page ground, 10px radius, hairline border. */
.rd-alg #allergy-calculator input[type="number"],
.rd-alg #allergy-calculator select,
.rd-alg #allergy-calculator .food-card input,
.rd-alg #allergy-calculator .food-card select {
  font-family: var(--rd-ui);
  font-size: 14px;
  line-height: normal;             /* theme.css sets 1.8 on input/select */
  color: var(--rd-ink);
  background: var(--rd-bg);
  border: 1px solid #e0d7c2;
  border-radius: 10px;
  padding: 10px 14px;
}
.rd-alg #allergy-calculator input[type="number"]:focus,
.rd-alg #allergy-calculator select:focus { border-color: var(--rd-forest); outline: none; }
.rd-alg #allergy-calculator input[type="radio"],
.rd-alg #allergy-calculator input[type="checkbox"] { accent-color: var(--rd-forest); }

/* The pill toggles — the design's answer control. */
.rd-alg #allergy-calculator .pill-btn,
.rd-alg #allergy-calculator .pill-select label {
  font-family: var(--rd-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: var(--rd-ink-muted);
  background: var(--rd-bg);
  border: 1px solid #e0d7c2;
  border-radius: 999px;
  padding: 9px 18px;
}
.rd-alg #allergy-calculator .pill-btn.active,
.rd-alg #allergy-calculator .pill-select input:checked + label {
  background: var(--rd-forest);
  border-color: var(--rd-forest);
  color: var(--rd-cream);
}
.rd-alg #allergy-calculator .pill-btn:focus { outline: 2px solid var(--rd-forest); outline-offset: 2px; }

/* Buttons. Live's `.primary` is a tan (#c49e6b); the design's is the forest. */
.rd-alg #allergy-calculator .btn {
  font-family: var(--rd-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  border: 1px solid #e0d7c2;
  border-radius: 999px;
  background: var(--rd-bg);
  color: var(--rd-ink);
  padding: 10px 20px;
}
.rd-alg #allergy-calculator .btn.primary { background: var(--rd-forest); border-color: var(--rd-forest); color: var(--rd-cream); }
.rd-alg #allergy-calculator .btn.primary:hover { background: #1e5238; }
.rd-alg #allergy-calculator .btn.ghost { background: transparent; border-color: var(--rd-line); color: var(--rd-forest); }
.rd-alg #allergy-calculator .btn:focus { outline: 2px solid var(--rd-forest); outline-offset: 2px; }
.rd-alg #allergy-calculator .btn.tiny { font-size: 12px; padding: 6px 12px; }

/* ------------------------------------------------------------------ *
   5. CARDS AND RESULTS
 * ------------------------------------------------------------------ */

.rd-alg #allergy-calculator .card,
.rd-alg #allergy-calculator #formula-rec-card,
.rd-alg #allergy-calculator .chart-box {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  padding: 26px 30px;
}

/* SECTION TITLES ARE FROZEN AT THEIR LIVE LEVELS. `Estimated Allergy Risk by
   Food` is an h3; `How Your Answers Changed These Estimates`, `Formula
   Suggestions` and `Further Reading` are h4s. The handoff draws all four as
   h2s — restyled here, never re-levelled. `.chart-title` is the class live
   puts on all of them, and `.h4` is a bootstrap size class riding along. */
.rd-alg #allergy-calculator .chart-title,
.rd-alg #allergy-calculator h3.chart-title,
.rd-alg #allergy-calculator h4.chart-title {
  font-family: var(--rd-display, 'Source Serif 4'), Georgia, serif;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--rd-ink);
  letter-spacing: normal;
}

/* The chart's two series. */
.rd-alg #allergy-calculator .bar { background: var(--bar-current); border-radius: 6px 6px 0 0; }
.rd-alg #allergy-calculator .bar.future { background: var(--bar-future); }
.rd-alg #allergy-calculator .chart-legend { font-family: var(--rd-ui); font-size: 12.5px; color: var(--rd-ink-muted); }
.rd-alg #allergy-calculator .chart-legend .swatch { border-radius: 4px; }
.rd-alg #allergy-calculator .chart-legend .current .swatch { background: var(--bar-current); }
.rd-alg #allergy-calculator .chart-legend .future .swatch { background: var(--bar-future); }
.rd-alg #allergy-calculator .y-axis span,
.rd-alg #allergy-calculator .x-axis span { font-family: var(--rd-ui); font-size: 11.5px; color: var(--rd-ink-soft); }
.rd-alg #allergy-calculator .axis-title { font-family: var(--rd-ui); font-size: 11.5px; color: var(--rd-ink-soft); }

/* Food cards in step 3. */
.rd-alg #allergy-calculator .food-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 14px;
}
.rd-alg #allergy-calculator .food-card h5,
.rd-alg #allergy-calculator .food-card .card-head h5 {
  font-family: var(--rd-display, 'Source Serif 4'), Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--rd-ink);
}

/* Formula suggestion cards. Refined in section 7 — `.brand-tile` used to be
   in this selector and is not a card at all. */
/* Live centres everything inside the card — image, title, badges, review
   count — at every width; the port left it ranged left, which reads as a
   different component beside live's. Measured on both, 7 Sep 2026. */
.rd-alg #allergy-calculator .product-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 16px;
  text-align: center;
}
.rd-alg #allergy-calculator .product-card .body,
.rd-alg #allergy-calculator .product-card .title,
.rd-alg #allergy-calculator .product-card .meta { text-align: center; }
.rd-alg #allergy-calculator .product-card .title {
  font-family: var(--rd-display, 'Source Serif 4'), Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--rd-ink);
}
.rd-alg #allergy-calculator .product-card .meta { font-size: 12.5px; color: var(--rd-ink-muted); }
.rd-alg #allergy-calculator .product-card .badge {
  font-family: var(--rd-ui);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}
.rd-alg #allergy-calculator .product-card .badge.good { background: var(--rd-surface-alt); color: var(--rd-forest); }
.rd-alg #allergy-calculator .product-card .badge.warn { background: #f6e7d6; color: #8a5a22; }

/* The factor list under Overall Risk, and the impact list in the results. */
.rd-alg #allergy-calculator .why .factor,
.rd-alg #allergy-calculator .card .drivers-list { font-family: var(--rd-ui); font-size: 12.5px; color: #3f4d47; }
.rd-alg #allergy-calculator .why .factor .delta.pos,
.rd-alg #allergy-calculator .driver-delta.pos { color: #a4552f; }
.rd-alg #allergy-calculator .why .factor .delta.neg,
.rd-alg #allergy-calculator .driver-delta.neg { color: #3f6b4f; }

.rd-alg #allergy-calculator .chip { background: var(--rd-surface-alt); border-color: var(--rd-line); color: var(--rd-ink); border-radius: 999px; font-size: 12px; }

/* The disclaimer — live's words, unchanged. */
.rd-alg #allergy-calculator .app-footer .disclaimer,
.rd-alg #allergy-calculator .disclaimer { font-family: var(--rd-ui); font-size: 12.5px; line-height: 1.7; color: var(--rd-ink-soft); }

.rd-alg #allergy-calculator .guidelines a,
.rd-alg #allergy-calculator #sources-card a { font-size: inherit; color: var(--rd-forest); }

/* ================================================================== *
   6. SECOND PASS — bringing the tool onto the design's components
   Sam, 3 Sep: "needs a lot of work vs the redesigned design concepts".
   Diffed against Allergy Calculator.dc.html; still no grid, breakpoint or
   position is changed, and the scoring script is untouched.
 * ================================================================== */

/* --- the answer controls become pills ---------------------------------

   The design answers Mother / Father / Sibling(s), the eczema and gluten
   questions and Delivery mode with pill toggles; live renders native
   checkboxes and radios. The markup already wraps each input in its own
   <label>, so this is presentation only — no input is moved, renamed or
   removed, and the form the scoring script reads is byte-identical.

   Everything is inside @supports selector(:has(*)): a browser without :has()
   cannot show the checked state on the label, so there the native control
   stays visible rather than leaving an unreadable row of pills. */
@supports selector(:has(*)) {
  .rd-alg #allergy-calculator .option-row { gap: 8px; flex-wrap: wrap; }
  .rd-alg #allergy-calculator .option-row label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 9px 18px;
    border: 1px solid #e0d7c2;
    border-radius: 999px;
    background: var(--rd-bg);
    font-family: var(--rd-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    color: var(--rd-ink-muted);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  /* Hidden, not removed — it still receives the click through the label, and
     it is still what the script reads. */
  .rd-alg #allergy-calculator .option-row label input[type="checkbox"],
  .rd-alg #allergy-calculator .option-row label input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
  }
  .rd-alg #allergy-calculator .option-row label:hover { border-color: var(--rd-forest); color: var(--rd-forest); }
  .rd-alg #allergy-calculator .option-row label:has(input:checked) {
    background: var(--rd-forest);
    border-color: var(--rd-forest);
    color: var(--rd-cream);
  }
  /* Keyboard focus has to live on the label, since the input is invisible. */
  .rd-alg #allergy-calculator .option-row label:has(input:focus-visible) {
    outline: 2px solid var(--rd-forest);
    outline-offset: 2px;
  }
}

/* --- the form card ---------------------------------------------------

   #form-wrap is a dark #193a43 box with 12px of padding, so its colour drew a
   thick dark frame all the way round the white form. The design uses that dark
   only as a strip behind the stepper, with the form body running to the card's
   own edges. Same element, no padding — the stepper carries its own instead. */
.rd-alg #allergy-calculator #form-wrap {
  padding: 0;
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  overflow: hidden;
}
.rd-alg #allergy-calculator .stepper { padding: 14px 26px; margin: 0; }
.rd-alg #allergy-calculator .step {
  background: var(--rd-surface);
  border-radius: 0;
  padding: 26px 30px;
}
.rd-alg #allergy-calculator .step-actions { margin-top: 22px; }

/* --- the chart ---------------------------------------------------------

   Header on one row: title left, legend and sort right, as the design draws
   it. Live centres the title above the card. */
.rd-alg #allergy-calculator .chart-header { align-items: center; gap: 16px; }
.rd-alg #allergy-calculator .chart-title { text-align: left; margin: 0; }

/* The per-bar values were white pills with a border and a radius — at these
   percentages there is one above every bar, and together they read louder than
   the bars. The design draws none at all; the numbers are KEPT, because at 0.3%
   the bar itself is a sliver and the figure is the only readable data, but they
   drop to quiet muted type so the chart reads as a chart. */
.rd-alg #allergy-calculator .bar .label {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--rd-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-ink-soft);
}

/* Sort control as a pill, matching the design's button. */
.rd-alg #allergy-calculator .chart-sort {
  align-items: center;
  gap: 8px;
  font-family: var(--rd-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rd-ink-muted);
  background: var(--rd-bg);
  border: 1px solid #e0d7c2;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.rd-alg #allergy-calculator .chart-sort:hover { border-color: var(--rd-forest); color: var(--rd-forest); }
.rd-alg #allergy-calculator .chart-sort input { accent-color: var(--rd-forest); margin: 0; }

/* Save & Share sits in the card as a forest pill, not adrift under it. */
.rd-alg #allergy-calculator .share-row { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
.rd-alg #allergy-calculator .share-row .btn { border-radius: 999px; }

/* The eyebrow takes the design's leading rule. */
.rd-alg p.subtop { display: flex; align-items: center; gap: 12px; }
.rd-alg p.subtop::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--rd-accent);
  flex: 0 0 auto;
}

/* ================================================================== *
   7. THIRD PASS — Sam, 3 Sep: "progress is incorrect, boxes are
   duplicate, table of contents isn't formatted correctly, colors of
   inputs are incorrect and the heading as well, cards don't look right".
   Every fix below was measured against the rendered artboard, not read
   off its source.
 * ================================================================== */

/* --- the form card's head goes forest ---------------------------------

   #form-wrap is painted #193a43 in the template. The second pass emptied its
   padding so the dark stopped framing the whole form, but left the colour —
   so the band behind the stepper, the loudest thing on the page, was still
   reading dark teal on a page whose every other dark surface is the brand
   forest. The artboard puts the stepper on #17402c. Everything drawn on the
   band is already light, so only the ground moves. */
.rd-alg #allergy-calculator #form-wrap { background: var(--rd-forest); }
.rd-alg #allergy-calculator .stepper li { border-bottom-color: rgba(245, 239, 226, .22); }
.rd-alg #allergy-calculator .stepper li.active { border-bottom-color: var(--rd-cream); }

/* --- the list on desktop ------------------------------------------------

   Live shows the progress strip, the list and Overall Risk as one plain
   column; the list scrolls in its own box only when it is taller than the
   viewport. The first pass boxed the strip and the list into one card and
   the risk block into another; both cards are gone (see the sidebar block
   above). Below 900px live hides .side-inner outright and turns the list
   horizontal, so nothing here applies there. */

/* ═══ THE SPACING THIS PAGE USED TO GET FROM BOOTSTRAP ═════════════════════
   This page no longer loads `redesign-base-utils.css` (`rd_no_utils` in
   snippets/redesign-active.liquid), so the `mt-*`/`mb-*` classes still in
   live's markup no longer carry a value of their own. Every line below is the
   value the class was supplying, measured on the page before the switch, so
   the rendering does not move. Six classes, twenty-one uses, no breakpoint
   variants and no border utilities — that is the whole dependency.

   TWO OF THEM CONTRADICT A RULE ABOVE, and deliberately. `.chart-title` is set
   to `margin: 0` and `.results` to a 14px top earlier in this sheet, and
   bootstrap's `!important` meant neither ever applied — nobody has seen those
   values. What has been signed off is the bootstrap spacing, so that is what
   is reinstated here. Changing it is a design decision, not part of taking
   the utilities away. */
.rd-alg #allergy-calculator .results.mt-5,
.rd-alg #allergy-calculator .formula-card.mt-5,
.rd-alg .mt-5 { margin-top: 48px; }
.rd-alg #allergy-calculator .card.mt-3,
.rd-alg .mt-3 { margin-top: 16px; }
.rd-alg .mt-4 { margin-top: 24px; }
.rd-alg .mb-3 { margin-bottom: 16px; }
.rd-alg .mb-4 { margin-bottom: 24px; }
.rd-alg #allergy-calculator .chart-title.mb-2,
.rd-alg .mb-2 { margin-bottom: 8px; }

@media (min-width: 901px) {
  .rd-alg #calc-side-nav .side-inner {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 8px 0 0;
    margin: 0;
  }
  .rd-alg #calc-side-nav.side-nav ol { gap: 2px; padding: 0; }

  /* The rail. Live's active state is a blue chip left over from the tool's
     original palette; the second pass made it a cream pill, which still read
     as a button rather than a position marker. The design marks position with
     a 2px left edge, the same device the recall tracker uses. */
  .rd-alg #calc-side-nav .side-inner ol a {
    border-radius: 0;
    padding: 7px 12px;
    border-left: 2px solid var(--rd-line);
    line-height: 1.4;
  }
  .rd-alg #calc-side-nav .side-inner ol a:hover,
  .rd-alg #calc-side-nav .side-inner ol a.active,
  .rd-alg #calc-side-nav .side-inner ol a[aria-current="true"] {
    background: var(--rd-surface-alt);
    border-left-color: var(--rd-forest);
    color: var(--rd-forest);
  }
}

/* --- the eczema and gluten toggles share a row ------------------------

   The artboard puts these two in a two-column grid and drops their legends,
   on the grounds that `Eczema` sitting above `Baby has current or past
   eczema` says the same thing twice. The legends are live text and stay; the
   layout is the design's, and it is the layout that stops the pair reading as
   two identical full-width bars stacked on each other.

   This is the one place in this sheet that moves a grid rather than a colour.

   `:not([hidden])` is load-bearing. allergy-app.js advances the wizard with
   `e.hidden = Number(e.dataset.step) !== i`, and the hidden attribute is only
   `display:none` from the UA sheet — any `display` declared here would outrank
   it and pin step 1 open for the whole flow. */
.rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 20px;
}
/* Grid items do not collapse margins, so the fieldsets' own mt-4/mb-4 would
   double up into 68px gutters. The gap owns the rhythm instead — and the
   zeroing carries !important because the spacing utilities in the base sheet
   do (the size utilities alongside them do not). */
.rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) > * {
  grid-column: 1 / -1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) > fieldset:nth-of-type(2) { grid-column: 1 / 2; }
.rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) > fieldset:nth-of-type(3) { grid-column: 2 / 3; }

/* ------------------------------------------------------------------ *
   PHONES: two places where live's layout is simply better
 * ------------------------------------------------------------------ */

/* 1. The formula-suggestions card. Live gives it no card chrome at all, so
   its product grid spans the full 372px of a 412px phone and the tiles are
   181px. The redesign's 26/30 padding plus border took 62px off that, leaving
   150px tiles inside a frame that added nothing — Sam, 7 Sep 2026. The frame
   stays on tablet and desktop, where the room exists. */
@media (max-width: 900px) {
  .rd-alg #allergy-calculator #formula-rec-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
}

/* 2. Overall Risk. Below 900px live lays it out as a row — the percentage,
   range and pill in a narrow left column, the Top-3-factors box filling the
   rest — which is 100px shorter than stacking them. The legacy rule that does
   it (`flex-direction: row`) needs the flex it never sets, so the port
   rendered it as a block and stacked. */
@media (max-width: 900px) {
  .rd-alg #calc-side-nav .side-overall,
  .rd-alg #calc-side-nav .side-overall.card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  .rd-alg #calc-side-nav .side-stats { flex: 0 0 auto; min-width: 96px; }
  .rd-alg #calc-side-nav .why { flex: 1 1 auto; margin-top: 0; }
}

@media (max-width: 700px) {
  .rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) { display: block; }
  .rd-alg #allergy-calculator .step[data-step="1"]:not([hidden]) > * { margin-bottom: 20px !important; }
}

/* --- the selects look like selects again ------------------------------

   Live sets appearance:none and never supplied a replacement arrow, so
   `Season of birth` and `Pets at home` are indistinguishable from the number
   input beside them — three identical boxes, two of which are dropdowns. The
   artboard's selects carry a chevron. This draws one in the palette rather
   than handing back the native control, whose colours we do not own.

   Longhand on purpose: the fill in section 4 is a `background` shorthand, so
   anything set there would be reset by it. */
.rd-alg #allergy-calculator select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2354604f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  padding-right: 34px;
}

/* --- the formula suggestion cards -------------------------------------

   Three faults at once. `.brand-tile` is a bare layout column in the template
   — display:flex, height:100%, min-width:0, nothing else — and the second
   pass handed it the same card chrome as the card inside it, so every
   suggestion sat in two nested rounded boxes with the brand name stranded on
   the seam between them. Live then paints both the card and its body #f9f9f9
   behind a 4px border of that same grey, which is where the slab under each
   photo came from. And the brand label runs #111827, a slate left over from
   the tool's first palette.

   The design draws one flat cream card with the brand as a small uppercase
   eyebrow above it. The photo keeps a white plate: these are product shots
   already on white, and dropping them onto the cream just leaves a white
   rectangle floating inside the card.

   `.brand-chip` keeps live's fixed 18px height — `.brand-chip.placeholder` is
   an empty div that reserves it so the cards in a brand row line up. */
.rd-alg #allergy-calculator .brand-tile {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.rd-alg #allergy-calculator .brand-chip {
  font-family: var(--rd-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
}
.rd-alg #allergy-calculator .product-card {
  background: var(--rd-bg);
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rd-alg #allergy-calculator .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(20, 50, 60, .35);
}
.rd-alg #allergy-calculator .product-card .img-wrap {
  background: #fff;
  border-bottom: 1px solid var(--rd-line);
  margin-top: 0;
}
.rd-alg #allergy-calculator .product-card .body {
  background: none;
  margin-top: 0;
  padding: 14px 16px 16px;
}
.rd-alg #allergy-calculator .product-card .title {
  font-size: 16.5px;
  line-height: 1.3;
}
.rd-alg #allergy-calculator .product-card .meta { color: var(--rd-ink-soft); }
/* The bare badge kept a slate set — #f8fafc on #e5e7eb in #0f172a. */
.rd-alg #allergy-calculator .product-card .badge {
  background: var(--rd-surface-alt);
  border-color: var(--rd-line);
  color: var(--rd-forest);
}

/* The crumb sits in the page's own .container so it aligns with the h1;
   rd-wrap's 1520 measure and 40px gutters come off inside it. */
.rd-alg .container > .rd-crumb {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  /* The artboard opens its hero on `padding:36px 40px 30px` under a crumb with
     no bottom padding. Ours had the crumb and the h1 meeting at 0px. */
  margin-bottom: 36px;
}

/* ================================================================== *
   0. THE TOOL'S OWN STYLESHEET — ported from the template's inline blocks

   Three <style> blocks sat in the body of page.allergy-calculator.liquid
   (the calculator proper, the unicorn fly-by, the peek wrapper) and are
   copied here verbatim, in their original order, on 5 Sep 2026 under the
   no-inline-CSS rule. They are APPENDED rather than prepended so the cascade
   is exactly what it was: they used to load after this sheet, and the
   override rules above win on specificity (.rd-alg prefix), not on order.
   A fourth block, `.page-title{margin-bottom:40px}`, matched nothing on the
   page and is dropped.
 * ================================================================== */
/* ===== Baby Allergy Risk Calculator (clean) ===== */
:root {scroll-padding-top:var(--stick-top,184px);}
#allergy-calculator [id] {scroll-margin-top:var(--stick-top,184px);}
#allergy-calculator {--space:12px; --border:#eeeeee; --muted:#5f6368; --bg:#f4f1eb; --ink:#202124; --primary:#4a694f; --ok:#28a745; --warn:#ff7143; --bad:#dc3545; --chip:#eef2f7; --chip-border:#d6dbe1; --chip-muted:#6b7280; --line:#262613; --bar-current:#ff7143; --bar-future:#4a694f; --stick-top:120px;}
#allergy-calculator * {box-sizing:border-box; font-family:var(--g-font-1);}
#allergy-calculator.allergy-app {max-width:100%; margin:0 auto; background:transparent; font:16px/1.45 var(--g-font-1),Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);}

/* ---------- Header ---------- */
#allergy-calculator .app-header {display:grid; grid-template-columns:minmax(280px,420px) minmax(520px,1fr); gap:24px; align-items:start; margin-bottom:12px; padding-bottom:0;}
#allergy-calculator .overall-card .card-title-row {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
#allergy-calculator .overall-card .risk-row {display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:16px; align-items:start;}
#allergy-calculator #why-btn {display:none;}

/* ---------- App main ---------- */
#allergy-calculator .app-main {display:grid; grid-template-columns:260px 1fr; gap:0 24px; position:relative;}
#allergy-calculator .app-main > nav.side-nav {grid-column:1;}
#allergy-calculator .app-main > .main-col {grid-column:2; min-width:0;}
#calc-side-nav.side-nav {position:sticky; top:var(--stick-top); align-self:start; padding:12px 0;}
#calc-side-nav.side-nav ol {list-style:none; margin:0; padding:0 12px 0 0; display:flex; flex-direction:column; gap:10px;}
#calc-side-nav a {transition:none !important;}
#calc-side-nav.side-nav a {display:block; padding:8px 10px; border-radius:8px; color:#374151; text-decoration:none; line-height:1.2;}
#calc-side-nav.side-nav a:hover {background:#f3f4f6;}
#calc-side-nav.side-nav a.active, #calc-side-nav.side-nav a[aria-current="true"] {background:#e5f0ff; color:#1d4ed8; font-weight:600;}
#allergy-calculator .main-col {min-width:0;}
#allergy-calculator [id^="sec-"], #allergy-calculator .card, #allergy-calculator section, #allergy-calculator .chart-wrapper {scroll-margin-top:calc(var(--stick-top) + 10px);}

/* ---------- Generic UI ---------- */
#allergy-calculator .label {font-weight:600; display:block;}
#allergy-calculator .block {display:block; margin:10px 0;}
#allergy-calculator .inline {display:inline-flex; flex-direction:column; margin:10px 10px 10px 0;}
#allergy-calculator .helper {font-size:13px; color:var(--muted); margin:6px 0;}
#allergy-calculator fieldset {border:none; margin:10px 0; padding:0;}
#allergy-calculator legend {font-weight:700; margin-bottom:6px;}
#allergy-calculator input[type="number"], #allergy-calculator select {border:1px solid #dadce0; border-radius:4px; padding:8px; min-width:200px; background:#fff; color:var(--ink);}
#allergy-calculator input[type="radio"], #allergy-calculator input[type="checkbox"] {margin-right:6px;}
#allergy-calculator .btn {appearance:none; border:1px solid #dadce0; background:#fff; color:#1f1f1f; border-radius:4px; padding:8px 12px; cursor:pointer;}
#allergy-calculator .btn.primary {background:#c49e6b; border-color:#c49e6b; color:white;}
#allergy-calculator .btn.ghost {background:#fcfcfc; border-color:var(--border); color:var(--primary);}
#allergy-calculator .btn.tiny {font-size:12px; padding:6px 8px;}
#allergy-calculator .btn:focus {outline:3px solid var(--primary); outline-offset:2px;}
#allergy-calculator .chip {display:inline-block; background:var(--chip); border:1px solid var(--chip-border); color:#39424e; border-radius:999px; padding:4px 8px; font-size:12px;}
#allergy-calculator .chip.muted {background:#f6f7f9; color:var(--chip-muted); border-color:#e5e7eb;}
#allergy-calculator .pill {display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; margin-top:6px; text-align:center; width:fit-content;}
#allergy-calculator .pill.low {background:var(--ok); color:#fff;}
#allergy-calculator .pill.medium {background:var(--warn); color:#fff;}
#allergy-calculator .pill.high {background:var(--bad); color:#fff;}

/* ---------- Stepper ---------- */
#allergy-calculator .stepper {list-style:none; display:flex; gap:var(--space); padding:0; margin:0 0 12px;}
#allergy-calculator .stepper li {flex:1; display:flex; align-items:center; gap:8px; border-bottom:2px solid #193a43; padding:8px 4px; color:white; cursor:pointer; font-weight:600;}
#allergy-calculator .stepper li.active {color:white; border-bottom-color:white;}
#allergy-calculator .stepper li span {width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#193a43; font-weight:700; color:#fff; padding-top:2px;}
#allergy-calculator .step-actions {display:flex; justify-content:flex-end; gap:8px; margin-top:12px;}

/* ---------- Options ---------- */
#allergy-calculator .option-row {display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px;}
#allergy-calculator .option-row label {display:flex; align-items:center; gap:6px; margin:0; cursor:pointer;}
#allergy-calculator .pill-select {margin:10px 0 16px;}

/* ---------- Food cards ---------- */
#allergy-calculator .foods-grid {display:grid; gap:var(--space); grid-template-columns:1fr;}
#allergy-calculator .food-card {border:1px solid var(--border); border-radius:4px; background:#f6f7f9; padding:12px; display:flex; flex-direction:column; gap:8px;}
#allergy-calculator .food-card h5 {margin:0 0 4px;}
#allergy-calculator .fields-row {display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; width:100%;}
#allergy-calculator .col-intro, .col-exposure, .col-reaction {display:flex; flex-direction:column; gap:4px; min-width:150px; flex:1 1 180px;}
#allergy-calculator .food-card input[type="number"], #allergy-calculator .food-card select {min-width:0;}

/* ---------- Results ---------- */
#allergy-calculator .results {margin-top:14px;}
#allergy-calculator .card {border:1px solid var(--border); border-radius:4px; background:#fcfcfc; padding:12px;}
#allergy-calculator .risk-number {font-size:32px; font-weight:800;}
#allergy-calculator .risk-bands {font-size:12px; color:var(--muted);}
#allergy-calculator .why {margin-top:0; padding:10px; background:#eeeeee; border:1px solid var(--border); border-radius:4px; font-size:14px;}
#allergy-calculator .why .factor-list {display:grid; grid-template-columns:1fr; gap:6px; margin-top:6px;}
#allergy-calculator .why .factor {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:4px; background:#fff;}

/* ---------- Chart ---------- */
#allergy-calculator .chart-header {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;}
#allergy-calculator .chart-title {margin:0; font-size:20px; font-weight:700; color:#16333a; text-align:center;}
#allergy-calculator .chart-legend {display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px 8px; justify-content:center; white-space:nowrap;}
#allergy-calculator .chart-legend .swatch {display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px;}
#allergy-calculator .chart-legend .current {background:var(--bar-current);}
#allergy-calculator .chart-legend .future {background:var(--ok);}
#allergy-calculator .chart-sort {margin-left:auto; display:inline-flex; align-items:center; gap:8px; justify-self:end; color:#0f172a; font-size:14px; margin-bottom:0;}
#allergy-calculator .chart-wrapper {display:flex; position:relative; gap:8px; margin-top:8px;}
#allergy-calculator .y-axis {width:60px; height:220px; position:relative;}
#allergy-calculator .y-axis span {position:absolute; left:0; transform:translateY(-50%); font-size:12px; color:var(--muted);}
#allergy-calculator .chart-container {display:grid; grid-template-columns:repeat(9,1fr); height:220px; align-items:end; gap:12px; width:calc(100% - 68px); background:#fcfcfc; border-radius:4px; border:1px solid var(--border);}
#allergy-calculator .bar-group {display:flex; gap:6px; justify-content:center; align-items:flex-end;}
#allergy-calculator .bar {width:20px; background:var(--bar-current); transition:height .25s ease; position:relative; border-radius:4px; outline:none;}
#allergy-calculator .bar.future {background:var(--ok);}
#allergy-calculator .bar .label {position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:11px; background:#fff; padding:2px 4px; border:1px solid var(--border); border-radius:4px; white-space:nowrap;}
#allergy-calculator .x-axis {display:grid; grid-template-columns:repeat(9,1fr); gap:12px; text-align:center; margin-top:6px; margin-left:68px; padding-left:8px; border-top:2px solid var(--line); margin-right:8px;}
#allergy-calculator .axis-title {font-weight:700; margin:8px 0 0 60px;}
#allergy-calculator .axis-title.y {margin-top:0; text-align:center; margin-left:0;}
#allergy-calculator .axis-title.x {text-align:center; margin-left:0;}

/* ---------- CTA / Share ---------- */
#allergy-calculator .cta-row {display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
#allergy-calculator #reset-btn {display:none;}

/* ---------- Footer ---------- */
#allergy-calculator .app-footer {display:flex; justify-content:flex-end; margin-top:14px;}
#allergy-calculator .app-footer .disclaimer {font-size:12px; color:var(--muted); text-align:right;}

/* ---------- Formula suggestions ---------- */
#allergy-calculator .formula-card h4 {margin:0 0 6px;}
#allergy-calculator .product-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; width:100%;}
.brand-tile {display:flex; flex-direction:column; height:100%;}
.brand-chip {height:18px; line-height:18px; font-size:13px; font-weight:700; color:#111827; letter-spacing:.02em; margin:0 0 6px 2px;}
.brand-chip.placeholder {visibility:hidden;}
.product-card .badge {font-size:11px; padding:3px 6px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:inherit;}
.product-card .badge.good {background:#ecfdf5; border-color:#a7f3d0; color:#065f46;}
.product-card .badge.warn {background:#fff7ed; border-color:#fed7aa; color:#9a3412;}
.product-card .avoid {font-size:12px; color:#6b7280;}

/* ---------- Factor deltas ---------- */
#allergy-calculator .why .factor .delta.pos {background:#fef2f2; color:#b91c1c; border:1px solid #fecaca;}
#allergy-calculator .why .factor .delta.neg {background:#ecfdf5; color:#047857; border:1px solid #a7f3d0;}
#allergy-calculator .why .factor .delta {margin-left:auto; min-width:44px; text-align:center; padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px; white-space:nowrap;}
#allergy-calculator .driver-delta {margin-left:.35rem; font-weight:700; padding:0 !important; min-width:auto !important; border:0 !important; background:transparent !important; text-align:inherit !important;}
#allergy-calculator .driver-delta.pos {color:#b91c1c !important;}
#allergy-calculator .driver-delta.neg {color:#047857 !important;}

/* ---------- Responsive ---------- */
@media (min-width:640px){#allergy-calculator .foods-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){#allergy-calculator .stepper li span{display:none;} #allergy-calculator .stepper li {text-align:center; font-size:14px;} #allergy-calculator .label {font-size:12px;} #allergy-calculator .option-row {font-size:12px;} #allergy-calculator input[type="radio"], #allergy-calculator input[type="checkbox"] {margin-right:0px !important;} #allergy-calculator input[type="number"], #allergy-calculator select {padding:6px; font-size:12px;}}
@media (min-width:900px){#allergy-calculator.allergy-app{margin-top:3rem;} #allergy-calculator .foods-grid{grid-template-columns:repeat(1,1fr);}}
@media (min-width:980px){#allergy-calculator .foods-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:980px){#allergy-calculator .app-header{grid-template-columns:1fr;} #allergy-calculator .overall-card .risk-row{grid-template-columns:1fr;}}
/@media (min-width:576px) and (max-width:1299px){/.container{max-width:1140px !important;}/}
@media (max-width:900px){
  #allergy-calculator .app-main{display:block;} #calc-side-nav.side-nav{position:static; border-right:none; border-bottom:1px solid #e5e7eb; margin-bottom:16px;} #calc-side-nav.side-nav ol{flex-direction:row; flex-wrap:wrap; gap:2px !important;} #calc-side-nav.side-nav a{padding:6px 8px; font-size:14px;margin-top:auto;} .product-grid{grid-template-columns:repeat(2,minmax(160px,1fr));}
  #reset-link, #edit-link, #ols-edit-link u {top:23px !important;font-size:12px !important;} #calc-side-nav .side-inner {display:none;} #calc-side-nav .side-overall {flex-direction:row; justify-content:space-between; gap:20px; padding-bottom:0px !important;} #why-panel .side-headline {text-align:left;} #calc-side-nav .why {margin-top:0px !important; width:100%; display:flex; flex-direction:column;} .side-stats {min-width:fit-content;}
}
@media (max-width:520px){#allergy-calculator input[type="number"], #allergy-calculator select{min-width:unset;}}

/* ---------- Print ---------- */
@media print{#allergy-calculator .stepper, #allergy-calculator .step-actions, #allergy-calculator .share-row, #allergy-calculator #why-btn, #allergy-calculator .legend label, #allergy-calculator .helper{display:none;} #allergy-calculator.allergy-app{background:#fff;} #allergy-calculator .card, #allergy-calculator .step, #allergy-calculator .chart-wrapper{break-inside:avoid;}}

/* ---------- Legacy cleanup ---------- */
#allergy-calculator .result-cards {display:none;}
.side-nav.is-fixed, .side-nav.is-bottom {position:static; top:auto; bottom:auto;}
#allergy-calculator .main-col {min-width:0;}
#calc-side-nav.side-nav.is-fixed {position:fixed; top:var(--stick-top);}
#calc-side-nav.side-nav.is-bottom {position:absolute; top:auto; bottom:0;}
#allergy-calculator [id^="sec-"], #allergy-calculator .card, #allergy-calculator section, #allergy-calculator .chart-wrapper {scroll-margin-top:calc(var(--stick-top) + 10px);}

/* ---------- Steps & controls ---------- */
#allergy-calculator .step {padding:12px; position:relative; overflow:visible; background-color:#fcfcfc; border-radius:4px;}
#allergy-calculator .row {display:flex; flex-wrap:wrap; gap:var(--space); margin:0; padding:0;}
#allergy-calculator .row > * {padding-left:0; padding-right:0;}
#allergy-calculator .reset-link, #allergy-calculator .edit-link {position:absolute; top:10px; right:14px; z-index:5; color:#ff7143; text-decoration:underline; font-weight:600; font-size:14px;}
#allergy-calculator .reset-link:hover, #allergy-calculator .edit-link:hover {text-decoration:none;}

/* ---------- Pills ---------- */
#allergy-calculator .pill-select {margin:8px 0 12px;}
#allergy-calculator .pill-row {display:flex; flex-wrap:wrap; gap:8px;}
#allergy-calculator .pill-btn {border:1px solid var(--chip-border); background:#fff; color:#0f172a; border-radius:999px; padding:6px 10px; font-size:14px; cursor:pointer; transition:background .15s,border-color .15s,color .15s;}
#allergy-calculator .pill-btn.active {background:#193a43; border-color:#193a43; color:#fff; font-weight:600;}
#allergy-calculator .pill-btn:focus {outline:3px solid var(--primary); outline-offset:2px;}

/* ---------- Food cards (extended) ---------- */
#allergy-calculator .food-card .card-head {display:flex; align-items:center; justify-content:space-between; gap:8px;}
#allergy-calculator .food-card .card-head h5 {margin:0;}
#allergy-calculator .remove-food {all:unset; color:#b91c1c; font-weight:700; cursor:pointer; font-size:small;}
#allergy-calculator .remove-food:hover {text-decoration:underline;}
#allergy-calculator input[type="number"], #allergy-calculator select {border:1px solid #dadce0; border-radius:4px; padding:8px; background:#fff; color:var(--ink); min-width:220px;}
#allergy-calculator .food-card .fields-row {display:flex; flex-wrap:wrap; gap:16px;}
#allergy-calculator .food-card .col-intro, #allergy-calculator .food-card .col-exposure, #allergy-calculator .food-card .col-reaction {flex:1 1 220px; min-width:180px;}
#allergy-calculator .food-card input, #allergy-calculator .food-card select {width:100%;}

/* ---------- Overall card ---------- */
#allergy-calculator .overall-card .card-title-row {display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px;}
#allergy-calculator .risk-row {display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:16px; align-items:start;}
#allergy-calculator #why-btn {display:none;}
#allergy-calculator .card .drivers-list {list-style:disc; padding-left:1.25rem; margin:6px 0;}

/* ---------- Product grid ---------- */
#allergy-calculator .product-grid {display:grid; grid-template-columns:repeat(4,minmax(210px,1fr)); gap:18px; align-items:start;}
@media (max-width:1200px){#allergy-calculator .product-grid{grid-template-columns:repeat(3,minmax(220px,1fr));}}
@media (max-width:900px){#allergy-calculator .product-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}}
#allergy-calculator .brand-tile {display:flex; flex-direction:column; height:100%;}
#allergy-calculator .brand-chip {height:18px; line-height:18px; font-size:13px; font-weight:700; color:#111827; margin:0 0 6px 2px;}
#allergy-calculator .brand-chip.placeholder {visibility:hidden;}
#allergy-calculator .brand-tile, #allergy-calculator .product-card {min-width:0;}
#allergy-calculator #formula-rec-card {box-sizing:border-box; overflow:hidden;}
#allergy-calculator .product-card {display:flex; flex-direction:column; height:100%; border:4px solid #f9f9f9; border-radius:4px; background:#f9f9f9; box-shadow:0 1px 2px rgba(16,24,40,.04);}
#allergy-calculator .product-card .img-wrap {height:180px; display:flex; align-items:center; justify-content:center; margin-top:.5rem; background:#fff;}
#allergy-calculator .product-card .img-wrap img {max-height:170px; width:auto; max-width:100%; object-fit:contain;}
#allergy-calculator .product-card .body {display:flex; flex-direction:column; gap:8px; margin-top:10px; min-height:140px; padding:14px; background:#f9f9f9; height:100%;}
#allergy-calculator .product-card .title {font-size:16px; line-height:1.25; font-weight:600; min-height:40px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
#allergy-calculator .product-card .badge-row {display:flex; flex-wrap:wrap; gap:6px; min-height:22px; line-height:inherit; align-self:center; justify-content:center;}
#allergy-calculator .product-card .meta {margin-top:auto; display:block; justify-content:space-between; align-items:center; font-size:12px; color:#6b7280;}

/* ---------- Sidebar nav ---------- */
#calc-side-nav.side-nav ol {list-style:none; margin:0; padding:0 12px 0 0; display:flex; flex-direction:column; gap:10px;}
#calc-side-nav.side-nav a {display:block; padding:8px 10px; border-radius:4px; color:#527073; text-decoration:none; line-height:1.2; font-size:12px; font-weight:500;}
#calc-side-nav.side-nav a:hover {background:#f3f4f6;}
#calc-side-nav.side-nav a.active, #calc-side-nav.side-nav a[aria-current="true"] {background:none; color:#4a694f; font-weight:700;}
@media (max-width:900px){#allergy-calculator .app-main{display:block;} #calc-side-nav.side-nav{position:static; border-right:none; border-bottom:1px solid #e5e7eb; margin-bottom:16px;}}

/* ---------- Deltas ---------- */
#allergy-calculator .driver-delta {margin-left:.35rem; font-weight:700; padding:0; background:transparent; border:0;}
#allergy-calculator .driver-delta.pos {color:#b91c1c;}
#allergy-calculator .driver-delta.neg {color:#047857;}

/* ---------- Sidebar additions ---------- */
#calc-side-nav .side-progress {padding:10px; border-bottom:1px solid var(--border); margin-bottom:12px; text-align:left; background:var(--border); font-size:12px; color:#ff7143; border-radius:4px; font-weight:600;}
#calc-side-nav .side-progress .chip {font-weight:700;}
#calc-side-nav .side-overall {margin-top:12px; padding:12px 0; border-top:1px solid var(--border) !important; border:none; border-radius:0; background:none;}
#calc-side-nav .side-overall-head {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;}
#calc-side-nav .side-overall-metrics {display:flex; flex-direction:column; gap:4px; margin-bottom:8px;}
#calc-side-nav .side-overall .risk-number {font-size:28px; font-weight:600;}
#calc-side-nav .side-overall .risk-bands {font-size:12px; color:var(--muted);}
#calc-side-nav .side-overall .pill {margin-top:4px;}
#calc-side-nav .why {margin-top:8px;}
#calc-side-nav .why-more {display:inline-block; margin-top:8px; font-size:13px; color:#1d4ed8; text-decoration:underline; text-align:center;}
#calc-side-nav .why-more:hover {text-decoration:none;}
#calc-side-nav .side-inner {max-height:calc(100vh - var(--stick-top) - 24px); overflow:auto; padding-right:8px;}

/* ---------- Misc ---------- */
#form-wrap {background:#193a43; padding:12px; border-radius:4px; border:1px solid #eee;}
#allergy-calculator .share-row {display:flex; justify-content:flex-end; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
#allergy-calculator .x-axis span {font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.food-progress {display:flex; justify-content:flex-end; font-size:small; font-weight:600; color:#c49e6b; margin-top:12px;}
.chart-box {border:4px solid #f9f9f9 !important; padding:12px; border-radius:4px;}
.review-count {font-size:12px; color:#535353;}
#risk-level {line-height:1;}




/* ==== Chart layout: y-axis | plot | pager (responsive) ==== */
#allergy-calculator { --y-axis-w: 60px; --pager-w: 0px; --chart-gap: 12px; --chart-cols: 9; }

#allergy-calculator .chart-wrapper{
  display:grid;
  grid-template-columns: var(--y-axis-w) 1fr var(--pager-w);
  align-items:end;
  gap:8px;
  position:relative;
}

/* Blocks sit in the grid columns so labels/bars always align */
#allergy-calculator .y-axis{ grid-column:1; width:var(--y-axis-w); }
#allergy-calculator .chart-container{ grid-column:2; width:100%;
  display:grid; grid-template-columns:repeat(var(--chart-cols),1fr); gap:var(--chart-gap); overflow:hidden;
}
#allergy-calculator .x-axis{ grid-column:2;display:grid; grid-template-columns:repeat(var(--chart-cols),1fr); gap:var(--chart-gap); padding:0;}

/* Pager lives to the RIGHT of the plot (column 3) on small screens */
#chart-pager{
  grid-column:3;
  display:none;           /* JS toggles */
  align-self:center;
  justify-self:end;
  width:36px;             /* used by JS as --pager-w ≈ 36–44px */
  gap:6px;
  flex-direction:column;
}
#chart-pager .chart-page-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827;
  border-radius:6px; padding:6px 0; width:36px; font-weight:700; line-height:1; cursor:pointer;
}
#chart-pager .chart-page-btn:disabled{opacity:.4; cursor:not-allowed;}
/* 24px buttons drawing an 8px dot (target-size); same construction as .rd-dots. */
#chart-pager .chart-dots{display:flex; flex-direction:row; gap:0; align-items:center; justify-content:center;}
#chart-pager .dot{position:relative; flex:0 0 24px; min-width:24px; width:24px; height:24px; border-radius:0; border:0; background:none; padding:0; cursor:pointer;}
#chart-pager .dot::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:#d1d5db;}
#chart-pager .dot.active::before{background:#111827;}

/* Bars & labels small tweaks (unchanged from your theme) */
#allergy-calculator .bar-group{ display:flex; gap:6px; justify-content:center; align-items:flex-end; }
#allergy-calculator .bar{ width:20px; background:var(--bar-current); transition:height .25s ease; position:relative; border-radius:4px; outline:none; }
#allergy-calculator .bar.future{ background:var(--ok); }
#allergy-calculator .bar .label{ position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:11px; background:#fff; padding:2px 4px; border:1px solid var(--border); border-radius:4px; white-space:nowrap; }

/* Breakpoints */
@media (max-width: 1199px){
  #allergy-calculator .x-axis{margin-left:56px; margin-right:50px;}
}

@media (max-width: 899px){
  #allergy-calculator { --y-axis-w: 48px; --chart-gap: 10px; }
  #allergy-calculator .bar{ width:18px; }
  #allergy-calculator .x-axis{margin-left:56px; margin-right:50px;}
      #ic-mobile-message {
        display: block !important;
        background: #fbeecf;
        color: #a07c13;
        font-size: 1.08em;
        font-weight: 600;
        text-align: center;
        border-radius: 8px;
        padding: 18px 14px;
        margin: 0 0 22px 0;
        box-shadow: 0 1px 6px #0001;
    }
}

@media (min-width: 1200px){
  /* Desktop: show all allergens, hide pager, don't reserve space for it */
  #allergy-calculator { --pager-w: 0px; --chart-cols: 9; }
  #chart-pager{ display:none !important; }
}


/* ===== Product grid v2: columns + image sizing + equal-height cards ===== */
/* Columns (no cutoff at 2/3/4) */
#allergy-calculator .product-grid{display:grid; width:100%; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1199.98px){#allergy-calculator .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:990.98px){#allergy-calculator .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){#allergy-calculator .product-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}}

/* Let everything shrink inside cells; no horizontal overflow */
#allergy-calculator .product-card,
#allergy-calculator .brand-tile,
#allergy-calculator .product-card .body,
#allergy-calculator .product-card .badge-row,
#allergy-calculator .product-card .title{min-width:0;}
#allergy-calculator .main-col, #allergy-calculator .card, #formula-rec-card{max-width:100%; overflow-x:hidden;}
#allergy-calculator .main-col { overflow-x: visible; }          /* key line */
#allergy-calculator .results .card,
#allergy-calculator .share-row { overflow: visible; }            /* belt & suspenders */

/* Card frame (flex so content stacks; equal height per row via height:100%) */
#allergy-calculator .product-card{display:flex; flex-direction:column; height:100%; box-sizing:border-box; overflow:hidden; border-radius:4px;}

/* Image area:
   - use aspect-ratio to make the media box scale with card width (fills width)
   - 4:3 on tablets/desktop, 1:1 on small phones
   - no top margin so we don’t introduce blank space */
#allergy-calculator .product-card .img-wrap{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4/3; overflow:hidden; margin:0;}
@media (max-width:600px){#allergy-calculator .product-card .img-wrap{aspect-ratio:1/1;} .title {font-size:13px !important; overflow: visible !important;} #allergy-calculator .product-card .body {padding:12px 4px !important;} .review-count {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}}
#allergy-calculator .product-card .img-wrap img{width:100%; height:100%; object-fit:contain; display:block;}

/* Body/content area: remove artificial tallness; meta sticks to bottom for even heights */
#allergy-calculator .product-card .body{display:flex; flex-direction:column; gap:8px; padding:12px; background:#f9f9f9; min-height:0; height:auto;}
#allergy-calculator .product-card .title{font-size:16px; line-height:1.25; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;}
#allergy-calculator .product-card .badge-row{display:flex; flex-wrap:wrap; gap:6px; min-height:22px; align-self:center; justify-content:center; line-height:inherit;}
#allergy-calculator .product-card .meta{margin-top:auto; font-size:12px; color:#6b7280;}

/* Collapsed summary bar */
#ols-collapsed-summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:10px 0 12px; padding:12px; border:1px solid var(--border); border-radius:4px; background:#fcfcfc;
}
#ols-collapsed-summary{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; padding:10px 12px; margin-bottom:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
}
#ols-collapsed-summary .small{ font-size:.9em; color:#5f6368; }
#ols-collapsed-summary #edit-link{ position:static !important; margin-left:auto; white-space:nowrap; }
#form-wrap{
  transition: max-height 1000ms ease !important;
  will-change: max-height;
}


#ols-edit-link u {
    top: 10px;
    right: 14px;
    z-index: 5;
    color: #ff7143;
    text-decoration: underline;
    font-weight: 600;
    font-size: 14px;
  }

#ic-mobile-message {display: none;}

/* === Unicorn fly‑by === */
#ols-uni-wrap{
  position:fixed;
  left:-260px;
  bottom:8vh;                /* start near bottom-left */
  width:220px; height:160px; /* starting size */
  z-index:2147483647;
  pointer-events:none;
  isolation:isolate;
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,.35))
    drop-shadow(0 4px 10px rgba(0,0,0,.35));
  animation:ols-uni-path 3.8s cubic-bezier(.16,.84,.24,.99) forwards;
}

#ols-uni{
  width:100%; height:100%;
  transform-origin:50% 70%;
  /* jump/bob + gentle banking */
  animation:
    ols-uni-bob 650ms ease-in-out infinite,
    ols-uni-tilt 900ms ease-in-out infinite;
}
#ols-uni img, #ols-uni svg{ width:100%; height:100%; display:block; }

/* --- Sparkles (star bursts, not bubbles) --- */
.ols-uni-spark{
  --sz: 16px;                /* will be overridden per node */
  position:absolute;
  width:var(--sz); height:var(--sz);
  left:32%; top:48%;         /* start behind the flank */
  opacity:0;
  transform:translate(0,0) scale(.6) rotate(0deg);
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.9))
    drop-shadow(0 0 8px rgba(255,200,255,.8));
  /* star shape with a bright core and pastel rim */
  background:
    radial-gradient(circle, #fff 0 38%, #ffdff7 40% 55%, transparent 58%);
  /* 8‑point star */
  clip-path:polygon(
    50% 0%, 58% 34%, 100% 34%, 64% 54%, 76% 100%,
    50% 72%, 24% 100%, 36% 54%, 0% 34%, 42% 34%
  );
  animation:ols-uni-spark 1.25s ease-out forwards;
}

/* variety (size, delay, hue) */
.ols-uni-spark[data-i="0"]{ --sz:18px; animation-delay:.10s; filter:hue-rotate(0deg)    drop-shadow(0 0 10px rgba(255,230,255,.8));}
.ols-uni-spark[data-i="1"]{ --sz:14px; animation-delay:.28s; filter:hue-rotate(25deg)   drop-shadow(0 0 10px rgba(255,238,210,.8));}
.ols-uni-spark[data-i="2"]{ --sz:20px; animation-delay:.42s; filter:hue-rotate(300deg)  drop-shadow(0 0 10px rgba(220,235,255,.8));}
.ols-uni-spark[data-i="3"]{ --sz:16px; animation-delay:.58s; filter:hue-rotate(60deg)   drop-shadow(0 0 10px rgba(220,255,235,.8));}
.ols-uni-spark[data-i="4"]{ --sz:12px; animation-delay:.74s; }
.ols-uni-spark[data-i="5"]{ --sz:15px; animation-delay:.90s; }
.ols-uni-spark[data-i="6"]{ --sz:13px; animation-delay:1.02s;}
.ols-uni-spark[data-i="7"]{ --sz:17px; animation-delay:1.14s;}
.ols-uni-spark[data-i="8"]{ --sz:11px; animation-delay:1.26s;}

@keyframes ols-uni-path{
  /* Climb ~60vh while crossing the viewport */
  0%   { transform:translateX(0)          translateY(0)      scale(.85)  rotate(0deg); }
  22%  { transform:translateX(26vw)       translateY(-14vh)  scale(.98)  rotate(-2deg); }
  44%  { transform:translateX(52vw)       translateY(-30vh)  scale(1.12) rotate(-3deg); }
  72%  { transform:translateX(78vw)       translateY(-47vh)  scale(1.28) rotate(-4deg); }
  100% { transform:translateX(calc(100vw + 360px)) translateY(-60vh) scale(1.42) rotate(-5deg); }
}
@keyframes ols-uni-bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-12px) }
}
@keyframes ols-uni-tilt{
  0%,100%{ rotate:0deg }
  50%    { rotate:-4deg }
}
@keyframes ols-uni-spark{
  0%   { opacity:0; transform:translate(-6px,  0px)  scale(.6)  rotate(0deg); }
  18%  { opacity:1; }
  80%  { opacity:.95; }
  /* drift left/up faster than the unicorn to feel like a trailing burst */
  100% { opacity:0; transform:translate(-150px, -60px) scale(1.45) rotate(160deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #ols-uni-wrap{ animation:none; left:12px; bottom:12vh; }
  #ols-uni{ animation:none; }
  .ols-uni-spark{ display:none; }
}

/* Fixed wrapper lives on <body>, never gets clipped */
  #ols-uni-peek-wrap{
    position:fixed; inset:0; width:0; height:0;
    pointer-events:none; overflow:visible;
    z-index:2147483647;
  }

  /* The unicorn: a DIV with background-image (safe from global img rules) */
  #ols-uni-peek-sprite{
    position:absolute; left:0; top:0;
    width:86px; height:68px;            /* visible size */
    background-repeat:no-repeat; background-size:contain; background-position:center;
    opacity:0;                          /* JS animates to 1 */
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,.98))
      drop-shadow(0 0 10px rgba(255,255,255,.85));
    will-change: transform, opacity;
  }

  /* tiny debug dot (first run only) */
  #ols-uni-peek-dot{
    position:absolute; width:8px; height:8px; border-radius:50%;
    background:#e11d48; box-shadow:0 0 0 2px rgba(255,255,255,.9);
    opacity:.9; transform:translate(-50%,-50%);
  }

  @media (prefers-reduced-motion: reduce){
    #ols-uni-peek-sprite{ transition:none !important; animation:none !important; }
  }