/*
  護膚配方 — 拉桿同佢嘅結果
  ==========================================================================
  Was five layouts for five ways of answering. The shop picked the lever, so
  this is the lever, the routine it produces, and the drawer that narrows it.

  OWN-WORLD: glass. Superseded the paper build — a dark teal sheet with
  fibre noise and torn SVG edges. Paper wants weight and a deckle; the shop
  reads as light and water, and the tear was doing craft the rest of the site
  never asks for. This is the same palette lit from behind instead: a deep
  teal field with soft blooms of --primary and warm sand drifting under it,
  and every surface a pane of frosted glass laid over that light.

  The rules of the world: exactly one element blurs the page (.sm__sheet).
  Everything nested inside it is a translucent fill on top of that one blur —
  stacked backdrop-filters cost real frames and come out muddy. Depth is a
  1px light line at the top of a pane, never a heavier shadow. Anything
  committed is opaque sand; anything merely available is glass.

  `--plate` stays white on any theme: a packshot composited with
  `mix-blend-mode: multiply` needs a light ground or it disappears.
  ========================================================================== */

.sm {
  /* The shop's palette, read from the site rather than restated. `--primary`
     et al are defined in styles.css; the fallbacks are the live values, so
     this stays right if it is ever loaded on its own, and the feature
     follows the shop instead of dating alongside it. */
  --page: var(--bg-primary, #f6f5f0);
  --plate: #ffffff;
  --edge: var(--warm-300, #e4c9a8);
  --tone: var(--primary, #6da3b5);
  --tone-deep: var(--primary-deep, #2b4c58);
  --sand: var(--warm-500, #c4a07a);

  --ink: var(--primary-deep, #2b4c58);
  --raw: var(--warm-50, #fdf8f3);
  --dim: var(--primary-lighter, #aecbd8);
  --gardenia: var(--warm-300, #e4c9a8);
  --jade: var(--accent-light, #a8d8e4);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── the glass itself ──────────────────────────────────────────────
     Four fills, not one. A single opacity for every pane flattens the
     stack: the drawer inside the sheet inside the field all read at the
     same distance. These climb, so nesting reads as coming forward. */
  --gl-1: rgba(253, 248, 243, 0.055);   /* a region inside the pane      */
  --gl-2: rgba(253, 248, 243, 0.085);   /* a tile that holds its own     */
  --gl-3: rgba(253, 248, 243, 0.135);   /* a control, hovered or current */
  --gl-line: rgba(253, 248, 243, 0.16);
  --gl-line-2: rgba(253, 248, 243, 0.28);
  /* The specular top edge. Glass is only convincing where the light
     catches the rim — this is the one highlight, reused everywhere. */
  --gl-rim: inset 0 1px 0 rgba(253, 248, 243, 0.18);
  --gl-blur: saturate(160%) blur(26px);

  --r-pane: 20px;
  --r-tile: 14px;
  --r-ctl: 10px;
}
/* ══ 玻璃 ═══════════════════════════════════════════════════════════════
   The field, the pane, and the light between them.

   Glass is not a fill — it is a fill plus something worth blurring. A
   frosted pane over a flat colour is just a lighter flat colour, so the
   field carries three soft blooms (teal, sand, pale jade) at the corners
   the pane overlaps. What the shopper reads as "glass" is those blooms
   going soft and wide exactly where the pane covers them, and staying
   sharp in the gutter around it. That gutter is why the section has
   padding: a pane flush to the viewport has no page left to be over.

   The blooms drift, very slowly and never in step, so a surface she looks
   at for thirty seconds is not a still image. It is one composited
   transform on a pseudo element — no layout, no paint per frame.

   Superseded: fibre noise and three torn SVG edges. Kept here as a note
   for the next person who wonders why the sheet has no texture — it has
   light instead, and the two together read as neither. */

/* 老闆睇到兩個圓角框疊住：出面一個做背景，入面 .sm__sheet 又一個。
   佢要一個。所以深色漸變、圓角、飄動光暈全部搬咗落 .sm__sheet，
   呢個容器而家淨係做定位 —— 冇底、冇邊、冇 padding。 */
.sm {
  /* Tight blooms, not a wash. The first pass ran three soft 100%-wide
     gradients and the pane had nothing to distort: a frosted sheet over an
     even field is an even field. These are small and high-contrast, and
     they are placed to cross the pane's rim — the blur is only legible at
     the boundary where the same bloom is sharp on one side and smeared on
     the other. */
  isolation: isolate;
}

/* The drift. Two blooms on one layer, offset in phase by running one at a
   different duration rather than a delay — a delay would sync them up again
   every time the shorter loop came round. */
.sm__sheet::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 24% 30%, rgba(109, 163, 181, 0.34), transparent 70%),
    radial-gradient(32% 36% at 78% 66%, rgba(228, 201, 168, 0.20), transparent 70%);
  animation: sm-drift 34s linear infinite alternate;
}
@keyframes sm-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.sm__sheet > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .sm__sheet::after { animation: none; }
}

/* The pane. The only element in the feature that blurs the page behind it —
   everything nested inside is a translucent fill riding on this one blur.
   The rim highlight does the work a border cannot: a full 1px stroke at this
   opacity reads as a drawn box, while a light line on the top edge alone
   reads as thickness. */
/* 呢塊而家係唯一嗰個框。本來出面個 .sm 容器有深色漸變、入面呢塊又有
   一浸玻璃色，兩個圓角框疊住。深色漸變（連同四團光暈）搬咗落嚟，
   呢塊自己企得住。 */
.sm__sheet { position: relative; color: var(--raw); border-radius: var(--r-pane);
             padding: clamp(1rem, 3vw, 2.25rem) clamp(0.9rem, 3vw, 2.25rem);
             background:
               radial-gradient(46% 40% at 4% -6%, rgba(122, 186, 205, 0.62), transparent 66%),
               radial-gradient(38% 34% at 99% 8%, rgba(228, 201, 168, 0.42), transparent 66%),
               radial-gradient(42% 38% at 2% 74%, rgba(168, 216, 228, 0.30), transparent 68%),
               radial-gradient(52% 44% at 88% 104%, rgba(109, 163, 181, 0.44), transparent 66%),
               linear-gradient(168deg, #24424e 0%, #1b3540 46%, #142932 100%);
             isolation: isolate;
             border: 1px solid var(--gl-line);
             -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
             box-shadow: var(--gl-rim),
                         0 2px 8px rgba(9, 22, 27, .18),
                         0 32px 64px -32px rgba(9, 22, 27, .70);
             overflow: hidden; overflow: clip; }
/* The specular sweep, replacing the paper's fibre. Cut off at 44% so it is a
   glancing light on the top-left shoulder and not a gradient fill. */
.sm__sheet::before { content: ''; position: absolute; inset: 0; pointer-events: none;
                     border-radius: inherit; z-index: 0;
                     background: linear-gradient(148deg, rgba(253,248,243,.13), rgba(253,248,243,0) 44%); }
.sm__sheet > * { position: relative; z-index: 1; }

/* Where the browser has no backdrop-filter, glass has to stop pretending:
   the fill goes opaque enough to carry cream type on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sm__sheet { background: rgba(26, 50, 60, .90); }
}

/* Kept as a no-op so a cached skincare-match.js still renders. */
.sm__tear { display: none; }

/* ══ 收埋，用一句講清楚係乜 ══════════════════════════════════════════════
   Someone arriving at 護膚 came to look at products. Opening straight into
   dials and chips reads as a wrong turn, so the whole thing folds down to
   one line that says what it is and stays out of the way. */

.sm__open { appearance: none; width: 100%; cursor: pointer; font: inherit; text-align: left;
            background: transparent; color: var(--raw); border: 0;
            padding: 1.6rem 1.2rem 1.8rem; display: flex; align-items: center; gap: 1rem;
            position: relative; z-index: 3; }
.sm__open:hover { background: var(--gl-1); }
.sm__open:focus-visible { outline: 2px solid var(--gardenia); outline-offset: -3px; }
.sm__open-lede { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sm__open-kicker { font-size: .68rem; letter-spacing: .24em; color: var(--gardenia); }
.sm__open-title { font-family: 'Bodoni Moda', Georgia, serif;
                  font-size: clamp(1.15rem, 4.2vw, 1.7rem); line-height: 1.25; }
.sm__open-sub { font-size: .8rem; line-height: 1.5; color: var(--dim); max-width: 44ch; }
.sm__open-mark { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
                 border: 1px solid var(--gl-line-2); border-radius: var(--r-ctl);
                 background: var(--gl-1); box-shadow: var(--gl-rim); position: relative; }
.sm__open-mark::before, .sm__open-mark::after {
  content: ''; position: absolute; background: var(--gardenia);
  transition: transform 240ms var(--ease); }
.sm__open-mark::before { width: .9rem; height: 1px; }
.sm__open-mark::after { width: 1px; height: .9rem; }
.sm__open[aria-expanded="true"] .sm__open-mark::after { transform: scaleY(0); }
@media (min-width: 720px) { .sm__open { padding: 1.8rem 2rem; } }

/* ══ 化開 ═══════════════════════════════════════════════════════════════
   Opening frosts in.

   Same two-beat structure the tear had, translated. First a seam of light
   runs left to right across the fold in a fifth of a second — where paper
   ripped, glass catches an edge. Then the panel resolves out of the blur
   behind it: it arrives already in place and simply comes into focus,
   because glass has no weight to overshoot with. A bounce here was the one
   thing that still read as paper after the texture was gone.

   The seam stays as the panel's top edge, so the line the shopper just made
   is the line she keeps looking at. */

.sm__panel { position: relative; }
.sm__panel:not([hidden]) { animation: sm-unfold 520ms var(--ease) both; }
.sm__panel:not([hidden])::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent,
                              rgba(253,248,243,.42) 18%,
                              rgba(228,201,168,.85) 50%,
                              rgba(253,248,243,.42) 82%, transparent);
  transform-origin: left center; animation: sm-seam 240ms linear both; }

@keyframes sm-seam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sm-unfold {
  from { opacity: 0; transform: translateY(-6px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.sm__stage > * { animation: sm-in 420ms var(--ease) both; }
@keyframes sm-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sm__stage > *, .sm__panel:not([hidden]),
  .sm__panel:not([hidden])::before { animation: none; }
}

/* ══ 4 · 拉桿 ══════════════════════════════════════════════════════════
   Everything on one screen, nothing sequential. The live count is the
   biggest thing on the page because it is the only thing that answers
   "is this working". */

/* Transparent, not another fill. The lever is inside the pane, so giving it
   a surface of its own would put a second sheet of glass over the first. */
.dl { background: transparent; color: var(--raw); min-height: 78vh; padding: 2rem 1.2rem 2.5rem;
      display: flex; flex-direction: column; gap: 1.6rem; }
.dl__count { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.dl__count b { font-family: 'Bodoni Moda',serif; font-size: clamp(3rem,14vw,5.5rem);
               line-height: .9; font-variant-numeric: tabular-nums; }
.dl__count span { font-size: .9rem; opacity: .7; }
/* The question, not a caption for one. At .68 opacity in the same weight as
   the stop labels underneath, these read as the quietest thing on a row they
   are supposed to be introducing — a shopper scans four rails and never sees
   what any of them is asking. */
.dl__label { font-size: .95rem; letter-spacing: .04em; opacity: 1; color: var(--raw);
             margin: 0 0 .7rem; padding-left: .6rem; border-left: 2px solid var(--gardenia);
             display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
/* Says which rows the shop refuses to guess for her, before she reaches a
   dead button and has to work out why. */
.dl__req { font-size: .66rem; letter-spacing: .12em; color: var(--gardenia);
           border: 1px solid rgba(228,201,168,.5); padding: .1rem .4rem; opacity: 1; }
.dl__hint { letter-spacing: 0; font-size: .74rem; color: var(--dim); }

/* ── 拉桿 ─────────────────────────────────────────────────────────────
   A rail with one handle on it and every stop named underneath. The old
   version filled from the left, so choosing 油性 lit 乾性 and 混合性 too and
   the whole row read as three answers instead of one position. A single
   knob can only ever mean one thing. */
.dl__stops { position: relative; display: flex; touch-action: pan-y; cursor: pointer; }
.dl__scale { flex: 1; position: relative; display: flex; min-width: 0; }
/* Reserved on every lever, occupied on three of them. This is what makes the
   four rails the same length: the column exists whether or not the question
   has an off-scale answer. */
.dl__off { flex: 0 0 clamp(4.5rem, 18%, 9rem); position: relative; display: flex; min-width: 0; }

/* The line runs the length of the scale and stops there. The answers past
   it — 唔清楚, 隨便, 唔講 — are on the same control and take the same handle,
   but they are not positions on it, and the break says so without needing
   a second row of buttons to explain itself. */
/* Edge to edge of the scale column, not first-dot to last-dot: three stops
   and four stops put their outer centres in different places, so measuring
   the track off the dots gave every lever a different length. */
/* A groove, not a line. Two hairlines a pixel apart — a dark one under a
   light one — reads as cut into the glass rather than drawn on it, which is
   what lets the knob sit in something instead of on top of nothing. */
.dl__rail { position: absolute; top: .55rem; height: 2px; border-radius: 2px;
            background: rgba(9,22,27,.28); box-shadow: 0 1px 0 rgba(253,248,243,.14);
            left: 0; right: 0; }
.dl__stop--off { opacity: .82; }
.dl__stop--off .dl__stop-dot { background: none; border: 1px solid rgba(253,248,243,.38); }
.dl__off::before { content: ''; position: absolute; top: .2rem; left: 0;
                   width: 1px; height: .75rem; background: rgba(253,248,243,.18); }
.dl__stops:not(.is-off) .dl__off .dl__knob,
.dl__stops.is-off .dl__scale .dl__knob { display: none; }

/* Never the click target: a press that lands on the handle or the track has
   to reach the stop underneath it. */
.dl__rail, .dl__knob { pointer-events: none; }
/* The one bead of solid in a glass surface: her position is the single thing
   here that is settled, so it is the single thing that is not translucent.
   The halo is the light it throws on the pane around it. */
.dl__knob { position: absolute; top: 0; width: 1.15rem; height: 1.15rem; margin-left: -.575rem;
            border-radius: 50%;
            background: radial-gradient(circle at 34% 28%, #f4e3cd, var(--gardenia) 62%);
            box-shadow: 0 0 0 6px rgba(228,201,168,.14),
                        0 0 14px rgba(228,201,168,.45),
                        inset 0 1px 0 rgba(255,255,255,.55);
            transition: left 260ms var(--ease); }
.dl__scale .dl__knob { left: calc((var(--i) + .5) * (100% / var(--s))); }
.dl__off .dl__knob { left: calc((var(--j) + .5) * (100% / var(--o))); }
.dl__stops.is-unset .dl__knob { display: none; }
.dl__stops.is-dragging .dl__knob { transition: none; transform: scale(1.15); }
.dl__stop { flex: 1; position: relative; appearance: none; border: 0; background: transparent;
            font: inherit; font-size: .8rem; color: var(--raw); cursor: pointer;
            padding: 1.5rem 0 0; display: block; text-align: center; }
.dl__stop-dot { position: absolute; top: .32rem; left: 50%; width: .45rem; height: .45rem;
                margin-left: -.225rem; border-radius: 50%; background: rgba(253,248,243,.38); }
.dl__stop-name { display: inline-block; padding-top: .35rem; opacity: .68;
                 transition: opacity 160ms var(--ease), color 160ms var(--ease); }
.dl__stop[aria-checked="true"] .dl__stop-name { opacity: 1; color: var(--gardenia); }
.dl__stop:focus-visible { outline: 2px solid var(--gardenia); outline-offset: 2px; }
.dl__unset { margin: .5rem 0 0; font-size: .74rem; color: var(--dim); }

.dl__tally { margin: 0; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--dim);
             flex: 1 0 100%; text-align: right; }
.dl__tally b { font-family: 'Bodoni Moda',serif; font-size: 1.7em; color: var(--raw);
               margin: 0 .15rem; }
.dl__acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch;
            flex: 1 1 16rem; justify-content: flex-end; }
.dl__acts .dl__go { flex: 1 1 auto; margin: 0; }
/* ── controls, in three states of solidity ───────────────────────────
   Available is glass, chosen is opaque cream, and the one button that
   commits is opaque sand. A shopper can tell what she has picked from the
   far side of the room without reading a word of it. */
.dl__reset, .dl__tag, .dl__want-b, .rf__tag, .rf__clear,
.ed__again, .ed__all, .ed__swap, .cw__add {
  background: var(--gl-2); border: 1px solid var(--gl-line);
  border-radius: var(--r-ctl); box-shadow: var(--gl-rim);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.dl__reset:hover, .dl__tag:hover, .dl__want-b:hover, .rf__tag:not([disabled]):hover,
.rf__clear:hover, .ed__again:hover, .ed__all:hover, .ed__swap:hover {
  background: var(--gl-3); border-color: var(--gl-line-2);
}
.dl__go, .ed__add, .rf__go, .rf__cut {
  border-radius: var(--r-ctl);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -12px rgba(228,201,168,.75);
}

.dl__reset { appearance: none; cursor: pointer; font: inherit; font-size: .82rem;
             padding: .95rem 1.2rem; color: var(--raw); }
.dl__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.dl__tag { appearance: none; font: inherit; font-size: .86rem; cursor: pointer; padding: .55rem .85rem;
           color: var(--raw);
           display: inline-flex; align-items: center; gap: .4rem; }
.dl__tag[aria-pressed="true"] { background: var(--raw); color: var(--ink); border-color: var(--raw); }
.dl__tag b { font-family: 'Bodoni Moda',serif; }
.dl__go { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem;
          letter-spacing: .14em; padding: 1.05rem; background: var(--gardenia); color: var(--ink);
          margin-top: auto; }
.dl__go[disabled] { opacity: .35; box-shadow: none; }

/* ══ mode switcher + result ═══════════════════════════════════════════ */


.sm__wait { background: transparent; color: var(--raw); min-height: 60vh; display: flex;
            flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; }
.sm__wait p { margin: 0; font-family: 'Bodoni Moda',Georgia,serif; font-size: 1.6rem; }
.sm__wait-sub { font-family: inherit !important; font-size: .88rem !important; opacity: .6; }

.ed { background: transparent; color: var(--raw); }
.ed__head { padding: 2rem 1.2rem 1.4rem; border-bottom: 1px solid rgba(253,248,243,.16); }
.ed__kicker { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .22em; color: var(--gardenia); }
.ed__read { margin: 0; font-family: 'Bodoni Moda',Georgia,serif; font-size: clamp(1.15rem,4.4vw,1.8rem);
            line-height: 1.4; max-width: 34ch; }

/* all five at once — the comparison she asked for. The column count comes
   from the routine, because asking for 精華 alone should not leave four
   empty bays where the rest of a set would have been. */
/* Capped at the width five bays would take, so asking for one toner does not
   blow that toner up to a full-bleed hero. */
.ed__strip { max-width: max(6rem, calc(var(--n,5) * 20%));
             display: grid; grid-template-columns: repeat(var(--n,5),1fr); gap: 1px;
             background: rgba(253,248,243,.16); border-bottom: 1px solid rgba(253,248,243,.16); }
.ed__cell { appearance: none; border: 0; cursor: pointer; background: var(--gl-1); color: var(--raw);
            padding: .7rem .25rem .6rem; display: flex; flex-direction: column; align-items: center; gap: .35rem;
            transition: background 160ms var(--ease); }
.ed__cell:hover { background: var(--gl-3); }
.ed__cell-step { font-size: .62rem; letter-spacing: .1em; opacity: .65; }
.ed__cell-shot { width: 100%; aspect-ratio: 1; background: var(--plate); display: grid; place-items: center;
                 border-radius: 8px; }
.ed__cell-shot img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.ed__cell-price { font-size: .68rem; font-variant-numeric: tabular-nums; opacity: .8; }
.ed__total { margin: 0; padding: .9rem 1.2rem; font-size: .9rem; font-variant-numeric: tabular-nums;
             border-bottom: 1px solid rgba(253,248,243,.16); }
.ed__total b { font-family: 'Bodoni Moda',serif; font-size: 1.35em; }
.ed__warn { margin: 0; padding: .8rem 1.2rem; background: rgba(228,201,168,.14);
            color: var(--gardenia); font-size: .82rem; }

.ed__row { display: grid; grid-template-columns: 2.2rem 6.5rem 1fr; gap: .9rem; align-items: start;
           padding: 1.2rem; border-bottom: 1px solid rgba(253,248,243,.12); }
.ed__no { margin: 0; font-family: 'Bodoni Moda',serif; font-size: 1.6rem; opacity: .35;
          font-variant-numeric: tabular-nums; }
.ed__shot { aspect-ratio: 1; background: var(--plate); display: grid; place-items: center;
            border-radius: var(--r-ctl); }
.ed__shot img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.ed__body { display: flex; flex-direction: column; gap: .3rem; }
.ed__step { margin: 0; font-size: .68rem; letter-spacing: .18em; color: var(--gardenia); }
.ed__vendor { margin: 0; font-size: .78rem; opacity: .6; }
.ed__name { margin: 0; font-family: 'Bodoni Moda',Georgia,serif; font-size: 1.05rem; line-height: 1.25; }
.ed__name a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(253,248,243,.3); }
.ed__why { margin: .2rem 0 0; font-size: .86rem; line-height: 1.6; opacity: .85; }
.ed__price { margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.ed__swap { appearance: none; margin-top: .5rem; align-self: flex-start; cursor: pointer;
            color: var(--gardenia); font: inherit; font-size: .78rem;
            border-color: rgba(228,201,168,.4); padding: .45rem .8rem; }
.ed__foot { padding: 1.4rem 1.2rem 2.2rem; }
.ed__fine { margin: 0 0 1.2rem; font-size: .74rem; line-height: 1.65; opacity: .55; max-width: 46ch; }
.ed__acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.ed__add { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .84rem;
           letter-spacing: .12em; padding: .95rem 1.8rem; background: var(--gardenia); color: var(--ink); }
.ed__add[disabled] { opacity: .5; box-shadow: none; }
.ed__again { appearance: none; cursor: pointer; font: inherit; font-size: .84rem; padding: .95rem 1.5rem;
             color: var(--raw); }

@media (min-width: 720px) {
  .ed__row { grid-template-columns: 3rem 10rem 1fr; padding: 1.6rem 2rem; }
  .ed__head, .ed__total, .ed__foot { padding-left: 2rem; padding-right: 2rem; }
}

/* ── 拉桿：而家會配到 ────────────────────────────────────────────────
   Replaces the remaining-count. A shopper has no use for how much of the
   catalogue still qualifies; she wants to know what she is getting. This
   is computed offline from the labels, so it moves under a thumb. */

.dl__peek { background: var(--gl-2); border: 1px solid var(--gl-line); box-shadow: var(--gl-rim);
            border-radius: var(--r-tile); padding: .9rem 1rem; }
.dl__peek-label { margin: 0 0 .6rem; font-size: .68rem; letter-spacing: .2em; color: var(--gardenia); }
.dl__peek-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.dl__peek-item { display: grid; grid-template-columns: 3.6rem 1fr; gap: .7rem; align-items: baseline;
                 font-size: .84rem; line-height: 1.4; }
.dl__peek-step { color: var(--dim); font-size: .74rem; }
.dl__peek-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl__peek-item.is-empty .dl__peek-name { color: var(--dim); font-style: italic; }

/* The bottom bar: what you want on the left, the button that fetches it on
   the right. On a phone they stack, and the button stays full width. */
.dl__bar { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-end;
           border-top: 1px solid rgba(253,248,243,.16); padding-top: 1.1rem; margin-top: .3rem; }
.dl__want { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1 1 20rem; }
.dl__want-b { appearance: none; font: inherit; font-size: .82rem; cursor: pointer; padding: .5rem .8rem;
              color: var(--raw); }
.dl__want-b[aria-pressed="true"] { background: var(--raw); color: var(--ink); border-color: var(--raw); }

.dl__more { appearance: none; cursor: pointer; font: inherit; font-size: .82rem; text-align: left;
            background: transparent; color: var(--gardenia); border: 0; border-top: 1px solid rgba(253,248,243,.16);
            padding: .9rem 0 .4rem; display: flex; justify-content: space-between; }
.dl__more::after { content: '＋'; }
.dl__more[aria-expanded="true"]::after { content: '－'; }
.dl__adv { display: flex; flex-direction: column; gap: .5rem; padding-bottom: .4rem; }
.dl__note { margin: .8rem 0 0; font-size: .74rem; line-height: 1.6; color: var(--dim); }
.dl__note b { color: var(--raw); font-weight: 500; }

/* ── 每步嘅真實深度 ─────────────────────────────────────────────────
   The shop has 77 cleansers that suit her. Showing one and hiding the
   rest behind a "swap" button told her the shelf was six deep. */
.ed__more { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.ed__swap, .ed__all { appearance: none; cursor: pointer; font: inherit;
                      font-size: .78rem; padding: .45rem .8rem; }
.ed__swap { color: var(--gardenia); border-color: rgba(228,201,168,.4); }
.ed__all  { color: var(--raw); }
.ed__list { margin-top: .8rem; max-height: 19rem; overflow-y: auto;
            background: var(--gl-1); border: 1px solid var(--gl-line);
            border-radius: var(--r-tile); box-shadow: var(--gl-rim); }
.ed__li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .6rem; align-items: baseline;
          padding: .6rem .7rem; font-size: .8rem; color: var(--raw); text-decoration: none;
          border-bottom: 1px solid rgba(253,248,243,.1); }
.ed__li:last-child { border-bottom: 0; }
.ed__li:hover { background: rgba(253,248,243,.07); }
.ed__li-v { color: var(--dim); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed__li-t { line-height: 1.35; }
.ed__li-p { font-variant-numeric: tabular-nums; color: var(--dim); font-size: .74rem; }

/* A count riding on a chip. Small, tabular and dimmed, so the brand name
   still reads as the label and the number as an aside. */
.dl__tag i, .rf__tag i { font-style: normal; font-size: .72em; opacity: .55;
                         margin-left: .4rem; font-variant-numeric: tabular-nums; }
.dl__tag[aria-pressed="true"] i, .rf__tag[aria-pressed="true"] i { opacity: .7; }

/* ══ 每步三件，向右掃 ═══════════════════════════════════════════════════
   Stacking three per step made the page a catalogue, which is why the first
   build shipped one. A rail solves the thing that was actually wrong: the
   trio occupies one row of screen however deep the shelf is, and 第二推薦
   costs a thumb-flick instead of a scroll past four rows.

   Selection lives in the scroll position, so the price and the basket at the
   top follow the card facing her without anything being tapped. */

.ed__row.cw { display: block; padding: 1.2rem 0 1.4rem; }
.cw__head { display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; padding: 0 1.2rem .7rem; }
.cw__dots { display: flex; gap: .4rem; }
.cw__dot { appearance: none; border: 0; cursor: pointer; padding: 0; width: 1.5rem; height: .2rem;
           background: rgba(253,248,243,.28); transition: background 180ms var(--ease); }
.cw__dot[aria-pressed="true"] { background: var(--gardenia); }
.cw__dot:focus-visible { outline: 2px solid var(--gardenia); outline-offset: 3px; }

.cw__rail { display: flex; align-items: stretch; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
            scroll-padding-inline: 1.2rem; padding: 0 1.2rem .4rem;
            scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cw__rail::-webkit-scrollbar { display: none; }
.cw__rail:focus-visible { outline: 2px solid var(--gardenia); outline-offset: -2px; }

/* Each card is its own small pane. The one facing her is lit from the sand
   side — a warmer fill and a rim that catches — so the rail reads as one
   card forward of the others rather than one card outlined. */
.cw__card { scroll-snap-align: start; flex: 0 0 min(86%, 23rem); display: flex;
            flex-direction: column; gap: .1rem; cursor: pointer;
            padding: .7rem .8rem .9rem; border: 1px solid var(--gl-line);
            border-radius: var(--r-tile); background: var(--gl-1);
            transition: border-color 180ms var(--ease), background 180ms var(--ease),
                        box-shadow 180ms var(--ease); }
.cw__card[aria-current="true"] { border-color: rgba(228,201,168,.42);
                                 background: rgba(228,201,168,.10);
                                 box-shadow: inset 0 1px 0 rgba(253,248,243,.22),
                                             0 14px 30px -22px rgba(9,22,27,.9); }
.cw__card:hover { border-color: var(--gl-line-2); background: var(--gl-2); }
.cw__rank { margin: 0 0 .45rem; font-size: .66rem; letter-spacing: .2em; color: var(--gardenia);
            display: flex; justify-content: space-between; gap: .6rem; }
.cw__on { opacity: 0; letter-spacing: .1em; }
.cw__card[aria-current="true"] .cw__on { opacity: 1; }
.cw__main { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; align-items: start; }
.cw__shot { aspect-ratio: 1; background: var(--plate); display: grid; place-items: center;
            border-radius: var(--r-ctl); }
.cw__shot img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.cw__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cw__vendor { margin: 0; font-size: .76rem; opacity: .6; }
.cw__name { margin: 0; font-family: 'Bodoni Moda',Georgia,serif; font-size: .98rem; line-height: 1.25; }
.cw__name a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(253,248,243,.3); }
.cw__why { margin: .55rem 0 0; font-size: .82rem; line-height: 1.55; opacity: .85; }
.cw__price { margin: .25rem 0 0; font-variant-numeric: tabular-nums; font-size: .92rem; }
/* Pushed to the foot of the card so the button lines up across the rail
   however long the reason underneath each product runs. */
.cw__acts { margin-top: auto; padding-top: .7rem; }
.cw__add { appearance: none; cursor: pointer; font: inherit; font-size: .78rem;
           letter-spacing: .08em; padding: .6rem 1.1rem; width: 100%;
           color: var(--gardenia); border-color: rgba(228,201,168,.4); }
.cw__card[aria-current="true"] .cw__add { background: var(--gardenia); color: var(--ink);
                                          border-color: var(--gardenia);
                                          box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; }
.cw__add[disabled] { opacity: .4; cursor: not-allowed; color: var(--dim);
                     border-color: var(--gl-line); background: transparent; box-shadow: none; }
.cw .ed__more, .cw .ed__list { margin-left: 1.2rem; margin-right: 1.2rem; }

.ed__hint { margin: 0; padding: .7rem 1.2rem; font-size: .76rem; color: var(--dim);
            border-bottom: 1px solid rgba(253,248,243,.12); }
.ed__off { display: block; margin-top: .3rem; letter-spacing: 0; color: var(--dim);
           font-size: .72rem; text-transform: none; }
.ed__row--none { display: block; padding: 1.2rem; }
.ed__none { margin: .4rem 0 0; font-size: .84rem; color: var(--dim); }

@media (min-width: 720px) {
  .cw__head, .cw__rail, .cw .ed__more, .cw .ed__list { padding-left: 2rem; padding-right: 2rem; }
  .cw .ed__more, .cw .ed__list { margin-left: 0; margin-right: 0; }
  .cw__rail { scroll-padding-inline: 2rem; }
  .cw__card { flex: 0 0 min(48%, 24rem); }
  .cw__main { grid-template-columns: 7rem 1fr; }
  .ed__hint { padding-left: 2rem; padding-right: 2rem; }
}

/* ══ 收窄：拉到底嗰個抽屜 ═══════════════════════════════════════════════
   Under the routine, beside 上一步 — a shopper only knows she cannot choose
   after she has scrolled all three rails trying to. At the top it sat in
   the one place she was guaranteed to scroll straight past.

   Six dimensions, not three, because three could not finish the job: the
   drawer has to be able to reach single figures or answering it was work
   for nothing. */

/* The drawer is the one region that gets a fill of its own: it is a tool
   pulled out from under the routine, so it has to read as a layer that was
   not there a moment ago. Warm, because everything in it is a commitment. */
.rf { border-top: 1px solid var(--gl-line);
      border-bottom: 1px solid var(--gl-line); background: rgba(228,201,168,.08);
      box-shadow: var(--gl-rim); }
.rf__now { margin: .2rem 0 .4rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.rf__now b { font-family: 'Bodoni Moda',serif; font-size: 2.1em; color: var(--gardenia);
             margin-right: .35rem; }
.rf__now span { color: var(--dim); font-size: .82rem; }
.rf__more { display: block; margin-top: .2rem; color: var(--gardenia) !important; opacity: .8; }
.rf__cut { appearance: none; cursor: pointer; font: inherit; font-size: .82rem; text-align: left;
           width: 100%; margin: 0 0 .3rem; padding: .7rem .9rem; color: var(--ink);
           background: var(--gardenia); border: 0; }
.rf__cut b { font-family: 'Bodoni Moda',serif; font-size: 1.25em; }
.rf__toggle { appearance: none; border: 0; cursor: pointer; font: inherit; width: 100%;
              background: transparent; color: var(--raw); text-align: left;
              padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.rf__toggle b { font-size: .9rem; font-weight: 500; }
.rf__toggle span { font-size: .76rem; color: var(--dim); }
.rf__toggle::after { content: '＋'; position: absolute; right: 1.2rem; color: var(--gardenia); }
.rf__toggle[aria-expanded="true"]::after { content: '－'; }
.rf { position: relative; }
.rf__body { padding: 0 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.rf__label { margin: .7rem 0 .1rem; font-size: .72rem; letter-spacing: .14em; color: var(--gardenia); }
.rf__sub { color: var(--dim); letter-spacing: 0; margin-left: .5rem; }
.rf__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.rf__tag { appearance: none; font: inherit; font-size: .82rem; cursor: pointer; padding: .5rem .8rem;
           color: var(--raw); }
.rf__tag[aria-pressed="true"] { background: var(--raw); color: var(--ink); border-color: var(--raw); }
.rf__tag[disabled] { opacity: .3; cursor: not-allowed; }
.rf__note { margin: .9rem 0 0; font-size: .72rem; line-height: 1.6; color: var(--dim); }
/* The one nested pane allowed to blur, because it is the only surface with
   the drawer's own content scrolling under it. Without the blur the chips
   underneath read straight through the bar. */
.rf__acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem;
            position: sticky; bottom: 0; padding: .7rem 1.2rem; margin-inline: -1.2rem;
            background: rgba(24, 46, 55, .72);
            -webkit-backdrop-filter: saturate(150%) blur(14px);
            backdrop-filter: saturate(150%) blur(14px);
            box-shadow: 0 -1px 0 var(--gl-line); }
.rf__go { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .82rem;
          letter-spacing: .1em; padding: .8rem 1.4rem; background: var(--gardenia); color: var(--ink); }
.rf__go[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.rf__clear { appearance: none; cursor: pointer; font: inherit; font-size: .82rem; padding: .8rem 1.1rem;
             color: var(--raw); }

@media (min-width: 720px) {
  .rf__toggle, .rf__body { padding-left: 2rem; padding-right: 2rem; }
  .rf__toggle::after { right: 2rem; }
  /* The bar has to reach the drawer's own edges, so its negative margin
     tracks whatever padding the body is running at this breakpoint. */
  .rf__acts { padding-left: 2rem; padding-right: 2rem; margin-inline: -2rem; }
}

/* ============================================================
   護膚配方 XP／Y2K — Revision 07（2026-08-21）
   Prototype：/Volumes/core/ouji-skincare-wizard-y2k/index.html

   全部規則收喺 .sm 底下，唔會漏去分類卡、產品格或者其他頁。
   核心配對（skincare-match.js）一個字都冇改 —— 呢度淨係換皮同改展開次序。

   最重要嗰條：**深色只屬於產品卡**。之前成幅結果係深底，答完問題就好似
   跌咗入另一個網站；而家結果區保持淺藍，深藍淨係花喺每張產品卡上面。
   ============================================================ */
.sm {
  --sm-xp-blue: #0757cf;
  --sm-xp-blue-hi: #2c83ef;
  --sm-section-1: #edf7ff;
  --sm-section-2: #e4f1f8;
  --sm-section-3: #dbeaf3;
  --sm-card-1: #315b65;
  --sm-card-2: #244852;
  --sm-card-3: #1c3d47;
  --sm-ink: #29465a;
  --sm-muted: #607c91;
  --sm-card-text: #f5f8f7;
  --sm-card-muted: #ccdade;
  --sm-card-cta: #cbdde1;
  --sm-pink: #f0b7c4;
  --sm-yellow: #fff071;
  --sm-green: #2ba239;
  --sm-line: #9fbdd0;
}

/* ---------- 問答：XP 控制台（照 prototype 個 stylesheet 搬）----------
   ⚠️ 之前我係睇住 handoff 個 token 表自己砌返個樣，冇搬 prototype 嗰份
   CSS —— 所以顏色同細節同批准版對唔上（助手區應該係深藍白字，我做咗
   淺藍深字；仲漏咗大標題、黃色提示條、敏感藍框、XP action bar、status
   bar）。呢一版係逐條規則照搬。 */
.sm .dl {
  display: block;
  min-height: 0;
  padding: clamp(20px, 4vw, 48px) clamp(10px, 4vw, 44px) clamp(30px, 5vw, 60px);
  background:
    radial-gradient(circle at 10% 15%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 85% 10%, #fff 0 2px, transparent 3px),
    linear-gradient(#8fd5ff 0, #daf2ff 57%, #69bd65 57.2%, #3f9d48 100%);
  background-size: 90px 90px, 130px 130px, auto;
  color: var(--sm-ink);
}
.dl__xp {
  width: min(1120px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #0743a8;
  border-radius: 10px 10px 7px 7px;
  background: #ece9d8;
  box-shadow: 0 20px 55px rgba(20, 55, 130, .26), 7px 8px rgba(19, 61, 143, .15);
}
.dl__bar-top {
  height: 48px; padding: 0 8px 0 12px;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(#4a99fa, #0e5cdd 54%, #0a43ac);
  color: #fff; font-weight: 800;
  box-shadow: inset 0 2px rgba(255,255,255,.55), inset 0 -2px #06378d;
  text-shadow: 1px 1px #07357e;
}
.dl__bar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl__bar-ctl { display: flex; flex: none; gap: 4px; }
.dl__bar-ctl i {
  width: 29px; height: 29px; display: grid; place-items: center;
  border: 1px solid #fff; border-radius: 4px;
  background: linear-gradient(#7dbaff, #1764d7); font-style: normal;
}
.dl__bar-ctl i:last-child { background: linear-gradient(#ff9d7d, #db2f0b); }
.dl__menu {
  height: 31px; padding: 0 14px; display: flex; align-items: center; gap: 23px;
  border-bottom: 1px solid #aaa698; background: #f7f5ea; color: #39372f; font-size: 12px;
}
.dl__menu span:first-letter { text-decoration: underline; }
.dl__ws { display: grid; grid-template-columns: 270px minmax(0, 1fr); background: #fff; }

/* 助手區：深藍底白字（唔係淺藍） */
.dl__cat {
  position: relative; min-height: 440px; overflow: hidden;
  padding: 27px 22px; color: #fff;
  background: linear-gradient(150deg, #1689ef, #1c60cf 58%, #0844a9);
  border-right: 2px solid #869dcc;
}
.dl__cat::before {
  content: ''; position: absolute; right: -180px; top: 185px;
  width: 330px; height: 330px; border: 28px solid rgba(255,255,255,.11);
  border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.06);
}
.dl__cat-h {
  position: relative; margin: 0; color: #fff;
  font: 900 23px/1 'Arial Black', Tahoma, sans-serif;
}
.dl__cat-h i { display: block; color: var(--sm-yellow); font-style: normal; }
.dl__cat-p { position: relative; margin: 10px 0 0; color: #dfeeff; font-size: 12px; line-height: 1.55; }
.dl__steps { position: relative; margin: 25px 0 0; padding: 0; list-style: none; }
.dl__steps li { display: flex; gap: 10px; align-items: center; margin: 12px 0; color: #d9e9ff; font-size: 12px; }
.dl__steps b {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%; background: #174ca3; margin: 0;
}
.dl__steps li:first-child b { background: var(--sm-yellow); color: #173f8e; }
/* 桌面版本來仲係一張靜態 ouji-shima-cat.png —— 手機版嗰個橫幅早就換咗
   六格動畫，桌面版漏咗（老闆：「電腦版唔知點解佢冇取代到靜態貼圖」）。
   ⚠️ 由 <img> 變成六格盒之後唔可以再 height:auto —— .shima__f 全部
   position:absolute，個盒會塌成 0 高。要寫死高度＋比例。 */
.dl__cat-img {
  position: absolute; left: 6px; bottom: -17px;
  width: 205px; height: 224px; max-width: none; margin: 0; display: block;
  filter: drop-shadow(6px 8px rgba(5,42,110,.25));
}
.dl__bubble {
  position: absolute; left: 143px; bottom: 155px; width: 112px; padding: 9px;
  background: #fff; color: #17213c; border: 2px solid #17213c; border-radius: 14px;
  font-size: 11px; line-height: 1.35; transform: rotate(-2deg); margin: 0;
}
.dl__bubble::after {
  content: ''; position: absolute; left: -9px; bottom: 13px; width: 15px; height: 15px;
  background: #fff; border-left: 2px solid #17213c; border-bottom: 2px solid #17213c;
  transform: rotate(45deg);
}
.dl__cat-strip { display: none; }

.dl__form { min-width: 0; background: linear-gradient(#fff, #f7faff); padding: 0; }
.dl__head { padding: 30px clamp(22px, 4vw, 48px) 18px; border-bottom: 1px solid #d1d9e6; }
.dl__eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
  color: #5971a7; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.dl__eyebrow::before {
  content: ''; width: 23px; height: 4px; background: var(--sm-pink); box-shadow: 7px -4px var(--sm-yellow);
}
.dl__h1 {
  margin: 0; color: #163e95; letter-spacing: -.04em;
  font: 900 clamp(25px, 4vw, 38px)/1.15 'Arial Black', Tahoma, 'Noto Sans TC', sans-serif;
}
.dl__intro { margin: 8px 0 0; color: #65718a; font-size: 13px; line-height: 1.55; }
.sm .dl__form > .dl__q,
.sm .dl__form > .dl__follow { padding-inline: clamp(18px, 4vw, 46px); }
.sm .dl__form > .dl__q:first-of-type { padding-top: 22px; }
.sm .dl__follow { padding-bottom: 26px; }

/* 提示條：黃色 XP 條，唔係一行灰字 */
.dl__cue {
  margin: 2px clamp(18px, 4vw, 46px) 22px;
  padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #e4bc33; background: #fff8bd; color: #624d0a;
  font-size: 11px; font-weight: 800;
}
.dl__cue b {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid #9b7d16; background: #fff; font-size: 17px; color: inherit;
}
.dl__follow { animation: dl-reveal .38s ease both; }
.dl__follow[hidden] { display: none; }
@keyframes dl-reveal { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* 敏感：藍框方格，講明係另一條軸 */
.sm .dl__q--axis {
  padding: 15px 14px 1px; margin-bottom: 24px;
  border: 2px solid #5f8ed5; background: #e8f3ff; box-shadow: inset 0 0 0 2px #fff;
}
.dl__axis { padding: 3px 6px; border: 1px solid #4f78b5; background: #fff; color: #174692; font-size: 9px; }
.dl__axis-note { margin: 0 0 11px; color: #536780; font-size: 10px; line-height: 1.45; }

.sm .dl__label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px;
  color: #173e8f; font-weight: 800; font-size: 15px; letter-spacing: 0;
}
.sm .dl__label > b {
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 2px solid #17499e; border-radius: 50%; background: #fff; color: #17499e;
  font-size: 12px; font-family: inherit;
}
.sm .dl__req {
  padding: 3px 6px; background: #ffe5f1; color: #ad185c; border: 1px solid #ec7eaf;
  font-size: 10px; letter-spacing: 0;
}
.sm .dl__hint { color: #707a8f; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.sm .dl__note {
  margin: 10px 0 0; padding: 9px 11px; border: 1px solid #edc042;
  background: #fffac6; color: #604e13; font-size: 10px; line-height: 1.5;
}

/* 再精準啲：XP outset 掣 ＋ 淺藍抽屜 */
.sm .dl__more {
  width: 100%; min-height: 45px; padding: 9px 13px;
  display: flex; align-items: center; justify-content: space-between;
  border: 2px solid #7895c8; border-radius: 0;
  background: linear-gradient(#fefefe, #dce8f9); color: #173e8f;
  cursor: pointer; font-weight: 800; text-align: left; margin-top: 4px;
}
.sm .dl__adv { padding: 16px; border: 1px solid #9fb1cf; border-top: 0; background: #eef5ff; }
.sm .dl__adv .dl__grid,
.sm .dl__adv .dl__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm .dl__adv .dl__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm .dl__adv .dl__tag { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 11px; }

/* 底部 XP action bar：貼底、米色 chrome、綠色大掣 */
.sm .dl__bar {
  position: sticky; bottom: 0; z-index: 4;
  min-height: 76px; margin: 0; padding: 12px clamp(16px, 4vw, 34px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid #a9a596; background: #ece9d8;
  box-shadow: 0 -7px 18px rgba(65, 75, 95, .08);
}
.sm .dl__want { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.sm .dl__acts { display: flex; gap: 9px; align-items: center; }
.sm .dl__go, .sm .dl__reset {
  min-height: 46px; padding: 9px 17px;
  border: 2px solid #2457a6; border-radius: 5px;
  background: linear-gradient(#fff, #d8e6fb); color: #1b2d51;
  box-shadow: inset 1px 1px #fff, 1px 1px #7f7b70;
  cursor: pointer; font-weight: 800; text-align: center;
}
.sm .dl__go {
  min-width: 210px; color: #fff; text-shadow: 1px 1px #15631a;
  border-color: #1e7028; background: linear-gradient(#8ae075, #2ba239); font-size: 15px;
}
.sm .dl__go:hover { background: linear-gradient(#a9f18b, #35b343); }
.sm .dl__go[disabled] { filter: grayscale(1); opacity: .48; cursor: not-allowed; box-shadow: none; }
.sm .dl__go:focus-visible, .sm .dl__more:focus-visible,
.sm .dl__tag:focus-visible, .sm .dl__want-b:focus-visible {
  outline: 4px solid var(--sm-yellow); outline-offset: 2px;
}

/* XP status bar */
.dl__status {
  height: 29px; padding: 3px; display: flex; gap: 4px;
  border-top: 1px solid #aaa597; background: #f2efe3; color: #5d5b52; font-size: 10px;
}
.dl__status span { padding: 5px 8px; border: 1px inset #ddd8c8; }
.dl__status span:first-child { flex: 1; }

/* ---------- 結果：照搬 prototype Revision 06／07 ----------
   Rev 05 一度將成幅結果整成深藍；Rev 06 改返「section 淺藍、只有產品卡
   深藍」；Rev 07 再將產品圖比例還原做 production 嗰套（方形相框、圖片
   84%、置中）。下面逐條跟返，冇自己執色。 */
.sm .ed {
  color: #29465a;
  background: linear-gradient(180deg, #edf7ff 0%, #e4f1f8 55%, #dbeaf3 100%);
}
.sm .ed__head { border-bottom: 1px solid #afc9d9; }
.sm .ed__kicker { color: #607c91; }
.sm .ed__read { color: #536f82; max-width: 680px; line-height: 1.7; }
.sm .ed__read, .sm .ed__name, .sm .ed__price { color: #29465a; }

/* 五步預覽：窄、貼住、格仔透明，圖片自己留 8% 白邊 */
.sm .ed__strip {
  max-width: 550px; gap: 1px; margin-inline: auto;
  background: transparent; border-bottom: 1px solid #b8cedb;
  padding: 13px 0 12px;
}
.sm .ed__cell { background: transparent; color: #6a8394; padding: 8px 4px 7px; gap: 5px; }
.sm .ed__cell:hover { background: rgba(255, 255, 255, .5); }
.sm .ed__cell-step, .sm .ed__cell-price { color: #6a8394; opacity: 1; }
.sm .ed__cell-shot {
  width: 100%; aspect-ratio: 1; background: #f5f5f2;
  border: 0; border-radius: 8px; box-sizing: border-box;
  isolation: isolate;
}
.sm .ed__cell-shot img {
  width: 100%; height: auto; aspect-ratio: 1; box-sizing: border-box;
  padding: 8%; object-fit: contain; object-position: 50% 50%; display: block;
  mix-blend-mode: multiply;
}
.sm .ed__total { color: #536f82; border-bottom: 0; text-align: right; }
.sm .ed__total b { color: #29465a; }
.sm .ed__warn, .sm .ed__hint {
  border-color: #b7ccd9; color: #526f82; background: transparent;
}
.sm .ed__row { border-bottom-color: #a9c2d1; }
.sm .ed__shot { background: #f5f5f2; border: 0; isolation: isolate; }
.sm .ed__fine { color: #607a8a; opacity: 1; }
.sm .ed__again, .sm .ed__all, .sm .ed__swap {
  border: 2px solid #7394a7; background: #f5faff; color: #294f66; border-radius: 5px;
}
.sm .ed__add {
  min-height: 48px; border: 2px solid #1e7028; border-radius: 5px;
  background: linear-gradient(#8ae075, #2ba239); color: #fff;
  text-shadow: 1px 1px #15631a; box-shadow: inset 1px 1px #fff, 1px 1px #7f7b70;
}
.sm .ed__add:hover { background: linear-gradient(#a9f18b, #35b343); }

/* ---------- 產品卡：唯一嘅深色 ---------- */
.sm .cw__head, .sm .cw__head b { color: #294f66; }
.sm .cw__dot { width: 10px; height: 10px; border: 1px solid #62889e; border-radius: 50%; background: transparent; }
.sm .cw__dot[aria-pressed="true"] { background: #315f78; }
/* 露卡：靠 rail 右邊留白造出「下一張喺度」，同 prototype 一樣 */
.sm .cw__rail {
  gap: 14px; padding: 14px 54px 14px 12px;
  scroll-padding-inline-start: 12px;
}
.sm .cw__card {
  flex: 0 0 min(82%, 470px);
  min-height: 360px; padding: 18px;
  border: 1px solid #8da6ad; border-radius: 15px;
  background: linear-gradient(155deg, #315b65 0%, #244852 56%, #1c3d47 100%);
  color: #f5f8f7;
  box-shadow: 0 8px 18px rgba(35, 68, 82, .13);
}
.sm .cw__card[aria-current="true"] {
  border-color: #cfe0e3;
  background: linear-gradient(155deg, #315b65 0%, #244852 56%, #1c3d47 100%);
  box-shadow: 0 10px 22px rgba(35, 68, 82, .18);
}
.sm .cw__card:hover { border-color: #b9ccd2; }
.sm .cw__rank { color: #f0b7c4; font-size: 11px; margin-bottom: 6px; }
.sm .cw__vendor { color: #c1d8dd; font-size: 11px; opacity: 1; }
.sm .cw__name { color: #fff; font-size: 17px; line-height: 1.35; margin: 6px 0; }
.sm .cw__name a { border-bottom-color: rgba(255, 255, 255, .34); }
.sm .cw__price { color: #fff; font-size: 16px; margin: 0; }
.sm .cw__why { color: #ccdade; opacity: 1; min-height: 3em; margin: 15px 0 12px; font-size: 12px; line-height: 1.55; }
.sm .cw__main { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.sm .cw__shot {
  width: 150px; height: 150px; aspect-ratio: 1;
  border: 0; border-radius: 14px; background: #f4f4f1;
  display: grid; place-items: center; overflow: hidden;
  /* isolation 一定要 —— 張相用緊 multiply，冇隔離就會連深色卡一齊乘變黑 */
  isolation: isolate;
}
.sm .cw__shot img {
  width: 84%; height: 84%; max-width: 84%; max-height: 84%;
  object-fit: contain; object-position: 50% 50%;
  display: block; margin: auto; mix-blend-mode: multiply;
}
.sm .cw__acts { margin-top: auto; padding-top: 0; }
.sm .cw__add {
  width: 100%; min-height: 48px; margin: 0;
  border: 1px solid #e7f0f1; border-radius: 11px;
  background: #cbdde1; color: #23424a; font-size: 13px; font-weight: 700;
  text-shadow: none; box-shadow: none;
}
.sm .cw__add:hover { background: #e0ecee; }
.sm .cw__add:focus-visible { outline: 4px solid var(--sm-yellow); outline-offset: 2px; }
.sm .cw .ed__more, .sm .cw .ed__list { margin-inline: 12px; }

/* 手機（prototype @media max-width:700px 嗰組）*/
@media (max-width: 760px) {
  .sm .ed { padding-inline: 0; }
  .sm .ed__head { margin: 14px 11px 13px; padding: 13px; }
  .sm .ed__strip { gap: 3px; }
  .sm .ed__cell { padding: 7px 2px 6px; }
  .sm .ed__cell-price, .sm .ed__cell-step { font-size: 9px; }
  .sm .cw__rail { gap: 11px; padding: 12px 52px 15px 11px; scroll-padding-inline-start: 11px; }
  /* Prototype 自己嗰條： .product-rail{grid-auto-columns:calc(100vw - 102px)}
     390px → 288px，即係 handoff 寫嘅「card 288／rail 338」。
     用百分比唔得 —— flex-basis 嘅 % 係計 content box（rail 減晒左右
     padding），出嚟會細成 60 幾 px。 */
  .sm .cw__card { flex: 0 0 calc(100vw - 102px); min-height: 365px; padding: 15px; }
  .sm .cw__main { grid-template-columns: 122px minmax(0, 1fr); gap: 12px; }
  .sm .cw__shot { width: 122px; height: 122px; }
  .sm .cw__name { font-size: 16px; line-height: 1.32; }
  .sm .cw__price { font-size: 15px; }
  .sm .cw__why { font-size: 12px; line-height: 1.58; }
}

@media (max-width: 760px) {
  .sm .dl { padding: 20px 10px 90px; }
  .dl__xp { border-width: 2px; }
  .dl__bar-top { height: 43px; font-size: 12px; }
  .dl__bar-ctl i { width: 27px; height: 27px; }
  .dl__bar-ctl i:not(:last-child) { display: none; }
  .dl__menu { display: none; }
  .dl__ws { display: block; }
  .dl__cat { display: none; }
  /* 手機：芝麻縮成深藍橫幅（跟 prototype .mobile-helper），唔遮選項 */
  .dl__cat-strip {
    height: 134px; display: flex; align-items: center; gap: 2px;
    padding: 4px 13px 0; margin: 0; overflow: hidden;
    background: linear-gradient(135deg, #1685ed, #1555bd);
    color: #fff; border-bottom: 1px solid #7794cc;
  }
  /* 由一張靜態相改成六格連續動作（搽面霜）。個盒要寫死高度，
     .shima__f 係 position:absolute，冇高度個盒會塌。 */
  .dl__cat-anim {
    align-self: flex-end; flex: none;
    height: 122px; aspect-ratio: 3 / 4; width: auto;
    filter: drop-shadow(4px 5px rgba(5, 39, 101, .24));
  }
  .dl__cat-strip span { display: block; min-width: 0; }
  .dl__cat-strip b {
    display: block; color: var(--sm-yellow);
    font: 900 20px/1 'Arial Black', Tahoma, 'Noto Sans TC', sans-serif;
  }
  .dl__head { padding: 22px 16px 14px; }
  .dl__h1 { font-size: 25px; }
  .dl__intro { font-size: 12px; }
  .sm .dl__form > .dl__q,
  .sm .dl__form > .dl__follow { padding-inline: 12px; }
  .sm .dl__form > .dl__q:first-of-type { padding-top: 18px; }
  .dl__cue { margin-inline: 12px; }
  .sm .dl__label { font-size: 14px; }
  .sm .dl__bar { min-height: 75px; padding: 10px; gap: 8px; }
  .sm .dl__go { flex: 1; min-width: 0; font-size: 15px; }
  .sm .dl__adv { padding: 12px; }
  .sm .dl__adv .dl__grid,
  .sm .dl__adv .dl__grid--4,
  .sm .dl__adv .dl__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl__status span:last-child { display: none; }
}

@media (max-width: 360px) {
  .sm .cw__main { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
  .sm .cw__shot { width: 108px; height: 108px; }
  .sm .cw__card { padding: 12px; }
  .sm .ed__cell-shot img { padding: 6%; }
  .dl__cat-strip { height: 122px; }
  .dl__cat-anim { height: 108px; }
  .dl__head { padding-left: 11px; padding-right: 11px; }
  .sm .dl__form > .dl__q,
  .sm .dl__form > .dl__follow { padding-inline: 9px; }
  .dl__cue { margin-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .dl__follow { animation: none; }
  .sm .cw__card, .sm .dl__tag, .sm .dl__want-b { transition: none; }
}

/* ---------- XP 選項格（已批准設計嘅正確控制） ----------
   之前我保留咗舊嘅拉桿，淨係包個 XP 框喺外面 —— 錯咗：批准嗰版係
   一格格 XP 掣。拉桿一粒 stop 得 6px，手機撳唔中（要求 44×44px），
   而且揀咗同冇揀淨係差個顏色。 */
.sm .dl__q { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.sm .dl__q .dl__label { display: block; margin: 0 0 8px; padding: 0; }
.sm .dl__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.sm .dl__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm .dl__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm .dl__choice {
  min-width: 0; min-height: 62px; padding: 10px 8px;
  border: 2px solid #94abd5; border-radius: 6px;
  background: linear-gradient(#fff, #edf4ff); color: #243556;
  box-shadow: inset 1px 1px #fff, 2px 3px #d9e2ef;
  cursor: pointer; text-align: center; font: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.sm .dl__choice:hover { border-color: #326cd2; }
/* 揀咗：唔止換色 —— 深藍粗邊 ＋ 淡黃底 ＋ 內外陰影 */
.sm .dl__choice[aria-checked="true"] {
  border-color: #164bad;
  background: linear-gradient(#fffbd1, var(--sm-yellow));
  box-shadow: inset 0 0 0 2px #fff, 3px 4px #164bad;
}
.sm .dl__choice:focus-visible { outline: 4px solid var(--sm-yellow); outline-offset: 2px; }
.sm .dl__choice b, .sm .dl__choice small { display: block; overflow-wrap: anywhere; }
.sm .dl__choice b { font-size: 13px; }
.sm .dl__choice small { margin-top: 4px; color: #65718a; font-size: 11px; line-height: 1.35; }

/* 想改善：次序號碼要係一粒圓章，唔止換色 */
.sm .dl__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sm .dl__tag {
  position: relative; min-height: 40px; padding: 8px 12px;
  border: 2px solid #8fa7cf; border-radius: 4px;
  background: linear-gradient(#fff, #edf3fc); color: #263858;
  box-shadow: 1px 2px #d7e0ed; font-size: 12px; font-weight: 700;
}
.sm .dl__tag[aria-pressed="true"] {
  padding-left: 31px; border-color: #174aa8;
  background: linear-gradient(#fff9c6, #ffec68); box-shadow: 2px 3px #174aa8;
}
.sm .dl__tag b {
  position: absolute; left: 7px; top: 50%; width: 18px; height: 18px;
  display: grid; place-items: center; transform: translateY(-50%);
  border-radius: 50%; background: #1b58c1; color: #fff;
  font-family: inherit; font-size: 10px;
}

@media (max-width: 760px) {
  .sm .dl__grid,
  .sm .dl__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm .dl__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 五個選項嘅時候，最後嗰個唔好孤伶伶半行 */
  .sm .dl__grid .dl__choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sm .dl__grid--4 .dl__choice:last-child { grid-column: auto; }
  .sm .dl__choice { min-height: 67px; }
  .sm .dl__tag { min-height: 40px; font-size: 11px; }
}
@media (max-width: 360px) {
  .sm .dl__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm .dl__choice small { font-size: 11px; }
}

/* ---------- 外殼 ----------
   「答三條，幫你揀」嗰條摺埋嘅橫額剷咗：已批准嘅設計係一入嚟就係
   XP 控制台、第一條問膚質。要撳多一下先見到，等於成格睇落同以前一樣。 */
.sm .sm__sheet {
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  color: var(--sm-ink);
}
.sm .sm__sheet::before, .sm .sm__sheet::after { display: none; }
.sm .sm__panel { background: transparent; }

/* ---------- 方案 B：XP 天空草地貫穿護膚頁上下兩格（2026-08-21）----------
   老闆揀咗 B，同時講明「兩個 session 之間唔要有線條」。
   試過兩格各畫一半天空、色接得啱、仲重疊咗 1px —— 中間一樣睇到條線：
   兩個 gradient 各自 dither，交界就會顯出一條 Mach band。
   所以唔再畫兩幅：整幅天空 ＋ 草地係 .sm::before 一件嘢畫晒，
   向上伸返招牌嗰 350px。一幅圖，梗係冇縫。 */
.sm {
  --sky-top: #8fd5ff;      /* 天空最上 */
  --sky-bot: #daf2ff;      /* 天空落到地平線 */
  --sky-run: 572px;        /* 天空總高＝招牌 350 ＋ 視窗 222 */
  --booth-h: 350px;        /* 招牌高度：::before 要向上伸幾多 */
  --grass-top: #69bd65;
  --grass-bot: #3f9d48;
}
.skincare-booth {
  margin-bottom: 0;
  border-bottom: 0;
  /* 天空唔喺度畫；貼紙同大字要浮喺 .sm::before 上面，所以要 z-index */
  background: transparent;
  z-index: 1;
}
.skincare-booth + * { margin-top: 0; }
/* 配方由 container 拉返出嚟做全闊，唔係就會兩邊留白 */
.sm, .container > .sm, .skincare-booth ~ .container > .sm {
  position: relative;
  z-index: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  border-radius: 0;
  background: transparent;
}
.sm::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--booth-h));
  background-color: var(--sky-bot);
  background-image:
    radial-gradient(circle at 34px 22px, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 96px 58px, #fff 0 2px, transparent 3px),
    linear-gradient(
      var(--sky-top) 0,
      var(--sky-bot) var(--sky-run),
      var(--grass-top) var(--sky-run),
      var(--grass-bot) 100%);
  background-size: 90px 90px, 130px 130px, auto;
}
.sm .sm__sheet { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sm .sm__panel, .sm .sm__stage { padding: 0; }
.sm .dl { padding-top: clamp(18px, 3vw, 40px); background: transparent; }

/* ---------- 補齊 prototype 嘅細節 ---------- */
.dl__bar-icon {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 3px; background: #fff; color: #2869d6;
  text-shadow: none; font-size: 14px; line-height: 1;
}
.dl__cat-h i { display: block; color: var(--sm-yellow); font-style: normal; }

/* 底部 XP action bar：左邊講仲爭咩，右邊重設 ＋ 綠掣 */
.sm .dl__ready { margin: 0 auto 0 0; color: #5f5d53; font-size: 11px; font-weight: 400; }

/* 想改善：揀咗邊幾樣，寫返出嚟 */
.sm .dl__concerns, .sm .dl__want-block { border: 0; padding: 0; min-width: 0; }
.sm .dl__concerns { margin: 0 0 24px; }
.sm .dl__pickcount { margin: 9px 0 0; color: #68758c; font-size: 10px; }

/* 今次想要邊幾步：一條虛線隔開，同上面嘅問題唔同層 */
.sm .dl__want-block {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px dashed #91a5c7;
}
.sm .dl__want-block .dl__label { font-size: 13px; }
.sm .dl__want { gap: 6px; }
.sm .dl__want .dl__tag { min-width: 70px; text-align: center; }
.sm .dl__want .dl__tag[aria-pressed="true"] { padding-left: 12px; }

/* 結果頁大標題（prototype 有，之前 production 冇） */
.sm .ed__h2 {
  margin: 7px 0 6px; color: #29465a;
  font-family: 'Bodoni Moda', Georgia, 'Noto Serif TC', serif; font-weight: 500;
  font-size: clamp(24px, 4vw, 36px); line-height: 1.15;
}
.sm .cw__swipe { margin-left: auto; margin-right: 10px; color: #648297; font-size: 10px; font-weight: 800; }

@media (max-width: 760px) {
  .sm .dl__ready { display: none; }
  .sm .dl__go { flex: 1; }
  .sm .cw__swipe { display: none; }
  .sm .dl__want-block { margin-top: 18px; }
}

/* 結果頁：prototype 嗰塊淺藍標題板、黃色提示條、藍色行標題 */
.sm .ed__head {
  margin: 18px clamp(11px, 3vw, 26px) 16px;
  padding: 17px; border: 1px solid #8fa9d4; background: #e8f1ff;
}
.sm .ed__kicker { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #5b6d92; }
.sm .ed__h2 {
  margin: 7px 0 6px; color: #173e91;
  font: 900 clamp(24px, 4vw, 36px)/1.15 'Arial Black', Tahoma, 'Noto Sans TC', sans-serif;
}
.sm .ed__read { margin: 0; font-family: inherit; font-size: 12px; line-height: 1.55; color: #46546c; }
.sm .ed__hint {
  margin: 0 clamp(11px, 3vw, 26px) 19px; padding: 8px 10px;
  border: 1px solid #e4bd37; background: #fff8c6; color: #5e4c12;
  font-size: 10px; font-weight: 800; text-align: center;
}
.sm .cw__head {
  padding: 9px 11px; gap: 9px; justify-content: flex-start;
  border-bottom: 1px solid #a9b8d1; background: #e4edfb;
}
.sm .ed__step { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0; color: #294f66; }
.sm .cw__swipe { font-size: 9px; color: #465d83; }
.sm .dl__q--axis .dl__label { margin-bottom: 5px; }
@media (min-width: 720px) {
  .sm .ed__head { padding: 17px; }
}

/* 結果留喺窗入面：中間嗰欄由白色表格換做淺藍配方板 */
.sm .dl__form--result { background: transparent; padding: 0; }
/* flow-root：唔畀 .ed__head 條 margin 穿返出去，穿出去就會露返 XP 嗰浸米色底 */
.sm .dl__form--result .ed { border-radius: 0; display: flow-root; }

/* ══════════════════════════════════════════════════════════════════════
   2026-08-21（下晝二）—— 老闆話「而家係好大舊」：網頁版要闊啲、扁啲、
   細粒啲，白點大幅減少。
   做法：橫向盡量食晒屏幕（窗由 1120 放到 1560，兩邊 padding 收窄），
   縱向逐格削 —— 窗頂、選項格、行距、底 bar、產品卡高度全部縮。
   手機唔郁：手機本身已經係一欄，再縮就撳唔中。
   ══════════════════════════════════════════════════════════════════════ */

/* 白點：本來兩層（90px 同 130px 一粒），密到成塊麻。改返一層、
   一格 320×300 先一粒、細粒兼透明啲 —— 大概係原本嘅十分之一。 */
.sm::before {
  background-image:
    radial-gradient(circle at 78px 58px, rgba(255, 255, 255, .72) 0 1.6px, transparent 2.6px),
    linear-gradient(
      var(--sky-top) 0,
      var(--sky-bot) var(--sky-run),
      var(--grass-top) var(--sky-run),
      var(--grass-bot) 100%);
  background-size: 320px 300px, auto;
}

@media (min-width: 761px) {
  /* 招牌矮返啲，成頁少咗 50px 高 */
  .skincare-booth { height: 300px; min-height: 300px; }
  .sm { --booth-h: 300px; --sky-run: 500px; }

  /* 窗闊啲、兩邊窄啲 */
  .sm .dl {
    padding: clamp(14px, 1.8vw, 26px) clamp(10px, 1.2vw, 20px) clamp(20px, 2.4vw, 34px);
  }
  .dl__xp { width: min(1560px, 100%); border-radius: 8px 8px 6px 6px; }
  .dl__bar-top { height: 38px; }
  .dl__menu { height: 26px; font-size: 11px; }
  .dl__ws { grid-template-columns: 232px minmax(0, 1fr); }
  .dl__cat { min-height: 0; padding: 20px 18px; }
  .dl__cat-h { font-size: 21px; }
  .dl__cat-p { font-size: 11.5px; }

  /* 表頭：字細一級，上下收窄 */
  .dl__head { padding: 18px clamp(16px, 1.8vw, 30px) 12px; }
  .sm .dl__h1 { font-size: clamp(21px, 2.1vw, 29px); }
  .dl__intro { font-size: 12px; }
  .dl__eyebrow { margin-bottom: 7px; }

  /* 每條問題：行距、標題、格仔全部縮一級 */
  .sm .dl__form > .dl__q,
  .sm .dl__form > .dl__follow { padding-inline: clamp(14px, 1.8vw, 30px); }
  .sm .dl__form > .dl__q:first-of-type { padding-top: 14px; }
  .sm .dl__follow { padding-bottom: 16px; }
  .sm .dl__q { margin-bottom: 12px; }
  .sm .dl__label { font-size: 14px; margin-bottom: 7px; }
  .sm .dl__label > b { width: 22px; height: 22px; font-size: 11px; }
  .sm .dl__grid { gap: 7px; }
  .sm .dl__choice { min-height: 52px; padding: 8px; }
  .sm .dl__choice b { font-size: 12.5px; }
  .sm .dl__choice small { margin-top: 3px; font-size: 10.5px; }
  .sm .dl__q--axis { padding: 11px 12px 1px; margin-bottom: 16px; }
  .dl__axis-note { margin-bottom: 8px; }
  .sm .dl__tag { min-height: 34px; padding: 6px 10px; font-size: 11.5px; }
  .sm .dl__tag[aria-pressed="true"] { padding-left: 28px; }
  .sm .dl__want .dl__tag[aria-pressed="true"] { padding-left: 10px; }
  .dl__cue { margin: 0 clamp(14px, 1.8vw, 30px) 14px; padding: 7px 10px; }
  .dl__cue b { width: 22px; height: 22px; font-size: 15px; }
  .sm .dl__want-block { margin-top: 16px; padding-top: 14px; }
  .sm .dl__more { min-height: 38px; padding: 7px 12px; }

  /* 底 bar 同狀態列 */
  .sm .dl__bar { min-height: 60px; padding: 9px clamp(14px, 1.8vw, 26px); gap: 10px; }
  .sm .dl__go, .sm .dl__reset { min-height: 40px; }
  .sm .dl__go { min-width: 176px; font-size: 14px; }
  .dl__status { height: 26px; }

  /* 結果：標題板同五步預覽都扁啲、闊啲 */
  .sm .ed__head { margin: 14px clamp(14px, 1.8vw, 26px) 12px; padding: 14px 16px; }
  .sm .ed__h2 { font-size: clamp(21px, 2.2vw, 30px); }
  .sm .ed__strip { max-width: 780px; padding: 10px 0 9px; }
  .sm .ed__total { padding-block: 8px; }
  .sm .ed__hint { margin: 0 clamp(14px, 1.8vw, 26px) 14px; }
  .sm .cw__head { padding: 7px 10px; }
  .sm .cw__rail { gap: 12px; padding: 12px 48px 12px 12px; }
  /* 卡窄咗，一屏睇到三張 —— 之前 470px 一張，成塊嘢好長 */
  .sm .cw__card { flex: 0 0 min(46%, 400px); min-height: 300px; padding: 15px; }
  .sm .cw__main { grid-template-columns: 128px minmax(0, 1fr); gap: 13px; }
  .sm .cw__shot { width: 128px; height: 128px; }
  .sm .cw__name { font-size: 15px; margin: 5px 0; }
  .sm .cw__why { margin: 11px 0 10px; min-height: 2.8em; font-size: 11.5px; }
  .sm .ed__row { padding-block: 14px; }
}

@media (min-width: 761px) {
  /* 助手欄本來係度住 440px 高嚟砌（芝麻同對話泡都係 absolute 貼住底）。
     窗矮咗之後，芝麻爬咗上去壓住三個步驟。改成由上到下排落嚟，
     芝麻擺喺最底、對話泡喺佢上面 —— 幾矮都唔會撞。 */
  .dl__cat {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    /* 第三行 1fr：窗高咗嗰陣多出嚟嘅位由步驟嗰行食晒，
       芝麻同對話泡就一直貼實個底，唔會浮喺半空 */
    grid-template-rows: auto auto 1fr auto;
    gap: 0; padding: 16px 14px 0;
  }
  .dl__cat-h { grid-row: 1; }
  .dl__cat-p { grid-row: 2; }
  .dl__steps { grid-row: 3; align-self: start; }
  .dl__cat-h, .dl__cat-p, .dl__steps { grid-column: 1 / -1; }
  .dl__cat-h { font-size: 19px; }
  .dl__cat-p { margin-top: 8px; }
  .dl__steps { margin-top: 12px; }
  .dl__steps li { margin: 6px 0; font-size: 11px; }
  .dl__steps b { width: 21px; height: 21px; font-size: 10.5px; }
  /* 對話泡同芝麻並排擺喺最底，唔再各佔一行 */
  .dl__bubble {
    position: static; grid-row: 4; grid-column: 1; align-self: end; justify-self: start;
    width: auto; max-width: 118px; margin: 12px 0 12px; padding: 7px 9px;
    border-radius: 12px; font-size: 10.5px; transform: none;
  }
  .dl__bubble::after {
    left: auto; right: -9px; bottom: 11px; width: 14px; height: 14px;
    border-left: 0; border-bottom: 2px solid #17213c; border-right: 2px solid #17213c;
    transform: rotate(-45deg);
  }
  /* 老闆：「左下角嗰個可以大隻少少添。」由 108 加到 148。
     ⚠️ 呢條係 min-width:761px（桌面）嗰條，唔係手機嗰條 —— 上面
     嗰條 205×224 先係窄機用。我一開始改錯咗上面嗰條，冇效果。 */
  .dl__cat-img {
    position: static; grid-row: 4; grid-column: 2; align-self: end;
    width: 148px; height: 162px; margin: 6px -12px -6px 0;
  }
}