/* Built by site-v1/build_box.py from app/storefront/index.html's <style>. Don't edit here. */

  .board {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    gap: clamp(14px, 2.2vh, 26px);
    padding: 0 clamp(20px, 4vw, 48px) clamp(18px, 2.4vh, 30px);
    max-width: 1400px; margin: 0 auto; width: 100%;
  }

  /* ── header row: one line of copy left, the pager right ───── */
  .say {
    flex: 0 0 auto;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s4);
  }
  .say-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .say .display { font-size: clamp(26px, 3.4vh, 40px); }

  .pager { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 4px; }
  html[data-rotation="3"] .pager { visibility: hidden; }
  .pager button {
    appearance: none; cursor: pointer;
    width: 42px; height: 42px; border-radius: 999px;
    display: grid; place-items: center;
    background: transparent; color: var(--ink);
    border: 1px solid var(--hair);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
                opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .pager button:hover:not(:disabled) {
    background: color-mix(in srgb, #FBF6EC 16%, transparent);
    border-color: color-mix(in srgb, var(--ink) 40%, transparent);
  }
  .pager button:active:not(:disabled) { transform: scale(.94); }
  .pager button:disabled { opacity: .28; cursor: default; }
  .pager svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

  /* ── the tiles ARE the page ───────────────────────────────── */
  /* ── the board is a TRACK, not a window ───────────────────────
     Every flavor in the rotation is rendered; paging moves the track. That
     is what makes a slide possible at all — rebuilding three tiles per page
     can only ever pop. overflow-x: clip (not hidden) lets overflow-y stay
     visible, so the hover lift and the chosen tile's shadow are not sliced
     off the top and bottom. */
  .viewport {
    flex: 1 1 auto; min-height: 0;
    margin-block: auto;
    overflow-x: clip; overflow-y: visible;
  }
  .tiles {
    height: 100%;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: var(--tw, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
    will-change: transform;
  }

  /* ── how the board pages ─────────────────────────────────────── */
  html[data-motion="none"]  .tiles { transition: none; }
  html[data-motion="slide"] .tiles { transition: transform 380ms var(--ease); }
  html[data-motion="glide"] .tiles { transition: transform 720ms cubic-bezier(.16,1,.3,1); }
  html[data-motion="fade"]  .tiles { transition: opacity 170ms linear; }
  html[data-motion="peek"]  .tiles { transition: transform 420ms var(--ease); }

  /* tiles outside the three on show — only two modes make anything of them */
  .tile { transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                      transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                      border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  html[data-motion="glide"] .tile.off { opacity: .3; }
  html[data-motion="peek"]  .tile.off { opacity: .55; }
  .tile {
    appearance: none; cursor: pointer; font: inherit; text-align: left;
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: clamp(10px, 1.6vh, 18px); min-height: 0;
    padding: clamp(16px, 2vh, 26px);
    border-radius: var(--radius);
    background: color-mix(in srgb, #FBF6EC 11%, transparent);
    border: 1px solid var(--hair);
    color: var(--ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  /* the lift is an INVITATION — it belongs only to tiles you could still pick.
     The chosen tile is pinned: you are working its stepper and Add button, and a
     tile that rises and drops every time the cursor crosses it is unusable. */
  .tile:not(.on):hover { transform: translateY(-3px); background: color-mix(in srgb, #FBF6EC 17%, transparent); }
  .tile:not(.on):active { transform: translateY(0); }
  .tile.on { transform: none; }

  /* chosen tile — RULED: fills cream. Nothing resizes; only colour and lift. */
  .tile.on {
    background: var(--surface); color: var(--card-ink); border-color: transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,.26), 0 14px 34px rgba(0,0,0,.24);
  }

  .tile .art { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
  .tile .art img { max-height: 100%; max-width: 92%; opacity: .94; }
  /* the scone never recolours (brand rule) — the RING swaps instead */
  .tile .art img.mk-dark { display: none; }
  .tile.on .art img.mk-cream { display: none; }
  .tile.on .art img.mk-dark  { display: block; }
  html[data-tileart="none"] .tile .art { display: none; }
  html[data-tileart="photo"] .tile .art img { display: none; }
  html[data-tileart="photo"] .tile .art {
    border-radius: var(--radius-sm, 12px);
    background: color-mix(in srgb, #FBF6EC 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--hair);
    position: relative; width: 100%;
  }
  html[data-tileart="photo"] .tile .art::after {
    content: "photo"; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    opacity: .5;
  }

  /* ── tile shape — RULED 2026-09-06 ─────────────────────────────
     The tile is the GOLDEN RATIO, 1 : 1.618, and the board widens so the tiles
     grow into the height the shorter ratio frees (`fitBoard()` below). Rejected
     the same session, on the real board: square 1 : 1 (the mark falls to 222px
     and ~400px of a one-screen page goes empty), 1 : 1.7, 1 : 1.45, 1 : 1.2, and
     the "air above and below" fit that pins the board at 1400 — every one of them
     either shrank the mark or wasted the page's only screen. Golden + grow is the
     only pairing that makes the tile SHORTER and the mark BIGGER: 505 × 817 with
     a 420px mark, against 421 × 817 and 343px before.

     Desktop only. Below 861px the tile is a horizontal row (see the mobile block),
     where a portrait aspect-ratio is meaningless. */
  @media (min-width: 861px) {
    .tiles { align-items: center; }
    .tile { height: auto; aspect-ratio: 1 / 1.618; }

    /* ⚠ THE MARK'S HEIGHT CAP — this is a FIX, not styling. Do not fold it back.
       `.art` takes its height from flex, which is an *indefinite* height, so a
       percentage `max-height` on the img computes to none and only the 92% WIDTH
       cap ever binds. The tile used to be tall enough that the width cap was the
       smaller of the two, so the bug was invisible — the page was accidentally
       correct. Shortening the tile exposed it: measured at 1 : 1, a 468px mark
       inside a 360px art box, overflowing onto the flavour name. Absolute
       positioning gives .art a definite containing block, so BOTH caps apply and
       the mark scales with the tile. `margin: auto` against `inset: 0` keeps it
       centred; width/height auto keep the scone's aspect ratio intact. */
    .tile .art { position: relative; }
    .tile .art img {
      position: absolute; inset: 0; margin: auto;
      width: auto; height: auto; max-width: 92%; max-height: 100%;
    }
  }

  .tile .copy { display: flex; flex-direction: column; gap: 5px; }
  /* Allergens from the recipe (2026-10-13), under the name, quiet. */
  .tile .contains { display: block; font-size: 11px; line-height: 1.25; text-align: center; opacity: .75; }
  .tile .name { display: block; font-family: var(--serif); font-size: clamp(19px, 2.3vh, 25px); font-weight: 600; line-height: 1.1; text-align: center; }

  .tile .foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s2); min-width: 0;
  }
  .tile .foot .copy { flex: 1 1 auto; min-width: 0; }
  .tile .tile-add { flex: 0 0 auto; visibility: hidden; padding: 11px 16px; font-size: 13.5px; }
  .tile.on .tile-add { visibility: visible; }
  html[data-add="live"] .tile .tile-add { display: none; }
  /* the Add button follows the quantity: beside the name while quantity is in the
     bar, down in the order row once quantity moves onto the tile (beside a
     two-line flavor name at tile width it collides) */
  .tile .foot .tile-add { display: none; }
  html[data-qty="bar"] .tile .foot .tile-add { display: inline-block; }
  .tile-order .row-add { width: 100%; padding: 11px 16px; font-size: 13.5px; }

  /* ── NEW: size + quantity ON THE CHOSEN TILE ──────────────────
     Rendered into EVERY tile and only made invisible on the unchosen ones,
     so the board does not shift a single pixel when the selection moves —
     the same rule the Add button already followed. */
  .tile-order {
    visibility: hidden;
    display: flex; flex-direction: column; gap: var(--s1);
    padding-top: 2px;
  }
  .tile.on .tile-order { visibility: visible; }
  html[data-qty="bar"] .tile-order { display: none; }

  /* the size segment takes the full tile width — at half width "Two dozen"
     wraps to two lines and the thumb sits under a broken label (measured) */
  .tile-order .single { display: block; }
  .tile-order .single .seg button { padding: 9px 8px; font-size: 13px; }
  .tile-order .dual { display: none; flex-direction: column; gap: 7px; }
  /* quantity sits beside the action it feeds */
  .tile-order .actrow { display: flex; align-items: center; gap: var(--s1); }
  .tile-order .actrow .row-add { flex: 1 1 auto; width: auto; }
  html[data-qty="tiledual"] .tile-order .actrow .stepper { display: none; }
  /* dual + live leaves the action row with nothing in it */
  html[data-qty="tiledual"][data-add="live"] .tile-order .actrow { display: none; }
  .tile-order .dual .qrow {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  }
  .tile-order .dual .ql { font-size: 13.5px; font-weight: 500; }
  html[data-qty="tiledual"] .tile-order .single { display: none; }
  html[data-qty="tiledual"] .tile-order .dual { display: flex; }

  /* the stepper — a groove with the count floating in it, same family as .seg */
  .stepper {
    flex: 0 0 auto;
    display: grid; grid-template-columns: 34px minmax(30px, auto) 34px;
    align-items: center;
    background: color-mix(in srgb, var(--card-ink) 8%, transparent);
    border-radius: calc(var(--radius-sm, 12px) + 5px);
    padding: 4px;
  }
  .stepper button {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    height: 30px; border-radius: var(--radius-sm, 12px);
    background: transparent; color: color-mix(in srgb, var(--card-ink) 66%, transparent);
    font-size: 17px; line-height: 1;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .stepper button:hover:not(:disabled) {
    background: var(--bright); color: var(--card-ink);
    box-shadow: 0 1px 2px rgba(22,32,74,.18), 0 4px 12px rgba(22,32,74,.12);
  }
  .stepper button:disabled { opacity: .3; cursor: default; }
  .stepper .n {
    text-align: center; font-size: 14.5px; font-weight: 600;
    color: var(--card-ink); font-variant-numeric: tabular-nums;
  }
  .stepper .n.zero { color: color-mix(in srgb, var(--card-ink) 38%, transparent); font-weight: 500; }

  /* ── the order bar ────────────────────────────────────────── */
  .bar {
    flex: 0 0 auto;
    display: grid; align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    padding: clamp(12px, 1.6vh, 18px) clamp(16px, 1.8vw, 24px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .bar .field { gap: 7px; }
  .bar .field > .label { font-size: 10px; }
  .bar .seg button { padding: 9px 12px; font-size: 13.5px; }
  .bar .total { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .bar .total .amt { font-size: clamp(24px, 3vh, 30px); }
  .bar .total .note { line-height: 1.35; }
  .bar .pay-stack { flex-direction: row; align-items: center; gap: var(--s1); }
  .bar .pay-stack .paydiv { display: none; }
  .bar .btn-wallet { width: auto; white-space: nowrap; padding: 13px 18px; font-size: 14px; }

  /* the bar's own size control only exists while quantity lives DOWN HERE */
  html[data-qty="tile"] .bar-size,
  html[data-qty="tiledual"] .bar-size { display: none; }

  /* ── NEW: the cart strip — reserves its room, so the bar never jumps ── */
  .cart-strip {
    display: none;
    min-height: 52px;
    align-items: center; gap: var(--s1);
    min-width: 0; overflow-x: auto; overflow-y: hidden;
    padding: 4px 2px;
    scrollbar-width: thin;
  }
  html[data-barmode="receipt"] .cart-strip { display: flex; }
  .cart-strip .lot {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 8px 7px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-ink) 7%, transparent);
    font-size: 13px; line-height: 1.2; white-space: nowrap;
  }
  .cart-strip .lot b { font-weight: 600; }
  .cart-strip .lot .sub { color: color-mix(in srgb, var(--card-ink) 55%, transparent); }
  .cart-strip .lot .x {
    appearance: none; border: 0; background: none; cursor: pointer;
    width: 22px; height: 22px; border-radius: 999px;
    display: grid; place-items: center; font-size: 14px; line-height: 1;
    color: color-mix(in srgb, var(--card-ink) 45%, transparent);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .cart-strip .lot .x:hover { background: color-mix(in srgb, var(--card-ink) 12%, transparent); color: var(--card-ink); }
  .cart-strip .none {
    font-size: 13px; color: color-mix(in srgb, var(--card-ink) 52%, transparent);
    padding-left: 2px;
  }

  /* ── bar modes ────────────────────────────────────────────────
     full    — every control, as it is on order-c.html today
     receipt — the cart is visible in the bar, in reserved space
     lean    — delivery, the total, one Pay. Everything else deleted. */
  /* ── the bar's columns are NAMED, never positional ────────────────
     Hiding one control used to shuffle the remaining ones into different
     columns: with the size field gone, the total landed in an `auto`
     column that sized to the flavor NAME and the pay stack landed in the
     `1fr`, so Pay moved every time the flavor changed. Named areas pin pay
     to the right edge in every mode; the total column is the only flexer. */
  .cart-strip { grid-area: strip; }
  .bar-size   { grid-area: size; }
  .bar-method { grid-area: method; }
  .bar .total { grid-area: total; }
  .bar .pay-stack { grid-area: pay; justify-self: end; justify-content: flex-end; }

  /* quantity still in the bar — the size field keeps its column */
  html[data-barmode="full"][data-qty="bar"] .bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "size method total pay";
  }
  /* quantity on the tile, or lean — the size column is gone entirely, so
     there is no orphan column or gap left behind */
  html[data-barmode="full"]:not([data-qty="bar"]) .bar,
  html[data-barmode="lean"] .bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "method total pay";
  }

  /* receipt: the order gets its own full-width line above the pay line.
     It cannot share the row — measured, a 1fr next to three auto columns
     collapses to 0px and the strip renders as a 4px sliver. */
  html[data-barmode="receipt"][data-qty="bar"] .bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "strip strip strip strip" "size method total pay";
    row-gap: clamp(10px, 1.4vh, 16px);
  }
  html[data-barmode="receipt"]:not([data-qty="bar"]) .bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "strip strip strip" "method total pay";
    row-gap: clamp(10px, 1.4vh, 16px);
  }
  html[data-barmode="receipt"] .cart-strip {
    border-bottom: 1px solid color-mix(in srgb, var(--card-ink) 12%, transparent);
    padding-bottom: clamp(8px, 1.1vh, 12px);
  }

  html[data-barmode="lean"] .bar-size { display: none; }
  html[data-barmode="lean"] .btn-wallet.google,
  html[data-barmode="lean"] .btn-wallet.card { display: none; }
  html[data-barmode="lean"] .otherpay { display: inline; }
  html[data-barmode="lean"] .bar .total .note { display: none; }
  html[data-barmode="lean"] .bar-method > .label { display: none; }

  .otherpay {
    display: none;
    font-size: 12px; margin-left: 4px;
    color: color-mix(in srgb, var(--card-ink) 55%, transparent);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }

  /* Add to cart is a BUILD action — pale wash. Pay is the commit — loudest. */
  .btn-add {
    appearance: none; cursor: pointer; font: inherit;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    padding: 13px 20px; border-radius: var(--radius-sm, 12px);
    background: color-mix(in srgb, var(--card-ink) 9%, transparent);
    color: var(--card-ink);
    border: 1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .btn-add:hover { background: color-mix(in srgb, var(--card-ink) 15%, transparent); }
  .btn-add:active { transform: translateY(1px); }
  .btn-add:disabled { opacity: .4; cursor: default; }
  /* nothing chosen and an empty cart — there is nothing to pay for */
  .bar .btn-wallet:disabled { opacity: .34; cursor: default; transform: none; }

  /* ── the cart also lives in the navbar ────────────────────── */
  .cart-wrap { position: relative; }
  .cart-chip {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--hair);
    transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    opacity: .6;
  }
  .cart-chip.has { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .cart-chip:hover { background: color-mix(in srgb, #FBF6EC 14%, transparent); }
  .cart-chip .n {
    min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .cart-chip.has .n { background: var(--accent); color: #16204A; }

  .cart-pop {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
    width: 300px; padding: 14px; border-radius: var(--radius);
    background: var(--surface); color: var(--card-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 22px 54px rgba(0,0,0,.32);
    display: none;
  }
  .cart-pop.open { display: block; }
  .cart-pop h5 {
    margin: 0 0 10px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--card-ink) 58%, transparent); font-weight: 700;
  }
  .cart-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .cart-pop li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .cart-pop li .g { flex: 1 1 auto; line-height: 1.3; }
  .cart-pop li .g small { display: block; opacity: .6; font-size: 11.5px; }
  .cart-pop li .p { font-variant-numeric: tabular-nums; }
  .cart-pop li .x {
    appearance: none; border: 0; background: none; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 8px;
    color: color-mix(in srgb, var(--card-ink) 45%, transparent);
  }
  .cart-pop li .x:hover { background: color-mix(in srgb, var(--card-ink) 9%, transparent); }
  .cart-pop .empty { font-size: 13px; opacity: .6; }

  @media (max-width: 1180px) {
    html[data-barmode="full"][data-qty="bar"] .bar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "size method" "total pay";
      row-gap: var(--s2);
    }
    html[data-barmode="full"]:not([data-qty="bar"]) .bar,
    html[data-barmode="lean"] .bar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "method method" "total pay";
      row-gap: var(--s2);
    }
    html[data-barmode="receipt"][data-qty="bar"] .bar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "strip strip" "size method" "total pay";
      row-gap: var(--s2);
    }
    html[data-barmode="receipt"]:not([data-qty="bar"]) .bar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "strip strip" "method method" "total pay";
      row-gap: var(--s2);
    }
    .bar .pay-stack { flex-wrap: wrap; }
  }
  @media (max-width: 860px) {
    .board { padding-bottom: var(--s5); gap: var(--s3); }
    .say { flex-direction: column; align-items: stretch; gap: var(--s2); }
    .pager { justify-content: flex-end; }
    .viewport { overflow: visible; }
    .tiles { grid-auto-flow: row; grid-auto-columns: auto; transform: none !important; }
    .tile.off { opacity: 1 !important; }
    .pager { display: none; }
    .tile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2); }
    .tile .art { flex: 0 0 66px; }
    .tile .art img { max-width: 100%; }
    .tile .foot { flex: 1 1 200px; flex-wrap: wrap; row-gap: var(--s1); }
    .tile-order { flex: 1 1 100%; }
    html[data-barmode="full"][data-qty="bar"] .bar {
      grid-template-columns: 1fr;
      grid-template-areas: "size" "method" "total" "pay";
    }
    html[data-barmode="full"]:not([data-qty="bar"]) .bar,
    html[data-barmode="lean"] .bar {
      grid-template-columns: 1fr;
      grid-template-areas: "method" "total" "pay";
    }
    html[data-barmode="receipt"][data-qty="bar"] .bar {
      grid-template-columns: 1fr;
      grid-template-areas: "strip" "size" "method" "total" "pay";
    }
    html[data-barmode="receipt"]:not([data-qty="bar"]) .bar {
      grid-template-columns: 1fr;
      grid-template-areas: "strip" "method" "total" "pay";
    }
    .bar .pay-stack { justify-self: stretch; }
    .bar .pay-stack { grid-column: 1 / -1; }
    .bar .btn-wallet { flex: 1 1 140px; }
    .cart-pop { width: min(300px, calc(100vw - 32px)); }
  }

  /* the order total under the cart popup's lines (2026-10-01) */
  .cart-pop .cart-total { margin: var(--s2) 0 0; font-weight: 600; text-align: right; }
  .cart-pop .cart-total:empty { display: none; }
  /* Paying (2026-10-27): Stripe's own card box in a dialog over the board */
  .paydlg { border: 0; border-radius: 18px; padding: 26px 24px 22px; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: #FFFDF8; color: #293984; box-shadow: 0 24px 70px rgba(22,32,74,.35); }
  .paydlg::backdrop { background: rgba(22,32,74,.55); }
  .paydlg h2 { margin: 0 0 4px; font-family: var(--serif, Georgia, serif); font-size: 26px; }
  .paydlg-what { margin: 0 0 16px; font-size: 14px; opacity: .8; }
  .paydlg-x { position: absolute; top: 10px; right: 10px; margin: 0; }
  .paydlg-x button { border: 0; background: none; font-size: 26px; line-height: 1; width: 44px; height: 44px; cursor: pointer; color: #293984; }
  .paydlg label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; }
  .paydlg input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1.5px solid #29398455; border-radius: 10px; font: inherit; font-weight: 400; box-sizing: border-box; color: inherit; background: #fff; }
  .paydlg-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
  #payNext { width: 100%; }
  #payEl { min-height: 120px; margin: 0 0 16px; }
  #payGo { width: 100%; }
  #payMsg { margin: 12px 0 0; font-size: 14px; min-height: 1.2em; }
  .paydlg-test { margin: 10px 0 0; font-size: 12px; opacity: .7; }
  .paydlg-note { margin: 0 0 12px; font-size: 13px; }
  .paydlg-fee { display: flex; justify-content: space-between; margin: 0 0 14px; padding: 10px 0 0; border-top: 1px solid #29398433; font-size: 14px; font-weight: 600; }