html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Tailwind CDN loads after the browser's UA stylesheet, so a `display` utility
   class (grid/flex/block...) on the same element beats the `hidden` attribute
   unless we re-assert it here. */
[hidden] { display: none !important; }
body { background: #F5F9FE; }
::selection { background: #A8D9FF; }
:focus-visible { outline: 3px solid #1B5FBE; outline-offset: 2px; }
.font-serif { font-optical-sizing: auto; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Choice cards (radio + checkbox) */
.opt > input:checked + .opt-body { border-color: #1B5FBE; background: #EAF6FF; }
.opt > input:focus-visible + .opt-body { outline: 2px solid #0F1E36; outline-offset: 2px; }
.opt .dot { background: #fff; }
.opt > input:checked + .opt-body .dot { border-color: #1A4FA3; background: #1A4FA3; box-shadow: inset 0 0 0 3px #EAF6FF; }
.opt .box svg { opacity: 0; }
.opt > input:checked + .opt-body .box { border-color: #1A4FA3; background: #1A4FA3; }
.opt > input:checked + .opt-body .box svg { opacity: 1; }

/* Fulfilment bar: shrink on scroll so it stays prominent but light */
.fbar.compact .sub { display: none; }
@media (max-width: 1023px) { .fbar.compact .ctx { display: none; } }

@keyframes owp-fade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes owp-up    { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes owp-right { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes owp-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.fade-in     { animation: owp-fade .2s var(--ease-out); }
.slide-up    { animation: owp-up .42s var(--ease-sheet); }
/* the toast moves with `translate`, not `transform`: Tailwind's -translate-x-1/2 centres it with `transform`, and a keyframe on `transform`
   replaced that centring while it ran, so it came in half a width to the right and jumped back at the end. It comes in as a transition
   from @starting-style (so a toast that is called back while it leaves turns round from where it is), where the browser has that. */
#owp-toast { opacity: 1; translate: 0 0; transition: opacity .26s var(--ease-out), translate .26s var(--ease-out); }
@starting-style { #owp-toast { opacity: 0; translate: 0 16px; } }
#owp-toast[data-leaving] { opacity: 0; translate: 0 8px; transition: opacity .16s var(--ease-out), translate .16s var(--ease-out); }
.slide-right { animation: owp-right .4s var(--ease-sheet); }
/* A sheet or drawer leaves the way it came, in 0.2s (openDialog's close in app.js sets data-leaving). While it goes it is no longer a
   dialog, ignores touches, and the page behind is usable at once. */
@media (prefers-reduced-motion: no-preference) {
  [data-leaving].fade-in { animation: none !important; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out); }
  [data-leaving] > .slide-up { animation: none !important; translate: 0 100% !important; transition: translate .2s var(--ease-out) !important; }
  [data-leaving] > .slide-right { animation: none !important; translate: 100% 0 !important; transition: translate .2s var(--ease-out) !important; }
  @media (min-width: 640px) { [data-leaving] > .slide-up { translate: 0 16px !important; } }
}
.float-soft  { animation: owp-float 6s ease-in-out infinite; }

/* "Less motion" means less movement, not none: nothing slides, scales, loops or smooth-scrolls, but a fade or a colour change can still
   say that something changed. Only opacity and colour may transition (0.15s), and the entrances that slid in now just fade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-duration: .15s !important; transition-delay: 0s !important; transition-timing-function: ease !important; }
  .fade-in, .slide-up, .slide-right { animation: owp-fade .2s ease !important; }
}

/* ---------- Brand wordmark (matches the logo's bold navy capitals) ---------- */
.wordmark { font-family: 'Open Sans', Inter, system-ui, sans-serif; font-weight: 800; color: #1A4FA3; text-transform: uppercase; line-height: 1.02; letter-spacing: .005em; }

/* ---------- Welcome intro (once per device; assets/pages/index.js) ---------- */
#intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, #15408A 0%, #0C2A5E 55%, #081C42 100%); transition: opacity .6s ease, visibility .6s ease; cursor: pointer; }
#intro.out { opacity: 0; visibility: hidden; }
#intro .in { text-align: center; padding: 24px; }
#intro img { width: min(78vw, 420px); height: auto; opacity: 0; transform: scale(.92); animation: intro-logo 1s .15s var(--ease-reveal) forwards; filter: drop-shadow(0 12px 40px rgba(32,174,255,.45)); }
#intro .bar { width: 140px; height: 3px; margin: 30px auto 0; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#intro .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #20AEFF, #A8D9FF); transform: translateX(-100%); animation: intro-bar 1.9s .3s ease-in-out forwards; }
#intro p { margin-top: 14px; font: 500 12px/1 Inter, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; animation: owp-fade .6s 1.1s forwards; }
@keyframes intro-logo { to { opacity: 1; transform: none; } }
@keyframes intro-bar { to { transform: none; } }

@keyframes spin { to { transform: rotate(360deg); } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--ease-reveal); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Accessibility: larger text / higher contrast (toggle in the top bar) ----------
   Most of this site's text uses fixed pixel sizes (Tailwind arbitrary values), so a root
   font-size change alone wouldn't reach most of it. `zoom` scales the whole rendered page —
   text, icons, spacing together — which works in Chromium and Safari; Firefox quietly ignores
   it (no crash, just no zoom), which is an accepted trade-off here, not a bug. */
html.a11y-large { zoom: 1.15; }
html.a11y-contrast .text-ink-soft, html.a11y-contrast .text-ink-faint { color: #000 !important; }
html.a11y-contrast .text-white\/50, html.a11y-contrast .text-white\/60, html.a11y-contrast .text-white\/70,
html.a11y-contrast .text-white\/75, html.a11y-contrast .text-white\/80, html.a11y-contrast .text-white\/85 { color: #fff !important; }
html.a11y-contrast .border-line, html.a11y-contrast .ring-line { border-color: #000 !important; }
html.a11y-contrast a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Staff dashboard ---------- */
.chart-tip { pointer-events: none; opacity: 0; transition: opacity .12s ease; transform: translateY(-4px); white-space: nowrap; z-index: 5; }
.chart-tip.on { opacity: 1; }
[data-hit] { cursor: crosshair; }
/* the chosen page is a soft tint of the brand blue, as in an Apple sidebar (and a solid pill in the phone's strip) */
.dash-nav[aria-current="page"] { background: rgba(27, 95, 190, .11); color: #123F85; }
.dash-nav[aria-current="page"] svg { color: #1B5FBE; }
.dash-tab[aria-current="page"] { background: #1B5FBE; color: #fff; border-color: #1B5FBE; }
/* ==========================================================================
   The premium look: the home page's "Two Doors" hero (Shop | Care), the Shop side
   (warm, retail: shop and product pages) and the Care side (clinical and calm:
   prescriptions and services). Motion only ever moves or fades things (transform and
   opacity), so it stays smooth on phones; prefers-reduced-motion switches it all off.
   ========================================================================== */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Apple's way of moving: a strong ease-out for anything that answers a touch, and the curve of
     an iPhone sheet for anything that slides in. Nothing here starts slowly. */
  --ease-out: var(--ease); /* one curve, two names: --ease is the older one */
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  /* every other curve the page uses, named once (the hero's waves, the scroll reveal, and the three that overshoot) */
  --ease-wave: cubic-bezier(.1, .7, .3, 1);
  --ease-wave-2: cubic-bezier(.16, .84, .3, 1);
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-pop: cubic-bezier(.2, .9, .25, 1.25);
  --ease-bounce: cubic-bezier(.3, 1.5, .5, 1);
  --ease-turn: cubic-bezier(.34, 1.3, .5, 1);
  --dur-press: .16s;
  --dur-ui: .24s;
  /* The display face: San Francisco on Apple's devices, Inter on the rest (tailwind.config.js) */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --hairline: rgba(15, 30, 54, .09);
}

/* ---------- Day and night ----------
   assets/sky.js works out sunrise and sunset over Oswaldtwistle and sets
   <html data-sky="day|night"> before the page is drawn. By day the two sides wear
   Lilac & Sky; from sunset to sunrise, Midnight & Mist (the Shop in the deep brand blue of
   the old home page hero, with gold, and a misty Care with navy). With no script it simply stays day. Every colour below
   comes from these tokens, so the switch at sunset is one attribute. */
:root, [data-sky="day"] {
  /* Night's blue is the old home page hero's: brand 800 to 950, lit by its three soft glows.
     Defined all day too, so the Shop door can fade both ways at sunset and sunrise. */
  --night-blue: linear-gradient(135deg, #15408A 0%, #0C2A5E 50%, #081C42 100%);
  --night-glow: radial-gradient(circle 380px at 96% 0%, rgba(22,144,240,.55), rgba(22,144,240,0)), radial-gradient(circle 260px at 52% 16%, rgba(27,95,190,.5), rgba(27,95,190,0)), radial-gradient(circle 320px at 0% 100%, rgba(32,174,255,.3), rgba(32,174,255,0));
  --shop-bg: #FBFAFE; --shop-ink: #2A2160; --shop-eyebrow: #6249AD; --shop-accent: #7B5CC7; --shop-copy: #5A5378;
  --shop-btn: #2A2160; --shop-btn-ink: #F8F5FD; --shop-btn-hover: #3A2F7A; --shop-btn-shadow: rgba(42,33,96,.6);
  --shop-line: rgba(42,33,96,.2); --shop-line-hover: rgba(42,33,96,.45); --shop-glass: rgba(255,255,255,.5); --shop-glass-hover: rgba(255,255,255,.8);
  --shop-chip: rgba(255,255,255,.6); --shop-chip-line: rgba(42,33,96,.1); --shop-chip-hover: #fff; --shop-chip-line-hover: rgba(42,33,96,.3);
  --shop-solid: #2A2160; --shop-solid-hover: #3A2F7A; --deal-bg: #fff; --deal-ink: #6B52B5;
  --shop-head-bg: radial-gradient(120% 140% at 85% 100%, #FAF8FE 0%, #ECE6F8 55%, #E2D9F4 100%); --shop-head-ink: #2A2160;
  --shop-floor: rgba(70,50,130,.28);
  --pk-lid: linear-gradient(90deg, #9E8BCB, #E4DBF6 40%, #C2B3E3 75%, #8E7ABF);
  --pk-jar: linear-gradient(90deg, #D6D3DE, #FFFFFF 35%, #F4F2F9 65%, #CBC6D8); --pk-jar-ink: #2A2160;
  --pk-cap: linear-gradient(90deg, #2A2160, #4A3F8E 40%, #2A2160 62%, #1B1545);
  --pk-tube-cap: linear-gradient(90deg, #221A50, #5A4BA8 40%, #3A2F7A 70%, #221A50); --pk-tube-ink: #2A2160;
  --pk-glass: linear-gradient(90deg, rgba(185,170,225,.92), rgba(246,243,253,.98) 36%, rgba(215,205,240,.94) 70%, rgba(165,150,210,.92));
  --care-bg: #F7FAFF; --care-ink: #13296B; --care-eyebrow: #3555C9; --care-copy: #3E4C70; --care-icon: #3555C9;
  --care-btn: #2747B8; --care-btn-hover: #1F3A9A; --care-btn-shadow: rgba(39,71,184,.8); --care-line: #CBD7F2; --care-underline: rgba(19,41,107,.3);
  --care-door: linear-gradient(180deg, #F7FAFF 0%, #E7EFFF 100%); --care-grid: rgba(53,85,201,.05);
  --care-hero: linear-gradient(180deg, #EDF2FF 0%, rgba(247,250,255,0) 100%);
  --ring: rgba(123,92,199,.45); --spin: rgba(32,174,255,.75);
}
[data-sky="night"] {
  --shop-bg: #F7FAFE; --shop-ink: #FFFFFF; --shop-eyebrow: #E3C48F; --shop-accent: #E3C48F; --shop-copy: rgba(255,255,255,.74);
  --shop-btn: #E3C48F; --shop-btn-ink: #0C2A5E; --shop-btn-hover: #EED6A9; --shop-btn-shadow: rgba(227,196,143,.55);
  --shop-line: rgba(255,255,255,.32); --shop-line-hover: rgba(255,255,255,.6); --shop-glass: rgba(255,255,255,0); --shop-glass-hover: rgba(255,255,255,.08);
  --shop-chip: rgba(255,255,255,.08); --shop-chip-line: rgba(255,255,255,.18); --shop-chip-hover: rgba(255,255,255,.16); --shop-chip-line-hover: rgba(255,255,255,.4);
  --shop-solid: #0C2A5E; --shop-solid-hover: #15408A; --deal-bg: #F4E8CF; --deal-ink: #0C2A5E;
  --shop-head-bg: var(--night-glow), var(--night-blue); --shop-head-ink: #FFFFFF;
  --shop-floor: rgba(3,12,34,.55);
  --pk-lid: linear-gradient(90deg, #B8914E, #F1D9A6 40%, #D9BC85 75%, #A9823F);
  --pk-jar: linear-gradient(90deg, #D8D0C0, #FFFFFF 35%, #F3EEE4 65%, #C9BFAD); --pk-jar-ink: #0C2A5E;
  --pk-cap: linear-gradient(90deg, #A9823F, #F1D9A6 42%, #C9A564 64%, #8E6A2E);
  --pk-tube-cap: linear-gradient(90deg, #8E6A2E, #F1D9A6 42%, #B8914E 70%, #8E6A2E); --pk-tube-ink: #0C2A5E;
  --pk-glass: linear-gradient(90deg, rgba(165,190,214,.95), rgba(244,248,252,.98) 36%, rgba(206,222,238,.95) 70%, rgba(150,176,202,.95));
  --care-bg: #F7FAFE; --care-ink: #0C2A5E; --care-eyebrow: #1B5FBE; --care-copy: #3C4F6B; --care-icon: #1B5FBE;
  --care-btn: #0C2A5E; --care-btn-hover: #15408A; --care-btn-shadow: rgba(12,42,94,.7); --care-line: #C9D6E8; --care-underline: rgba(12,42,94,.3);
  --care-door: linear-gradient(180deg, #F7FAFE 0%, #E9F1FB 100%); --care-grid: rgba(12,42,94,.045);
  --care-hero: linear-gradient(180deg, #E9F1FB 0%, rgba(247,250,254,0) 100%);
  --ring: rgba(227,196,143,.6); --spin: rgba(227,196,143,.85);
}
/* The strip along the top of every page wears the hero's colours: by day the lilac of the
   Shop door blending into the sky of the Care door; at night the hero blue with its glow. */
:root, [data-sky="day"] {
  --top-bg: linear-gradient(90deg, #E6DEF6 0%, #EEEAFA 46%, #EAF1FF 54%, #E1EBFF 100%); --top-ink: #1F2557; --top-sep: rgba(31,37,87,.25);
  --top-hover: rgba(31,37,87,.07); --top-on: rgba(31,37,87,.12);
}
[data-sky="night"] {
  --top-bg: radial-gradient(40% 320% at 94% 0%, rgba(22,144,240,.5), rgba(22,144,240,0)), radial-gradient(30% 260% at 48% 0%, rgba(27,95,190,.45), rgba(27,95,190,0)), linear-gradient(90deg, #15408A 0%, #0C2A5E 52%, #081C42 100%);
  --top-ink: #FFFFFF; --top-sep: rgba(255,255,255,.35); --top-hover: rgba(255,255,255,.1); --top-on: rgba(255,255,255,.16);
}
.top-bar { background: var(--top-bg); color: var(--top-ink); }
.top-bar .top-sep { color: var(--top-sep); }
.top-bar .top-btn { position: relative; transition: background-color .2s ease; }
@media (pointer: coarse) { .top-bar .top-btn::after { content: ''; position: absolute; inset: -10px; } } /* 44px to the finger, 24px to the eye */
.top-bar .top-btn:hover { background: var(--top-hover); }
.top-bar .top-btn.on { background: var(--top-on); }
[data-sky="night"] .top-bar .live-dot.off { background: rgba(255,255,255,.45); }

/* Words that only belong to one of them ("Late night", "After hours") */
[data-sky="night"] .sky-day, :root:not([data-sky="night"]) .sky-night { display: none; }

body.side-shop { background: var(--shop-bg); }
body.side-care { background: var(--care-bg); }

/* Shared pill buttons */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: 0 1.5rem; border-radius: 9999px; font-weight: 600; font-size: 16px; line-height: 1.2; transition: transform .25s var(--ease), box-shadow .25s ease, background-color .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; }
.btn-pill:active { transform: scale(.97); }
.btn-pill .arr { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn-pill:hover .arr { transform: translateX(3px); } }
.btn-shop { background: var(--shop-btn); color: var(--shop-btn-ink); box-shadow: 0 12px 28px -14px var(--shop-btn-shadow); }
.btn-shop:hover { background: var(--shop-btn-hover); }
.btn-shop-ghost { border: 1px solid var(--shop-line); color: var(--shop-ink); background: var(--shop-glass); }
.btn-shop-ghost:hover { border-color: var(--shop-line-hover); background: var(--shop-glass-hover); }
/* Solid Shop buttons on white (the basket button, a product card's round "add") */
.btn-shop-solid, .pcard-add { background: var(--shop-solid); color: #fff; }
.btn-shop-solid:hover, .pcard-add:hover { background: var(--shop-solid-hover); }
.btn-shop-solid [data-basket-count] { background: #fff; color: var(--shop-solid); }
.deal-badge { background: var(--deal-bg); color: var(--deal-ink); }
.btn-care { background: var(--care-btn); color: #fff; box-shadow: 0 12px 26px -14px var(--care-btn-shadow); }
.btn-care:hover { background: var(--care-btn-hover); }
.btn-care-ghost { border: 1px solid var(--care-line); color: var(--care-ink); background: rgba(255,255,255,.7); }
.btn-care-ghost:hover { border-color: var(--care-btn); background: #fff; }

/* Entrance: children marked data-rise come up in order (--d) once the page is ready */
[data-rise] { opacity: 0; transform: translateY(22px); animation: rise-in .95s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 120ms + var(--intro, 0s)); }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* ---------- Two Doors ---------- */
.doors { position: relative; isolation: isolate; }
.doors-row { position: relative; display: flex; flex-direction: column; }
.door { position: relative; overflow: hidden; flex: none; min-width: 0; }
.door-shop { background: radial-gradient(130% 90% at 82% 92%, #FAF8FE 0%, #ECE6F8 52%, #DCD2F1 100%); color: var(--shop-ink); }
/* After sunset the Shop door turns night blue: a layer over the lilac that fades in,
   so if the page is open at sunset it dims like the sky rather than flicking over. */
.door-shop::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(1.5px 1.5px at 14% 18%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 31% 9%, rgba(255,255,255,.45), transparent), radial-gradient(1.5px 1.5px at 58% 14%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 77% 7%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 90% 24%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 46% 30%, rgba(255,255,255,.3), transparent),
    var(--night-glow), var(--night-blue); }
/* and the old hero's faint grid */
.door-shop::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%); }
[data-sky="night"] .door-shop::before, [data-sky="night"] .door-shop::after { opacity: 1; }
.door-shop .door-eyebrow, .door-shop .door-word, .door-shop .door-copy, .door-chips a { transition: color 1.2s ease, background-color .2s ease, box-shadow .2s ease; }
.door-care { background: var(--care-door); color: var(--care-ink); }
.door-care::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--care-grid) 1px, transparent 1px), linear-gradient(90deg, var(--care-grid) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(90% 80% at 70% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(90% 80% at 70% 40%, #000 20%, transparent 80%); pointer-events: none; }
.door-body { position: relative; z-index: 2; padding: 96px 22px 44px; }
.door-care .door-body { padding-top: 64px; padding-bottom: 52px; }
.door-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.door-shop .door-eyebrow { color: var(--shop-eyebrow); }
.door-care .door-eyebrow { color: var(--care-eyebrow); }
.door-word { margin-top: 8px; font-size: clamp(62px, 21vw, 92px); line-height: .9; }
.door-shop .door-word { font-family: var(--font-display); font-weight: 600; letter-spacing: -.065em; }
.door-shop .door-word .dot { color: var(--shop-accent); }
.door-care .door-word { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -.065em; }
.door-care .door-word .dot { color: #20AEFF; }
/* After dark: "Late night" over Shop, "After hours" over Care */
.door-pre { display: block; margin-bottom: .1em; font-size: .4em; line-height: 1.05; }
.door-shop .door-pre { letter-spacing: -.045em; color: var(--shop-accent); }
.door-care .door-pre { letter-spacing: -.045em; color: var(--care-eyebrow); }
.door-copy { margin-top: 16px; max-width: 30rem; font-size: 16px; line-height: 1.6; }
.door-shop .door-copy { color: var(--shop-copy); }
.door-care .door-copy { color: var(--care-copy); }
.door-ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 639px) {
  .door-ctas .btn-pill { flex: 1 1 100%; }
  /* on a phone the still life sits top right: the Shop eyebrow wraps before the bottle */
  .door-shop .door-eyebrow { max-width: calc(100% + 10px - min(28% + 12px, 147px)); }
}
.door-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.door-chips a { padding: 9px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500; background: var(--shop-chip); box-shadow: inset 0 0 0 1px var(--shop-chip-line); }
.door-chips a:hover { background: var(--shop-chip-hover); box-shadow: inset 0 0 0 1px var(--shop-chip-line-hover); }
.door-list { margin-top: 20px; display: grid; gap: 11px; font-size: 15px; color: #0F1E36; }
.door-list li { display: flex; align-items: flex-start; gap: 11px; }
.door-list svg { flex: none; margin-top: 1px; color: var(--care-icon); }
.door-list a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--care-underline); }
.door-list a:hover { text-decoration-color: currentColor; }
.door-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--care-underline); }
/* When the pharmacy is closed: where to get help now */
.door-urgent { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; max-width: 30rem; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--care-line); font-size: 14px; line-height: 1.5; color: #0F1E36; }
.door-urgent svg { flex: none; margin-top: 1px; color: var(--care-icon); }
.door-urgent a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.door-link:hover { text-decoration-color: currentColor; }

/* The top line: name (the page's h1) and live opening status */
.doors-top { position: absolute; z-index: 7; top: 18px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.doors-top > div { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 14px 7px 8px; border-radius: 9999px; background: rgba(255,255,255,.72); box-shadow: 0 1px 2px rgba(15,30,54,.06), 0 10px 30px -14px rgba(15,30,54,.35); font-size: 13px; color: #24324A; }
.doors-top img { width: 26px; height: 26px; }
.doors-top h1 { font-weight: 600; color: #0F1E36; white-space: nowrap; }
.doors-top .status { white-space: nowrap; }
@media (max-width: 639px) { .doors-top .status, .doors-top .sep { display: none; } }
[data-sky="night"] .doors-top > div { background: rgba(255,255,255,.88); }
.doors-top .sep { width: 1px; height: 14px; background: rgba(15,30,54,.15); }
/* The day/night switch in the home page's pill (assets/sky.js remembers the choice). */
.sky-switch { position: relative; flex: none; width: 46px; height: 26px; margin-left: 2px; border-radius: 9999px; background: #DDE6F3; box-shadow: inset 0 0 0 1px rgba(15,30,54,.08); cursor: pointer; transition: background .25s ease; }
.sky-switch:focus-visible { outline: 2px solid #1B5FBE; outline-offset: 2px; }
.sky-switch-thumb { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 9999px; background: #fff; color: #C98A12; box-shadow: 0 1px 3px rgba(15,30,54,.25); transition: transform .25s var(--ease-out), background .25s ease, color .25s ease; }
.sky-switch-thumb svg { width: 13px; height: 13px; }
.sky-switch .sky-moon, [data-sky="night"] .sky-switch .sky-sun { display: none; }
[data-sky="night"] .sky-switch .sky-moon { display: block; }
[data-sky="night"] .sky-switch { background: #0C2A5E; }
[data-sky="night"] .sky-switch-thumb { transform: translateX(20px); background: #E3C48F; color: #0C2A5E; }
@media (prefers-reduced-motion: reduce) { .sky-switch, .sky-switch-thumb { transition: none; } }
.live-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 9999px; background: #2BB673; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: live-ping 1.8s ease-out infinite; }
.live-dot.off { background: #9AA6B5; }
.live-dot.off::after { display: none; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }

/* The seam between the doors, with the logo on it */
.seam { position: relative; z-index: 6; flex: 0 0 0; }
.seam::before { content: ''; position: absolute; left: 6%; right: 6%; top: -1px; height: 2px; background: linear-gradient(90deg, rgba(15,30,54,0), rgba(15,30,54,.13) 25%, rgba(15,30,54,.13) 75%, rgba(15,30,54,0)); }
/* The medallion: the pharmacy's logo, on the seam. At rest two lines (blue and purple by day,
   gold and mist at night) chase each other round it, one a little quicker than the other; one
   soft ring breathes out from it every few seconds and a fine dial of dots turns very slowly.
   With a mouse it leans a little towards the pointer and a sheen follows it; pressed, it gives,
   the cross turns once, rings burst and a wave of light crosses both doors
   (assets/pages/index-2.js). Only transform and opacity move, and it all pauses when the
   hero is off screen; reduced motion switches it off. */
.medallion { --md-a: #7B5CC7; --md-b: #20AEFF; --chase-1: rgba(32,174,255,.8); --chase-2: rgba(123,92,199,.75); position: absolute; top: 0; right: 28px; width: 76px; height: 76px; margin-top: -38px; border-radius: 9999px; background: #fff; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 2px 4px rgba(15,30,54,.08), 0 22px 44px -18px rgba(15,30,54,.5), inset 0 0 0 1px rgba(15,30,54,.04);
  transform: perspective(520px) rotateX(var(--mtx, 0deg)) rotateY(var(--mty, 0deg)) scale(var(--ms, 1)); translate: var(--mmx, 0px) var(--mmy, 0px);
  transition: transform .8s var(--ease), translate .8s var(--ease), scale .5s var(--ease); }
[data-sky="night"] .medallion { --md-a: #E3C48F; --md-b: #9CC9F5; --chase-1: rgba(227,196,143,.9); --chase-2: rgba(156,201,245,.85); }
.medallion img { position: relative; z-index: 2; width: 64%; height: auto; transition: transform .8s var(--ease); pointer-events: none; -webkit-user-drag: none; }
/* the two lines chasing each other round it: one a little quicker, so it keeps catching up */
.medallion::before, .medallion::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; pointer-events: none; -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.medallion::before { background: conic-gradient(from 0deg, transparent 0deg, var(--chase-1) 70deg, transparent 150deg); animation: spin 4s linear infinite; }
.medallion::after { background: conic-gradient(from 0deg, transparent 0deg, var(--chase-2) 70deg, transparent 150deg); rotate: 180deg; animation: spin 5.6s linear infinite; }
/* one soft ring, breathing out every few seconds */
.md-wave { position: absolute; inset: 0; border-radius: 9999px; border: 1.5px solid var(--ring); opacity: 0; pointer-events: none; animation: md-wave 8s var(--ease-soft) infinite; }
@keyframes md-wave { 0% { transform: scale(1); opacity: .4; } 45%, 100% { transform: scale(1.7); opacity: 0; } }
/* the dial: sixty fine dots, turning very slowly */
.md-dial { position: absolute; inset: -17px; width: calc(100% + 34px); height: calc(100% + 34px); overflow: visible; pointer-events: none; animation: spin 120s linear infinite reverse; }
.md-dial circle { fill: none; stroke: var(--ring); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .01 2; opacity: .8; }
/* a sheen that follows the pointer across the face */
.md-glint { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 32%) var(--gy, 26%), color-mix(in srgb, var(--md-b) 26%, transparent), transparent 58%); opacity: .55; transition: opacity .4s ease; }
.medallion:hover .md-glint { opacity: 1; }
/* pressed: it gives, springs back, and the cross turns once */
.medallion.md-tap { animation: md-press .75s var(--ease-bounce); }
.medallion.md-tap img { animation: md-turn .95s var(--ease-turn); }
@keyframes md-press { 0% { scale: 1; } 22% { scale: .9; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes md-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
.md-burst { position: absolute; inset: 0; border-radius: 9999px; border: 2px solid var(--spin); pointer-events: none; animation: md-burst 1s var(--ease-wave) forwards; }
@keyframes md-burst { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
/* the wave of light across both doors: a soft band of the brand blue (gold at night) */
.doors-wave { --wave: #20AEFF; position: absolute; border-radius: 9999px; pointer-events: none; background: radial-gradient(closest-side, transparent 66%, color-mix(in srgb, var(--wave) 30%, transparent) 76%, color-mix(in srgb, var(--wave) 10%, transparent) 86%, transparent 96%); transform: scale(.04); opacity: 0; animation: doors-wave 1.6s var(--ease-wave-2) forwards; }
[data-sky="night"] .doors-wave { --wave: #E3C48F; }
@keyframes doors-wave { 0% { transform: scale(.04); opacity: 1; } 70% { opacity: .55; } 100% { transform: scale(1); opacity: 0; } }
/* off screen: everything holds still */
.doors.md-still .medallion, .doors.md-still .medallion *, .doors.md-still .medallion::before, .doors.md-still .medallion::after, .doors.md-still .pk-in { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .md-wave, .md-burst, .doors-wave { display: none; } }

/* The product still life on the Shop door: drawn, not photographed */
.still { position: absolute; z-index: 1; right: 4px; top: 76px; width: 44%; max-width: 230px; aspect-ratio: 1; container-type: inline-size; pointer-events: none; }
.still-floor { position: absolute; left: 4%; right: 4%; top: 78%; height: 16cqw; border-radius: 50%; background: radial-gradient(closest-side, var(--shop-floor), transparent); }
/* At night a warm spotlight falls on the shelf */
.still::before { content: ''; position: absolute; left: -30%; right: -30%; top: -20%; bottom: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,196,143,.26), rgba(227,196,143,0)); opacity: 0; transition: opacity 1.6s ease; }
[data-sky="night"] .still::before { opacity: 1; }
.pk { position: absolute; }
/* a slow, small float: each bottle on its own long beat, so nothing jostles */
.pk-in { position: relative; width: 100%; height: 100%; animation: pk-float calc(var(--t, 7s) * 2) ease-in-out var(--w, 0s) infinite; }
@keyframes pk-float { 0%, 100% { transform: translateY(0) rotate(calc(var(--r, 0deg) * .5)); } 50% { transform: translateY(-1.6cqw) rotate(calc(var(--r, 0deg) * -.5)); } }
.pk i, .pk b { position: absolute; display: block; font-style: normal; }
/* amber vitamin bottle */
.pk-bottle { left: 36%; top: 6%; width: 23cqw; height: 66cqw; --z: 16; --t: 7s; }
.pk-bottle .cap { left: 17%; top: 0; width: 66%; height: 12cqw; border-radius: 2.4cqw; background: var(--pk-cap); }
.pk-bottle .body { left: 0; top: 10.5cqw; width: 100%; height: 55.5cqw; border-radius: 8cqw 8cqw 5cqw 5cqw; background: linear-gradient(90deg, #6A340B 0%, #B66A1A 22%, #E7A04A 42%, #C27420 62%, #7C3F0E 100%); box-shadow: 0 6cqw 10cqw -5cqw rgba(90,45,10,.55); }
.pk-bottle .label { left: 0; top: 25cqw; width: 100%; height: 21cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(90deg, #DCD4C8 0%, #FFFFFF 22%, #FFFFFF 70%, #D7CFC2 100%); font: 700 3.5cqw/1.15 Inter, sans-serif; color: #3B2410; }
.pk-bottle .label small { display: block; margin-top: .6cqw; font-weight: 500; font-size: 2.5cqw; color: #7A6450; }
.pk-bottle .shine { left: 15%; top: 16cqw; width: 2.4cqw; height: 46cqw; border-radius: 2cqw; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.04)); }
/* sun cream tube, standing on its cap */
.pk-tube { left: 63%; top: 20%; width: 18cqw; height: 58cqw; --z: 24; --t: 8s; --w: -1.2s; --r: 2deg; }
.pk-tube .crimp { left: 0; top: 0; width: 100%; height: 3cqw; border-radius: .8cqw; background: repeating-linear-gradient(90deg, #E2E8EF 0 .8cqw, #F8FAFC .8cqw 1.6cqw); }
.pk-tube .body { left: 0; top: 2.7cqw; width: 100%; height: 43cqw; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); background: linear-gradient(90deg, #D6DEE8 0%, #FFFFFF 30%, #FFFFFF 62%, #CDD6E1 100%); display: flex; flex-direction: column; align-items: center; padding-top: 12cqw; box-sizing: border-box; font: 800 4.6cqw/1 Inter, sans-serif; letter-spacing: -.03em; color: var(--pk-tube-ink); }
.pk-tube .body small { font-weight: 500; font-size: 1.8cqw; letter-spacing: .22em; color: #4A5B72; margin-bottom: 1cqw; }
.pk-tube .cap { left: 18%; top: 45cqw; width: 64%; height: 13cqw; border-radius: 2cqw 2cqw 2.6cqw 2.6cqw; background: var(--pk-tube-cap); }
/* balm jar */
.pk-jar { left: 4%; top: 49%; width: 38cqw; height: 28cqw; --z: 30; --t: 9s; --w: -2.5s; }
.pk-jar .lid { left: 0; top: 0; width: 100%; height: 9cqw; border-radius: 3cqw; background: var(--pk-lid); box-shadow: inset 0 -.7cqw 0 rgba(0,0,0,.08); }
.pk-jar .body { left: 2%; top: 8cqw; width: 96%; height: 20cqw; border-radius: 0 0 5cqw 5cqw; background: var(--pk-jar); display: flex; align-items: center; justify-content: center; font: 600 2.9cqw/1.2 Inter, sans-serif; color: var(--pk-jar-ink); box-shadow: 0 5cqw 8cqw -5cqw rgba(40,30,80,.45); }
/* serum dropper */
.pk-drop { left: 81%; top: 46%; width: 15cqw; height: 32cqw; --z: 36; --t: 7.5s; --w: -3.4s; --r: -2deg; }
.pk-drop .bulb { left: 31%; top: 0; width: 38%; height: 8cqw; border-radius: 3cqw 3cqw 1.4cqw 1.4cqw; background: linear-gradient(90deg, #111318, #3A3F4A 45%, #111318); }
.pk-drop .collar { left: 21%; top: 7.4cqw; width: 58%; height: 3.4cqw; border-radius: .6cqw; background: linear-gradient(90deg, #A9B3C0, #F1F4F8 45%, #9AA5B3); }
.pk-drop .body { left: 0; top: 10.4cqw; width: 100%; height: 21.6cqw; border-radius: 4cqw; background: var(--pk-glass); }

/* Your logo, very faint, turning slowly behind the Care door */
.care-mark { position: absolute; z-index: 1; right: -70px; top: 18px; width: 230px; pointer-events: none; }
.care-mark img { display: block; width: 100%; height: auto; opacity: .09; animation: spin 120s linear infinite; }

/* Trust strip under the doors */
.hero-strip { background: #fff; border-bottom: 1px solid #E6EDF5; }
.hero-strip ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 0; }
.hero-strip li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; color: #3C4F6B; }
.hero-strip li b { display: block; font-weight: 600; color: #0F1E36; }
.hero-strip svg { flex: none; color: #1B5FBE; }

@media (min-width: 640px) {
  .door-body { padding-left: 40px; padding-right: 40px; }
  .door-copy { font-size: 17px; }
  .still { width: 40%; max-width: 280px; right: 16px; top: 60px; }
  /* keep the Shop words clear of the still life (40% of the door, up to 280px, 16px in) */
  .door-shop .door-copy { max-width: min(30rem, calc(100% + 16px - min(40% + 32px, 280px))); }
  .care-mark { width: 300px; right: -80px; }
  .hero-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0; }
  .hero-strip li { font-size: 14px; }
}
/* Side by side from 1280px; below that the doors stack, so the words and the still life
   never sit on top of each other on a small laptop or a tablet held sideways. */
@media (min-width: 1280px) {
  .doors-row { flex-direction: row; min-height: clamp(620px, calc(100svh - 190px), 780px); }
  .door { flex: 1 1 0; }
  .door-body, .door-care .door-body { padding: 104px 0 64px; width: min(400px, 70%); margin-left: clamp(40px, 6vw, 96px); }
  .door-care .door-body { width: min(470px, 82%); margin-left: clamp(72px, 7vw, 112px); }
  .door-word { font-size: clamp(100px, 8.8vw, 132px); }
  .door-shop .door-copy { max-width: 30rem; }
  .doors-top { top: 26px; }
  .seam::before { left: -1px; right: auto; top: 8%; bottom: 8%; width: 2px; height: auto; background: linear-gradient(180deg, rgba(15,30,54,0), rgba(15,30,54,.12) 25%, rgba(15,30,54,.12) 75%, rgba(15,30,54,0)); }
  .medallion { top: 50%; right: auto; left: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .medallion:hover { --ms: 1.04; }
  /* The still life takes the room beside the words (the door, less the words' margin and
     column, less its own right margin and a gap), so it grows on wide screens and shrinks
     rather than slide under the buttons on smaller ones. */
  .door-shop { --m: clamp(40px, 6vw, 96px); --r: clamp(16px, calc(9vw - 100px), 72px); }
  .still { top: auto; bottom: 6%; right: var(--r); width: clamp(150px, calc(100% - var(--m) - min(400px, 70%) - var(--r) - 16px), 300px); max-width: none; }
  .care-mark { top: auto; bottom: -110px; right: -110px; width: 440px; }
}

/* ---------- Product cards (Shop side) ---------- */
.pcard-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); pointer-events: none; }
.pcard-add { transition: transform .25s var(--ease), background-color .2s ease; }
.pcard-add:active { transform: scale(.95); }

/* ---------- Shop by need: the bento (home page, under the hero) ----------
   White tiles with a soft pool of colour where the products stand; a wide midnight band for
   Consult-to-Buy in the old hero's blue. The grid gets .in as it comes on screen: tiles rise
   in turn, then their products pop up one by one, then the band's steps light up along a
   line. The end state is the plain style, so with reduced motion it's simply all there. */
.bento-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bento-all { display: none; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15,30,54,.2); text-underline-offset: 4px; }
.bento-all:hover { text-decoration-color: currentColor; }
.bento-all svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bento-all:hover svg { transform: translateX(3px); } }
@media (min-width: 640px) { .bento-all { display: inline-flex; } }

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bt { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 244px; border-radius: 28px; padding: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 1px 2px rgba(15,30,54,.04), 0 18px 40px -28px rgba(15,30,54,.28); transition: transform .22s var(--ease), box-shadow .25s var(--ease); }
.bt-big, .bt-band, .bt-wide-sm { grid-column: 1 / -1; }
.bt-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bt-link:focus-visible { outline: 3px solid #1B5FBE; outline-offset: 3px; }
.bt-halo { position: absolute; z-index: -1; right: -22%; bottom: -40%; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--tint), rgba(255,255,255,0)); pointer-events: none; transition: transform .45s var(--ease); }
/* the glow that follows the pointer */
.bt::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(360px circle at var(--px, 70%) var(--py, 80%), var(--glow, rgba(255,255,255,.08)), transparent 62%); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.bt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bt-count { display: inline-flex; align-items: center; gap: 7px; padding-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #4A5B72; }
.bt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 3px rgba(43,182,115,.16); }
.bt-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F1F4F9; color: #0F1E36; transform: rotate(-45deg); transition: transform .25s var(--ease), background-color .2s ease, color .2s ease; }
.bt-title { margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.12; letter-spacing: -.024em; color: #0F1E36; }
.bt-line { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #4A5B72; }
.bt-blurb { margin-top: 10px; max-width: 30rem; font-size: 15px; line-height: 1.6; color: #3C4F6B; }
.bt-chips { position: relative; z-index: 4; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.bt-chips a { padding: 8px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(15,30,54,.1); transition: background-color .2s ease, box-shadow .2s ease; }
.bt-chips a:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(15,30,54,.3); }
.bt-art { position: relative; z-index: 0; margin: 14px -6px -18px; margin-top: auto; padding-top: 14px; pointer-events: none; }
.bt-big { padding: 22px; }
.bt-big .bt-title { font-size: 28px; }
.bt-big .bt-art { width: min(100% + 8px, 380px); margin: 18px -8px -22px auto; }

/* Consult-to-Buy: the band */
.bt-band { padding: 24px; color: #fff; background: var(--night-glow), var(--night-blue); box-shadow: 0 30px 60px -36px rgba(8,28,66,.7); }
.bt-band .bt-title { margin-top: 12px; font-size: 28px; color: #fff; }
.bt-band .bt-blurb { color: rgba(255,255,255,.8); }
.bt-band .bt-chips a { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; }
.bt-band .bt-chips a:hover { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.bt-band > .bt-go { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.12); color: #fff; }
.bt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9999px; background: rgba(32,174,255,.16); box-shadow: inset 0 0 0 1px rgba(108,192,255,.35); color: #A8D9FF; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bt-steps { position: relative; margin-top: 24px; display: grid; gap: 14px; }
.bt-steps::before { content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: linear-gradient(#20AEFF, rgba(32,174,255,.25)); transform-origin: top; }
.bt-steps li { position: relative; display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.92); }
.bt-num { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #20AEFF; color: #081C42; font-size: 13px; font-weight: 700; }

/* The entrance: tiles rise in turn, products pop up, the band's line draws and its steps light */
.bento:not(.in) .bt, .bento:not(.in) .bt-pk { opacity: 0; }
.bento.in .bt { animation: bt-rise .95s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes bt-rise { from { opacity: 0; translate: 0 30px; scale: .97; } }
.bt-pk { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s var(--ease); transition-delay: calc(var(--n, 0) * 30ms); }
.bento.in .bt-pk { animation: bt-pop .85s var(--ease-pop) backwards; animation-delay: calc(var(--i, 0) * 60ms + 240ms + var(--n, 0) * 70ms); }
@keyframes bt-pop { from { opacity: 0; translate: 0 26px; scale: .8; } }
.bt-stack { display: grid; }
.bt-stack > svg { grid-area: 1 / 1; }
.bt-fl { animation: bt-bob 7s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.7s); }
@keyframes bt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--bob, -2.8%)); } }
.bento-still .bt-fl { animation-play-state: paused; }
.bento:not(.in) .bt-steps::before { transform: scaleY(0); }
.bento.in .bt-steps::before { transition: transform 1.4s var(--ease) calc(var(--i, 0) * 60ms + 320ms); }
.bento.in .bt-num { animation: bt-lit .5s ease backwards; animation-delay: calc(var(--i, 0) * 60ms + 400ms + var(--n, 0) * 340ms); }
@keyframes bt-lit { from { background: #0C2A5E; color: #A8D9FF; box-shadow: inset 0 0 0 2px rgba(108,192,255,.5); scale: .86; } }

/* Pointing at a tile (computers): it lifts, its products step up, the glow follows */
@media (hover: hover) {
  .bt:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(15,30,54,.08), 0 2px 4px rgba(15,30,54,.05), 0 34px 60px -30px rgba(15,30,54,.38); }
  .bt:hover::after { opacity: 1; }
  .bt:hover .bt-halo { transform: scale(1.12); }
  .bt:hover .bt-pk { transform: translateY(-8px); }
  .bt:hover .bt-go { transform: none; background: #0F1E36; color: #fff; }
  .bt-band:hover > .bt-go { background: #fff; color: #0C2A5E; }
}

@media (min-width: 640px) {
  .bento { gap: 14px; }
  .bt { padding: 22px; }
  .bt-art { margin: 14px -8px -22px; margin-top: auto; }
  .bt-small .bt-art { width: min(100% + 8px, 300px); margin-left: auto; }
  .bt-title { font-size: 24px; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(252px, auto); gap: 16px; }
  .bt-big { grid-column: span 2; grid-row: span 2; padding: 32px; }
  .bt-big .bt-title { margin-top: 16px; max-width: 12ch; font-size: clamp(36px, 3.1vw, 44px); line-height: 1.04; }
  .bt-big .bt-art { position: absolute; right: 18px; bottom: 0; width: 62%; margin: 0; }
  .bt-big .bt-chips { max-width: 74%; }
  .no-big .bt-small:first-child { grid-row: auto; }
  .bt-wide-sm { grid-column: auto; }
  .bt-wide { grid-column: span 2; }
  .bt-small { padding: 24px; }
  .bt-small .bt-line { max-width: 72%; }
  .bt-small .bt-art { position: absolute; right: 8px; bottom: 0; width: 70%; margin: 0; }
  .bt-wide .bt-art { width: 42%; }
  .bt-band { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; padding: 34px 40px; }
  .bt-band .bt-title { font-size: 36px; }
  .bt-band > .bt-go { top: 28px; right: 28px; }
  .bt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding-top: 6px; }
  /* from the first number to the last: three columns, two 20px gaps */
  .bt-steps::before { left: 16px; right: calc((100% - 40px) / 3 - 16px); top: 22px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #20AEFF, rgba(32,174,255,.25)); transform-origin: left; }
  .bento:not(.in) .bt-steps::before { transform: scaleX(0); }
  .bt-steps li { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bento .bt, .bento .bt-pk { opacity: 1 !important; }
  .bento .bt-steps::before { transform: none !important; }
}

/* ---------- Collect / Delivery switch ---------- */
.seg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px; border-radius: 9999px; background: #EEF2F7; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(15,30,54,.08), 0 8px 18px -10px rgba(15,30,54,.35); transition: transform .25s var(--ease); }
.seg[data-mode="delivery"] .seg-thumb { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: #4A5B72; transition: color .3s ease; }
.seg button[aria-checked="true"] { color: #0F1E36; }
.seg button .sub { font-size: 12px; font-weight: 500; color: #5B6B82; }
/* The small Collect or Delivery switch at the end of the categories row (computers). */
.seg.seg-sm { width: 18.5rem; padding: 3px; }
.seg.seg-sm .seg-thumb { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); }
.seg.seg-sm button { min-height: 34px; padding: 4px 10px; font-size: 13px; gap: 6px; }
#owp-nav nav > div { min-height: 47px; } /* the same height at every computer width (the page's room for it is held: html:not(.owp-shell) below) */
.owp-nav-links { overflow-x: auto; scrollbar-width: none; padding: 0 4px; margin: 0 -4px; }
.owp-nav-links::-webkit-scrollbar { display: none; }
@media (max-width: 1279px) {
  .owp-nav-links { font-size: 14px; }
  .seg.seg-sm { width: 15.5rem; }
  .seg.seg-sm button svg { display: none; }
}
.owp-nav-basket { display: none; }
.owp-nav.compact .owp-nav-basket { display: block; }

/* ---------- Care side: page hero and status card ---------- */
.care-hero { background: var(--care-hero); }
/* The shop page's heading panel (All products): lilac by day, midnight after dark */
.shop-head { background: var(--shop-head-bg); color: var(--shop-head-ink); }
.shop-eyebrow { color: var(--shop-eyebrow); }
/* A collection's tinted panel keeps its daytime tint after dark, so its eyebrow keeps the daytime purple
   (the gold is for the dark panel only: 1.4:1 on a tint). */
[data-sky="night"] #head:not(.shop-head) .shop-eyebrow { color: #6249AD; }
[data-sky="night"] .shop-head .text-ink-soft { color: rgba(255,255,255,.74); }
[data-sky="night"] .shop-head li { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.status-card { border-radius: 26px; background: #fff; box-shadow: 0 2px 4px rgba(15,30,54,.05), 0 30px 60px -26px rgba(15,30,54,.28); }
.status-card .now-dot { position: relative; isolation: isolate; }
.status-card .now-dot::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(27,95,190,.45); animation: now-pulse 1.8s ease-out infinite; }
@keyframes now-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.69); opacity: 0; } }

.rx-remind { border-radius: 14px; padding: 14px 16px; background: #F2F7FF; box-shadow: inset 0 0 0 1px #D6E4F7; }

/* Blister packs (blister-packs.html): a week of sealed pockets in the hero, a row for each time of
   day (one pill, or two), and the four boxes under each medicine on the form: how many in the
   morning, at lunch, in the evening and at night. */
.bp-grid { display: grid; grid-template-columns: 4.4em repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; font-size: 12px; }
.bp-grid b { text-align: center; font-weight: 600; color: #4A5B72; }
.bp-grid i { font-style: normal; font-weight: 600; color: var(--care-ink); }
.bp-grid .on { position: relative; aspect-ratio: 1; border-radius: 9px; background: #F2F7FF; box-shadow: inset 0 0 0 1px #D6E4F7; }
.bp-grid .on::before, .bp-grid .two::after { content: ''; position: absolute; top: 50%; left: 50%; width: 34%; height: 34%; border-radius: 50%; background: #1B5FBE; transform: translate(-50%, -50%); }
.bp-grid .two::before { left: 33%; }
.bp-grid .two::after { left: 67%; width: 26%; height: 44%; border-radius: 99px; background: #E3A13B; }
/* The four times of day on each medicine (blister-packs.js): a row each, tapped to add it,
   then − and + for how many. One under the other on a phone, two across from a small tablet. */
.bp-doses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .bp-doses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-dose { display: flex; align-items: center; min-height: 58px; border-radius: 14px; border: 1.5px dashed var(--care-line); background: #fff; color: var(--care-copy); transition: border-color .15s ease, background-color .15s ease; }
.bp-dose.on { border-style: solid; border-color: var(--care-btn); background: #EEF3FF; color: var(--care-ink); }
.bp-dose-tap { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 13px; text-align: left; color: inherit; }
.bp-dose-tap svg { flex: none; }
.bp-dose.on .bp-dose-tap { padding-right: 4px; }
.bp-dose.on .bp-dose-tap svg { color: var(--care-btn); }
.bp-dose-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.bp-dose-add { margin-left: auto; padding-left: 8px; font-size: 14px; font-weight: 600; color: var(--care-icon); white-space: nowrap; }
.bp-dose-tap:focus-visible, .bp-dose-step button:focus-visible { outline: 2px solid var(--care-btn); outline-offset: 2px; }
.bp-dose-step { flex: none; display: flex; align-items: center; gap: 2px; padding: 6px; }
.bp-dose-step button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--care-ink); box-shadow: inset 0 0 0 1px var(--care-line); }
.bp-dose-step button:disabled { opacity: .4; }
.bp-dose-step output { min-width: 4.6em; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.bp-tag.in { background: #EEF3FF; color: var(--care-btn); box-shadow: inset 0 0 0 1px var(--care-line); }
.bp-tag.out { background: #F4F1EA; color: #6B5A33; box-shadow: inset 0 0 0 1px #E4DCC8; }
.bp-out { background: #FBFAF6; }
.bp-choice { min-height: 48px; border-radius: 12px; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--care-ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--care-line); text-align: center; }
.bp-choice:hover { box-shadow: inset 0 0 0 1.5px var(--care-btn); }

/* The offers sign-up (home page): the Shop's colours, so lilac by day and the hero blue at night */
/* The footer's link groups: headings that fold on a phone (details/summary), plain headings wider than that. */
.foot-group summary { list-style: none; cursor: default; }
.foot-group summary::-webkit-details-marker { display: none; }
@media (max-width: 767px) {
  .foot-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; border-top: 1px solid rgba(255, 255, 255, .12); }
  .foot-group summary::after { content: '+'; font-size: 20px; font-weight: 400; line-height: 1; opacity: .7; }
  .foot-group[open] summary::after { content: '–'; }
  .foot-group > ul, .foot-group > div { padding-bottom: 12px; }
}
/* Keep in touch: one card, by text or by email */
.offers-forms { display: grid; gap: 10px; align-content: start; }
.offers-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.offers-tabs [role="tab"] { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: inherit; }
.offers-tabs [role="tab"][aria-selected="true"] { background: #fff; color: #0F1E36; box-shadow: 0 1px 2px rgba(15, 30, 54, .12); }
.offers-card { display: grid; gap: 24px; border-radius: 32px; padding: 24px; background: var(--shop-head-bg); color: var(--shop-head-ink); }
.offers-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--shop-eyebrow); }
.offers-h { margin-top: 8px; max-width: 18ch; font-family: var(--font-display); font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.offers-list { margin-top: 18px; display: grid; gap: 10px; font-size: 16px; }
.offers-list li { display: flex; align-items: center; gap: 10px; }
.offers-list li > span { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 12px; background: rgba(255,255,255,.65); color: var(--shop-accent); }
[data-sky="night"] .offers-list li > span { background: rgba(255,255,255,.1); }
.offers-note { margin-top: 16px; font-size: 14px; opacity: .8; }
.offers-form { display: grid; gap: 12px; align-content: start; border-radius: 24px; padding: 20px; background: #fff; color: #0F1E36; box-shadow: 0 30px 60px -36px rgba(15,30,54,.45); }
.offers-field { display: block; font-size: 14px; font-weight: 600; }
.offers-field span { font-weight: 400; color: #5B6B82; }
.offers-field input { display: block; margin-top: 6px; width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #D3DCE8; font-size: 16px; }
.offers-field input:focus { outline: none; border-color: var(--shop-solid); box-shadow: 0 0 0 4px rgba(42,33,96,.14); }
.news-topics { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; }
.news-topics legend { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.news-topics legend span { font-weight: 400; color: #5B6B82; }
.news-topics label { display: flex; align-items: center; gap: 8px; }
.news-topics input { width: 16px; height: 16px; accent-color: var(--shop-solid); }
@media (max-width: 420px) { .news-topics { grid-template-columns: 1fr; } }
.offers-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #24324A; }
.offers-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--shop-solid); }
.offers-msg { font-size: 14px; font-weight: 600; }
.offers-msg:empty { display: none; }
.offers-msg.err { color: #B23B1E; }
.offers-btn { width: 100%; }
.offers-small { font-size: 13px; color: #5B6B82; }
.offers-small a { font-weight: 600; color: #24324A; text-decoration: underline; text-underline-offset: 3px; }
.offers-done { outline: none; padding: 8px 4px; }
.offers-done-h { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: #0F1E36; }
.offers-done p + p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #3C4F6B; }
@media (min-width: 1024px) { .offers-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; padding: 48px 56px; align-items: center; } .offers-form { padding: 28px; } }

/* stop.html */
.stop-card { border-radius: 28px; padding: 28px 24px; background: #fff; box-shadow: 0 2px 4px rgba(15,30,54,.05), 0 30px 60px -36px rgba(15,30,54,.35); }
.stop-eyebrow { font-size: 13px; font-weight: 600; color: var(--care-eyebrow); }
.stop-h { margin-top: 8px; font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--care-ink); }
.stop-p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #3C4F6B; }
.stop-p:empty { display: none; }
.stop-small { margin-top: 24px; font-size: 14px; color: #5B6B82; }
.stop-small a { font-weight: 600; color: var(--care-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Health pages: NHS Pharmacy First and weight management ----------
   (built by scripts/health-pages.mjs). Calm and clinical, the Care look: readable at a
   glance on a phone, with the urgent signs near the top and booking never far away. */
.hp { --hp-w: 1180px; }
.hp-wrap { max-width: var(--hp-w); margin: 0 auto; padding: 0 16px; }
.hp-hero { padding: 18px 0 36px; }
.hp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #5B6B82; }
.hp-crumbs a:hover { color: var(--care-ink); text-decoration: underline; }
.hp-hero-grid { display: grid; gap: 22px; margin-top: 22px; }
.hp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--care-eyebrow); }
.hp-h1 { margin-top: 12px; max-width: 18ch; font-size: clamp(2rem, 7.4vw, 3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; color: var(--care-ink); text-wrap: balance; }
.hp-lede { margin-top: 14px; max-width: 38rem; font-size: 17px; line-height: 1.6; color: var(--care-copy); }
.hp-facts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 1px var(--care-line); font-size: 14px; font-weight: 500; color: #0F1E36; }
.hp-facts .hp-ic { color: var(--care-icon); display: inline-flex; }
.hp-ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.hp-ctas .hp-ic { display: inline-flex; }
@media (max-width: 639px) { .hp-ctas .btn-pill { flex: 1 1 100%; } }
.hp-visit { align-self: start; border-radius: 24px; background: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(15,30,54,.05), 0 24px 50px -28px rgba(15,30,54,.3); }
.hp-visit-status { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #0F1E36; }
.hp-visit dl { margin-top: 14px; display: grid; gap: 12px; font-size: 15px; }
.hp-visit dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5B6B82; }
.hp-visit dd { margin-top: 2px; color: #24324A; }
.hp-phone { font-weight: 600; color: var(--care-ink); }
.hp-visit-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--care-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--care-underline); }
.hp-visit-link .hp-ic { display: inline-flex; }

.hp-body { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 64px; }
.hp-wide { padding-top: 28px; padding-bottom: 64px; }
.hp-toc { display: none; }
.hp-main { min-width: 0; max-width: 46rem; }
.hp-sec { margin-top: 44px; scroll-margin-top: 140px; }
.hp-sec:first-child { margin-top: 0; }
.hp-sec h2, .hp-band h2 { font-size: clamp(1.45rem, 4.6vw, 1.85rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--care-ink); }
.hp-sec h3 { font-size: 17px; font-weight: 600; color: #0F1E36; }
.hp-sec > p, .hp-band > p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: #24324A; }
.hp-sec a:not([class]), .hp-urgent a, .hp-band a:not([class]), .pf-result a:not([class]) { font-weight: 600; color: var(--care-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--care-underline); }
.hp-small { font-size: 15px !important; line-height: 1.6 !important; color: #4A5B72 !important; }
.hp-list { margin-top: 12px; display: grid; gap: 9px; font-size: 17px; line-height: 1.55; color: #24324A; }
.hp-list li { position: relative; padding-left: 26px; }
.hp-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 5px; border-left: 2px solid var(--care-icon); border-bottom: 2px solid var(--care-icon); transform: rotate(-45deg) translateY(-50%); }
.hp-list-dots li::before { top: .6em; left: 6px; width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--care-icon); transform: translateY(-50%); }
.hp-list-urgent li::before { top: .62em; left: 5px; width: 8px; height: 8px; border: 0; border-radius: 2px; background: #C2410C; transform: translateY(-50%) rotate(45deg); }

/* The urgent box: a calm amber, never alarming red, and near the top */
.hp-urgent { border-radius: 20px; padding: 18px 18px 20px; background: #FFF7ED; box-shadow: inset 0 0 0 1px #FBD5B0; scroll-margin-top: 140px; }
.hp-urgent h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #9A3412; }
.hp-urgent h2 .hp-ic { display: inline-flex; color: #C2410C; }
.hp-urgent-lead { margin-top: 12px; font-size: 16px; color: #431407; }
.hp-urgent .hp-list { margin-top: 8px; font-size: 16px; color: #431407; }
.hp-urgent > p:last-child:not(.hp-urgent-lead) { margin-top: 12px; font-size: 16px; color: #431407; }
.hp-wide > .hp-urgent { margin-top: 44px; }

.hp-yesno { margin-top: 16px; display: grid; gap: 12px; }
.hp-yes, .hp-no { border-radius: 18px; padding: 16px 18px; }
.hp-yes { background: #F0FAF4; box-shadow: inset 0 0 0 1px #BFE6CF; }
.hp-no { background: #F7F9FC; box-shadow: inset 0 0 0 1px #E1E8F1; }
.hp-yesno h3 { display: flex; align-items: center; gap: 7px; }
.hp-yes h3 .hp-ic { display: inline-flex; color: #15803D; }
.hp-no h3 .hp-ic { display: inline-flex; color: #64748B; }
.hp-yesno .hp-list { margin-top: 8px; font-size: 16px; }
.hp-yes .hp-list li::before { border-color: #15803D; }
.hp-no .hp-list li::before { top: .62em; left: 4px; width: 10px; height: 2px; border: 0; background: #94A3B8; transform: translateY(-50%); }

.hp-steps { margin-top: 18px; display: grid; gap: 0; }
.hp-steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 22px; }
.hp-steps li:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: linear-gradient(var(--care-line), rgba(255,255,255,0)); }
.hp-step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--care-btn); font-weight: 700; color: var(--care-btn); }
.hp-steps h3 { padding-top: 8px; }
.hp-steps p { margin-top: 4px; font-size: 16px; line-height: 1.6; color: #3C4F6B; }

.hp-note { margin-top: 16px; display: flex; gap: 10px; border-radius: 16px; padding: 14px 16px; background: #EEF5FF; font-size: 15px; line-height: 1.6; color: #24324A; }
.hp-note .hp-ic { display: inline-flex; flex: none; margin-top: 3px; color: var(--care-icon); }

.hp-faq { margin-top: 14px; border-top: 1px solid #E1E8F1; }
.hp-faq details { border-bottom: 1px solid #E1E8F1; }
.hp-faq summary { position: relative; display: block; padding: 16px 40px 16px 0; font-size: 17px; font-weight: 600; color: #0F1E36; }
.hp-faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #5B6B82; border-bottom: 2px solid #5B6B82; transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.hp-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
/* The answer opens and closes with a short fade and height change, where the browser can do it (Chrome and Edge now; others open as they always did). */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .hp-faq details { interpolate-size: allow-keywords; }
    .hp-faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .2s var(--ease-out), opacity .2s var(--ease-out), content-visibility .2s allow-discrete; }
    .hp-faq details[open]::details-content { block-size: auto; opacity: 1; }
  }
}
.hp-faq details p { padding: 0 0 16px; font-size: 16px; line-height: 1.65; color: #3C4F6B; }

.hp-band { margin-top: 48px; border-radius: 24px; padding: 24px; color: #fff; background: var(--night-glow), var(--night-blue); }
.hp-band h2 { color: #fff; }
.hp-band > p { color: rgba(255,255,255,.82); }
.hp-band .btn-care { background: #fff; color: #0C2A5E; box-shadow: none; }
.hp-band .btn-care:hover { background: #EAF1FF; }
.hp-band .btn-care-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hp-band .btn-care-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.hp-cards { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hp-cards a { display: flex; flex-direction: column; gap: 2px; height: 100%; border-radius: 16px; padding: 14px 16px; background: #fff; box-shadow: inset 0 0 0 1px #E1E8F1; transition: box-shadow .2s ease, transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hp-cards a:hover { box-shadow: inset 0 0 0 1px var(--care-btn); transform: translateY(-2px); } }
.hp-card-name { font-weight: 600; color: #0F1E36; }
.hp-card-age { font-size: 14px; color: #5B6B82; }
.hp-card-all { background: #EEF5FF !important; }
.hp-meta { margin-top: 40px; font-size: 14px; line-height: 1.6; color: #5B6B82; }
.hp-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--care-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--care-underline); }
.hp-textlink .hp-ic { display: inline-flex; }

/* The guide page: the seven conditions, and the checker */
.hp-conds { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hp-conds a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 150px; border-radius: 22px; padding: 16px; background: #fff; box-shadow: 0 0 0 1px #E1E8F1, 0 14px 30px -24px rgba(15,30,54,.35); transition: transform .24s var(--ease), box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) { .hp-conds a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--care-btn), 0 24px 40px -26px rgba(15,30,54,.45); } }
.hp-conds a > .hp-ic:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #EEF3FF; color: var(--care-icon); }
.hp-cond-name { margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.25; color: #0F1E36; }
.hp-cond-age { margin-top: 3px; font-size: 14px; color: #5B6B82; }
.hp-cond-more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--care-btn); }
.hp-cond-more .hp-ic { display: inline-flex; transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hp-conds a:hover .hp-cond-more .hp-ic { transform: translateX(3px); } }
.hp-check-sec { border-radius: 28px; padding: 22px; background: #fff; box-shadow: 0 0 0 1px #E1E8F1, 0 30px 60px -40px rgba(15,30,54,.4); }
.hp-check-sec > div > p { margin-top: 8px; font-size: 16px; color: #4A5B72; }
.pf-check { margin-top: 18px; display: grid; gap: 20px; }
.pf-check legend, .pf-field { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: #0F1E36; }
.pf-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-opt { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #D3DCE8; font-size: 15px; font-weight: 500; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; }
.pf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-opt:has(input:checked) { background: #EEF5FF; box-shadow: inset 0 0 0 2px var(--care-btn); font-weight: 600; }
.pf-opt:has(input:focus-visible) { outline: 3px solid #1B5FBE; outline-offset: 2px; }
.pf-row { display: grid; gap: 16px; }
.pf-field input { display: block; margin-top: 8px; width: 100%; max-width: 220px; height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #D3DCE8; font-size: 16px; font-weight: 500; }
.pf-field input:focus { outline: none; border-color: var(--care-btn); box-shadow: 0 0 0 4px rgba(27,95,190,.18); }
.pf-checks { display: grid; gap: 8px; }
.pf-tick { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #D3DCE8; font-size: 15px; line-height: 1.45; cursor: pointer; }
.pf-tick input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #C2410C; }
.pf-tick:has(input:checked) { background: #FFF7ED; box-shadow: inset 0 0 0 2px #F59E0B; }
.pf-none input { accent-color: var(--care-btn); }
.pf-none:has(input:checked) { background: #EEF5FF; box-shadow: inset 0 0 0 2px var(--care-btn); }
.pf-check > .btn-pill { justify-self: start; }
.pf-result { border-radius: 18px; padding: 16px 18px; outline: none; }
.pf-result-h { font-size: 17px; font-weight: 700; }
.pf-result p + p, .pf-result-h + p { margin-top: 6px; font-size: 16px; line-height: 1.6; }
.pf-result .hp-ctas { margin-top: 14px; }
.pf-yes { background: #F0FAF4; box-shadow: inset 0 0 0 1.5px #86CFA4; color: #14532D; }
.pf-no, .pf-info { background: #EEF5FF; box-shadow: inset 0 0 0 1.5px #BFD3F2; color: #13296B; }
.pf-urgent { background: #FFF7ED; box-shadow: inset 0 0 0 2px #F59E0B; color: #7C2D12; }
.pf-warn { background: #F7F9FC; box-shadow: inset 0 0 0 1.5px #D3DCE8; color: #24324A; }
.hp-two { display: grid; gap: 0 32px; }
.bmi { margin-top: 18px; display: grid; gap: 16px; border-radius: 22px; padding: 18px; background: #fff; box-shadow: 0 0 0 1px #E1E8F1; }
.bmi-units { display: flex; flex-wrap: wrap; gap: 8px; }
.bmi-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.bmi-fields .pf-field { margin: 0; }
.bmi-fields .pf-field input { max-width: 140px; }
.bmi > .btn-pill { justify-self: start; }

@media (min-width: 640px) {
  .hp-wrap { padding: 0 24px; }
  .hp-hero { padding: 24px 0 48px; }
  .hp-visit { padding: 24px; }
  .hp-yesno { grid-template-columns: 1fr 1fr; }
  .hp-band { padding: 32px; }
  .hp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-conds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .pf-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-row { grid-template-columns: auto auto auto; justify-content: start; gap: 24px; }
  .hp-check-sec { padding: 32px; }
}
@media (min-width: 1024px) {
  .hp-hero { padding-bottom: 56px; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; margin-top: 28px; }
  .hp-body { grid-template-columns: 200px minmax(0, 46rem); gap: 64px; padding-top: 40px; }
  .hp-toc { display: block; position: sticky; top: 24px; align-self: start; }
  .hp-toc p { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6B82; }
  .hp-toc ul { margin-top: 10px; display: grid; gap: 2px; border-left: 2px solid #E1E8F1; }
  .hp-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 15px; color: #4A5B72; transition: color .2s ease, border-color .2s ease; }
  .hp-toc a:hover, .hp-toc a.on { color: var(--care-ink); border-left-color: var(--care-btn); }
  .hp-conds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-conds li:first-child { grid-column: span 2; }
  .hp-conds li:first-child a { min-height: 170px; }
  .hp-two { grid-template-columns: 1fr 1fr; }
  .hp-check-sec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .hp-check-sec .pf-check { margin-top: 0; }
}

/* ---------- Google reviews ---------- */
.rv-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rv-card { scroll-snap-align: start; flex: 0 0 86%; }
@media (min-width: 640px) { .rv-card { flex-basis: 360px; } }
.rv-card[data-in] { animation: rise-in .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms); opacity: 0; transform: translateY(16px); }
.gmaps-credit { font-family: Roboto, Arial, sans-serif; font-weight: 500; color: #5F6368; }

/* ---------- Get the app (app.html): where the printed QR codes land ---------- */
.gx { padding-bottom: 72px; }
.gx-wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .gx-wrap { padding: 0 24px; } }
.gx-hero { position: relative; overflow: hidden; color: #fff; background: var(--night-glow), var(--night-blue); padding: 36px 0 0; }
.gx-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 80% at 70% 30%, #000 0%, transparent 75%); }
.gx-hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .gx-hero { padding-top: 56px; } .gx-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
.gx-copy { padding-bottom: 8px; }
@media (min-width: 900px) { .gx-copy { padding-bottom: 64px; } }
.gx-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font-size: 14px; font-weight: 600; color: #DCEBFF; }
.gx-h { margin-top: 18px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(40px, 9vw, 72px); line-height: .98; letter-spacing: -.035em; }
.gx-h span { color: #20AEFF; }
.gx-lede { margin-top: 18px; max-width: 34rem; font-size: 17px; line-height: 1.6; color: #C9DCF5; }
.gx-action { margin-top: 26px; }
.gx-btn { background: #fff; color: #0C2A5E; min-height: 58px; padding: 0 1.75rem; font-size: 17px; font-weight: 700; box-shadow: 0 18px 40px -16px rgba(32,174,255,.7); }
.gx-btn:hover { box-shadow: 0 22px 46px -16px rgba(32,174,255,.85); }
@media (hover: hover) and (pointer: fine) { .gx-btn:hover .arr { transform: translateX(3px); } }
.gx-done { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 16px; background: rgba(43,182,115,.16); box-shadow: inset 0 0 0 1px rgba(43,182,115,.45); font-weight: 600; color: #fff; }
.gx-bonus { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: #C9DCF5; }
.gx-bonus a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gx-bonus-n { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 9999px; background: linear-gradient(135deg, #20AEFF, #1B5FBE); font-weight: 800; font-size: 15px; color: #fff; box-shadow: 0 10px 24px -10px rgba(32,174,255,.9); }
.gx-phone { display: flex; justify-content: center; }
.gx-phone-frame { width: min(300px, 74vw); aspect-ratio: 390 / 844; padding: 10px 10px 0; border-radius: 46px 46px 0 0; background: #0A1630; box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 40px 90px -30px rgba(32,174,255,.55); overflow: hidden; translate: 0 2px; }
.gx-phone-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 37px 37px 0 0; }
@media (max-width: 899px) { .gx-phone-frame { height: 320px; aspect-ratio: auto; } }
.gx-claim { margin-top: 28px; }
.gx-claim-card { display: flex; gap: 16px; padding: 22px; border-radius: 24px; background: #EAF8F0; box-shadow: inset 0 0 0 1px #BFE6CF; }
.gx-claim-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 9999px; background: #2BB673; color: #fff; }
.gx-claim h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.gx-claim p { margin-top: 6px; color: #3C5A4A; font-size: 15px; }
.gx-claim-form { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.gx-claim-form input { flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid #BFE6CF; background: #fff; font-size: 16px; }
.gx-claim-msg { margin-top: 10px; font-weight: 600; font-size: 15px; }
.gx-claim-msg.ok { color: #1E7A4C; } .gx-claim-msg.err { color: #B23B1E; }
.gx-sec { margin-top: 64px; }
.gx-kicker { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #1B5FBE; }
.gx-kicker-light { color: #8FD0FF; }
.gx-sec-h { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 5vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: #0C2A5E; }
.gx-sec-p { margin-top: 10px; max-width: 40rem; font-size: 16px; line-height: 1.6; color: #4A5B72; }
.gx-tabs { margin-top: 22px; display: inline-flex; padding: 4px; border-radius: 9999px; background: #EEF4FB; }
.gx-tabs button { min-height: 44px; padding: 0 20px; border-radius: 9999px; font-weight: 600; font-size: 15px; color: #4A5B72; }
.gx-tabs button[aria-selected="true"] { background: #fff; color: #0C2A5E; box-shadow: 0 2px 8px -2px rgba(15,30,54,.18); }
.gx-note { margin-top: 18px; display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: #FFF6DD; color: #6B4A00; font-size: 15px; line-height: 1.5; }
.gx-note > span { flex: none; margin-top: 2px; }
.gx-steps { margin-top: 20px; display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 900px) { .gx-steps { grid-template-columns: repeat(3, 1fr); } }
.gx-steps li { display: flex; gap: 16px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #E1E8F2, 0 18px 40px -28px rgba(12,42,94,.35); }
.gx-step-n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 9999px; background: #0C2A5E; color: #fff; font-weight: 800; }
.gx-steps h3 { font-weight: 700; font-size: 17px; color: #0F1E36; }
.gx-steps p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: #4A5B72; }
.gx-key { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: #EAF6FF; color: #1A4FA3; font-weight: 600; font-size: 14px; }
.gx-key svg { width: 20px; height: 20px; }
.gx-desktop { margin-top: 22px; display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: 24px; background: #F5F9FE; box-shadow: inset 0 0 0 1px #E1E8F2; }
.gx-desktop-qr { flex: none; width: 150px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #E1E8F2; }
.gx-desktop h3 { font-weight: 700; font-size: 18px; color: #0C2A5E; }
.gx-desktop p { margin-top: 4px; color: #4A5B72; }
.gx-points { display: grid; gap: 24px; padding: 28px; border-radius: 28px; background: linear-gradient(160deg, #EAF6FF, #F5F9FE 60%); box-shadow: inset 0 0 0 1px #D3ECFF; }
@media (min-width: 900px) { .gx-points { grid-template-columns: .9fr 1.1fr; align-items: center; padding: 40px; } }
.gx-points-list { display: grid; gap: 12px; }
.gx-points-list li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #E1E8F2; }
.gx-points-list p { font-size: 15px; line-height: 1.5; color: #4A5B72; }
.gx-points-list strong { color: #0F1E36; }
.gx-pt { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #1B5FBE, #0C2A5E); color: #fff; font-weight: 800; font-size: 16px; }
.gx-grid { margin-top: 22px; display: grid; gap: 14px; }
@media (min-width: 640px) { .gx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gx-grid { grid-template-columns: repeat(3, 1fr); } }
.gx-tile { display: block; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #E1E8F2; transition: transform .2s var(--ease), box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .gx-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #D3ECFF, 0 24px 48px -30px rgba(12,42,94,.45); } }
.gx-tile-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EAF6FF; color: #1B5FBE; }
.gx-tile h3 { margin-top: 14px; font-weight: 700; font-size: 17px; color: #0F1E36; }
.gx-tile p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: #4A5B72; }
.gx-late { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: 28px; color: #C9DCF5; background: var(--night-glow), var(--night-blue); }
.gx-late-h { margin-top: 6px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.03em; color: #fff; }
.gx-late p { margin-top: 6px; }
.gx-late-addr a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gx-btn-light { background: #fff; color: #0C2A5E; font-weight: 700; }

/* ---------- The gift card: one design for the website (gift-cards.html) and the printed
   card (scripts/marketing). Sized by its own width, so it scales from a thumbnail to print. */
.gcard { position: relative; aspect-ratio: 85.6 / 54; border-radius: 4.6% / 7.3%; overflow: hidden; container-type: inline-size; color: #fff; isolation: isolate;
  background: radial-gradient(circle at 96% 0%, rgba(32,174,255,.62), rgba(32,174,255,0) 46%), radial-gradient(circle at 46% 30%, rgba(27,95,190,.5), rgba(27,95,190,0) 40%), radial-gradient(circle at 0% 100%, rgba(22,144,240,.38), rgba(22,144,240,0) 48%), linear-gradient(135deg, #15408A 0%, #0C2A5E 52%, #081C42 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 30px 60px -28px rgba(8,28,66,.75); }
.gcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 6.5cqw 6.5cqw; -webkit-mask-image: radial-gradient(90% 90% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(90% 90% at 80% 20%, #000, transparent 75%); }
.gcard-ring { position: absolute; z-index: -1; right: -17cqw; top: -14cqw; width: 78cqw; opacity: .17; filter: saturate(1.3); pointer-events: none; }
.gcard-logo { position: absolute; left: 7cqw; top: 7cqw; width: 44cqw; height: auto; }
.gcard-kicker { position: absolute; left: 7cqw; bottom: 17.5cqw; font: 700 2.3cqw/1 Inter, ui-sans-serif, system-ui, sans-serif; font-size: max(12px, 2.3cqw); letter-spacing: .28em; text-transform: uppercase; color: #8FD0FF; }
.gcard-label { position: absolute; left: 7cqw; bottom: 6.2cqw; font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; font-size: 10.5cqw; line-height: 1; letter-spacing: -.01em; }
.gcard-amount { position: absolute; right: 7cqw; bottom: 6.2cqw; font: 800 12cqw/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; }
.gcard-amount small { font-size: .5em; font-weight: 700; letter-spacing: 0; vertical-align: .62em; margin-right: .08em; }
.gcard-to { position: absolute; right: 7cqw; top: 7.6cqw; max-width: 40cqw; font: 600 2.9cqw/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: #DCEBFF; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard-code { position: absolute; left: 7cqw; bottom: 17.5cqw; font: 600 3.4cqw/1 'Courier New', ui-monospace, monospace; letter-spacing: .12em; color: #fff; }
.gcard-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); }
.gc-preview { max-width: 420px; margin: 28px auto 0; }
.gc-preview .gcard { transform: perspective(900px) rotateX(6deg) rotateY(-8deg); transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .gc-preview:hover .gcard { transform: perspective(900px) rotateX(0) rotateY(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-rise], .rv-card[data-in] { opacity: 1 !important; transform: none !important; }
  .pk, .still, .care-mark { translate: none !important; transform: none !important; }
}

/* ---------- Christmas: OPEN 365 DAYS A YEAR (assets/festive.js, assets/festive-fx.js) ----------
   Only drawn from 1 December to 5 January. Midnight blue and gold, the same on the day and night looks. */
.festive-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; padding: 7px 16px; background: #0A1F44; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; text-align: center; }
.festive-strip b { color: #F7D774; font-weight: 800; }
.festive-strip .fs-flake { display: inline-flex; color: #F7D774; }
.festive-strip .fs-sub { color: rgba(255,255,255,.88); }

.festive-band { background: radial-gradient(circle at 12% 20%, rgba(247,215,116,.22) 0 2px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.16) 0 1.5px, transparent 2.5px) 0 0 / 61px 61px, linear-gradient(100deg, #0A1F44 0%, #123374 55%, #0A1F44 100%); color: #fff; border-bottom: 3px solid #F7D774; }
.festive-band .fb-in { display: flex; align-items: center; gap: 18px; max-width: 80rem; margin: 0 auto; padding: 16px 16px; }
@media (min-width: 640px) { .festive-band .fb-in { padding: 18px 24px; } }
.festive-band .fb-flake { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 9999px; border: 2px solid #F7D774; color: #F7D774; }
.festive-band .fb-text { min-width: 0; }
.festive-band .fb-big { margin: 0; font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 700; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
.festive-band .fb-365 { color: #F7D774; cursor: default; user-select: none; }
.festive-band .fb-sub { margin: 4px 0 0; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.4; }
.festive-band .fb-link { margin-left: auto; flex: none; border: 1.5px solid rgba(255,255,255,.6); border-radius: 9999px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.festive-band .fb-link:hover { background: rgba(255,255,255,.12); }
html[data-festive="peak"] .festive-band .fb-big { font-size: clamp(26px, 4vw, 46px); }
@media (max-width: 639px) { .festive-band .fb-flake { width: 40px; height: 40px; } .festive-band .fb-flake svg { width: 22px; height: 22px; } .festive-band .fb-link { display: none; } .festive-band .fb-sub { font-size: 14px; } }

.festive-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.82); font-size: 14px; }
.festive-foot b { color: #F7D774; }
.festive-foot .ff-eggs { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: 13px; }
.festive-foot .ff-flake { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9999px; border: 1.5px solid rgba(247,215,116,.6); color: #F7D774; background: transparent; }
.festive-foot .ff-flake:hover { background: rgba(247,215,116,.14); }

.festive-snow { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.festive-toast { position: fixed; left: 50%; bottom: 84px; z-index: 95; transform: translateX(-50%); width: max-content; max-width: min(92vw, 520px); padding: 12px 18px; border: 1.5px solid #F7D774; border-radius: 16px; background: #0A1F44; color: #fff; font-size: 14px; line-height: 1.45; text-align: center; box-shadow: 0 18px 40px -12px rgba(10,31,68,.55); }
.festive-sleigh { position: fixed; top: 16vh; left: 0; z-index: 96; font-size: clamp(34px, 6vw, 60px); letter-spacing: .08em; white-space: nowrap; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); animation: festive-fly 5.8s linear forwards; }
@keyframes festive-fly { from { transform: translate(100vw, 6vh) rotate(2deg); } 50% { transform: translate(40vw, -3vh) rotate(-2deg); } to { transform: translate(-110%, 5vh) rotate(2deg); } }
.festive-nose { position: fixed; left: 0; top: 0; z-index: 97; width: 18px; height: 18px; border-radius: 9999px; background: radial-gradient(circle at 35% 30%, #ff9b9b, #e11d2e 60%, #a30d1b); box-shadow: 0 0 18px 6px rgba(255,60,60,.55); pointer-events: none; will-change: transform; }
.festive-tip { position: fixed; right: 16px; bottom: 16px; z-index: 96; width: min(360px, calc(100vw - 32px)); padding: 18px 20px; border: 2px solid #0A1F44; border-radius: 20px; background: #fff; color: #0F1E36; box-shadow: 0 24px 50px -10px rgba(10,31,68,.45); }
.festive-tip .ft-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8A6A00; }
.festive-tip .ft-text { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.festive-tip .ft-foot { margin: 10px 0 0; font-size: 13px; color: #4A5B72; }
.festive-tip .ft-close { margin-top: 12px; padding: 8px 16px; border-radius: 10px; background: #0A1F44; color: #fff; font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .festive-sleigh, .festive-nose { display: none; } .festive-snow { display: none; } }

/* The staff dashboard: a plain `grid` (one column, no grid-cols class) sizes its column to
   its widest unbreakable content, so a row with a long single line (a collection's
   description, a toolbar of buttons) made the whole page wider than the screen. A
   one-column grid is told it may shrink. :where() keeps it at zero specificity, so any
   grid-cols-* or sm:grid-cols-* class on the same element still wins. */
:where(#panel .grid) { grid-template-columns: minmax(0, 1fr); }
/* A fieldset keeps its own minimum width (its widest line) unless told otherwise, and a
   select as wide as its longest option can be wider than the screen. */
:where(#panel fieldset) { min-width: 0; }
:where(#panel select) { max-width: 100%; }

/* ---------- Live chat (the button and panel on every page; assets/app.js buildChatWidget) ----------
   Brand blue header with the pharmacy's open/closed status, a scrolling conversation with
   the team's messages on the left and the visitor's on the right, and a message box that
   grows as you type. Positioning (left, bottom, z-index) is on the elements themselves, so
   they can move up out of the way of the cookie bar. */
.owp-chat-btn { background: linear-gradient(135deg, #1B5FBE 0%, #1A4FA3 100%); color: #fff; box-shadow: 0 8px 22px -6px rgba(12,42,94,.55), 0 2px 6px rgba(12,42,94,.25); transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { .owp-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(12,42,94,.6), 0 3px 8px rgba(12,42,94,.25); } }
.owp-chat-btn:focus-visible, .owp-chat button:focus-visible { outline: 3px solid #20AEFF; outline-offset: 2px; }
.owp-chat input:focus-visible, .owp-chat textarea:focus-visible { outline: none; border-color: #1B5FBE; box-shadow: 0 0 0 3px rgba(27,95,190,.22); }
.owp-chat-live { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 9999px; background: #1F9D55; box-shadow: 0 0 0 3px #fff; }

.owp-chat { display: flex; flex-direction: column; width: min(380px, calc(100vw - 2.5rem)); max-height: min(36rem, calc(100vh - 12rem)); max-height: min(36rem, calc(100dvh - 12rem)); overflow: hidden;
  border-radius: 18px; background: #fff; color: #0F1E36; box-shadow: 0 24px 60px -12px rgba(12,42,94,.35), 0 4px 14px rgba(12,42,94,.12); border: 1px solid #E1E8F2; animation: owp-chat-in .18s ease-out; }
.owp-chat[hidden] { display: none; }
@keyframes owp-chat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .owp-chat { animation: none; } .owp-chat-btn { transition: none; } }

.owp-chat-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(135deg, #1A4FA3 0%, #15408A 55%, #0C2A5E 100%); }
.owp-chat-logo { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #fff; }
.owp-chat-logo img { width: 1.7rem; height: 1.7rem; }
.owp-chat-titles { min-width: 0; flex: 1; }
.owp-chat-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.2; }
.owp-chat-status { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; font-size: .75rem; line-height: 1.2; color: rgba(255,255,255,.86); }
.owp-chat-status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owp-chat-dot { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: #7FD6A0; box-shadow: 0 0 0 3px rgba(127,214,160,.3); }
.owp-chat-dot.off { background: #C9D3E3; box-shadow: none; }
.owp-chat-x { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; color: #fff; background: rgba(255,255,255,.12); }
.owp-chat-x:hover { background: rgba(255,255,255,.24); }

.owp-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #F5F9FE; }
.owp-pad { padding: 1.1rem 1rem 1rem; overflow-y: auto; }
.owp-center { text-align: center; }
.owp-h { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.owp-sub { margin-top: .3rem; font-size: .8125rem; line-height: 1.45; color: #4A5B72; }
.owp-note { margin-top: 1rem; font-size: .75rem; line-height: 1.45; color: #5B6B82; }
.owp-closed { display: flex; gap: .5rem; align-items: flex-start; margin-top: .85rem; padding: .6rem .75rem; border-radius: 12px; background: #FFF3D9; color: #7A5200; font-size: .75rem; line-height: 1.4; }
.owp-closed svg { flex: none; margin-top: .1rem; }

.owp-topics { display: grid; gap: .5rem; margin-top: 1rem; }
.owp-topic { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .8rem; text-align: left; background: #fff; border: 1px solid #E1E8F2; border-radius: 14px; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
@media (hover: hover) and (pointer: fine) { .owp-topic:hover { border-color: #1B5FBE; box-shadow: 0 4px 14px -6px rgba(27,95,190,.35); transform: translateY(-1px); } }
.owp-topic-ic { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #EAF6FF; color: #1A4FA3; }
.owp-topic-tx { min-width: 0; flex: 1; display: block; }
.owp-topic-name { display: block; font-size: .875rem; font-weight: 600; line-height: 1.25; }
.owp-topic-hint { display: block; margin-top: .1rem; font-size: .75rem; line-height: 1.3; color: #5B6B82; }
.owp-topic > svg { flex: none; color: #5B6B82; }

.owp-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: #1A4FA3; }
.owp-back svg { transform: rotate(180deg); }
.owp-back:hover { text-decoration: underline; }
.owp-label { display: block; margin-top: .85rem; font-size: .75rem; font-weight: 600; color: #0F1E36; }
.owp-label span { font-weight: 400; color: #5B6B82; }
.owp-input { display: block; width: 100%; height: 2.75rem; margin-top: .3rem; padding: 0 .8rem; font-size: .875rem; background: #fff; border: 1px solid #C9D3E3; border-radius: 12px; }
.owp-input:focus { border-color: #1B5FBE; }
.owp-primary { display: block; width: 100%; height: 2.75rem; margin-top: 1.1rem; font-size: .875rem; font-weight: 600; color: #fff; background: #1B5FBE; border-radius: 12px; }
.owp-primary:hover { background: #1A4FA3; }

.owp-thread { flex: 1; min-height: 11rem; padding: 1rem .9rem .5rem; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .owp-thread { scroll-behavior: auto; } }
.owp-intro { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; padding: .7rem .8rem; border-radius: 14px; background: #fff; border: 1px solid #E1E8F2; font-size: .8125rem; line-height: 1.45; color: #4A5B72; }
.owp-intro img { flex: none; width: 1.6rem; height: 1.6rem; }
.owp-intro strong { color: #0F1E36; font-weight: 600; }
.owp-msg { display: flex; align-items: flex-end; gap: .45rem; max-width: 100%; }
.owp-msg-first { margin-top: .55rem; }
.owp-msg-me { justify-content: flex-end; }
.owp-msg-avatar { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 9999px; background: #fff; padding: .2rem; border: 1px solid #E1E8F2; }
.owp-msg-avatar-gap { border: 0; background: none; }
.owp-msg-col { display: flex; flex-direction: column; max-width: 82%; min-width: 0; }
.owp-msg-me .owp-msg-col { align-items: flex-end; }
.owp-msg-name { margin: 0 0 .15rem .15rem; font-size: .6875rem; font-weight: 600; color: #5B6B82; }
.owp-bubble { padding: .5rem .8rem; font-size: .875rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 16px; }
.owp-msg-them .owp-bubble { background: #fff; border: 1px solid #E1E8F2; border-bottom-left-radius: 5px; color: #0F1E36; }
.owp-msg-me .owp-bubble { background: #1B5FBE; color: #fff; border-bottom-right-radius: 5px; }
.owp-msg-time { margin: .15rem .2rem 0; font-size: .6875rem; color: #5B6B82; }

.owp-composer { display: flex; align-items: flex-end; gap: .5rem; padding: .65rem .75rem; background: #fff; border-top: 1px solid #E1E8F2; }
.owp-composer textarea { flex: 1; min-width: 0; max-height: 7.5rem; min-height: 2.5rem; padding: .55rem .8rem; font-size: .875rem; line-height: 1.4; resize: none; background: #F5F9FE; border: 1px solid #C9D3E3; border-radius: 14px; }
.owp-composer textarea:focus { border-color: #1B5FBE; background: #fff; }
.owp-send { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: #fff; background: #1B5FBE; border-radius: 9999px; }
.owp-send:hover { background: #1A4FA3; }
.owp-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 0 .9rem .65rem; background: #fff; font-size: .6875rem; line-height: 1.35; color: #5B6B82; }
.owp-foot button { flex: none; text-decoration: underline; color: #4A5B72; }
.owp-foot button:hover { color: #0F1E36; }

.owp-rate { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.owp-rate-btn { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .85rem .5rem; font-size: .8125rem; font-weight: 600; background: #fff; border: 1px solid #E1E8F2; border-radius: 14px; }
.owp-rate-btn:hover { border-color: #1B5FBE; }
.owp-rate-btn span:first-child { font-size: 1.5rem; line-height: 1; }
@media (max-width: 380px) { .owp-chat { border-radius: 14px; } .owp-topic-hint { display: none; } }

/* The virtual assistant in the live chat: its own look, so nobody mistakes it for the team */
.owp-msg-ai { display: grid; place-items: center; padding: 0; color: #5B3FA8; background: #EFE9FC; border-color: #D9CEF5; }
.owp-ai-tag { display: inline-block; margin-left: .25rem; padding: 0 .35rem; border-radius: 9999px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: #5B3FA8; background: #EFE9FC; }
.owp-msg-bot .owp-bubble { background: #F6F3FD; border-color: #DDD3F4; }
.owp-intro-ai .owp-intro-ic { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 9999px; color: #5B3FA8; background: #EFE9FC; }
.owp-person-row { display: flex; padding: .45rem .75rem 0; background: #fff; border-top: 1px solid #E1E8F2; }
.owp-person { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; font-size: .75rem; font-weight: 600; color: #1A4FA3; background: #EAF6FF; border-radius: 9999px; }
.owp-person:hover { background: #D3ECFF; }
.owp-person:disabled { opacity: .6; }
.owp-person-row + .owp-composer { border-top: 0; }
.owp-wait { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .55rem .9rem; font-size: .75rem; line-height: 1.4; color: #7A5200; background: #FFF3D9; border-top: 1px solid #F4E1B5; }
.owp-wait svg { flex: none; margin-top: .1rem; }
/* WhatsApp inside the live chat: a choice on the first screen, "Continue on WhatsApp" in a chat, and a note once it has. */
.owp-person-row { gap: .4rem; flex-wrap: wrap; }
.owp-wa { color: #0B6B3A; background: #E4F7EC; text-decoration: none; }
.owp-wa:hover { background: #CDEFDB; }
.owp-wa-start { display: flex; align-items: center; gap: .55rem; margin-top: .75rem; padding: .6rem .75rem; border-radius: 12px; font-size: .8125rem; color: #0B6B3A; background: #E4F7EC; text-decoration: none; }
.owp-wa-start:hover { background: #CDEFDB; }
.owp-wa-start svg, .owp-wa-on svg, .owp-msg-system svg { flex: none; }
.owp-wa-note { margin: 0; padding: .35rem .9rem .1rem; font-size: .75rem; line-height: 1.4; color: #0B6B3A; background: #fff; }
.owp-wa-on { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .55rem .9rem; font-size: .75rem; line-height: 1.4; color: #0B6B3A; background: #E4F7EC; border-top: 1px solid #C6EBD4; }
.owp-wa-on a { font-weight: 600; text-decoration: underline; color: inherit; }
.owp-msg-system { display: flex; gap: .4rem; align-items: center; justify-content: center; margin: .6rem auto; max-width: 92%; padding: .4rem .7rem; border-radius: 9999px; font-size: .75rem; line-height: 1.35; color: #0B6B3A; background: #E4F7EC; text-align: center; }
.owp-sending .owp-bubble { opacity: .75; }
.owp-dots { display: inline-flex; gap: .25rem; align-items: center; min-height: 1.4rem; }
.owp-dots span { width: .4rem; height: .4rem; border-radius: 9999px; background: #8A7AC4; animation: owp-dot 1s infinite ease-in-out; }
.owp-dots span:nth-child(2) { animation-delay: .15s; }
.owp-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes owp-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .owp-dots span { animation: none; opacity: .7; } }


/* ---------- The installed app's gestures (assets/app.js: appGestures) ----------
   Pull down from the top to refresh; swipe in from the left edge to go back (the iPhone store app). The two round
   markers follow the finger and are made of the same frosted glass as the bars. html.owp-app only stops the browser's
   own pull-to-refresh and bounce, so there aren't two of them. */
html.owp-app { overscroll-behavior-y: contain; }
#owp-ptr, #owp-swipe { position: fixed; z-index: 95; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9999px; color: #4A5B72; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 0 0 1px var(--hairline), 0 10px 26px -10px rgba(15,30,54,.35); pointer-events: none; }
#owp-ptr { left: 50%; margin-left: -20px; top: calc(env(safe-area-inset-top, 0px) + 10px); translate: 0 var(--ptr-y, -64px); opacity: var(--ptr-o, 0); }
#owp-ptr svg { transform: rotate(var(--ptr-r, 0deg)); }
#owp-swipe { left: 0; top: 50%; translate: calc(var(--sw-x, 0px) - 48px) -50%; opacity: var(--sw-o, 0); }
#owp-swipe svg { transform: rotate(90deg); }
#owp-ptr.ready, #owp-swipe.ready { color: #1B5FBE; }
#owp-ptr.settle, #owp-swipe.settle { transition: translate .32s var(--ease-sheet), opacity .22s var(--ease-out); }
#owp-ptr.refreshing { color: #1B5FBE; }
#owp-ptr.refreshing svg { animation: owp-spin .8s linear infinite; }
@keyframes owp-spin { to { transform: rotate(360deg); } }

[role="dialog"].slide-up { max-height: 94vh; max-height: 94dvh; }

/* A sheet from the bottom of a phone has a grip at the top to drag it away (assets/app.js: openDialog). The grip's row never
   blocks a tap: only the small pill in the middle takes a finger. */
.owp-grab { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; height: 24px; margin-bottom: -24px; pointer-events: none; background: #fff; } /* solid, so what scrolls under the handle is hidden, not struck through */
.owp-grab span { pointer-events: auto; touch-action: none; display: block; width: 120px; height: 24px; background: linear-gradient(#C9D3E3, #C9D3E3) center 9px / 38px 5px no-repeat; }
@media (min-width: 640px) { .owp-grab { display: none; } }

/* ---------- The order-placed screen: one small, warm beat (it is seen once per order) ----------
   The tick comes in from 90% and the cards follow it 60ms apart; for anyone who asked for less motion they simply appear. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes owp-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  @keyframes owp-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  .co-done > div:first-child > div:first-child { animation: owp-pop .3s var(--ease-out) both; }
  .co-done .co-cards > * { animation: owp-rise .3s var(--ease-out) both; }
  .co-done .co-cards > :nth-child(1) { animation-delay: 120ms; }
  .co-done .co-cards > :nth-child(2) { animation-delay: 180ms; }
  .co-done .co-cards > :nth-child(3) { animation-delay: 240ms; }
  .co-done .co-cards > :nth-child(n+4) { animation-delay: 300ms; }
}

/* ---------- The checkout's pay bar (assets/pages/checkout.js: drawBar) ----------
   A phone only. Along the bottom, in the same frosted glass as the tab bar, while the Pay button is out of sight. */
#co-bar { display: none; }
@media (max-width: 767px) {
  #co-bar:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background-color: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 -1px 0 var(--hairline); }
  #co-bar p { display: grid; line-height: 1.15; }
  #co-bar p span { font-size: 12px; font-weight: 600; color: #4A5B72; }
  #co-bar p b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
  #co-bar button { min-height: 48px; padding: 0 22px; border-radius: 9999px; background: #1B5FBE; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(12,42,94,.6); }
  .owp-kb #co-bar { display: none; }
}

/* ---------- The on-screen keyboard (assets/keyboard.js) ----------
   keyboard.js puts html.owp-kb on while a touch screen's keyboard is up, and sets --kb-h (how much of the page the keyboard
   lies over: an iPhone, or Chrome without interactive-widget; 0 where the page itself got shorter, as in Chrome on Android
   with interactive-widget=resizes-content and in the Android app) and --vvh (the height left to see). Everything pinned to
   the bottom either steps aside while someone types or rides on the keyboard, so the box they are in is never covered. */
:root { --kb-h: 0px; }
/* where the browser scrolls a tapped box into view itself, it leaves room for the thin bar above it and a line of help below it */
input, textarea, select { scroll-margin-block: 96px 120px; }
/* bars and cards along the bottom would sit on top of the boxes above the keyboard: they wait */
.owp-kb #owp-basket-nudge, .owp-kb #owp-cookiebar, .owp-kb #owp-here, .owp-kb #owp-geo-ask,
.owp-kb .festive-tip, .owp-kb .festive-toast, .owp-kb #sticky, .owp-kb #sticky-bar { display: none; }
/* the live chat rides on the keyboard: the conversation shrinks to what is left and its message box stays in sight */
html.owp-kb body #owp-chat-panel.owp-chat { bottom: calc(var(--kb-h, 0px) + 8px); max-height: calc(var(--vvh, 100dvh) - 16px); }
/* sheets and drawers end where the keyboard begins (their own scrolling carries the rest) */
.owp-kb .owp-dialog { padding-bottom: var(--kb-h, 0px); }
.owp-kb [role="dialog"].slide-up { max-height: calc(100dvh - var(--kb-h, 0px) - 12px); }
/* a message ("Added to your basket", a problem with a field) is seen above the keyboard, not under it */
html.owp-kb body #owp-toast { bottom: calc(var(--kb-h, 0px) + 16px); }

/* ---------- Placeholders: grey shapes where a page's words and pictures will be, while they load ----------
   They are plain HTML in the page (so they show before any script has run) and are replaced when the page draws
   itself. A soft light moves across them; for anyone who has asked for less motion they stand still. */
.sk { position: relative; overflow: hidden; border-radius: 12px; background: #E7EDF5; }
.sk::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: sk-shimmer 1.5s linear infinite; } /* constant motion: an even sweep, like the other shimmers */
@keyframes sk-shimmer { to { translate: 100% 0; } }
.sk-media { aspect-ratio: 1 / 1.1; border-radius: 1.6rem; }
.sk-tall { aspect-ratio: 1 / 1; border-radius: 1.75rem; }
.sk-line { height: 13px; }
.sk-h1 { height: 30px; border-radius: 10px; }
.sk-price { height: 40px; border-radius: 12px; }
.sk-btn { height: 56px; border-radius: 9999px; }
.sk-card { min-height: 15rem; border-radius: 1.6rem; }

/* ==========================================================================
   The phone: a tab bar along the bottom, one thin bar along the top, and round buttons that
   stay out of the way (assets/app.js: buildTabBar, buildHeader, the scroll note owp-reading).
   Under 768px wide only: a tablet and a computer keep the header they had. The tab bar holds
   the five places people go (Home, Shop, Care, Basket, Account); the top keeps the menu, the logo
   and the search box, and the Collect / Delivery switch scrolls away with the page. The live chat
   and WhatsApp buttons are smaller, sit just above the tab bar, and tuck away behind it while
   someone reads down a page. Everything that used to sit at the bottom of the screen (the
   product page's add bar, the basket reminder, the toast) sits above the tab bar now.
   ========================================================================== */
.owp-tabbar { display: none; }
@media (max-width: 767px) {
  :root { --tab-h: calc(52px + env(safe-area-inset-bottom, 0px)); }

  .owp-tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding-bottom: env(safe-area-inset-bottom, 0px); background-color: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 -1px 0 var(--hairline); }
  .owp-tabbar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 52px; max-width: 560px; margin: 0 auto; }
  .owp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding-top: 2px; color: #4A5B72; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .01em; }
  .owp-tab[aria-current="page"] { color: #1B5FBE; }
  .owp-tab-ic { position: relative; display: grid; place-items: center; }
  .owp-tab-badge { position: absolute; top: -6px; left: 52%; min-width: 17px; height: 17px; padding: 0 4.5px; border-radius: 9999px; background: #B23B1E; color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff; }
  .owp-tab-badge[data-n="0"] { display: none; }
  .owp-ic-check, .owp-lab-added { display: none; }
  .owp-tab-added { color: #187A44; }
  .owp-tab-added .owp-ic-bag, .owp-tab-added .owp-lab-basket { display: none; }
  .owp-tab-added .owp-ic-check { display: grid; }
  .owp-tab-added .owp-lab-added { display: inline; }
  .owp-kb .owp-tabbar { display: none; }

  /* the top: one thin bar. The Collect / Delivery switch is part of the page, not stuck above it. */
  #owp-fbar { position: static; }
  .has-tabbar .owp-hdr-basket { display: none; }
  #owp-q { text-overflow: ellipsis; }
  /* a field's words are 16px or more on a phone: any smaller and an iPhone zooms the whole page in when one is tapped */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), select, textarea { font-size: 16px !important; }
  #owp-menu { max-height: calc(100vh - 120px - var(--tab-h)); max-height: calc(100dvh - 120px - var(--tab-h)); overflow-y: auto; overscroll-behavior: contain; }

  /* what used to sit at the bottom of the screen now sits above the tab bar */
  body.has-tabbar #owp-footer { padding-bottom: var(--tab-h); }
  body.has-tabbar #owp-basket-nudge { bottom: calc(var(--tab-h) - 8px); }
  body.has-tabbar #owp-cookiebar { bottom: var(--tab-h); }
  #owp-toast { width: max-content; max-width: calc(100vw - 24px); } /* it was squeezed into the right half of the screen on a phone */
  body.has-tabbar #owp-toast { bottom: calc(var(--tab-h) + 14px); }
  body.has-tabbar #sticky, body.has-tabbar #sticky-bar { bottom: var(--tab-h); transition-property: transform, visibility; }
  body.has-tabbar #sticky[aria-hidden="true"], body.has-tabbar #sticky-bar[aria-hidden="true"] { visibility: hidden; transition-delay: 0s, .2s; } /* tucked away, it must not show through the glass */

  /* the round buttons: smaller, and just above the tab bar */
  #owp-chat-btn, #owp-whatsapp { width: 46px; height: 46px; }
  #owp-chat-btn, #owp-whatsapp { right: 12px; } /* both on the right: WhatsApp sits above the chat (.owp-wa-up) */
  #owp-chat-btn svg { width: 22px; height: 22px; }
  #owp-whatsapp svg { width: 24px; height: 24px; }
  body.has-tabbar #owp-chat-btn.bottom-5, body.has-tabbar #owp-whatsapp.bottom-5 { bottom: calc(var(--tab-h) + 12px); }
  #owp-chat-panel { right: 12px; width: min(380px, calc(100vw - 24px)); }
  body.has-tabbar #owp-chat-panel.bottom-24 { bottom: calc(var(--tab-h) + 70px); max-height: min(36rem, calc(100vh - var(--tab-h) - 150px)); max-height: min(36rem, calc(100dvh - var(--tab-h) - 150px)); }
  /* while someone reads down the page they tuck away behind the tab bar; back on a scroll up, at the top, or at the end */
  .owp-reading #owp-chat-btn, .owp-reading #owp-whatsapp { translate: 0 calc(100% + 44px); opacity: 0; pointer-events: none; }
  .owp-reading #owp-chat-btn:focus-visible, .owp-reading #owp-whatsapp:focus-visible,
  #owp-chat-btn:has(+ #owp-chat-panel:not([hidden])), #owp-chat-btn:has(#owp-chat-dot:not([hidden])) { translate: none; opacity: 1; pointer-events: auto; }
  .owp-kb #owp-chat-btn, .owp-kb #owp-whatsapp { display: none; }
  body:has(#owp-menu:not([hidden])) #owp-chat-btn, body:has(#owp-menu:not([hidden])) #owp-whatsapp { visibility: hidden; } /* not over the open menu */
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .owp-tab-ic { transition: scale var(--dur-press) var(--ease-out); }
  .owp-tab:active { scale: 1; }
  .owp-tab:active .owp-tab-ic { scale: .86; }
  .owp-tab-added .owp-ic-check { animation: owp-tab-pop .3s var(--ease-out); }
  .owp-tab-added .owp-tab-badge { animation: owp-tab-pop .3s var(--ease-out); }
  @keyframes owp-tab-pop { 0% { scale: .8; opacity: .4; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
  #owp-chat-btn, #owp-whatsapp { transition: translate .34s var(--ease-sheet), opacity .22s var(--ease-out), scale var(--dur-press) var(--ease-out), transform .15s ease, box-shadow .15s ease; }
}


/* Jump to… (staff dashboard): a quiet field, like the search field in Settings on an iPhone */
.jump input[type="search"] { -webkit-appearance: none; appearance: none; border: 0; }
.jump input:focus ~ .jump-key, .jump input:not(:placeholder-shown) ~ .jump-key { display: none; }

/* ==========================================================================
   The Apple layer (the look of apple.com and iOS, over the premium look above)
   What it does, in the order Apple's own guidelines give it: clarity (one typeface, fewer
   weights, tighter headings, text that balances itself), depth (frosted bars, hairlines and
   soft shadows instead of heavy ones) and motion that answers a touch (a button gives a
   little under the finger and springs back; a card lifts when the pointer reaches it;
   sheets slide in on an iPhone's own curve). Only transform-type properties and opacity
   move, and prefers-reduced-motion switches all of it off. The face and the corners come from
   tailwind.config.js (rebuild with npm run build:css); the rest is here. To take the whole layer
   off, delete from this comment to the end of the file.
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, .font-serif) { letter-spacing: -.022em; text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(button) { text-wrap: balance; } /* "Order and pay on collection · £8.49" breaks in the middle, not with a stray dot on its own line */

/* Buttons answer a touch: they give a little under the finger and spring back. (`scale` is its own
   property, so it never fights a button's own transform; :where() keeps these easy to override.) */
@media (prefers-reduced-motion: no-preference) {
  :where(button, [role="button"], a[class*="rounded-full"][class*="px-"], a[class*="rounded-xl"][class*="px-"], a[class*="rounded-lg"][class*="px-"]) {
    transition: scale var(--dur-press) var(--ease-out), background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
  }
}
:where(button:not(:disabled), [role="button"], a[class*="rounded-full"][class*="px-"], a[class*="rounded-xl"][class*="px-"], a[class*="rounded-lg"][class*="px-"]):active { scale: .97; }
.pcard-add:active { scale: 1; }
:where(button, [role="button"], summary, label, a) { -webkit-tap-highlight-color: transparent; }
/* a tap on a control is a tap, not the start of a double-tap zoom: the click fires at once */
:where(button, [role="button"], summary, label, a, select, input) { touch-action: manipulation; }

/* Cards lift to meet the pointer (never on a touch screen, where there is no pointer to meet) */
.pcard-media { transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out), scale var(--dur-press) var(--ease-out); }
.pcard-media:active { scale: .985; }
@media (hover: hover) and (pointer: fine) {
  .pcard-media:hover { translate: 0 -4px; box-shadow: 0 2px 6px rgba(15,30,54,.05), 0 26px 50px -22px rgba(15,30,54,.32); }
}

/* The bars are frosted glass: what scrolls under them shows through, softened and a little richer */
#owp-main { background-color: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-color: var(--hairline); }
#owp-fbar { background-color: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-color: var(--hairline); box-shadow: 0 1px 0 var(--hairline), 0 10px 26px -18px rgba(15,30,54,.2); }
#owp-nav { background-color: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-color: var(--hairline); }
#owp-nav.compact { box-shadow: 0 1px 0 var(--hairline), 0 10px 26px -18px rgba(15,30,54,.2); }

/* Fields: a quiet halo round the one you are in, as on an iPhone */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):focus-visible { outline: 2px solid #1B5FBE; outline-offset: 0; box-shadow: 0 0 0 5px rgba(27, 95, 190, .18); }

/* The staff sidebar: the same quiet press and tint */
.dash-nav { transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), scale var(--dur-press) var(--ease-out); }

/* The staff dashboard's top bar and sidebar are glass too (the page scrolls under them) */
header.sticky.bg-white { background-color: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-color: var(--hairline); }
aside.sticky.bg-white { background-color: rgba(255,255,255,.7); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-color: var(--hairline); }

/* The display face is a little wider than the old serif: a touch smaller on a phone, so "Shop." keeps clear of the bottles */
@media (max-width: 639px) { .door-word { font-size: clamp(52px, 18.5vw, 92px); } .door-shop .door-copy { margin-top: 40px; } }

/* Sheets and drawers: what is behind them softens, as on an iPhone */
[class*="backdrop-blur-[2px]"] { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }

/* Moving between pages is a soft cross-fade, not a flash (browsers that can't do it just change page as they always did) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: var(--ease-out); }
}

/* ---------- The booking page (book.html) ----------
   A short hero with the shopfront, then the services as picture cards. Each card's next free
   times are buttons that book them straight away (assets/pages/book.js), and a tap anywhere
   else on the card is its Book button (book.js again: an overlay on the button can't do it, as
   a button shrinks a little while it's pressed). Phones: the picture beside the words; wider:
   on top, two or three across. */
.bk-page { padding-bottom: 64px; }
.bk-wrap { max-width: 72rem; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .bk-wrap { padding-inline: 24px; } }
.bk-hero { padding-block: 20px 4px; background: linear-gradient(180deg, #EAF6FF 0%, rgba(234,246,255,0) 100%); }
.bk-hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .bk-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding-block: 12px; } }
.bk-eyebrow { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #1A4FA3; box-shadow: 0 0 0 1px rgba(26,79,163,.12); }
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.bk-title { margin-top: 12px; font-size: 32px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #0F1E36; text-wrap: balance; }
@media (min-width: 640px) { .bk-title { font-size: 48px; } }
.bk-lede { margin-top: 12px; max-width: 36rem; font-size: 17px; line-height: 1.55; color: #4A5B72; }
.bk-trust { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-trust li { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #fff; padding: 6px 12px 6px 8px; font-size: 13px; font-weight: 600; color: #0F1E36; box-shadow: 0 0 0 1px #E1E8F2; }
.bk-trust svg, .bk-shop svg, .bk-btn-soft svg { width: 18px; height: 18px; color: #1A4FA3; }
.bk-shop { display: none; position: relative; margin: 0; }
@media (min-width: 1024px) { .bk-shop { display: block; } }
.bk-shop img { display: block; width: 100%; height: auto; aspect-ratio: 822 / 406; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(12,42,94,.45); }
.bk-shop figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.94); padding: 8px 14px 8px 10px; font-size: 13px; font-weight: 600; color: #0F1E36; }

.bk-pick-head { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.bk-h2 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #0F1E36; text-wrap: balance; }
@media (min-width: 640px) { .bk-h2 { font-size: 28px; } }
.bk-sub { font-size: 15px; color: #4A5B72; }
.bk-grid { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.bk-card { position: relative; display: flex; cursor: pointer; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 1px 2px rgba(15,30,54,.04), 0 10px 28px -14px rgba(15,30,54,.16); transition: box-shadow .2s var(--ease), translate .2s var(--ease); }
@media (hover: hover) { .bk-card:hover { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 2px 6px rgba(15,30,54,.05), 0 24px 56px -20px rgba(15,30,54,.28); } }
.bk-card[hidden] { display: none; }
.bk-top { display: flex; gap: 14px; padding: 12px 12px 0; }
.bk-pic { flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: 18px; background: #EEF4FB; }
.bk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-text { min-width: 0; flex: 1; padding-top: 2px; }
.bk-kind { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6B82; }
.bk-kind.bk-nhs { color: #1A4FA3; }
.bk-name { margin-top: 2px; font-size: 18px; line-height: 1.25; font-weight: 700; color: #0F1E36; text-wrap: balance; }
.bk-price { margin-top: 4px; font-size: 14px; line-height: 1.4; font-weight: 600; color: #0F1E36; }
.bk-desc { margin-top: 4px; font-size: 14px; line-height: 1.45; color: #4A5B72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-point { margin-top: 6px; display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: #4A5B72; }
@media (max-width: 639px) { .bk-point { display: none; } }
.bk-point svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #16A34A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-foot { margin-top: auto; padding: 12px; }
.bk-times { margin-bottom: 10px; }
.bk-times-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #4A5B72; }
.bk-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CFE0F5; background: #F5F9FE; font-size: 15px; font-weight: 600; color: #1A4FA3; font-variant-numeric: tabular-nums; transition: background .15s var(--ease), border-color .15s var(--ease), scale .1s var(--ease); }
@media (hover: hover) { .bk-chip:hover { border-color: #1B5FBE; background: #EAF6FF; } }
.bk-chip:active { scale: .97; }
.bk-chip-skel { width: 76px; height: 44px; border-radius: 12px; background: linear-gradient(90deg, #EEF4FB 25%, #F7FAFE 50%, #EEF4FB 75%); background-size: 200% 100%; animation: bk-shimmer 1.2s linear infinite; }
@keyframes bk-shimmer { to { background-position: -200% 0; } }
.bk-none { font-size: 13px; color: #5B6B82; }
.bk-actions { display: flex; align-items: center; gap: 12px; }
.bk-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; background: #1B5FBE; color: #fff; font-size: 16px; font-weight: 600; transition: background .15s var(--ease); }
.bk-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .bk-card:hover .bk-go { background: #1A4FA3; } }
.bk-about { padding: 12px 4px; font-size: 14px; font-weight: 600; color: #1A4FA3; white-space: nowrap; }
@media (hover: hover) { .bk-about:hover { text-decoration: underline; } }
@media (min-width: 640px) {
  .bk-top { display: block; padding: 0; }
  .bk-pic { width: auto; height: auto; aspect-ratio: 16 / 9; border-radius: 24px 24px 0 0; }
  .bk-text { padding: 16px 20px 0; }
  .bk-foot { padding: 14px 20px 20px; }
}

.bk-how { margin-top: 48px; }
.bk-steps { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 768px) { .bk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.bk-steps li { display: flex; align-items: flex-start; gap: 14px; border-radius: 20px; background: #F5F9FE; padding: 16px; box-shadow: inset 0 0 0 1px #E1E8F2; }
.bk-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1B5FBE; color: #fff; font-size: 15px; font-weight: 700; }
.bk-steps h3 { font-size: 16px; font-weight: 700; color: #0F1E36; }
.bk-steps p { margin-top: 2px; font-size: 14px; line-height: 1.5; color: #4A5B72; }

.bk-where { margin-top: 48px; display: grid; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 10px 28px -14px rgba(15,30,54,.16); }
@media (min-width: 768px) { .bk-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.bk-where img { display: block; width: 100%; height: 100%; aspect-ratio: 822 / 406; object-fit: cover; }
@media (min-width: 768px) { .bk-where img { aspect-ratio: auto; min-height: 260px; } }
.bk-where-text { padding: 20px; }
@media (min-width: 768px) { .bk-where-text { align-self: center; padding: 32px; } }
.bk-where-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.bk-btn-soft { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #EEF4FB; font-size: 15px; font-weight: 600; color: #0F1E36; }
@media (hover: hover) { .bk-btn-soft:hover { background: #E1E8F2; } }

.bk-faq { margin-top: 48px; }
.bk-faq-list { margin-top: 12px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 10px 28px -14px rgba(15,30,54,.16); }
.bk-faq-list details + details { border-top: 1px solid #E1E8F2; }
.bk-faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; font-size: 16px; font-weight: 600; color: #0F1E36; }
.bk-faq-list summary::-webkit-details-marker { display: none; }
.bk-faq-list summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid #5B6B82; border-bottom: 2px solid #5B6B82; rotate: 45deg; translate: 0 -3px; transition: rotate .2s var(--ease), translate .2s var(--ease); }
.bk-faq-list details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.bk-faq-list details p { padding: 0 18px 16px; font-size: 15px; line-height: 1.55; color: #4A5B72; }
.bk-urgent { margin-top: 24px; border-radius: 16px; background: #FFF3D9; padding: 14px 16px; font-size: 15px; color: #8A5300; }

/* "Carry on booking": a booking put away part-way, kept for this visit only (assets/app.js) */
.bk-resume { position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); border-radius: 999px; background: #0F1E36; padding: 6px 6px 6px 16px; color: #fff; box-shadow: 0 18px 40px -16px rgba(15,30,54,.6); animation: owp-up .32s var(--ease-sheet); }
.bk-resume button { min-height: 44px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.bk-resume .bk-resume-go { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px 0 0; text-align: left; }
.bk-resume .bk-resume-x { flex: none; width: 44px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
@media (max-width: 1023px) { .bk-resume { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .bk-chip-skel, .bk-resume { animation: none; } .bk-card, .bk-chip { transition: none; } }

/* ---------- The services page, and each service's own page ----------
   services.html: four of the services' pictures beside the heading (wide screens), chips that
   jump to each kind of service, then each kind as the booking page's picture cards (.bk-card),
   where the whole card opens the service's page (its name is the link, stretched over the
   card) and Book books it. A service's own page (assets/service-render.js): its picture
   beside the heading (above it on a phone), and the other services as small picture cards. */
.sv-mosaic { display: none; }
@media (min-width: 1024px) {
  .sv-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 28px; }
  .sv-tile:nth-child(even) { translate: 0 28px; }
}
.sv-tile { position: relative; display: block; overflow: hidden; border-radius: 24px; background: #EEF4FB; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 18px 40px -22px rgba(15,30,54,.35); transition: box-shadow .2s var(--ease); }
.sv-tile[hidden] { display: none; }
.sv-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sv-tile span { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: rgba(255,255,255,.94); padding: 6px 12px; font-size: 13px; font-weight: 600; color: #0F1E36; }
@media (hover: hover) { .sv-tile:hover { box-shadow: 0 0 0 1px rgba(15,30,54,.1), 0 24px 56px -20px rgba(15,30,54,.42); } }

.sv-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: #0F1E36; box-shadow: 0 0 0 1px #E1E8F2; transition: background .15s var(--ease), box-shadow .15s var(--ease); }
.sv-jump a[hidden] { display: none; }
@media (hover: hover) { .sv-jump a:hover { background: #F5F9FE; box-shadow: 0 0 0 1px #CFE0F5; } }

.sv-group { scroll-margin-top: 112px; }
@media (min-width: 1024px) { .sv-group { scroll-margin-top: 152px; } }
.sv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.sv-h2 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #0F1E36; text-wrap: balance; }
@media (min-width: 640px) { .sv-h2 { font-size: 28px; } }
.sv-sub { font-size: 15px; color: #4A5B72; }
.sv-card .bk-name a { color: inherit; outline: none; }
.sv-card .bk-name a::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.sv-card .bk-name a:focus-visible::after { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1B5FBE; }
.sv-card button.bk-go { position: relative; z-index: 1; }
.bk-pic-none { display: grid; width: 100%; height: 100%; place-items: center; color: #1A4FA3; }
.bk-pic-none svg { width: 40%; height: 40%; }

.sv-hero { display: grid; gap: 20px; }
@media (min-width: 768px) { .sv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 40px; } }
@media (min-width: 1024px) { .sv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 56px; } }
.sv-hero-pic { order: -1; align-self: start; margin: 0; overflow: hidden; border-radius: 24px; background: #EEF4FB; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 24px 48px -28px rgba(15,30,54,.35); }
.sv-hero-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media (min-width: 768px) {
  .sv-hero-pic { order: 0; border-radius: 28px; }
  .sv-hero-pic img { aspect-ratio: 4 / 3; }
}
.sv-rel { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .sv-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-rel a { display: flex; align-items: center; gap: 12px; border-radius: 20px; background: #fff; padding: 10px; box-shadow: 0 0 0 1px rgba(15,30,54,.06), 0 10px 28px -16px rgba(15,30,54,.16); transition: box-shadow .2s var(--ease); }
@media (hover: hover) { .sv-rel a:hover { box-shadow: 0 0 0 1px rgba(15,30,54,.1), 0 18px 40px -18px rgba(15,30,54,.3); } }
.sv-rel img, .sv-rel .bk-pic-none { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: #EEF4FB; }
.sv-rel-name { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; color: #0F1E36; }
.sv-rel-time { display: block; margin-top: 2px; font-size: 13px; color: #5B6B82; }
@media (prefers-reduced-motion: reduce) { .sv-tile, .sv-jump a, .sv-rel a { transition: none; } }

/* ---------- Room for the header before the script draws it ----------
   Every customer page's strip, header and (on wider screens) the Click & Collect bar are
   built by assets/app.js once the page has loaded. Until then the page's content sits where
   the header will go, and jumps down when it arrives (a layout shift Google scores as poor).
   So the page reserves the header's height up front, and app.js takes it away in the same
   moment it inserts the header (html.owp-shell). The heights are the built header's, measured
   per breakpoint: test/phone-chrome.test.mjs keeps them honest. Pages without the header
   (the dashboard, the Hub, the kiosk) don't use main#main, so nothing is reserved there.
   The room is padding on the body, not a margin on main: a margin would collapse through
   the body and move the body itself, which Chrome counts as a shift of the whole page. */
html:not(.owp-shell) body:has(> main#main) { padding-top: 97px; }
@media (min-width: 640px) { html:not(.owp-shell) body:has(> main#main) { padding-top: 128px; } }
@media (min-width: 768px) { html:not(.owp-shell) body:has(> main#main) { padding-top: 213px; } }
@media (min-width: 1024px) { html:not(.owp-shell) body:has(> main#main) { padding-top: 169px; } }
/* The account page's sign-in box is drawn by script too: hold its room so the links below don't jump. */
#auth-box:empty { min-height: 248px; }
/* The shop pages' breadcrumb and heading panel are filled by shop.js: hold their room (the built
   heights for an ordinary collection; a longer title or description adds a little). */
#crumbs:empty { min-height: 20px; }
#head:empty { min-height: 65px; }
@media (min-width: 640px) { #head:empty { min-height: 257px; } }

/* On a phone the Click & Collect / Delivery switch isn't a third bar across the top: checkout
   asks the same question, and the product page offers both. It stays on wider screens. */
@media (max-width: 767px) { #owp-fbar { display: none; } }

/* The shop and search pages on a phone: one short heading, so the products start on the
   first screen instead of under a full-screen banner. */
@media (max-width: 639px) {
  #head { padding: 18px 18px 16px; border-radius: 20px; }
  #head h1 { font-size: 28px; line-height: 1.1; }
  #head .shop-eyebrow, #head > p, #head > ul, #head > .pointer-events-none { display: none; }
  #head .mb-3 { margin-bottom: 6px; }
}

/* The chat bubble keeps out of the way of what you're reading or typing: it sits on the
   right above the tab bar, and steps aside while any box has the keyboard. */
html.owp-typing #owp-chat-btn, html.owp-typing #owp-whatsapp { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
#owp-whatsapp.owp-wa-up { margin-bottom: 62px; }

/* A product with no photo yet, on a phone: a small picture beside the name instead of a
   screen-high box of nothing, so the name, price and button are the first thing seen. */
.pdp-thumb { display: none; }
@media (max-width: 1023px) {
  .pdp-gallery.no-photo { display: none; }
  .pdp-thumb { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 20px; padding: 10px; margin-bottom: 14px; }
}

/* ---------- The Urdu pages (scripts/urdu-pages.mjs) ----------
   <main> and the booking form read right to left, in an Urdu font the phone or computer
   already has (Android, iPhone, Mac and Windows all carry one; nothing is downloaded): Nastaliq
   where there is one, Naskh otherwise. English words and numbers keep the site's own font.
   Urdu needs taller lines than English, and letter spacing pulls its joined letters apart, so
   the English headings' tight tracking is undone. The menus around the page stay in English. */
:root { --font-urdu: -apple-system, BlinkMacSystemFont, Inter, "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; }
html[lang="ur"] main, .owp-dialog[lang="ur"], .bk-resume[lang="ur"], #owp-toast[lang="ur"], .owp-lang-go[lang="ur"] { font-family: var(--font-urdu); }
html[lang="ur"] main *, .owp-dialog[lang="ur"] * { letter-spacing: normal !important; font-family: inherit; }
html[lang="ur"] main, html[lang="ur"] main :is(p, li, label, dd, dt, summary, span, b, a, button, legend, option, select, input), .owp-dialog[lang="ur"] :is(p, li, label, span, b, a, button, legend, h2) { line-height: 1.95; }
html[lang="ur"] main :is(h1, h2, h3) { line-height: 1.55 !important; }
html[lang="ur"] main [lang="en"], .owp-dialog[lang="ur"] [lang="en"] { font-family: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif; }
/* Lists, arrows and the odd left-or-right spacing, the other way round. */
[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .pl-7 { padding-left: 0; padding-right: 1.75rem; }
[dir="rtl"] .pr-1 { padding-right: 0; padding-left: .25rem; }
[dir="rtl"] .-ml-2 { margin-left: 0; margin-right: -.5rem; }
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] svg.arr, [dir="rtl"] [data-i="arrow"] > svg, [dir="rtl"] .bk-go svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .btn-pill:hover svg.arr { transform: scaleX(-1) translateX(3px); } }
/* "Read this page in English" / "اردو میں پڑھیں" at the top of the page. */
/* The other language, kept quiet: a small text link in the page's own colour, not a button. */
.owp-lang-go { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 2px; color: inherit; opacity: .7; font-size: 13px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(127, 140, 160, .45); }
.owp-lang-go:hover, .owp-lang-go:focus-visible { opacity: 1; text-decoration-color: currentColor; }
.owp-lang-go[lang="ur"] { font-size: 14px; }
/* Money the scripts write into an Urdu sentence (the certificate check) stays the right way round. */
[dir="rtl"] [data-charge], [dir="rtl"] .tabular-nums { unicode-bidi: isolate; }

/* ---------- Surgery orders (dashboard → Pharmacy → Surgery orders, assets/pages/surgery-orders.js) ----------
   Laid out like the managed-repeat screens the team already uses: green underlined tabs, grey
   segmented filters with counts, medicines as chips, the schedule in words, a coloured status, and a
   green tick to reorder. The status colours: overdue red, late orange, due today amber, due soon
   yellow, ordered green, scheduled and paused grey. */
.so { --so-green: #2E8B57; --so-green-bg: #EAF6EF; --so-line: #E6E9EE; --so-ink: #1F2933; --so-soft: #5F6B7A; color: var(--so-ink); }
.so-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--so-line); }
.so-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.so-tabs button { position: relative; padding: 10px 2px 12px; font-size: 16px; color: var(--so-soft); white-space: nowrap; }
.so-tabs button[aria-selected="true"] { color: var(--so-green); }
.so-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--so-green); border-radius: 2px; }
.so-badge { margin-bottom: 8px; border-radius: 999px; background: #17402B; color: #fff; padding: 3px 12px; font-size: 13px; font-weight: 600; }
.so-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; }
.so-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 6px; background: #EEF0F3; }
.so-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 5px; font-size: 15px; color: #2D3748; white-space: nowrap; }
.so-seg button[aria-pressed="true"] { background: #fff; color: var(--so-green); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.so-count { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 7px; border-radius: 999px; background: #C9372C; color: #fff; font-size: 12px; font-weight: 700; }
.so-search { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--so-line); border-radius: 6px; background: #fff; color: var(--so-soft); min-width: 220px; flex: 1 1 220px; max-width: 360px; }
.so-search input { width: 100%; border: 0; outline: 0; font-size: 15px; background: transparent; color: var(--so-ink); }
.so-select { min-height: 40px; min-width: 190px; padding: 0 12px; border: 1px solid var(--so-line); border-radius: 6px; background: #fff; font-size: 15px; }
/* The lists, laid out like an inset grouped list: each patient a white card of its own on a
   soft grey ground, with room between them and a hairline round each; the column names sit
   above as small grey labels. A coloured bar inside the card's left edge says how late it is. */
.so-wrap { overflow-x: auto; padding: 2px 12px 6px; border-radius: 18px; background: #F2F4F7; }
.so-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0 10px; font-size: 15px; }
.so-table th { padding: 12px 14px 0; text-align: left; font-weight: 600; font-size: 13px; letter-spacing: .01em; color: #667085; white-space: nowrap; }
.so-table td { padding: 14px; background: #fff; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); vertical-align: middle; transition: background-color .2s var(--ease); }
.so-table tbody td:first-child { border-left: 1px solid var(--hairline); border-radius: 14px 0 0 14px; }
.so-table tbody td:last-child { border-right: 1px solid var(--hairline); border-radius: 0 14px 14px 0; }
.so-table tbody tr > td:only-child { border-radius: 14px; }
.so-table tbody tr[data-state="overdue"] > td:first-child { box-shadow: inset 4px 0 0 #E5484D; }
.so-table tbody tr[data-state="late"] > td:first-child { box-shadow: inset 4px 0 0 #F2802C; }
.so-table tbody tr[data-state="due"] > td:first-child { box-shadow: inset 4px 0 0 #F5B400; }
.so-table tbody tr[data-state="failed"] > td:first-child { box-shadow: inset 4px 0 0 #C9372C; }
.so-table tbody tr[data-sel] > td { background: #F1F7FF; border-color: #BBD5F7; }
@media (hover: hover) {
  .so-table tbody tr:not([data-sel]):hover > td { background: #FBFCFE; }
}
.so-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-align: left; color: var(--so-ink); }
.so-name:hover { text-decoration: underline; }
.so-chips { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.so-chip { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid var(--so-line); border-radius: 999px; background: #fff; font-size: 13px; line-height: 1.25; }
.so-chip.off { color: #98A2B3; text-decoration: line-through; }
.so-chip.ext { gap: 6px; border-style: dashed; background: #FBFAF6; }
.so-chip.ext small { font-size: 11px; font-weight: 700; color: #6B5A33; }
.so-chip.bl { border-color: #CDBDF0; background: #F6F2FE; }
/* A row's medicines with some in a blister pack: those, then the external ones, a line each */
.so-medgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; flex-basis: 100%; }
.so-medtag { margin-right: 2px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #667085; }
.so-medtag.bl { color: #5B3A9E; }
/* In the blister pack or external: a switch on each medicine */
.so-switch { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #475467; white-space: nowrap; }
.so-switch-track { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #D0D5DD; transition: background-color .15s ease; }
.so-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: transform .2s var(--ease-out); }
.so-switch[aria-checked="true"] { color: #5B3A9E; }
.so-switch[aria-checked="true"] .so-switch-track { background: #6941C6; }
.so-switch[aria-checked="true"] .so-switch-thumb { transform: translateX(18px); }
.so-switch[disabled] { opacity: .45; cursor: not-allowed; }
.so-switch:focus-visible { outline: 2px solid #6941C6; outline-offset: 2px; }
/* The calendar for the next order date: big days to tap, the past greyed out */
.so-cal { max-width: 27rem; margin-top: 6px; padding: 14px; border: 1px solid var(--so-line); border-radius: 14px; background: #fff; }
.so-cal-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.so-cal-quick button { min-height: 44px; padding: 0 14px; border: 1px solid var(--so-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.so-cal-quick button[aria-pressed="true"] { border-color: var(--so-green); background: var(--so-green-bg); color: #1E6B43; }
.so-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; }
.so-cal-head b { font-size: 17px; }
.so-cal-head button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 24px; line-height: 1; }
.so-cal-head button[disabled] { opacity: .25; cursor: default; }
.so-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.so-cal-dow { padding: 4px 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #667085; }
.so-cal-day { height: 48px; border-radius: 12px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--so-ink); }
.so-cal-day.today { box-shadow: inset 0 0 0 2px var(--so-green); }
.so-cal-day.on { background: var(--so-green); color: #fff; }
.so-cal-day[disabled] { color: #C4CAD3; cursor: not-allowed; }
.so-cal-day:focus-visible, .so-cal-quick button:focus-visible, .so-cal-head button:focus-visible { outline: 2px solid var(--so-green); outline-offset: 2px; }
.so-cal-chosen { margin-top: 10px; font-size: 16px; font-weight: 600; }
.so-cal-kept { margin-top: 6px; font-size: 13px; color: #8A5300; }
@media (hover: hover) {
  .so-cal-day:not([disabled]):not(.on):hover, .so-cal-head button:not([disabled]):hover, .so-cal-quick button:hover { background: #F0F7F3; }
}
@media (prefers-reduced-motion: reduce) { .so-switch-track, .so-switch-thumb { transition: none; } }
.so-tag { display: inline-flex; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #EEF0FF; color: #4338CA; }
/* what a managed repeat still needs (date of birth, surgery, exemption): it can be ordered meanwhile */
.so-need { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #8A5300; }
.so-when { font-size: 15px; line-height: 1.45; }
.so-rel { font-weight: 500; }
.so-rel.failed { color: #C9372C; } .so-rel.overdue { color: #E5484D; } .so-rel.late { color: #E5741B; } .so-rel.due { color: #B7791F; } .so-rel.soon { color: #8A6100; } .so-rel.ordered { color: #2E8B57; } .so-rel.scheduled, .so-rel.paused { color: var(--so-soft); }
.so-pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.so-pill.failed { background: #C9372C; color: #fff; } .so-pill.overdue { background: #EF5A55; color: #fff; } .so-pill.late { background: #F2802C; color: #fff; } .so-pill.due { background: #F5B400; color: #3A2A00; }
.so-pill.soon { background: #FFF1C2; color: #7A5600; } .so-pill.ordered { background: #E2F5EA; color: #1E7A4A; } .so-pill.scheduled { background: #EEF0F3; color: #4A5568; } .so-pill.paused { background: #fff; color: #5F6B7A; box-shadow: inset 0 0 0 1px #D0D5DD; }
/* the tick: blue as normal, yellow when it's late or overdue, red when the last order failed */
/* The tick: a glass capsule that says what it does (Order, Order again, Send, Sent), in the
   manner of iOS. Frosted white with a hairline edge and a soft glow in the state's colour, its
   glyph and word in that colour (to order: blue; late: orange; failed or not sent: red); green
   glass that says Sent once it's ordered and sent. 34px high, a little more to press (the
   invisible ring), pressed the instant it's touched, and a small spring when an order has just
   gone (.pop, set once by the page). No backdrop blur: it sits on white rows, where blur shows
   nothing and costs the tablet when the list scrolls. */
.so-tick { --tint: #0071E3; --glow: rgba(0, 122, 255, .26); position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--tint); font-size: 14px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 2px 8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .95); -webkit-tap-highlight-color: transparent; transition: box-shadow .15s ease, background-color .15s ease; }
.so-tick::after { content: ''; position: absolute; inset: -5px -2px; border-radius: inherit; }
.so-tick svg { width: 15px; height: 15px; flex: none; }
@media (hover: hover) { .so-tick:not([disabled]):hover { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .95); } }
@media (prefers-reduced-motion: no-preference) {
  .so-tick { transition: scale .1s ease-out, box-shadow .15s ease, background-color .15s ease; }
  .so-tick:not([disabled]):active { scale: .94; }
}
.so-tick:focus-visible { outline: 3px solid rgba(0, 122, 255, .45); outline-offset: 2px; }
.so-tick.late { --tint: #B65700; --glow: rgba(255, 149, 0, .32); }
.so-tick.failed, .so-tick.unsent { --tint: #D70015; --glow: rgba(255, 59, 48, .28); }
.so-tick.done { --tint: #fff; --glow: rgba(42, 165, 75, .34); background: rgba(42, 165, 75, .94); }
.so-tick[disabled] { --tint: rgba(60, 60, 67, .36); --glow: transparent; cursor: default; }
.so-tick.pop { animation: so-tick-pop .44s var(--ease-turn) both; }
.so-tick.pop path { stroke-dasharray: 25; stroke-dashoffset: 25; animation: so-tick-draw .3s .14s ease-out forwards; }
@keyframes so-tick-pop { from { transform: scale(.8); } to { transform: scale(1); } }
@keyframes so-tick-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .so-tick.pop, .so-tick.pop path { animation: none; stroke-dashoffset: 0; }
}
.so-more { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #344054; font-size: 20px; letter-spacing: 1px; }
.so-more:hover { background: #F2F4F7; }
/* over the page, not inside the table's sideways-scrolling box (which would cut it off): placed by surgery-orders.js */
.so-menu { position: fixed; top: 0; left: 0; z-index: 70; min-width: 220px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px -10px rgba(16, 24, 40, .35), 0 0 0 1px var(--so-line); }
.so-menu button, .so-menu a { display: block; width: 100%; padding: 8px 10px; border-radius: 6px; text-align: left; font-size: 14px; color: var(--so-ink); }
.so-menu button:hover, .so-menu a:hover { background: #F2F4F7; }
.so-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; background: var(--so-green-bg); font-size: 14px; }
/* Blister packs by the week (surgery-orders.js): each week's tab, its heading and the rota, the
   row's week, moving one from its ··· menu, and those not in a week yet */
.so-tag.wk { background: #E7F1FF; color: #0B57B8; }
.so-wk-now { display: inline-flex; vertical-align: 2px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; background: var(--so-green-bg); color: var(--so-green); }
.so-week-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-top: 18px; }
.so-week-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.so-week-head p { margin-top: 2px; max-width: 60ch; font-size: 14px; color: var(--so-soft); }
.so-rota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--so-soft); }
.so-bulk-wk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.so-menu .so-menu-wk { display: flex; align-items: center; gap: 4px; margin: 2px 0; padding: 4px 6px 4px 10px; border-radius: 6px; font-size: 14px; color: var(--so-soft); }
.so-menu .so-menu-wk span { flex: 1; }
.so-menu .so-menu-wk button { display: inline-grid; place-items: center; width: 34px; min-height: 32px; padding: 0; border-radius: 6px; text-align: center; font-weight: 600; color: var(--so-ink); background: #F2F4F7; }
.so-menu .so-menu-wk button.none { width: auto; padding: 0 8px; font-weight: 500; }
.so-menu .so-menu-wk button[aria-pressed="true"] { background: var(--so-green); color: #fff; }
.so-wait { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); }
.so-wait h3 { font-size: 16px; font-weight: 700; }
.so-wait > p { margin-top: 2px; font-size: 14px; color: var(--so-soft); }
.so-wait ul { margin-top: 10px; }
.so-wait li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.so-wait li b { display: block; font-size: 15px; }
.so-wait li span { display: block; font-size: 13px; color: var(--so-soft); }
.so-wait .so-seg button { position: relative; font-size: 14px; }
.so-wait .so-seg button.this { background: #fff; color: var(--so-green); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.so-wait .so-seg button i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #0071E3; }
.so-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 6px; font-size: 14px; font-weight: 600; border: 1px solid var(--so-line); background: #fff; color: var(--so-ink); }
.so-btn:hover { background: #F7F8FA; }
.so-btn.go { background: #3DAE6E; border-color: #3DAE6E; color: #fff; }
.so-btn.go:hover { background: #2E8B57; }
.so-undo { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: 92vw; padding: 12px 16px; border-radius: 12px; background: #17402B; color: #fff; font-size: 14px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.so-undo button { font-weight: 700; text-decoration: underline; }
/* the form: two columns of white cards, a grey bar with Cancel and Save */
.so-form { display: grid; gap: 16px; padding-top: 16px; }
@media (min-width: 1024px) { .so-form { grid-template-columns: 1fr 1fr; align-items: start; } }
.so-col { display: grid; gap: 16px; }
.so-card { padding: 18px 18px 20px; border: 1px solid var(--so-line); border-radius: 8px; background: #fff; }
.so-card h3 { font-size: 17px; font-weight: 600; }
.so-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
/* a managed repeat's own page: every order kept, what's been done, and what came from Healthera */
.so-hist { display: grid; gap: 10px; margin-top: 8px; }
/* Send to surgery: notes on the email card, the set-up steps and each surgery's address */
.so-ok { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #E2F5EA; color: #1E6B43; font-size: 14px; font-weight: 600; }
.so-warn { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #FFF6E0; color: #7A5600; font-size: 14px; }
.so-link { font-weight: 600; color: #1E5FB4; text-decoration: underline; }
.so-steps { display: grid; gap: 6px; max-width: 48rem; padding-left: 20px; list-style: decimal; font-size: 14px; color: var(--so-ink); }
.so-steps code { font-size: 13px; }
.so-addr { display: grid; gap: 8px; }
.so-addr li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; }
.so-addr-sug { display: block; margin-top: 2px; font-size: 13px; color: #5B6472; overflow-wrap: anywhere; }
.so-addr-sug b { font-weight: 600; color: #1F2937; }
.so-addr-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: #EEF6FF; }
.so-addr-fill p { flex: 1 1 18rem; min-width: 0; }
.so-hist li { padding-bottom: 10px; border-bottom: 1px solid var(--so-line); }
.so-hist li:last-child { padding-bottom: 0; border-bottom: 0; }
.so-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.so-dl dt { font-weight: 600; color: var(--so-ink); }
.so-label { display: block; font-size: 15px; color: var(--so-ink); }
.so-label .req { color: #E5484D; }
.so-input { width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--so-line); border-radius: 6px; background: #fff; font-size: 15px; color: var(--so-ink); }
.so-input:focus { outline: 2px solid #9FD5B7; outline-offset: 0; border-color: var(--so-green); }
.so-input.bad { border-color: #E5484D; }
.so-med { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #A8D9BD; border-radius: 6px; background: var(--so-green-bg); }
.so-med.off { border-color: var(--so-line); background: #fff; }
.so-med input[type="checkbox"] { width: 20px; height: 20px; accent-color: #2E8B57; flex: none; }
.so-med small { display: block; color: var(--so-soft); font-size: 13px; }
.so-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.so-radio input { width: 20px; height: 20px; accent-color: #2E8B57; }
.so-ago { display: inline-flex; padding: 3px 9px; border: 1px solid var(--so-line); border-radius: 999px; font-size: 13px; color: var(--so-soft); }
.so-err { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: #C9372C; }
.so-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px; border-radius: 6px; background: #F2F3F5; }
.so-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 280px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--so-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .3); }
.so-list li { padding: 9px 12px; font-size: 15px; cursor: pointer; }
.so-list li[aria-selected="true"], .so-list li:hover { background: var(--so-green-bg); }
.so-list li.so-list-hand { border-top: 1px solid var(--so-line); color: var(--so-soft); font-size: 14px; }
.so-list li.so-list-none { cursor: default; color: var(--so-soft); font-size: 14px; }
.so-list li.so-list-none:hover { background: transparent; }
/* Ordered, but its request hasn't gone to the surgery */
.so-unsent { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #B42D27; }
/* The review before anything is ordered or sent (assets/pages/surgery-orders.js review) */
.so-rv { margin-top: 18px; padding: 16px; border: 1px solid var(--so-line); border-radius: 14px; background: #fff; }
.so-rv-people { display: grid; gap: 10px; }
.so-rv-person { padding: 12px 14px; border-radius: 10px; background: #F7F8FA; }
.so-rv-note { margin-top: 6px; font-size: 13px; color: #7A5600; }
.so-rv-to { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--so-ink); }
.so-rv-to svg { flex: none; margin-top: 2px; color: #1E5FB4; }
.so-rv-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #FFF6E0; font-size: 14px; color: #5C4300; cursor: pointer; }
.so-rv-check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: #2E8B57; }
.so-rv-steps .so-rv-check { background: #EAF6EF; color: #1E6B43; }
.so-rv-mail { margin-top: 12px; }
.so-rv-mail summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #1E5FB4; }
.so-gp-facts { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #5B6675; }
.so-gp-add { border: 1px solid #E3E8EF; border-radius: 14px; padding: 12px 14px; background: #F8FAFC; }
.so-rv-frame { display: block; width: 100%; height: 22rem; margin-top: 6px; border: 1px solid #E3E8EF; border-radius: 12px; background: #fff; }
.so-rv-text { margin-top: 8px; }
.so-rv-text summary { font-size: 13px; }
.so-rv-steps { margin-top: 12px; gap: 10px; }
.so-rv-steps li > span { font-weight: 600; }
.so-rv-how { display: grid; gap: 6px; margin-top: 6px; }
.so-rv-how .so-radio { font-size: 15px; }
.so-rv-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.so-rv-go .so-btn.go { min-height: 44px; padding: 0 18px; font-size: 15px; }
.so-rv-go .so-btn:disabled, .so-rv-go .so-btn[disabled] { opacity: .45; cursor: not-allowed; }
.so-rv-err { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #FDECEB; color: #8F241E; font-size: 14px; font-weight: 600; }
.so-rv-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* Emails sent (the trail) and the Log */
.so-trail { display: grid; gap: 10px; }
.so-trail-item { padding: 14px 16px; border: 1px solid var(--so-line); border-radius: 12px; background: #fff; }
.so-trail-state { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.so-trail-state.ok { background: #E2F5EA; color: #1E7A4A; } .so-trail-state.bad { background: #FDECEB; color: #B42D27; } .so-trail-state.wait { background: #FFF1C2; color: #7A5600; }
.so-log { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.so-log th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 700; color: var(--so-soft); border-bottom: 1px solid var(--so-line); }
.so-log td { padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--so-line); }