/* Generated by tools/scope-css.py from assets/src/order-*.css — edit the source, then run it again. */

/* See visit.css: the theme's element styles stop at the page, and the page's own
   rules (below, one class heavier) build from there. Not the contact form: it is
   the theme's, with the theme's styles, and has no copy of them here. */
.salming-order-root.salming-order-root :where(*:not(svg, svg *, .salming-order-contact, .salming-order-contact *), *:not(svg, svg *)::before, *:not(svg, svg *)::after) { all: revert; }
.salming-order-root {
    display: block; width: 100%; background: #fff;
    font-size: 16px; line-height: normal; letter-spacing: normal; text-transform: none;
}
body.salming-order #nectar-nav-spacer { display: none; }

/* The @font-face rules moved to partials/brand-fonts.blade.php — the typeface is
   the brand's, not this picker's, and every public page includes it. */

.salming-order-root .salming-picker {
    --bg-left: #FFFFFF;
    --bg-right: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-border: rgba(0, 0, 0, 0.34);
    --claimed-bg: #F1F1F1;
    --claimed-text: #B0B0B0;
    --text: #000000;
    --text-muted: #4A4A4A;
    --accent: #000000;

    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    min-height: 560px;
    width: calc(100% - 48px);
    max-width: 1400px;
    margin: clamp(36px, 5vw, 72px) auto;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg-left);
    transition: opacity 220ms ease, transform 220ms ease;

    font-family: 'TWKLausanne', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 200;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.salming-order-root .salming-picker *, .salming-order-root .salming-picker *::before, .salming-order-root .salming-picker *::after { box-sizing: border-box; }

.salming-order-root .salming-picker.is-switching {
    opacity: 0.35;
    transform: translateY(8px);
  }

/* ---------- Left panel ---------- */
  .salming-order-root .salming-picker__left {
    background: var(--bg-left);
    padding: clamp(56px, 5.6vw, 88px);
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

.salming-order-root .salming-picker__select-pane {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
  }

.salming-order-root .salming-picker__select-pane[hidden] { display: none; }

.salming-order-root .salming-picker__title {
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 0.9em;
    letter-spacing: -0.022em;
    margin: 0;
    max-width: 500px;
  }

.salming-order-root .salming-picker__intro {
    font-weight: 200;
    font-size: 19px;
    line-height: 26px;
    margin: 0;
    max-width: 460px;
    color: var(--text-muted);
  }

/* "below" only makes sense when the grid actually sits beneath the intro
     (tablet/mobile stack); on desktop the grid is in the right column so
     hide that word. */
  .salming-order-root .salming-picker__intro-below { display: none; }

@media (max-width: 1023px) {
.salming-order-root .salming-picker__intro-below { display: inline; }
}

.salming-order-root .salming-picker__display {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    justify-content: center;
  }

.salming-order-root .salming-picker__number-wrap {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-height: clamp(96px, 13.5vw, 176px);
  }

.salming-order-root .salming-picker__number, .salming-order-root .salming-picker__edit {
    grid-area: stack;
  }

/* The big number is now a button — same look, but clickable. */
  .salming-order-root .salming-picker__number {
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(88px, 13.5vw, 176px);
    line-height: 0.94em;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: visibility 0s, opacity 200ms ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }

.salming-order-root .salming-picker__number:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 4px;
  }

.salming-order-root .salming-picker__number[disabled] { cursor: default; }

.salming-order-root .salming-picker__number.is-hidden, .salming-order-root .salming-picker__number.is-loading {
    visibility: hidden;
  }

@media (hover: hover) and (pointer: fine) {
.salming-order-root .salming-picker__number:hover:not([disabled]):not(.is-loading):not(.is-hidden) {
      opacity: 0.7;
    }
}

.salming-order-root .salming-picker__edit {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
  }

.salming-order-root .salming-picker__edit[hidden] { display: none; }

.salming-order-root .salming-picker__spinner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.16);
    border-top-color: var(--text);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: salming-spin 700ms linear infinite;
  }

.salming-order-root .salming-picker__spinner[hidden] { display: none; }

.salming-order-root .salming-picker__number-wrap.is-initial-loading .salming-picker__spinner {
    width: 22px;
    height: 22px;
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--text);
  }

.salming-order-root .salming-picker__number-wrap.is-editing .salming-picker__spinner {
    left: calc(100% + 14px);
  }

@keyframes salming-spin {
    to { transform: translateY(-50%) rotate(360deg); }
  }

.salming-order-root .salming-picker__availability {
    margin: -4px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
  }

.salming-order-root .salming-picker__availability[hidden] { display: none; }

.salming-order-root .salming-picker .salming-picker__number-input {
    font-family: inherit !important;
    font-weight: 400 !important;
    font-size: clamp(56px, 7.5vw, 96px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    font-variant-numeric: tabular-nums;
    color: var(--text) !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0.05em 0 !important;
    width: 4.5ch !important;
    min-width: 4.5ch;
    max-width: 4.5ch;
    appearance: textfield;
    -moz-appearance: textfield;
    outline: none;
    caret-color: var(--text);
  }

.salming-order-root .salming-picker__number-input::selection {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text);
  }

.salming-order-root .salming-picker__number-input::-moz-selection {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text);
  }

.salming-order-root .salming-picker .salming-picker__confirm {
    height: 48px !important;
    border-radius: 10px !important;
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    transition: background-color 200ms ease, transform 100ms ease;
    text-transform: uppercase;
    flex-shrink: 0;
    padding: 0 18px !important;
    min-width: 74px !important;
    min-height: 48px !important;
    box-shadow: none !important;
  }

.salming-order-root .salming-picker .salming-picker__confirm[disabled] {
    opacity: 0.45;
    cursor: wait;
  }

.salming-order-root .salming-picker__confirm:active { transform: scale(0.95); }

/* Edit-mode back button (text + chevron). Kept low-emphasis so the
     primary action (CHECK) remains visually dominant. */
  .salming-order-root .salming-picker__edit-back {
    background: transparent;
    border: none;
    padding: 6px 6px 6px 2px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
    transition: color 150ms ease, transform 100ms ease;
  }

.salming-order-root .salming-picker__edit-back:hover { color: var(--text); }

.salming-order-root .salming-picker__edit-back:active { transform: scale(0.95); }

.salming-order-root .salming-picker__edit-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }

.salming-order-root .salming-picker__error {
    margin: 0;
    color: #4A4A4A;
    font-size: 16px;
    font-weight: 200;
  }

.salming-order-root .salming-picker__error[hidden] { display: none; }

/* ---------- v3 game story panel ----------
   Restored from the WordPress picker. The slot wrapper is gone (min-width
   moved onto the panel); the rest is the brand's own rules. */
.salming-order-root .salming-picker__story {
    position: relative;
    min-width: 0;
    max-width: 500px;
    min-height: 0;
    color: var(--text);
  }
.salming-order-root .salming-picker__story[hidden] { display: none; }
.salming-order-root .salming-picker__story.is-loading .salming-picker__story-body, .salming-order-root .salming-picker__story.is-loading .salming-picker__story-toggle {
    opacity: 0.28;
  }
.salming-order-root .salming-picker__story-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
  }
.salming-order-root .salming-picker__story-loader[hidden] {
    display: none;
  }
.salming-order-root .salming-picker__story-spinner {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.16);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: salming-story-spin 760ms linear infinite;
  }
@keyframes salming-story-spin {
    to { transform: rotate(360deg); }
  }
.salming-order-root .salming-picker__story-body {
    margin-top: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 200;
    line-height: 1.42;
  }
.salming-order-root .salming-picker__story-body p {
    margin: 0 0 12px;
  }
.salming-order-root .salming-picker__story-body p:last-child {
    margin-bottom: 0;
  }
.salming-order-root .salming-picker__story-toggle {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
.salming-order-root .salming-picker__story-toggle[hidden] {
    display: none;
  }
.salming-order-root .salming-picker__story-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
    border-radius: 4px;
  }

.salming-order-root .salming-picker__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0;
  }

.salming-order-root .salming-picker__actions .salming-btn {
    width: 100%;
  }

/* ---------- Buttons ---------- */
  .salming-order-root .salming-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
    white-space: nowrap;
  }

.salming-order-root .salming-picker button, .salming-order-root .salming-picker input[type="button"], .salming-order-root .salming-picker input[type="submit"], .salming-order-root .salming-picker .salming-btn, .salming-order-root .salming-picker .salming-picker__confirm {
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
  }

.salming-order-root .salming-picker .salming-picker__number, .salming-order-root .salming-picker .salming-picker__edit-back, .salming-order-root .salming-picker .salming-picker__reroll-icon {
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
  }

.salming-order-root .salming-btn--ghost {
    background: transparent;
    border-color: var(--text);
    color: var(--text);
  }

.salming-order-root .salming-btn--primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

.salming-order-root .salming-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

.salming-order-root .salming-btn--ghost[disabled] {
    background: transparent;
    border-color: var(--text);
    color: var(--text);
  }

.salming-order-root .salming-btn--primary[disabled] {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

@media (hover: hover) and (pointer: fine) {
.salming-order-root .salming-picker__confirm:hover { background: #1A1A1A; }

.salming-order-root .salming-btn--ghost:hover {
      background: var(--text);
      border-color: var(--text);
      color: white;
    }

.salming-order-root .salming-btn--primary:hover { background: #1A1A1A; border-color: #1A1A1A; }

.salming-order-root .salming-btn--ghost[disabled]:hover {
      background: transparent;
      border-color: var(--text);
      color: var(--text);
    }

.salming-order-root .salming-btn--primary[disabled]:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
}

/* Small cue at the bottom of the picker, spanning both columns. It's
     hidden in the summary view since the steps are already on screen. */
  .salming-order-root .salming-picker__scroll-cue {
    grid-column: 1 / -1;
    margin: -30px 0 0;
    padding: 0 clamp(24px, 5vw, 88px) clamp(20px, 3.5vw, 40px);
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 200;
    color: var(--text-muted);
  }

/* ---------- Summary pane ---------- */
  .salming-order-root .salming-picker.is-reviewing {
    grid-template-columns: 1fr;
  }

.salming-order-root .salming-picker.is-reviewing .salming-picker__right { display: none; }

.salming-order-root .salming-picker.is-reviewing .salming-picker__scroll-cue { display: none; }

.salming-order-root .salming-picker.is-reviewing .salming-picker__left { min-height: 0; }

/* ---------- Focus mode ----------
   While the summary is up, every sibling of every ancestor of the picker is
   hidden (done in JS — see setFocusMode). What is left is the empty containers
   those siblings sat in, so they are painted neutral rather than showing the
   page's own background around a card that is now the whole screen.

   Upstream names only html and body here because that is all its picker had
   above it. Ours sits inside the page wrapper, which carries the grey itself. */
html.salming-focus-active, html.salming-focus-active body, html.salming-focus-active .salming-page {
    background: #FFFFFF !important;
  }

html.salming-terms-active, html.salming-terms-active body {
    overflow: hidden !important;
  }

.salming-order-root .salming-picker__summary {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(220px, 320px);
    column-gap: clamp(48px, 7vw, 120px);
    row-gap: 0;
    align-items: stretch;
    max-width: none;
    margin: 0;
    width: 100%;
  }

.salming-order-root .salming-picker__summary[hidden] { display: none; }

.salming-order-root .salming-picker__summary-title {
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 0.9em;
    letter-spacing: -0.022em;
    margin: 0 0 26px;
    max-width: none;
    outline: none;
  }

.salming-order-root .salming-picker__steps {
    margin: 0 0 22px;
    padding-left: 42px;
    list-style-position: outside;
  }

.salming-order-root .salming-picker__steps li {
    font-size: 16px;
    line-height: 21px;
    margin: 0 0 16px;
    padding-left: 4px;
  }

.salming-order-root .salming-picker__steps li::marker { font-weight: 400; }

.salming-order-root .salming-picker__note {
    margin: 0;
    max-width: 840px;
    color: var(--text);
    font-style: normal;
    font-size: 16px;
    line-height: 22px;
  }

.salming-order-root .salming-picker__legal {
    margin-top: 24px;
    padding-top: 22px;
    max-width: 760px;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
  }

.salming-order-root .salming-picker__legal-intro {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 200;
    line-height: 19px;
  }

.salming-order-root .salming-picker__consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 200;
    line-height: 19px;
  }

.salming-order-root .salming-picker__consent-row:last-child { margin-bottom: 0; }

/* The destination question. Ours, not ported — upstream asked it inside the
   terms modal. Sized like the small print it governs rather than like the sales
   copy above it. */
.salming-order-root .salming-picker__market {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
  }

.salming-order-root .salming-picker__market label {
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    font-size: 14px;
    line-height: 19px;
    color: var(--text-muted);
  }

.salming-order-root .salming-picker .salming-picker__market select {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 200 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text) !important;
    padding: 10px 12px !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 6px !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
    max-width: 320px;
    cursor: pointer;
  }

/* Duty and import VAT. Not a warning — a fact about the price they are about to
   pay — so it reads as the same small print, set apart by its rule rather than
   by colour. */
/* A temporary word before the terms — an outage, a caveat. Marked out by a
   rule and a tint rather than by alarm colours: it is information a buyer needs,
   not a failure they caused. */
.salming-order-root .salming-picker__notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 2px solid var(--text);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
    font-size: 14px;
    font-weight: 200;
    line-height: 20px;
  }

.salming-order-root .salming-picker__notice a, .salming-order-root .salming-picker__disclosures a {
    color: inherit;
    text-decoration: underline;
  }

.salming-order-root .salming-picker__disclosures {
    margin: 0 0 16px;
    padding: 12px 0 0;
    border-top: 1px solid var(--card-border);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 200;
    line-height: 19px;
  }

/* Who takes the payment, under the boxes. Smaller and quieter than the
   disclosures: reassurance, not another thing to read before paying. */
.salming-order-root .salming-picker__secure {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 16px 0 0;
    max-width: 760px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 200;
    line-height: 18px;
  }

.salming-order-root .salming-picker__secure svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; }

.salming-order-root .salming-picker__disclosures p { margin: 0 0 8px; }
.salming-order-root .salming-picker__disclosures p:last-child { margin-bottom: 0; }
.salming-order-root .salming-picker__disclosures[hidden] { display: none; }
.salming-order-root .salming-picker__legal-intro[hidden] { display: none; }

/* The WordPress picker wrapped this text in a <span>; ours is a <label>, so that
   clicking the words toggles the box and the checkbox carries a real name rather
   than an aria-label. The cost is the theme, which styles every label on the page
   as a form label — weight 400, letter-spacing, uppercase and a size of its own —
   and that made this small print heavier than the copy it sits under. Inherit the
   row, exactly as the span did. */
.salming-order-root .salming-picker__consent-row label {
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    cursor: pointer;
  }

.salming-order-root .salming-picker__consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
  }

.salming-order-root .salming-picker__terms-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 200;
  }

.salming-order-root .salming-picker__terms-link:focus-visible, .salming-order-root .salming-picker__consent-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

.salming-order-root .salming-picker__summary-error { margin-top: 24px; }

.salming-order-root .salming-picker__summary-footer {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    justify-self: center;
    gap: clamp(48px, 5vw, 84px);
    flex-direction: column;
    margin-top: 0;
    padding-top: 4px;
    text-align: center;
  }

.salming-order-root .salming-picker__summary-request {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 18px;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    margin-block: auto;
    transform: translateY(clamp(28px, 4vw, 72px));
  }

.salming-order-root .salming-picker__summary-request > span { max-width: none; }

.salming-order-root .salming-picker__summary-request strong {
    display: block;
    font-weight: 400;
    font-size: clamp(72px, 8vw, 128px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

.salming-order-root .salming-picker__summary-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
  }

/* ---------- Reservation terms modal ---------- */
  .salming-order-root .salming-picker__terms-modal {
    --text: #000000;
    --text-muted: #4A4A4A;
    --accent: #000000;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    font-family: 'TWKLausanne', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 200;
    overflow: hidden;
    touch-action: none;
  }

.salming-order-root .salming-picker__terms-modal[hidden] {
    display: none;
  }

.salming-order-root .salming-picker__terms-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
  }

.salming-order-root .salming-picker__terms-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(680px, calc(100vw - 56px));
    height: min(78vh, 720px);
    max-height: min(78vh, 720px);
    overflow: hidden;
    overscroll-behavior: contain;
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--text);
    padding: 30px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  }

.salming-order-root .salming-picker__terms-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    flex: 0 0 auto;
  }

.salming-order-root .salming-picker__terms-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.022em;
  }

.salming-order-root .salming-picker__terms-close {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
  }

.salming-order-root .salming-picker__terms-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
    border-radius: 4px;
  }

.salming-order-root .salming-picker__terms-region {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 22px;
    flex: 0 0 auto;
  }

.salming-order-root .salming-picker__terms-region label {
    color: var(--text);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
  }

.salming-order-root .salming-picker__terms-region select {
    width: min(100%, 260px);
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0 12px;
  }

.salming-order-root .salming-picker__terms-region select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

.salming-order-root .salming-picker__terms-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 6px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 200;
    line-height: 21px;
  }

.salming-order-root .salming-picker__terms-body p {
    margin: 0 0 14px;
  }

.salming-order-root .salming-picker__terms-body p:last-child {
    margin-bottom: 0;
  }

.salming-order-root .salming-picker__terms-html h1, .salming-order-root .salming-picker__terms-html h2, .salming-order-root .salming-picker__terms-html h3, .salming-order-root .salming-picker__terms-html h4 {
    margin: 22px 0 10px;
    color: var(--text);
    font-family: inherit;
    font-weight: 400;
    line-height: 1.12;
  }

.salming-order-root .salming-picker__terms-html h1 { font-size: 1.5em; }

.salming-order-root .salming-picker__terms-html h2 { font-size: 1.32em; }

.salming-order-root .salming-picker__terms-html h3 { font-size: 1.16em; }

.salming-order-root .salming-picker__terms-html h4 { font-size: 1em; }

.salming-order-root .salming-picker__terms-html h1:first-child, .salming-order-root .salming-picker__terms-html h2:first-child, .salming-order-root .salming-picker__terms-html h3:first-child, .salming-order-root .salming-picker__terms-html h4:first-child {
    margin-top: 0;
  }

.salming-order-root .salming-picker__terms-html ul, .salming-order-root .salming-picker__terms-html ol {
    margin: 0 0 14px;
    padding-left: 22px;
  }

.salming-order-root .salming-picker__terms-html li {
    margin: 0 0 6px;
  }

.salming-order-root .salming-picker__terms-html a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

.salming-order-root .salming-picker__terms-html table {
    width: 100%;
    margin: 0 0 14px;
    border-collapse: collapse;
  }

.salming-order-root .salming-picker__terms-html th, .salming-order-root .salming-picker__terms-html td {
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    text-align: left;
    vertical-align: top;
  }

/* ---------- Right panel ---------- */
  .salming-order-root .salming-picker__right {
    background: var(--bg-right);
    padding: clamp(56px, 5.6vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    color: var(--text);
  }

.salming-order-root .salming-picker__right-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

.salming-order-root .salming-picker__subtitle {
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.05em;
    letter-spacing: 0;
    margin: 0;
    max-width: 560px;
  }

/* The right panel is a flex column with `gap: 16px`, so a negative
     top-margin here fights the gap and pulls the legend up against the
     subtitle. */
  .salming-order-root .salming-picker__legend {
    list-style: none;
    margin: -12px 0 0;
    padding: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
  }

.salming-order-root .salming-picker__legend li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

.salming-order-root .salming-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }

.salming-order-root .salming-dot--yours { background: var(--accent); }

.salming-order-root .salming-dot--available {
    background: transparent;
    border: 1.5px solid var(--accent);
  }

.salming-order-root .salming-dot--claimed { background: var(--claimed-text); }

/* Small icon button for re-roll — sits next to the section title and
     below the grid on mobile. */
  .salming-order-root .salming-picker__reroll-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 200ms ease;
  }

.salming-order-root .salming-picker__reroll-icon[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

.salming-order-root .salming-picker__reroll-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

.salming-order-root .salming-picker__reroll-icon.is-spinning svg {
    animation: salming-shuffle-pulse 450ms ease-out;
  }

@keyframes salming-shuffle-pulse {
    0%   { transform: scale(1);    opacity: 1;   }
    35%  { transform: scale(0.78); opacity: 0.5; }
    100% { transform: scale(1);    opacity: 1;   }
  }

@media (hover: hover) and (pointer: fine) {
.salming-order-root .salming-picker__reroll-icon:hover:not([disabled]) {
      background: var(--text);
      color: white;
      border-color: var(--text);
    }
}

/* ---------- Grid ---------- */
  .salming-order-root .salming-picker__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }

.salming-order-root .salming-cell {
    aspect-ratio: 1 / 1;
    border-radius: 10px !important;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: clamp(14px, 1.35vw, 18px);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    font-variant-numeric: tabular-nums;
  }

.salming-order-root .salming-cell:hover:not([disabled]):not(.is-claimed) {
    background: var(--accent);
    color: white;
  }

.salming-order-root .salming-cell.is-claimed {
    background: var(--claimed-bg);
    border-color: transparent;
    color: var(--claimed-text);
    cursor: not-allowed;
  }

.salming-order-root .salming-cell.is-yours {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

.salming-order-root .salming-cell--skeleton {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    animation: salming-pulse 1.4s ease-in-out infinite;
    cursor: default;
  }

@keyframes salming-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.9; }
  }

/* ---------- Responsive ---------- */
  @media (max-width: 1023px) {
    .salming-order-root .salming-picker {
      grid-template-columns: 1fr;
      min-height: 0;
      width: calc(100% - 32px);
      max-width: 680px;
      margin: 32px auto;
    }
    .salming-order-root .salming-picker__left, .salming-order-root .salming-picker__right {
      padding: 42px 34px;
      gap: 22px;
    }
    .salming-order-root .salming-picker__right { gap: 14px; }

    .salming-order-root .salming-picker__story {
      max-width: none;
    }

    .salming-order-root .salming-picker__select-pane { gap: 20px; }
    .salming-order-root .salming-picker.is-reviewing .salming-picker__left { min-height: 0; }
    .salming-order-root .salming-picker__summary {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .salming-order-root .salming-picker__title {
      font-size: clamp(38px, 9.5vw, 54px);
    }
    .salming-order-root .salming-picker__summary-title {
      font-size: clamp(34px, 8vw, 46px);
    }
    .salming-order-root .salming-picker__legend {
      gap: 14px;
    }
    .salming-order-root .salming-picker__steps li {
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 12px;
    }
    .salming-order-root .salming-picker__note {
      font-size: 14px;
      line-height: 19px;
    }
    .salming-order-root .salming-picker__legal {
      margin-top: 20px;
      padding-top: 18px;
    }
    .salming-order-root .salming-picker__consent-row {
      font-size: 13px;
      line-height: 18px;
    }
    .salming-order-root .salming-picker__intro {
      font-size: 17px;
      line-height: 23px;
    }
    .salming-order-root .salming-picker__number-wrap {
      min-height: clamp(86px, 25vw, 132px);
    }
    .salming-order-root .salming-picker__number {
      font-size: clamp(78px, 25vw, 132px);
    }
    .salming-order-root .salming-picker__grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 7px;
    }
    .salming-order-root .salming-btn {
      height: 46px;
      padding-inline: 20px;
      font-size: 11px;
      border-radius: 10px !important;
    }
    .salming-order-root .salming-picker__summary-footer {
      align-items: stretch;
      justify-content: flex-start;
    }
    .salming-order-root .salming-picker__summary-request {
      width: 100%;
      justify-content: flex-start;
      margin-block: 0;
      transform: none;
    }
    .salming-order-root .salming-picker__summary-request strong {
      font-size: clamp(72px, 22vw, 104px);
    }
    .salming-order-root .salming-picker__scroll-cue {
      margin-top: -15px;
    }
  }

@media (max-width: 480px) {
.salming-order-root .salming-picker {
      width: 100%;
      margin: 24px 0;
      border-left: 0;
      border-right: 0;
    }

.salming-order-root .salming-picker__left, .salming-order-root .salming-picker__right {
      padding: 36px 24px;
    }

.salming-order-root .salming-picker__right {
      padding-top: 16px;
      padding-bottom: 20px;
      gap: 10px;
    }

.salming-order-root .salming-picker__title {
      font-size: 40px;
    }

.salming-order-root .salming-picker__subtitle {
      font-size: 18px;
      line-height: 1.05;
      max-width: 320px;
    }

.salming-order-root .salming-picker__legend {
      gap: 10px;
      letter-spacing: 1.4px;
      font-size: 9px;
    }

.salming-order-root .salming-picker__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
    }

.salming-order-root .salming-cell {
      min-height: 42px;
      aspect-ratio: auto;
      font-size: 11px;
    }

.salming-order-root .salming-picker__number-wrap { min-height: 92px; }

.salming-order-root .salming-picker__number { font-size: clamp(74px, 23vw, 96px); }

.salming-order-root .salming-picker__actions { flex-direction: column; }

.salming-order-root .salming-picker__actions .salming-btn { width: 100%; }

.salming-order-root .salming-picker__summary-footer { flex-direction: column; }

.salming-order-root .salming-picker__summary-buttons, .salming-order-root .salming-picker__summary-buttons .salming-btn { width: 100%; }

.salming-order-root .salming-picker__summary-title { font-size: 32px; }

.salming-order-root .salming-picker__steps { padding-left: 24px; }

.salming-order-root .salming-picker__steps li {
      font-size: 13px;
      line-height: 17px;
    }

.salming-order-root .salming-picker__terms-modal {
      align-items: stretch;
      padding: 12px;
    }

.salming-order-root .salming-picker__terms-dialog {
      width: 100%;
      height: calc(100dvh - 24px);
      max-height: calc(100dvh - 24px);
      padding: 24px;
      border-radius: 12px;
      align-self: center;
    }

.salming-order-root .salming-picker__terms-head {
      margin-bottom: 18px;
    }

.salming-order-root .salming-picker__terms-title {
      font-size: 30px;
    }

.salming-order-root .salming-picker__terms-region select {
      width: 100%;
    }

.salming-order-root .salming-picker__terms-body {
      font-size: 14px;
      line-height: 20px;
    }

.salming-order-root .salming-picker__summary-request {
      align-items: stretch;
      gap: 14px;
    }

.salming-order-root .salming-picker__edit { gap: 12px; }

.salming-order-root .salming-picker__edit-back span { display: none; }

/* keep just the chevron on small screens */
    .salming-order-root .salming-picker__scroll-cue {
      margin-top: -5px;
    }
}

    /* ---------- shared ---------- */

    .salming-order-root {
        --sales-ink: #000;
        --sales-band: #f4f3f3;
        --sales-gutter: clamp(16px, 4.2vw, 60px);
        --sales-measure: 1320px;

        font-family: 'TWKLausanne', system-ui, -apple-system, "Segoe UI", sans-serif;
        font-weight: 200;
        color: var(--sales-ink);
    }

    /* Scoped the way the picker scopes its own: the page as a whole is still
       content-box, and a min-width that quietly added its padding on top is
       what made the call to action 80px too wide the first time. */
    .salming-order-root .salming-hero, .salming-order-root .salming-hero *, .salming-order-root .salming-step, .salming-order-root .salming-step *, .salming-order-root .salming-receive, .salming-order-root .salming-receive * {
        box-sizing: border-box;
    }

    .salming-order-root.salming-order-root :where(img, video) {
        display: block;
        max-width: 100%;
    }


    /* The white call to action, on the hero and again at the end of the story.
       Upstream builds it as a flex row-reverse over a span and an icon; the
       icon simply comes first here. */
    .salming-order-root .salming-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px 40px;
        border-radius: 10px;
        background: #fff;
        color: #293b45;
        font-family: inherit;
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        min-width: min(442px, 100%);
    }

    .salming-order-root .salming-cta__icon {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .salming-order-root .salming-cta:hover {
        background: #f0f0f0;
    }

    /* ---------- hero ---------- */

    /* The claim is a curves-converted SVG upstream — the headline is artwork,
       not type, which is why lang/en/reserve.php never had a hero string that
       reached anything. Kept as artwork: setting it live would be a different
       design, not the same one rebuilt.

       .salming-hero is also what motion.blade.php's settle animation has always
       named and never found; giving it to the element that actually carries the
       background finally connects the two. */
    .salming-order-root .salming-hero {
        position: relative;
        display: flex;
        align-items: center;
        min-height: min(1113px, 100svh);
        padding: 0 var(--sales-gutter);
        background-image: url('../../../uploads/2025/08/order-header-sw1920.webp');
        background-size: cover;
        background-position: 48% 28%;
    }

    .salming-order-root .salming-hero__inner {
        width: 100%;
        max-width: var(--sales-measure);
        margin: 0 auto;
    }

    .salming-order-root .salming-hero__claim {
        width: min(619px, 100%);
        height: auto;
        margin-bottom: clamp(28px, 3.8vw, 54px);
    }

    .salming-order-root .salming-hero__claim--wide { display: block; }
    .salming-order-root .salming-hero__claim--narrow { display: none; }

    /* ---------- the three steps ---------- */

    /* Each band pins at the top and the next slides up over it; the brightness
       ramp that reads as depth while they stack is motion.blade.php's, driven
       off [data-scroll-dim]. The 1px of white below each band is the only thing
       separating two identical greys. */
    .salming-order-root .salming-step {
        position: sticky;
        top: 0;
    }

    .salming-order-root .salming-step__skin {
        padding: clamp(33px, 6vw, 86px) var(--sales-gutter);
        border-bottom: 1px solid #fff;
        background: var(--sales-band);
    }

    .salming-order-root .salming-step__inner {
        display: grid;
        grid-template-columns: 220px minmax(0, 468px) minmax(0, 1fr);
        grid-template-areas:
            "num main   text"
            "num figure text";
        grid-template-rows: auto 1fr;
        column-gap: 44px;
        align-items: start;
        width: 100%;
        max-width: var(--sales-measure);
        min-height: clamp(320px, 40vw, 575px);
        margin: 0 auto;
    }

    .salming-order-root .salming-step__num {
        grid-area: num;
        margin: 0;
        font-size: clamp(100px, 17.4vw, 250px);
        line-height: 0.8;
        letter-spacing: -0.02em;
    }

    .salming-order-root .salming-step__body { grid-area: text; }

    .salming-order-root .salming-step__title {
        grid-area: main;
        margin: 0 0 clamp(24px, 3.8vw, 54px);
        font-size: 50px;
        font-weight: 200;
        line-height: 1.1;
    }

    .salming-order-root .salming-step__figure {
        grid-area: figure;
        align-self: start;
        max-width: 438px;
        margin: 0;
    }

    .salming-order-root .salming-step__figure img, .salming-order-root .salming-step__figure video {
        width: 100%;
        height: auto;
        border-radius: 8px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .salming-order-root .salming-step__intro {
        margin: 0 0 clamp(20px, 2.2vw, 32px);
        font-size: clamp(16px, 1.5vw, 21.6px);
        font-weight: 600;
        line-height: 1.39;
    }

    /* A real list with a real marker. Upstream's "icon list" was neither: the
       bullets were 24×24 lucide dots scaled to 2.25em and centred on the whole
       item, so a five-line point had its dot beside line three. ::marker sits on
       the first line because that is what markers do. */
    .salming-order-root .salming-step__list {
        margin: 0 0 30px 30px;
        padding-left: 1.15em;
        list-style: disc outside;
        font-size: clamp(16px, 1.5vw, 21.6px);
        line-height: 1.39;
    }

    .salming-order-root .salming-step__list li + li {
        margin-top: 1em;
    }

    .salming-order-root .salming-step__list li::marker {
        font-size: 0.85em;
    }

    /* ---------- what you'll receive ---------- */

    /* A full-bleed photograph with the list set over it. The text sits
       right-of-centre on a wide screen because that is where the picture is
       quiet; below 1200px the picture reframes and it moves to the gutter. */
    .salming-order-root .salming-receive {
        position: relative;
        padding: clamp(72px, 11vw, 158px) var(--sales-gutter) clamp(96px, 9vw, 130px);
        background-image: url('../../../uploads/2025/09/Salming4462-v2-sw1920.webp');
        background-size: cover;
        background-position: 30% 79%;
        color: #fff;
    }

    .salming-order-root .salming-receive__inner {
        display: grid;
        grid-template-columns: 42% minmax(0, 1fr);
        width: 100%;
        max-width: var(--sales-measure);
        margin: 0 auto;
    }

    .salming-order-root .salming-receive__body {
        grid-column: 2;
    }

    .salming-order-root .salming-receive__title {
        margin: 0 0 clamp(80px, 8vw, 116px);
        font-size: clamp(40px, 4.5vw, 64px);
        font-weight: 400;
        line-height: 1;
    }

    .salming-order-root .salming-receive__list {
        margin: 0 0 clamp(32px, 3vw, 44px);
        padding: 0;
        list-style: none;
        font-size: clamp(20px, 2.1vw, 30px);
        line-height: 1.1;
    }

    /* The hairline under each line is upstream's, and it runs under the last one
       too — it closes the list rather than separating it. */
    .salming-order-root .salming-receive__list li {
        padding: clamp(10px, 1vw, 15px) 0;
        border-bottom: 1px solid #fff;
    }

    /* The credit for the photograph the section is set on, bottom left of it. */
    .salming-order-root .salming-receive__caption {
        position: absolute;
        margin: 0;
        left: 20px;
        bottom: 21px;
        font-size: clamp(16px, 1.25vw, 18px);
        line-height: 1.3;
    }

    /* ---------- breakpoints ---------- */

    /* Tablet: the step image leaves the middle column and follows the text,
       which is the only way three columns of this width stop working. */
    @media (max-width: 1199px) {
        .salming-order-root .salming-step__inner {
            grid-template-columns: clamp(110px, 15vw, 160px) minmax(0, 1fr);
            grid-template-areas:
                "num  main"
                ".    text"
                ".    figure";
            grid-template-rows: auto auto 1fr;
            column-gap: clamp(20px, 3vw, 40px);
        }

        .salming-order-root .salming-step__title {
            margin-bottom: clamp(20px, 2.6vw, 36px);
        }

        .salming-order-root .salming-step__figure {
            margin-top: clamp(24px, 3vw, 40px);
        }

        .salming-order-root .salming-receive__inner {
            grid-template-columns: minmax(0, 1fr);
        }

        .salming-order-root .salming-receive__body {
            grid-column: 1;
        }
    }

    /* Phone: one column. The number keeps its own line and the title steps in
       beside nothing, so the indent upstream gave it would just be a hole. */
    @media (max-width: 767px) {
        .salming-order-root .salming-step__inner {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "num"
                "main"
                "text"
                "figure";
            grid-template-rows: auto auto auto 1fr;
        }

        /* Upstream floats the numeral at the top of the band on 150px of empty
           space below it. That gap is the band's whole shape on a phone. */
        .salming-order-root .salming-step__num {
            margin-bottom: clamp(80px, 26vw, 150px);
        }

        .salming-order-root .salming-step__title {
            font-size: 25px;
        }

        .salming-order-root .salming-step__list {
            margin-left: 0;
        }

        .salming-order-root .salming-step__figure {
            margin-top: clamp(24px, 6vw, 40px);
        }

        .salming-order-root .salming-cta {
            padding: 15px 30px;
            gap: 7.5px;
            font-size: 15px;
            line-height: 15px;
        }

        .salming-order-root .salming-cta__icon { width: 22px; }

        .salming-order-root .salming-hero__claim--wide { display: none; }
        .salming-order-root .salming-hero__claim--narrow { display: block; }
        .salming-order-root .salming-hero__claim { width: min(331px, 100%); }
    }

    .salming-motion .salming-order-root [data-reveal] {
        opacity: 0;
        transform: translateY(var(--reveal-shift, 18px));
        transition:
            opacity var(--reveal-duration, 1s) cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0s),
            transform var(--reveal-duration, 1s) cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0s);
        will-change: opacity, transform;
    }

    .salming-motion .salming-order-root [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }

    /* The hero photograph settles rather than snaps: a slow, tiny scale-down
       under the copy that is landing on top of it. */
    .salming-motion .salming-order-root .salming-hero {
        animation: salming-settle 2.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes salming-settle {
        from { background-size: 112%; }
        to { background-size: cover; }
    }

    /* Anchors on this page all point at the picker. Getting there should read
       as travel, not teleportation. */
    html { scroll-behavior: smooth; }

    /* Press feedback. Nectar animates its buttons from JavaScript we do not
       ship, so a click did nothing at all. */
    .salming-order-root .salming-pressed { transform: scale(0.975) !important; }

    .salming-order-root .salming-cta {
        transition: transform 160ms cubic-bezier(0.65, 0, 0.35, 1), opacity 160ms ease, background-color 160ms ease, color 160ms ease;
    }

    /* The 1-2-3 bands are position:sticky, so each pins at the top of the screen
       and the next slides up over it. Upstream ramps filter: brightness(1 → 0.7)
       across exactly that movement, which is the depth cue as they stack: the
       step you have finished reading dims as the next one arrives.

       No transition on purpose. This is tied to the scrollbar, not triggered by
       it — a transition would make it chase the scroll instead of tracking it. */
    .salming-motion .salming-order-root [data-scroll-dim] .salming-step__skin {
        will-change: filter;
    }

    /* Printing lays the whole document out at once and never scrolls, so the
       observer below never fires for anything past the first screen — and the
       page prints blank from there down. Found by printing it. */
    @media print {
        .salming-motion .salming-order-root [data-reveal] {
            opacity: 1 !important;
            transform: none !important;
        }
        .salming-motion .salming-order-root .salming-hero { animation: none; }

        /* The dimming is an inline style left behind at whatever the scroll
           position was, so a band read past prints grey without this. */
        .salming-motion .salming-order-root [data-scroll-dim] .salming-step__skin {
            filter: none !important;
        }
    }

/* Only on this site, not on my.: the other assets/src/order-*.css are verbatim copies of salming-admin's. */

/* Hero: live text instead of the old SVG artwork. */
.salming-order-root .salming-hero__words { color: #fff; margin-bottom: 32px; }
.salming-order-root .salming-hero__eyebrow { margin: 0 0 8px; font-size: clamp(18px, 2vw, 26px); line-height: 1.2; font-weight: 200; color: inherit; }
.salming-order-root .salming-hero__title { margin: 0 0 12px; max-width: 13em; font-size: clamp(36px, 5vw, 66px); line-height: 1.04; font-weight: 200; letter-spacing: -0.01em; color: inherit; }
.salming-order-root .salming-hero__lead { margin: 0; max-width: 34em; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.3; font-weight: 200; color: inherit; }

/* Smaller files of the two background photographs (cover-cropped, so still 1600 wide). */
@media (max-width: 767px) {
    .salming-order-root .salming-hero { background-image: url('../../../uploads/2025/08/order-header-scaled-sw1600.webp'); }
    .salming-order-root .salming-receive { background-image: url('../../../uploads/2025/09/Salming4462-v2-scaled-sw1600.webp'); }
}

/* The private viewing, always second to the order. */
.salming-order-root .salming-picker__viewing { margin: 14px 0 0; font-size: 14px; line-height: 1.4; text-align: center; }
.salming-order-root .salming-picker__viewing a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-block: 6px; }
.salming-order-root .salming-viewing-link { display: flex; align-items: center; min-height: 44px; margin-top: 10px; color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }

/* Tap targets: larger hit area, no layout change. */
.salming-order-root .salming-picker__story-toggle { padding-block: 8px; margin-block: -8px; }

/* Questions before you order: closed until asked for, so the order stays the page's one clear step. */
.salming-order-root .salming-order-contact { padding: 80px 20px; background: #fff; color: #000; }
.salming-order-root .salming-order-contact__box { max-width: 720px; margin: 0 auto; }
.salming-order-root .salming-order-contact__summary { display: block; cursor: pointer; list-style: none; text-align: center; }
.salming-order-root .salming-order-contact__summary::-webkit-details-marker { display: none; }
.salming-order-root .salming-order-contact__title { margin: 0 0 16px; color: #000; font-size: 36px; line-height: 1.1; font-weight: 400; }
.salming-order-root .salming-order-contact__text { margin: 0 auto 12px; max-width: 30em; font-size: 18px; line-height: 1.4; font-weight: 200; }
.salming-order-root .salming-order-contact__open { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.salming-order-root .salming-order-contact__box[open] .salming-order-contact__open { display: none; }
.salming-order-root .salming-order-contact__box[open] .salming-order-contact__summary { margin-bottom: 28px; }
@media (max-width: 767px) {
    .salming-order-root .salming-order-contact { padding: 56px 20px; }
    .salming-order-root .salming-order-contact__title { font-size: 28px; }
    .salming-order-root .salming-order-contact__text { font-size: 16px; }
}

/* Taken numbers read as taken (struck through), and a tap says so instead of doing nothing. */
.salming-order-root .salming-cell.is-claimed { text-decoration: line-through; text-decoration-thickness: 1px; }
.salming-order-root .salming-cell.is-claimed.is-nudged { animation: salming-taken-nudge 320ms ease-in-out; }
@keyframes salming-taken-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .salming-order-root .salming-cell.is-claimed.is-nudged { animation: none; outline: 1px solid var(--claimed-text); }
}
.salming-order-root .salming-picker__taken-note { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.salming-order-root .salming-picker__taken-note[hidden] { display: none; }
/* The legend explains the board; it is not a control. */
.salming-order-root .salming-picker__legend { cursor: default; user-select: none; }