.commerce-p0 {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto 64px;
    color: #172033;
}

.commerce-p0 *, .commerce-p0 *::before, .commerce-p0 *::after { box-sizing: border-box; }
.commerce-p0 h1 { margin: 0 0 8px; font-size: clamp(1.65rem, 4vw, 2.35rem); }
.commerce-p0 h2 { font-size: 1.2rem; }
.commerce-lead { margin: 0 0 24px; color: #536078; }
.commerce-alert { padding: 12px 16px; margin: 0 0 18px; border: 1px solid #a8c8ee; border-radius: 10px; background: #eef7ff; color: #173c67; }
.commerce-error { border-color: #e5a8a8; background: #fff1f1; color: #7b2020; }
.commerce-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.commerce-card { padding: 20px; border: 1px solid #dce2ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgb(25 38 64 / 7%); }
.commerce-stack { display: grid; gap: 16px; }
.commerce-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e7eaf0; }
.commerce-line:last-child { border-bottom: 0; }
.commerce-line-title { font-weight: 700; }
.commerce-meta { color: #657189; font-size: .92rem; }
.commerce-total { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.commerce-grand-total { padding-top: 14px; margin-top: 8px; border-top: 2px solid #263550; font-size: 1.2rem; font-weight: 800; }
.commerce-field { display: grid; gap: 6px; }
.commerce-field label, .commerce-field legend { font-weight: 700; }
.commerce-field input, .commerce-field textarea, .commerce-field select {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #aeb8c8; border-radius: 8px; background: #fff; color: #172033;
}
.commerce-field textarea { min-height: 92px; resize: vertical; }
.commerce-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid #ccd4e0; border-radius: 9px; }
.commerce-choice input { margin-top: 4px; }
.commerce-choice-disabled { opacity: .55; background: #f4f6f9; cursor: not-allowed; }
.commerce-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.commerce-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid #273a5c; border-radius: 9px; background: #fff; color: #1f3152; font-weight: 700; text-decoration: none; cursor: pointer; }
.commerce-button:hover { color: #102441; background: #edf3fb; }
.commerce-button-primary { border-color: #173d72; background: #173d72; color: #fff; }
.commerce-button-primary:hover { background: #0e2c55; color: #fff; }
.commerce-button-danger { border-color: #a83131; color: #8e2020; }
.commerce-button[disabled] { opacity: .6; cursor: wait; }
.commerce-statuses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.commerce-status { padding: 12px; border: 1px solid #d6dce6; border-radius: 9px; background: #f7f9fc; }
.commerce-status span { display: block; color: #657189; font-size: .82rem; }
.commerce-p0 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.commerce-metrics-note { overflow-wrap: anywhere; }
.commerce-review-metrics .commerce-status { min-width: 0; }
.commerce-review-metrics .commerce-status span { overflow-wrap: anywhere; }
.commerce-policy { font-size: .93rem; color: #4c596f; }
.commerce-policy p:last-child { margin-bottom: 0; }

/* The third-party payment warning. Given its own weight because the block it sits in is otherwise
   uniformly muted small print, and a warning styled identically to the shipping note reads as
   shipping note. Kept to a left rule and a tint rather than a red panel: it must be legible to
   somebody reading calmly, not only to somebody already alarmed. */
.commerce-payment-warning {
    margin: .75rem 0;
    padding: .7rem .85rem;
    border-left: 4px solid #b4462a;
    border-radius: 6px;
    background: #fdf3ef;
    color: #3a2a25;
    line-height: 1.65;
}
.commerce-payment-warning strong { color: #97331b; }
.field-validation-error, .validation-summary-errors { color: #a11c1c; }
.commerce-table-wrap { overflow-x: auto; }
.commerce-table { width: 100%; border-collapse: collapse; }
.commerce-table th, .commerce-table td { padding: 10px; border-bottom: 1px solid #dfe4ec; text-align: left; vertical-align: top; }

@media (max-width: 780px) {
    .commerce-p0 { width: min(100% - 24px, 680px); margin-top: 20px; }
    .commerce-grid { grid-template-columns: 1fr; }
    .commerce-statuses { grid-template-columns: 1fr; }
    .commerce-card { padding: 16px; }
    .commerce-line { grid-template-columns: 1fr; }
    .commerce-actions .commerce-button { flex: 1 1 160px; }
}

@media (max-width: 390px) {
    .commerce-p0 { width: calc(100% - 16px); }
    .commerce-card { padding: 13px; border-radius: 10px; }
    .commerce-actions { display: grid; grid-template-columns: 1fr; }
    .commerce-actions .commerce-button { width: 100%; }
}

/* Inventory/availability block on the PC, GAME and BOOK admin product forms.
   Each store skin defines its own field classes (pc-input, game-input, book-input),
   so this block carries skin-neutral styling here instead of borrowing one store's
   classes and rendering unstyled in the other two.

   All three admin skins are dark navy panels, and every colour below was written for a
   light surface — so the labels and the 供貨選項 checkbox text were slate-on-navy at
   roughly 2:1. Giving the fieldset its own light surface makes the colours it already
   declares correct, in all three stores at once, without touching a single storefront
   token. Every text role is then stated explicitly: nothing here may inherit a colour
   from a skin that assumes a dark background. */
.cinv {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
}

/* The legend sits over the fieldset border and would otherwise inherit the skin's
   near-white text straight onto the new white surface. */
.cinv-legend { padding: 0 8px; color: #0f172a; font-weight: 700; }

.cinv-group { margin: 0 0 18px; }
.cinv-group:last-of-type { margin-bottom: 0; }

.cinv-group-title {
    margin: 0 0 10px;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.cinv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.cinv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cinv-field.cinv-wide { grid-column: 1 / -1; }

.cinv-field > label {
    color: #48546b;
    font-size: .9rem;
    line-height: 1.4;
}

.cinv-field > input,
.cinv-field > select,
.cinv-field > textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: .95rem;
}

.cinv-field > textarea { min-height: 84px; resize: vertical; }

/* Read-only fields hold real data — 綜合可售狀態, 已保留, 可售量 — so the grey background says
   "you cannot edit this" while the text stays readable. Dimming the value as well would make the
   most operationally loaded numbers on the form the hardest ones to read. */
.cinv-field > input[readonly] { background: #eef2f7; color: #334155; }

/* A placeholder is not a value. Keeping it distinctly lighter is what stops an empty field from
   being read as a filled one. */
.cinv-field > input::placeholder,
.cinv-field > textarea::placeholder { color: #7c8798; opacity: 1; }

.cinv-field > input:disabled,
.cinv-field > select:disabled,
.cinv-field > textarea:disabled { background: #eef2f7; color: #475569; }

.cinv-field > input:focus,
.cinv-field > select:focus,
.cinv-field > textarea:focus {
    border-color: #2563eb;
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

/* Keep each checkbox on one baseline with its own text. As bare <label> grid
   items they inherited the column track and drifted away from their boxes. */
.cinv-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.cinv-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: .95rem;
    line-height: 1.4;
}

.cinv-check > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}

.cinv-validation { color: #b91c1c; font-size: .85rem; }

.commerce-badge-missing {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: .78rem;
    font-weight: 700;
}

.cinv-unavailable {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-size: .9rem;
    line-height: 1.6;
}

.cinv-note {
    margin: 14px 0 0;
    color: #475569;
    font-size: .88rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .cinv { padding: 13px; }
    .cinv-grid { grid-template-columns: 1fr; }
    .cinv-checks { flex-direction: column; gap: 10px; }
}

/* OPS-01 / OPS-05 — shared readiness presentation. PROGRAM GATE and OPERATIONAL REQUIREMENT
   get different left borders so the two categories stay visually distinct even in a screenshot. */
.commerce-badge { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid #b9c3d3; border-radius: 999px; background: #f2f5fa; color: #33415c; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.commerce-badge-pass { border-color: #6ba368; background: #edf7ec; color: #245c21; }
.commerce-badge-fail { border-color: #c06060; background: #fdeeee; color: #8b1f1f; }
.commerce-badge-incomplete { border-color: #cba14a; background: #fdf6e7; color: #7a5410; }
.commerce-badge-disabled { border-color: #9aa3b3; background: #f1f3f7; color: #4c5566; }
.commerce-badge-blocked { border-color: #8f7bbf; background: #f4f0fc; color: #4a3383; }
.commerce-badge-unknown { border-color: #8a94a6; background: #f4f6f9; color: #47536a; }
.commerce-readiness { margin-bottom: 20px; border-left: 6px solid #9aa3b3; }
.commerce-readiness-program { border-left-color: #173d72; }
.commerce-readiness-operational { border-left-color: #b07d1f; }
.commerce-readiness-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid #e7eaf0; }
.commerce-readiness-row:last-child { border-bottom: 0; }
.commerce-readiness-master { background: #f7f9fc; }
.commerce-remediation { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: #f7f9fc; color: #33415c; font-size: .92rem; }
.commerce-mode-operational { border-color: #6ba368; background: #edf7ec; color: #245c21; }
.commerce-setting { padding: 14px 0; border-bottom: 1px solid #e7eaf0; }
.commerce-setting:last-child { border-bottom: 0; }
.commerce-setting-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.commerce-setting-key { display: block; color: #7b8398; font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.commerce-setting-blocked { padding: 10px 12px; margin-top: 8px; border-radius: 8px; background: #fdf6e7; color: #7a5410; font-size: .92rem; }
.commerce-enable-panel { border: 2px solid #a83131; }
.commerce-p { margin: 8px 0; }

@media (max-width: 780px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and lets a long
       remediation paragraph or a nowrap badge push the whole page wider than the viewport. */
    .commerce-readiness-row, .commerce-setting-head { grid-template-columns: minmax(0, 1fr); }
    .commerce-badge { white-space: normal; }
}

/* The three store back offices render on a dark shell, but .commerce-p0 was written for the
   light storefront. Text inside the white cards is fine; headings and lead paragraphs sit
   directly on the dark background and were dark-on-dark. This modifier lifts only those. */
.commerce-p0-admin { color: #e8eefc; }
.commerce-p0-admin > h1,
.commerce-p0-admin > h2,
.commerce-p0-admin > .commerce-lead,
.commerce-p0-admin > p,
.commerce-p0-admin > .commerce-meta { color: #e8eefc; }
.commerce-p0-admin > .commerce-lead,
.commerce-p0-admin > .commerce-meta { color: #b9c6e4; }
.commerce-p0-admin .commerce-card,
.commerce-p0-admin .commerce-alert { color: #172033; }

/* asp-validation-summary still emits its container when the model is valid, which rendered as an
   empty red alert box above the inventory form — an error-coloured box with no error in it. */
.commerce-alert.validation-summary-valid { display: none; }

/* ------------------------------------------------------------------ storefront commerce themes
   The customer-facing half of the same problem .commerce-p0-admin already solves for the back
   office. Cart, checkout, order-success and the guest order page render inside the PC, GAME and
   BOOK layouts, which are dark — but every colour above was written for the light main-site shell.
   Measured on production before this change: the cart's own <h1> was #172033 on the dark page at
   1.29:1, and the lead paragraph at 3.31:1. Both are below any readable threshold; the heading was
   effectively invisible.

   Themes are opt-in through a class, so /orders and /orders/lookup - which really do run on the
   light shell, and measure 15.42:1 there - are untouched by all of this.

   Each theme only remaps tokens; no layout, no spacing and no markup changes. The store's own
   variables are preferred, with the literal palette as a fallback so a themed page still reads
   correctly if it is ever rendered without that store's stylesheet. */
.commerce-theme {
    color: var(--commerce-page-text);
}

.commerce-theme h1,
.commerce-theme > h2,
.commerce-theme > p,
.commerce-theme > .commerce-lead,
.commerce-theme > .commerce-meta,
.commerce-theme > .commerce-policy { color: var(--commerce-page-text); }

.commerce-theme > .commerce-lead,
.commerce-theme > .commerce-meta,
.commerce-theme > .commerce-policy { color: var(--commerce-page-muted); }

.commerce-theme .commerce-card,
.commerce-theme .commerce-status,
.commerce-theme .commerce-choice {
    border-color: var(--commerce-line);
    border-radius: var(--commerce-radius);
    background: var(--commerce-panel);
    color: var(--commerce-panel-text);
    box-shadow: none;
}

.commerce-theme .commerce-card .commerce-meta,
.commerce-theme .commerce-status span,
.commerce-theme .commerce-card .commerce-policy,
.commerce-theme .commerce-datalist dt { color: var(--commerce-panel-muted); }

.commerce-theme .commerce-line { border-bottom-color: var(--commerce-line); }
.commerce-theme .commerce-grand-total { border-top-color: var(--commerce-accent); }
.commerce-theme .commerce-value-strong { color: var(--commerce-panel-text); }
.commerce-theme .commerce-table th,
.commerce-theme .commerce-table td { border-bottom-color: var(--commerce-line); }

.commerce-theme .commerce-field input,
.commerce-theme .commerce-field textarea,
.commerce-theme .commerce-field select {
    border-color: var(--commerce-line-strong);
    background: var(--commerce-input);
    color: var(--commerce-panel-text);
}

/* Focus must stay visible on a dark panel; the browser default outline can vanish against it. */
.commerce-theme .commerce-field input:focus,
.commerce-theme .commerce-field textarea:focus,
.commerce-theme .commerce-field select:focus,
.commerce-theme .commerce-button:focus-visible {
    outline: 2px solid var(--commerce-accent);
    outline-offset: 2px;
}

.commerce-theme .commerce-button {
    border-color: var(--commerce-line-strong);
    border-radius: var(--commerce-radius);
    background: transparent;
    color: var(--commerce-page-text);
}

.commerce-theme .commerce-card .commerce-button { color: var(--commerce-panel-text); }
.commerce-theme .commerce-button:hover { border-color: var(--commerce-accent); background: transparent; color: var(--commerce-accent); }

.commerce-theme .commerce-button-primary,
.commerce-theme .commerce-card .commerce-button-primary {
    border-color: var(--commerce-accent);
    background: var(--commerce-accent);
    color: var(--commerce-accent-ink);
}

.commerce-theme .commerce-button-primary:hover { background: var(--commerce-accent); color: var(--commerce-accent-ink); filter: brightness(1.08); }
.commerce-theme .commerce-button-danger,
.commerce-theme .commerce-card .commerce-button-danger { border-color: var(--commerce-danger); color: var(--commerce-danger); }

.commerce-theme .commerce-alert {
    border-color: var(--commerce-line-strong);
    background: var(--commerce-panel);
    color: var(--commerce-panel-text);
}

.commerce-theme .commerce-error { border-color: var(--commerce-danger); color: var(--commerce-danger); }
.commerce-theme .field-validation-error,
.commerce-theme .validation-summary-errors { color: var(--commerce-danger); }

/* The payment warning keeps its own light surface in every theme. It is the one block on the page
   that must not blend in, and it carries the instruction a defrauded customer needs to read. */
.commerce-theme .commerce-payment-warning {
    border-left-color: #b4462a;
    background: #fdf3ef;
    color: #3a2a25;
}

.commerce-theme-pc {
    --commerce-page-text: var(--pc-text, #f3fbff);
    --commerce-page-muted: var(--pc-muted, #a9bed0);
    --commerce-panel: var(--pc-panel-strong, rgba(8, 19, 35, .94));
    --commerce-panel-text: var(--pc-text, #f3fbff);
    --commerce-panel-muted: var(--pc-muted, #a9bed0);
    --commerce-line: var(--pc-line, rgba(127, 215, 255, .24));
    --commerce-line-strong: var(--pc-line-strong, rgba(127, 215, 255, .48));
    --commerce-accent: var(--pc-cyan, #79dbff);
    --commerce-accent-ink: #06111f;
    --commerce-danger: var(--pc-danger, #ff7d7d);
    --commerce-input: rgba(4, 12, 24, .85);
    --commerce-radius: var(--pc-radius, 8px);
}

.commerce-theme-game {
    --commerce-page-text: var(--game-text, #f3fbff);
    --commerce-page-muted: var(--game-muted, #a9bed0);
    --commerce-panel: var(--game-panel-strong, rgba(8, 19, 35, .94));
    --commerce-panel-text: var(--game-text, #f3fbff);
    --commerce-panel-muted: var(--game-muted, #a9bed0);
    --commerce-line: var(--game-line, rgba(127, 215, 255, .24));
    --commerce-line-strong: var(--game-line-strong, rgba(127, 215, 255, .48));
    --commerce-accent: var(--game-purple, #9b72ff);
    --commerce-accent-ink: #0a0618;
    --commerce-danger: var(--game-danger, #ff7d7d);
    --commerce-input: rgba(4, 12, 24, .85);
    --commerce-radius: var(--game-radius, 8px);
}

/* BOOK inverts the other two: the page is dark wood and the panels are parchment, so the card ink
   is the store's dark brown rather than its light page text. Reusing --book-text inside a card
   would be gold on parchment. */
.commerce-theme-book {
    --commerce-page-text: var(--book-text, #f6e1ad);
    --commerce-page-muted: var(--book-gold, #d4a14b);
    --commerce-panel: var(--book-panel, #f3e1b9);
    --commerce-panel-text: #4d2619;
    --commerce-panel-muted: var(--book-muted, #81543c);
    --commerce-line: var(--book-line, rgba(126, 66, 24, .54));
    --commerce-line-strong: var(--book-line-strong, #9c5d20);
    --commerce-accent: var(--book-gold, #d4a14b);
    --commerce-accent-ink: #2b0d06;
    --commerce-danger: var(--book-danger, #9b2828);
    --commerce-input: #f8edcf;
    --commerce-radius: var(--book-radius, 8px);
}

/* Which store an order belongs to, shown once the lookup has actually resolved one. */
.commerce-store-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-left: 10px;
    border: 1px solid var(--commerce-accent, #b9c3d3);
    border-radius: 999px;
    color: var(--commerce-accent, #33415c);
    font-size: .8rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Single-column grid blowout: `1fr` is `minmax(auto, 1fr)`, so the wide inventory table's
   min-content width pushed the whole page past the viewport on narrow screens and clipped the
   banner text. minmax(0, 1fr) lets .commerce-table-wrap scroll the table instead of the page. */
@media (max-width: 780px) {
    .commerce-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Remediation text names files and configuration keys — long unbreakable tokens such as
   docs/handoffs/EV01_EV02_PRODUCTION_AUDIT_SCRIPT.md pushed the readiness card past the
   viewport on phones. */
.commerce-remediation,
.commerce-meta,
.commerce-setting-key { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Inventory master/detail
   The old page put the editor in the shared 340px .commerce-grid aside, which was too narrow for
   a labelled form and gave no visual link between the row being edited and the fields. This is a
   proper two-pane layout: the list keeps the flexible column, the editor gets a readable fixed
   one, and both collapse to a single column before either can overflow. */
.commerce-inventory-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 24px;
    align-items: start;
}
.commerce-inventory-list, .commerce-inventory-editor { min-width: 0; }

.commerce-inventory-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr); gap: 12px 16px; margin-bottom: 14px; }
.commerce-inventory-filters .commerce-actions { grid-column: 1 / -1; }

.commerce-inventory-table td { vertical-align: middle; }
.commerce-inventory-pick { display: block; text-decoration: none; color: inherit; }
.commerce-inventory-pick strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.commerce-inventory-pick span { display: block; color: #3d4a63; }
.commerce-inventory-pick:hover strong, .commerce-inventory-pick:hover span { color: #123a72; text-decoration: underline; }
.commerce-inventory-numbers { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The selected row has to be unmistakable: the whole point of the redesign is that the operator
   can always answer "which product are these fields bound to?" without scrolling. */
.commerce-row-selected > td { background: #eaf2fd; box-shadow: inset 3px 0 0 #173d72; }

.commerce-inventory-identity { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e0e5ee; }
.commerce-inventory-identity h2 { margin: 0 0 6px; overflow-wrap: anywhere; }
.commerce-inventory-identity code { overflow-wrap: anywhere; }
.commerce-inventory-empty { padding: 18px; border: 1px dashed #b9c3d3; border-radius: 10px; background: #f7f9fc; }
.commerce-inventory-editor h3 { margin: 6px 0 0; font-size: 1rem; color: #24344f; }
.commerce-inline-check { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.commerce-inline-check input { width: auto; min-height: 0; }
.commerce-inventory-save { position: sticky; bottom: 0; padding: 12px 0 4px; background: #fff; }
.commerce-link { color: #1a4a8a; font-weight: 700; white-space: nowrap; }

@media (max-width: 1100px) {
    .commerce-inventory-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
    .commerce-inventory-filters { grid-template-columns: minmax(0, 1fr); }
    .commerce-inventory-save { position: static; }
}

/* ------------------------------------------------------------------ Checkout matrix / preflight */
.commerce-matrix-table th, .commerce-matrix-table td { text-align: center; vertical-align: middle; }
.commerce-matrix-table th[scope="row"] { text-align: left; white-space: nowrap; }
.commerce-matrix-cell span[aria-hidden] { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.commerce-matrix-yes { background: #edf7ec; }
.commerce-matrix-yes span[aria-hidden] { color: #245c21; }
.commerce-preflight .commerce-status strong { display: block; margin-top: 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.commerce-clientip .commerce-status strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.commerce-preflight ul, .commerce-clientip ul { margin: 6px 0 12px; padding-left: 22px; }

/* ------------------------------------------------------------------ Operational data readability
   Labels and values were both drawn in .commerce-meta grey, so a customer's phone number and the
   word "電話" had the same weight — on the screen an operator uses to pack a parcel. These two
   classes separate them: the label may recede, the value never may. Reused by the reconciliation
   panel and by the order detail's customer block, so the rule lives in one place. */
.commerce-datalist { display: grid; gap: 12px; margin: 0; }
.commerce-datalist > div { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; }
.commerce-datalist dt { margin: 0; color: #48546b; font-size: .9rem; font-weight: 600; }
.commerce-datalist dd { margin: 0; }

/* The actual value: back-office primary ink, never the muted secondary. */
.commerce-value-strong { color: #172033; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }

/* Digits an operator compares against a bank statement character by character. */
.commerce-payment-report .commerce-datalist dd { font-variant-numeric: tabular-nums; }
.commerce-payment-report { border-left: 4px solid #b7791f; }
/* ---- payment risk panel ------------------------------------------------ */
.commerce-risk { border-left: 4px solid #718096; }
.commerce-risk-medium, .commerce-risk-low { border-left-color: #d69e2e; }
.commerce-risk-high { border-left-color: #dd6b20; }
.commerce-risk-badge { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.commerce-risk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.commerce-risk-item {
    display: grid; gap: 4px;
    padding: 10px 12px; border-radius: 4px;
    background: #fffaf0; border-left: 3px solid #d69e2e;
}
.commerce-risk-item.commerce-risk-high { background: #fffaf0; border-left-color: #dd6b20; }
.commerce-risk-item.commerce-risk-low { background: #f7fafc; border-left-color: #a0aec0; }

.commerce-refund-settled {
    border-left: 4px solid #2f855a;
    background: #f0fff4;
    padding: 10px 12px;
    border-radius: 4px;
    color: #22543d;
}

@media (max-width: 540px) {
    .commerce-datalist > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---- pagination -------------------------------------------------------- */
/* Loaded by all seven layouts, so one definition covers the three storefronts,
   the three store back offices and the commerce admin. */

.xl-pagination { margin: 18px 0 4px; }
.xl-pagination-summary { margin: 0 0 10px; color: #4a5568; font-size: .9rem; }
.xl-pagination-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; align-items: center; }
.xl-pagination-link {
    display: inline-flex; align-items: center; justify-content: center;
    /* 44px so the control is reachable with a thumb; the numbers sit close together. */
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid #cbd5e0; border-radius: 8px;
    background: #fff; color: #2d3748; text-decoration: none; font-variant-numeric: tabular-nums;
}
.xl-pagination-link:hover { border-color: #4a5568; }
.xl-pagination-current { border-color: #2b6cb0; background: #2b6cb0; color: #fff; font-weight: 600; }
.xl-pagination-disabled { color: #a0aec0; background: #f7fafc; cursor: default; }
.xl-pagination-gap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: #a0aec0; }

/* ---- page size picker --------------------------------------------------- */
.xl-pagesize { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.xl-pagesize-label { color: #4a5568; font-size: .9rem; }
.xl-pagesize-list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xl-pagesize-option {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid #cbd5e0; border-radius: 8px;
    background: #fff; color: #2d3748; text-decoration: none; font-variant-numeric: tabular-nums;
}
.xl-pagesize-option:hover { border-color: #4a5568; }
.xl-pagesize-current { border-color: #2b6cb0; background: #2b6cb0; color: #fff; font-weight: 600; }

/* ---- mobile sticky buy bar (R4.9-A) ------------------------------------
   Phones only. Above 767px the buy box is already on screen and a fixed bar
   would just cover the page. The 88px body padding keeps the last line of the
   page reachable instead of sitting permanently under the bar. */
.xl-sticky-cta { display: none; }

@media (max-width: 767px) {
    .xl-sticky-cta {
        position: fixed; z-index: 40; right: 0; bottom: 0; left: 0;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        border-top: 1px solid rgba(255, 255, 255, .18);
        background: rgba(5, 11, 22, .96);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -10px 28px rgba(0, 0, 0, .38);
    }

    .xl-sticky-cta-facts { display: grid; gap: 2px; min-width: 0; }
    .xl-sticky-cta-price { color: #ffd28a; font-size: 1.05rem; font-weight: 900; }
    .xl-sticky-cta-availability { color: rgba(255, 255, 255, .82); font-size: .8rem; font-weight: 700; }
    .xl-sticky-cta form { margin: 0; }
    .xl-sticky-cta button, .xl-sticky-cta a { white-space: nowrap; }

    .pc-product-detail-page, .game-product-detail-page, .book-product-detail-page { padding-bottom: 88px; }
}

/* The free-shipping line in the basket summary. Informational, not urgent: no
   countdown, no colour that reads as a warning. */
.commerce-free-shipping { margin: 0; font-size: .92rem; font-weight: 700; }

/* ---- product trust summary (R4.9-A) ------------------------------------
   Sits on the product page between the buy box and the related strip. Neutral
   panel rather than a badge row: these are facts the owner published, not
   reassurance the template invented. */
.xl-trust-summary {
    margin: 24px 0 0; padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}
.xl-trust-summary h2 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 900; }
.xl-trust-summary-list { display: grid; gap: 10px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.xl-trust-summary-list > div { display: grid; gap: 4px; }
.xl-trust-summary-list dt { font-size: .84rem; font-weight: 800; opacity: .72; }
.xl-trust-summary-list dd { margin: 0; font-size: .92rem; line-height: 1.6; }
.xl-trust-summary-list dd a { margin-left: 8px; text-decoration: underline; }
.xl-trust-summary-detail { display: block; opacity: .78; font-size: .84rem; }

/* The dead-end recovery block. The heading above the alternatives is an H3 so the
   product page keeps exactly one H1 and one H2 per section. */
.pc-recovery-heading, .game-recovery-heading, .book-recovery-heading {
    margin: 18px 0 12px; font-size: 1.05rem; font-weight: 900;
}
.pc-product-discussion, .game-product-discussion, .book-product-discussion { margin-top: 14px; }
.pc-product-discussion a, .game-product-discussion a, .book-product-discussion a { text-decoration: underline; }

/* ---- availability filter (R4.9-A) --------------------------------------
   Same shape as the page-size picker deliberately: both are link-based list
   controls sitting above the same grid, and two different chip styles in one
   row would read as two different kinds of control. */
.xl-availability { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
/* The three storefronts paint a near-black ground and light body text, and this control only ever
   renders there. Measured before this line existed: #4a5568 on rgb(3, 9, 20) is invisible, which
   is how the page-size picker's own label already reads. currentColor follows the storefront's
   text colour instead of asserting one of its own. */
.xl-availability-label { color: currentColor; opacity: .78; font-size: .9rem; }
.xl-availability-list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.xl-availability-option {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px;
    border: 1px solid #cbd5e0; border-radius: 999px;
    background: #fff; color: #2d3748; text-decoration: none;
}
.xl-availability-option:hover { border-color: #4a5568; }
.xl-availability-current { border-color: #2b6cb0; background: #2b6cb0; color: #fff; font-weight: 600; }
.xl-availability-note { flex-basis: 100%; margin: 0; color: currentColor; opacity: .68; font-size: .82rem; }

/* The position indicator belongs to the narrow layout only. */
.xl-pagination-position { display: none; }
.xl-pagination-position-value {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 10px;
    color: #2d3748; font-weight: 600; font-variant-numeric: tabular-nums;
}

.commerce-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.commerce-filter-row .commerce-field { margin: 0; }
.commerce-filter-row select, .commerce-filter-row input { min-height: 40px; }

@media (max-width: 540px) {
    .commerce-filter-row { flex-direction: column; align-items: stretch; }

    /* Phones get 上一頁 / 6 / 12 / 下一頁 and nothing else. Twelve numbered targets a few
       millimetres apart under a thumb is a mis-tap generator, and the numbers it drops could only
       ever reach an adjacent page — which is what the two step controls already do. Trading them
       for two wide targets loses no ability and gains the total page count. */
    .xl-pagination-list { justify-content: center; flex-wrap: nowrap; gap: 8px; }
    .xl-pagination-number { display: none; }
    .xl-pagination-position { display: inline-flex; flex: 0 0 auto; }
    .xl-pagination-step { flex: 1 1 0; display: flex; }
    .xl-pagination-step .xl-pagination-link { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- breadcrumb
   One rule set for four shells. commerce-p0.css is the only stylesheet the main site
   and all three storefront layouts already load, so the trail cannot end up styled in
   one shop and unstyled in another.

   currentColor throughout: each shop sets its own text colour on the body, and a fixed
   colour here would be invisible on at least one of them. */
.xl-breadcrumb {
    margin: 0 0 14px;
    font-size: .86rem;
    line-height: 1.5;
    color: inherit;
    opacity: .82;
}

.xl-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xl-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xl-breadcrumb li + li::before {
    content: "\203A";
    opacity: .55;
}

.xl-breadcrumb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.xl-breadcrumb a:hover,
.xl-breadcrumb a:focus-visible {
    border-bottom-color: currentColor;
}

.xl-breadcrumb [aria-current="page"] {
    font-weight: 600;
    opacity: 1;
}

/* ------------------------------------------------------------- order hub
   The order pages are reachable from four shells: the three storefronts and the main
   site. commerce-p0.css is loaded by all four, so this is the only file where the hub
   can be styled once.

   Colours are inherited rather than declared. Each shell sets its own text colour on the
   body, and a fixed colour here would be unreadable in at least one of them - which is
   exactly how a themed page ends up "only the background changed". */
.xl-order-hub {
    max-width: 900px;
}

.xl-order-hub-head {
    margin: 0 0 20px;
}

.xl-order-hub-eyebrow {
    margin: 0 0 4px;
    font-size: .84rem;
    letter-spacing: .12em;
    text-transform: none;
    opacity: .78;
}

.xl-order-hub-head h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.xl-order-hub-sub {
    margin: 6px 0 0;
    opacity: .84;
}

.xl-order-hub-return {
    margin: 14px 0 0;
}

.xl-order-hub-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid currentColor;
    border-top-color: rgba(128, 128, 128, .35);
}

.xl-order-hub-links h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.xl-order-hub-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xl-order-hub-sublinks {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(128, 128, 128, .3);
    opacity: .9;
}

.xl-order-hub-links a {
    display: inline-flex;
    align-items: center;
    /* 44px minimum touch target, without turning the desktop list into a column of buttons. */
    min-height: 44px;
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.xl-order-hub-links a:hover,
.xl-order-hub-links a:focus-visible {
    border-bottom-color: currentColor;
}

/* Focus must stay visible in every shell. Two of the four set their own dark background,
   where a browser default outline can disappear entirely. */
.xl-order-hub a:focus-visible,
.xl-order-hub button:focus-visible,
.xl-order-hub input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .xl-order-hub .commerce-actions a.commerce-button,
    .xl-order-hub .commerce-actions button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* R4.5-E commerce UX polish
   Shared by the unified main shell and the three storefront shells. */

/* ------------------------------------------------------------ search results */
.xl-search-page {
    min-width: 0;
    padding: clamp(22px, 4vw, 52px) 16px 64px;
    color: #eaf7ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(38, 182, 226, .16), transparent 30rem),
        radial-gradient(circle at 88% 18%, rgba(215, 173, 88, .12), transparent 28rem),
        linear-gradient(155deg, #071426 0%, #0c213b 56%, #08172a 100%);
}
.xl-search-page *, .xl-search-page *::before, .xl-search-page *::after { box-sizing: border-box; }
.xl-search-shell { width: min(1240px, 100%); margin: 0 auto; min-width: 0; }
.xl-search-hero { max-width: 760px; margin: 18px 0 24px; }
.xl-search-eyebrow,
.xl-search-summary > div > p {
    margin: 0 0 6px;
    color: #79dbff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
}
.xl-search-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.35rem); letter-spacing: -.025em; }
.xl-search-hero > p:last-child { margin: 10px 0 0; color: #b9cede; font-size: clamp(1rem, 2vw, 1.15rem); }
.xl-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: clamp(16px, 2.4vw, 24px);
    border: 1px solid rgba(121, 219, 255, .24);
    border-radius: 18px;
    background: rgba(5, 16, 31, .74);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .2);
}
.xl-search-field { display: grid; gap: 7px; min-width: 0; }
.xl-search-field label { color: #ddecf6; font-size: .9rem; font-weight: 800; }
.xl-search-field input,
.xl-search-form button {
    min-height: 50px;
    border-radius: 10px;
    font: inherit;
}
.xl-search-field input {
    width: 100%;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid rgba(121, 219, 255, .42);
    color: #f7fcff;
    background: #07182b;
}
.xl-search-field input::placeholder { color: #94aabd; }
.xl-search-form button {
    min-width: 132px;
    padding: 10px 22px;
    border: 1px solid #d7ad58;
    color: #10203a;
    background: #d7ad58;
    font-weight: 900;
}
.xl-search-form button:hover { background: #e7c684; }
.xl-search-filters {
    display: flex;
    gap: 8px;
    margin: 18px 0 28px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.xl-search-filters a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid rgba(160, 205, 231, .32);
    border-radius: 999px;
    color: #d9edf8;
    background: rgba(8, 24, 43, .82);
    text-decoration: none;
    font-weight: 750;
}
.xl-search-filters a span { color: #9fc1d4; font-variant-numeric: tabular-nums; }
.xl-search-filters a.is-active {
    border-color: #79dbff;
    color: #071426;
    background: #9be4ff;
}
.xl-search-filters a.is-active span { color: #17334a; }
.xl-search-notice { margin-bottom: 20px; padding: 14px 16px; border-left: 4px solid #d7ad58; background: #fff4d6; color: #3a2a12; }
.xl-search-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 18px;
}
.xl-search-summary h2 { margin: 0; font-size: clamp(1.2rem, 2.8vw, 1.65rem); }
.xl-search-summary > span {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(215, 173, 88, .5);
    border-radius: 999px;
    color: #f2d28e;
    font-size: .82rem;
    font-weight: 800;
}
.xl-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(15px, 2vw, 24px);
}
.xl-search-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 219, 255, .2);
    border-radius: 16px;
    background: rgba(10, 26, 46, .95);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
    flex-direction: column;
}
.xl-search-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(145deg, #132b48, #081729);
}
.xl-search-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xl-search-store-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 999px;
    color: #071426;
    background: #9be4ff;
    font-size: .76rem;
    font-weight: 900;
}
.xl-search-card[data-store="game"] .xl-search-store-badge { color: #fff; background: #7950d8; }
.xl-search-card[data-store="book"] .xl-search-store-badge { color: #2b1608; background: #e0b967; }
.xl-search-card__content { display: flex; flex: 1; min-width: 0; padding: 17px; flex-direction: column; }
.xl-search-card__category { margin: 0 0 8px; color: #92b3c8; font-size: .82rem; }
.xl-search-card__category a { color: inherit; }
.xl-search-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.45; }
.xl-search-card h3 a { color: #f5fbff; text-decoration: none; }
.xl-search-card__price { margin: 11px 0 7px; color: #f0ca78; font-size: 1.08rem; font-weight: 900; }
/* R4.9-A: the supply word on a result card. Three orderable tiers, three colours, so 接單備貨 is
   legible as its own state rather than as a softer 現貨; 暫不可下單 is the only muted one. */
.xl-search-card__availability {
    display: inline-flex; align-self: flex-start; margin: 0 0 7px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
    padding: 3px 10px; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .88);
}
.xl-availability-tier-0 { border-color: rgba(126, 231, 178, .5); color: #b8f3d4; background: rgba(126, 231, 178, .12); }
.xl-availability-tier-1 { border-color: rgba(129, 199, 255, .5); color: #c6e6ff; background: rgba(129, 199, 255, .12); }
.xl-availability-tier-2 { border-color: rgba(214, 168, 255, .5); color: #e6d2ff; background: rgba(214, 168, 255, .12); }
.xl-availability-tier-3 { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .66); }

.xl-search-card__summary {
    display: -webkit-box;
    min-height: 3.15em;
    margin: 0 0 16px;
    overflow: hidden;
    color: #aac1d0;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.xl-search-card__cta,
.xl-search-empty__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid rgba(121, 219, 255, .5);
    border-radius: 9px;
    color: #dff6ff;
    text-decoration: none;
    font-weight: 850;
}
.xl-search-card__cta { margin-top: auto; }
.xl-search-card__cta:hover { color: #071426; background: #9be4ff; }
.xl-search-page .xl-pagination { margin-top: 28px; }
.xl-search-page .xl-pagination-summary { color: #acc3d2; }
.xl-search-empty {
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgba(121, 219, 255, .22);
    border-radius: 18px;
    text-align: center;
    background: rgba(7, 21, 39, .76);
}
.xl-search-empty__icon { display: block; color: #79dbff; font-size: 3rem; line-height: 1; }
.xl-search-empty h2 { margin: 14px 0 8px; }
.xl-search-empty > p { color: #b6cad8; }
.xl-search-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.xl-search-empty__actions a.xl-search-primary-link { border-color: #d7ad58; color: #10203a; background: #d7ad58; }
.xl-search-suggestions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
    text-align: left;
}
.xl-search-suggestions section { padding: 16px; border: 1px solid rgba(121,219,255,.2); border-radius: 12px; background: rgba(12,31,54,.8); }
.xl-search-suggestions h3 { margin: 0 0 8px; font-size: 1rem; }
.xl-search-suggestions ul { margin: 0; padding: 0; list-style: none; }
.xl-search-suggestions a { display: flex; justify-content: space-between; gap: 8px; min-height: 44px; align-items: center; color: #ddecf6; }
.xl-search-suggestions a span { color: #91adbf; font-size: .84rem; }

.xl-search-page a:focus-visible,
.xl-search-page button:focus-visible,
.xl-search-page input:focus-visible {
    outline: 3px solid #f2cc78;
    outline-offset: 3px;
}

/* -------------------------------------------------------------- order lookup */
.xl-order-hub { display: grid; gap: 18px; min-width: 0; }
.xl-order-hub-head {
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(121, 219, 255, .2);
    border-radius: 18px;
    color: #edf8ff;
    background:
        radial-gradient(circle at 90% 0%, rgba(121, 219, 255, .18), transparent 18rem),
        linear-gradient(145deg, #08182c, #102b49);
}
.xl-order-hub-brand { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 22px; }
.xl-order-hub-brand > span:first-child { font-weight: 850; letter-spacing: .04em; }
.xl-order-hub-brand b { margin: 0 5px; color: #79dbff; }
.xl-order-hub-head .commerce-store-badge { margin-left: 0; color: #bfeeff; }
.xl-order-hub-safety { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid rgba(121, 219, 255, .2); color: #c8dce8; }
.xl-order-hub-safety a { color: #9be4ff; font-weight: 800; }
.xl-order-hub-return .commerce-button { border-color: rgba(121,219,255,.55); color: #e7f7ff; background: rgba(7,22,39,.5); }
.xl-order-section-kicker { margin: 0 0 5px; color: #236a8c; font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.commerce-theme .xl-order-section-kicker { color: var(--commerce-accent); }
.xl-order-form-card h2,
.xl-order-member-card h2,
.xl-order-result-summary h2 { margin-top: 0; }
.xl-order-form-card .commerce-field small { color: #5b6980; }
.commerce-theme .xl-order-form-card .commerce-field small { color: var(--commerce-panel-muted); }
.xl-order-submit { width: 100%; min-height: 48px; }
.xl-order-trust ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}
.xl-order-trust li { padding: 14px; border: 1px solid #dce2ec; border-radius: 10px; background: #f7fafc; }
.xl-order-trust li strong,
.xl-order-trust li span { display: block; }
.xl-order-trust li span { margin-top: 5px; color: #5a687d; font-size: .88rem; }
.commerce-theme .xl-order-trust li { border-color: var(--commerce-line); background: var(--commerce-input); }
.commerce-theme .xl-order-trust li span { color: var(--commerce-panel-muted); }
.xl-order-help ul { padding-left: 22px; line-height: 1.8; }
.xl-order-hub-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 20px;
    border: 1px solid rgba(128,128,128,.28);
    border-radius: 14px;
}
.xl-order-hub-links section { min-width: 0; }
.xl-order-hub-links a { display: flex; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.xl-order-result-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.xl-order-result-summary dl > div { min-width: 0; padding: 12px; border: 1px solid #dce2ec; border-radius: 9px; }
.xl-order-result-summary dt { color: #617086; font-size: .8rem; }
.xl-order-result-summary dd { margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.commerce-theme .xl-order-result-summary dl > div { border-color: var(--commerce-line); }
.commerce-theme .xl-order-result-summary dt { color: var(--commerce-panel-muted); }
.xl-order-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.xl-order-steps li { position: relative; min-width: 0; padding: 16px 12px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; }
.xl-order-steps li > span { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e8edf4; font-weight: 900; }
.xl-order-steps strong,
.xl-order-steps small { display: block; margin-top: 7px; }
.xl-order-steps small { color: #617086; }
.xl-order-steps .is-complete { border-color: #367456; }
.xl-order-steps .is-complete > span { color: #fff; background: #367456; }
.xl-order-steps .is-current { border: 2px solid #1c6994; box-shadow: 0 0 0 3px rgba(28,105,148,.12); }
.xl-order-steps .is-current > span { color: #061725; background: #79dbff; }
.commerce-theme .xl-order-steps li { border-color: var(--commerce-line); color: var(--commerce-panel-text); background: var(--commerce-panel); }
.commerce-theme .xl-order-steps small { color: var(--commerce-panel-muted); }
.commerce-theme .xl-order-steps .is-complete { border-color: #67c99b; }
.commerce-theme .xl-order-steps .is-current { border-color: var(--commerce-accent); }
.xl-order-closed { border-left: 5px solid #8d4e3f; }

@media (max-width: 860px) {
    .xl-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl-search-suggestions { grid-template-columns: minmax(0, 1fr); }
    .xl-order-trust ul,
    .xl-order-result-summary dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .xl-search-page { padding-inline: 10px; }
    .xl-search-form { grid-template-columns: minmax(0, 1fr); }
    .xl-search-form button { width: 100%; }
    .xl-search-summary { align-items: start; flex-direction: column; }
    .xl-search-grid { grid-template-columns: minmax(0, 1fr); }
    .xl-order-hub-brand { align-items: flex-start; flex-direction: column; }
    .xl-order-hub-links { grid-template-columns: minmax(0, 1fr); }
    .xl-order-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
    .xl-search-empty { padding-inline: 16px; }
    .xl-search-empty__actions { display: grid; }
    .xl-search-empty__actions a { width: 100%; }
    .xl-order-hub-head { padding: 18px 15px; }
    .xl-order-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .xl-search-page *,
    .xl-order-hub * { scroll-behavior: auto; transition-duration: .01ms; }
}
/* R4.10-A — XiaoLing Shopping Safety. Shared across the portal and all three storefronts. */
.xl-safety-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid #9bcbbd;
    border-radius: 999px;
    color: #135a4d;
    background: #e9f8f2;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
}

.xl-safety-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid #2d7668;
    border-radius: 999px;
    color: #155f52;
    background: #fff;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.xl-safety-button:hover {
    color: #0b493f;
    background: #effaf6;
}

.xl-safety-button-primary {
    color: #fff;
    background: #176b5b;
}

.xl-safety-button-primary:hover {
    color: #fff;
    background: #0f574a;
}

.xl-safety-button:focus-visible,
.xl-safety-highlights a:focus-visible,
.xl-safety-badge a:focus-visible,
.xl-cart-safety a:focus-visible,
.xl-order-success-safety a:focus-visible,
.xl-safety-protection a:focus-visible,
.xl-safety-triangle a:focus-visible {
    outline: 3px solid #f3b53f;
    outline-offset: 3px;
}

.xl-safety-highlights {
    display: grid;
    width: min(1180px, calc(100% - 48px));
    margin: 34px auto;
    padding: clamp(20px, 3vw, 32px);
    gap: 22px;
    border: 1px solid #c9e2da;
    border-radius: 24px;
    color: #193d37;
    background: linear-gradient(135deg, #f8fffc, #edf8f4);
    box-shadow: 0 18px 48px rgb(17 75 64 / 8%);
}

.xl-safety-highlights__heading,
.xl-safety-badge__title,
.xl-checkout-safety__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.xl-safety-highlights__heading p {
    margin: 0 0 3px;
    color: #287465;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.xl-safety-highlights__heading h2,
.xl-checkout-safety__title h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 900;
}

.xl-safety-highlights > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xl-safety-highlights > ul li {
    min-width: 0;
    padding: 14px;
    border-radius: 14px;
    background: rgb(255 255 255 / 82%);
}

.xl-safety-highlights > ul strong,
.xl-safety-highlights > ul span {
    display: block;
    overflow-wrap: anywhere;
}

.xl-safety-highlights > ul span {
    margin-top: 5px;
    color: #52716b;
    font-size: .86rem;
}

.xl-safety-highlights > .xl-safety-button {
    justify-self: start;
}

.xl-safety-badge,
.xl-checkout-safety,
.xl-order-success-safety {
    min-width: 0;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #bcded4;
    border-radius: 16px;
    color: #173f37;
    background: #f5fcf9;
    overflow-wrap: anywhere;
}

.xl-safety-badge ul,
.xl-checkout-safety ul,
.xl-order-success-safety ul {
    margin: 12px 0;
    padding-left: 1.25rem;
    line-height: 1.65;
}

.xl-safety-badge a,
.xl-cart-safety a,
.xl-order-success-safety a {
    color: #116354;
    font-weight: 800;
    text-underline-offset: 3px;
}

.xl-checkout-safety {
    grid-column: 1 / -1;
}

.xl-checkout-safety .xl-safety-button {
    width: fit-content;
    max-width: 100%;
}

.xl-cart-safety {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    color: #214740;
    background: #eef9f5;
    overflow-wrap: anywhere;
}

.xl-cart-safety .xl-safety-icon {
    width: 1.9rem;
    height: 1.9rem;
}

.xl-order-success-safety p {
    margin-bottom: 0;
}

.xl-safety-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.xl-safety-check-list li {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d5e9e3;
    border-radius: 14px;
    background: #f7fcfa;
    overflow-wrap: anywhere;
}

.xl-safety-check-list strong,
.xl-safety-check-list span {
    display: block;
}

.xl-safety-check-list span {
    margin-top: 6px;
    color: #526b66;
}

.xl-safety-lead {
    padding: 14px 16px;
    border-left: 4px solid #2d7668;
    border-radius: 0 12px 12px 0;
    color: #154e44;
    background: #eef9f5;
    font-size: 1.05rem;
}

.xl-safety-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .xl-safety-highlights > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .xl-safety-highlights {
        width: min(100% - 24px, 1180px);
        margin-block: 20px;
        padding: 18px;
        border-radius: 18px;
    }

    .xl-safety-highlights > ul,
    .xl-safety-check-list {
        grid-template-columns: 1fr;
    }

    .xl-safety-highlights > .xl-safety-button,
    .xl-checkout-safety .xl-safety-button,
    .xl-safety-actions .xl-safety-button {
        width: 100%;
    }

    .xl-cart-safety {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* R4.10-H product share. Neutral enough to sit inside all three storefronts, which each have their
   own palette; the only colour named is LINE's own, on the button that goes there. */
.commerce-share {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}

.commerce-share-heading {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
}

.commerce-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.commerce-share-btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: #fff;
    color: #1f2933;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

.commerce-share-btn:hover,
.commerce-share-btn:focus-visible {
    border-color: rgba(0, 0, 0, 0.45);
}

.commerce-share-line {
    border-color: #06c755;
    background: #06c755;
    color: #fff;
}

.commerce-share-line:hover,
.commerce-share-line:focus-visible {
    border-color: #05a445;
    background: #05a445;
    color: #fff;
}

.commerce-share-note {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    opacity: 0.75;
}