/* 05-commerce: cart, checkout, account, and order surfaces. Styled entirely
   off the theme tokens like the rest of the cascade - the ultraplan pass
   migrated the last raw rem/px type sizes onto the --sf-fs-* / --sf-space-*
   scales, which is what lets the four themes actually restyle checkout
   instead of sharing one hardcoded look (a regression test greps for raw
   rem font sizes here).

   This file is CONDITIONAL: it only ships on the commerce routes
   (CatalogPageModel.NeedsCommerceCss). The shell rules that used to live here
   moved out in the shop-UX pass, because they render on pages this file no
   longer loads on:
     .sf-header-commerce / .sf-cart-count  -> 02-shell.css (every page of a
       full-commerce site renders the header cart)
     .sf-pay-note / .sf-pdp-buy / .sf-buy-form / .sf-qty-field
       -> 04-storefront.css (the PDP buy box is a catalog surface)
   Anything added here from now on must be cart/checkout/account only. */

.sf-commerce-container { max-width: 760px; }
.sf-account-container { max-width: 460px; }

/* A real text link where a grey button used to be: quiet actions (Remove,
   Keep shopping, Back to cart) read as links, not competing CTAs. */
.sf-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font-size: var(--sf-fs-300);
    font-weight: 600;
    color: var(--sf-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sf-text-link:hover { color: var(--sf-brand); }

/* ================================================================
   cart lines
   ================================================================ */

.sf-cart-lines {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-3);
    margin: var(--sf-space-4) 0;
}

.sf-cart-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-3) var(--sf-space-4);
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius);
}

.sf-cart-line-blocked { opacity: 0.75; }

/* The 64px thumb, through the standard pipeline, on the shared plate
   ground: the cart shows the same object the grid sold. */
.sf-cart-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--sf-radius-sm);
    overflow: hidden;
    background: var(--sf-plate, var(--sf-surface-sunken));
    box-shadow: inset 0 0 0 1px var(--sf-plate-edge, rgba(0, 0, 0, 0.08));
}

.sf-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6%;
}

.sf-cart-thumb-mark {
    font-family: var(--sf-font-heading);
    font-weight: var(--sf-display-weight);
    font-size: var(--sf-fs-400);
    letter-spacing: var(--sf-track-caps);
    text-transform: uppercase;
    color: var(--sf-ink);
    opacity: 0.34;
    user-select: none;
}

.sf-cart-line-main {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.sf-cart-line-name { font-weight: 600; color: var(--sf-ink); }

/* Machine facts in the machine face (law 5). */
.sf-cart-line-sku {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--sf-text-faint);
}

.sf-cart-line-note {
    font-size: var(--sf-fs-200);
    font-weight: 600;
    color: var(--sf-brand);
}

.sf-cart-line-qty { display: flex; gap: var(--sf-space-2); align-items: center; }
.sf-cart-line-qty input { width: 70px; }

.sf-cart-line-price {
    font-weight: 700;
    min-width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--sf-ink);
}

.sf-cart-line-remove { margin-top: 2px; }
.sf-cart-line-remove .sf-text-link { min-height: 32px; font-size: var(--sf-fs-200); }

/* Review/confirmation lines: name + price only, no media, no controls. */
.sf-cart-line-compact { padding: var(--sf-space-3) var(--sf-space-4); }

/* ================================================================
   cart summary panel
   ================================================================ */

.sf-cart-summary {
    margin-top: var(--sf-space-5);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* The money panel is the one true card on the page (law 4: it is
   interactive as a unit): raised surface, signature edge, right-aligned at
   width, CTA inside it. */
.sf-cart-panel {
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-signature-edge), var(--sf-elev-2);
    padding: var(--sf-card-pad);
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-4);
    width: 100%;
    max-width: 420px;
    align-self: flex-end;
}

.sf-cart-panel .sf-totals { margin-top: 0; max-width: none; margin-left: 0; }

.sf-cart-cta { width: 100%; text-align: center; }
.sf-cart-keep { align-self: center; min-height: 36px; }

.sf-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sf-space-5);
    width: 100%;
    padding: var(--sf-space-3) 0;
    box-shadow: inset 0 2px 0 var(--sf-hairline);
}

/* The big row: the label in caps, the number at scale, both tabular. */
.sf-cart-total span {
    font-family: var(--sf-font-heading);
    font-size: var(--sf-fs-200);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-soft);
}

.sf-cart-total strong {
    font-family: var(--sf-font-heading);
    font-weight: var(--sf-heading-weight);
    font-size: var(--sf-fs-600);
    letter-spacing: calc(var(--sf-track-600) + var(--sf-track-offset));
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--sf-ink);
}

/* ================================================================
   checkout stepper: the progress rail
   ================================================================ */

/* Not pills: a hairline rail. Each step is a 20px number square + caps
   label; the segment under a completed step fills to brand, so progress is
   the line itself. */
.sf-checkout-steps {
    display: flex;
    gap: var(--sf-space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sf-space-5);
}

.sf-checkout-step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    padding: 0 0 var(--sf-space-3);
    font-family: var(--sf-font-heading);
    font-size: var(--sf-fs-100);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-faint);
    /* The rail segment: hairline by default. */
    box-shadow: inset 0 -1px 0 var(--sf-hairline);
}

/* Done and current segments fill to brand. */
.sf-checkout-step.sf-step-done,
.sf-checkout-step.sf-step-current {
    box-shadow: inset 0 -2px 0 var(--sf-brand);
}

.sf-checkout-step.sf-step-current { color: var(--sf-ink); }
.sf-checkout-step.sf-step-done { color: var(--sf-text-soft); }

/* The 20px number square: future = outline, current = ink, done = brand
   with a drawn check in place of the numeral. */
.sf-step-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--sf-radius-xs);
    box-shadow: inset 0 0 0 1px var(--sf-control-border);
    background: transparent;
    color: var(--sf-text-soft);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    font-variant-numeric: tabular-nums;
}

.sf-step-current .sf-step-number {
    background: var(--sf-ink);
    color: var(--sf-bg);
    box-shadow: none;
}

.sf-step-done .sf-step-number {
    background: var(--sf-brand);
    color: transparent;
    box-shadow: none;
}

/* The check: two strokes of the brand square's own contrast colour. */
.sf-step-done .sf-step-number::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--sf-on-brand);
    border-bottom: 2px solid var(--sf-on-brand);
    transform: rotate(-45deg);
}

/* ================================================================
   checkout layout + forms
   ================================================================ */

/* Two columns at desk width: the form keeps a readable measure, the
   summary rail rides sticky beside it. Single column below. */
.sf-checkout-cols {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-6);
}

.sf-checkout-form { max-width: 560px; flex: 7 1 0; }
.sf-checkout-form .sf-field { max-width: 480px; }

.sf-checkout-summary {
    flex: 5 1 0;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-signature-edge), var(--sf-elev-1);
    padding: var(--sf-card-pad);
    align-self: start;
    width: 100%;
}

.sf-checkout-summary-title {
    font-size: var(--sf-fs-200);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-faint);
    padding-bottom: var(--sf-space-2);
    margin-bottom: var(--sf-space-3);
    box-shadow: inset 0 -1px 0 var(--sf-hairline);
}

.sf-checkout-summary-lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-3);
}

.sf-checkout-summary-line {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
}

.sf-checkout-summary-line .sf-cart-thumb { width: 44px; height: 44px; }

.sf-checkout-summary-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--sf-fs-200);
    color: var(--sf-text);
}

.sf-checkout-summary-qty {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    color: var(--sf-text-faint);
    margin-left: var(--sf-space-1);
}

.sf-checkout-summary-price {
    font-size: var(--sf-fs-200);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--sf-ink);
}

.sf-checkout-summary .sf-totals { margin-top: var(--sf-space-4); max-width: none; margin-left: 0; }

.sf-checkout-signin { margin-top: var(--sf-space-4); }
.sf-checkout-actions { display: flex; gap: var(--sf-space-3); align-items: center; margin-top: var(--sf-space-5); }

/* Addresses */
.sf-checkout-heading {
    font-size: var(--sf-fs-400);
    margin: var(--sf-space-5) 0 0;
    padding-top: var(--sf-space-5);
    box-shadow: inset 0 1px 0 var(--sf-hairline);
}

.sf-field-check { flex-direction: row; align-items: center; gap: var(--sf-space-3); }
.sf-field-check input { width: auto; }
.sf-checkout-shipping { display: flex; flex-direction: column; gap: var(--sf-space-4); }

.sf-address-block {
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-3) var(--sf-space-4);
    margin: var(--sf-space-3) 0;
}

.sf-address-block h3 {
    margin: 0 0 var(--sf-space-2);
    font-size: var(--sf-fs-200);
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-soft);
}

.sf-address-block address { font-style: normal; line-height: 1.5; }
.sf-address-grid { display: flex; flex-wrap: wrap; gap: var(--sf-space-4); }
.sf-address-grid > .sf-address-block { flex: 1 1 240px; }

/* ================================================================
   fulfillment + the FFL picker
   ================================================================ */

.sf-fulfill-section { margin: var(--sf-space-5) 0; }
.sf-fulfill-list { list-style: none; padding: 0; }
.sf-fulfill-list li { display: flex; justify-content: space-between; padding: var(--sf-space-2) 0; }

.sf-fulfill-line {
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-3) var(--sf-space-4);
    margin: var(--sf-space-3) 0;
    border: 0;
}

.sf-fulfill-line legend { font-weight: 600; padding: 0 var(--sf-space-1); }
.sf-radio { display: flex; gap: var(--sf-space-2); align-items: center; padding: var(--sf-space-1) 0; }

.sf-ffl-picker { margin-top: var(--sf-space-4); }

/* True fact, verified: the picker searches the imported ATF FFL directory
   (the same source the result rows and the selected-dealer note cite). */
.sf-ffl-directory-line {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-faint);
    margin: var(--sf-space-1) 0 var(--sf-space-3);
}

.sf-ffl-selected {
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: inset 0 0 0 2px var(--sf-brand);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-3) var(--sf-space-4);
    margin: var(--sf-space-2) 0 var(--sf-space-4);
}

.sf-ffl-source { font-size: var(--sf-fs-200); color: var(--sf-text-soft); }
.sf-ffl-search { display: flex; gap: var(--sf-space-2); align-items: flex-end; margin: var(--sf-space-2) 0; }
.sf-ffl-results { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sf-space-2); }

.sf-ffl-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sf-space-3);
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-3) var(--sf-space-4);
}

.sf-ffl-result > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--sf-fs-300); }
.sf-ffl-manual { margin-top: var(--sf-space-3); }
.sf-ffl-manual summary { cursor: pointer; font-weight: 600; padding: var(--sf-space-2) 0; }

/* ================================================================
   review + confirmation
   ================================================================ */

.sf-review-section {
    margin: var(--sf-space-5) 0;
    padding-bottom: var(--sf-space-4);
    box-shadow: inset 0 -1px 0 var(--sf-hairline);
}

/* Small-caps section headers: the review reads as a document, not a form. */
.sf-review-section h2 {
    font-size: var(--sf-fs-200);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-faint);
    margin-bottom: var(--sf-space-2);
}

.sf-review-total { border-bottom: none; box-shadow: none; }

/* Mono EDIT chips: corrections are metadata on the document. */
.sf-edit-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 2px 10px;
    margin-top: var(--sf-space-2);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-soft);
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius-xs);
    text-decoration: none;
}

.sf-edit-chip:hover {
    color: var(--sf-ink);
    box-shadow: inset 0 0 0 1px var(--sf-brand);
    text-decoration: none;
}

.sf-btn-large { font-size: var(--sf-fs-400); padding: var(--sf-space-3) var(--sf-space-6); }

/* The commitment carries its number, and the number is tabular. */
.sf-place-order { font-variant-numeric: tabular-nums lining-nums; }

.sf-status-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-surface-alt);
    font-size: var(--sf-fs-200);
    font-weight: 600;
}

/* Confirmation head: the order number as the hero object. */
.sf-order-confirm-head { margin-bottom: var(--sf-space-4); }

.sf-order-eyebrow {
    font-family: var(--sf-font-heading);
    font-weight: 600;
    font-size: var(--sf-fs-200);
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-soft);
    margin-bottom: var(--sf-space-2);
}

.sf-order-number-hero {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-700);
    line-height: var(--sf-lh-700);
    font-weight: 600;
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: 0.02em;
    color: var(--sf-ink);
    margin-bottom: var(--sf-space-3);
}

.sf-ffl-snapshot { margin: var(--sf-space-3) 0; }
.sf-ffl-snapshot-body { color: var(--sf-text); }

.sf-ffl-license {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-200);
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--sf-text-soft);
}

/* ================================================================
   account
   ================================================================ */

.sf-account-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-4); }
.sf-account-form { max-width: 420px; }
.sf-order-list { display: flex; flex-direction: column; gap: var(--sf-space-2); margin-top: var(--sf-space-3); }

.sf-order-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-3);
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 0 0 1px var(--sf-hairline);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-3) var(--sf-space-4);
    text-decoration: none;
    color: inherit;
}

.sf-order-number {
    font-weight: 700;
    font-family: var(--sf-font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}

@media (max-width: 640px) {
    .sf-cart-line { flex-direction: column; align-items: stretch; }
    /* flex-basis 240px becomes HEIGHT in column direction: that was the
       ~180px blank region inside mobile cart cards (UX-minor-13 r2). */
    .sf-cart-line-main { flex-basis: auto; }
    .sf-cart-line-price { text-align: left; }
    .sf-ffl-result { flex-direction: column; align-items: stretch; }
    .sf-checkout-steps { gap: var(--sf-space-1); }
    .sf-step-label { display: none; }
    .sf-checkout-step[aria-current] .sf-step-label { display: inline; }
}

/* ---------- r2 fix pass ---------- */

/* ASP.NET renders the validation summary in its "valid" state as an empty
   red box on a pristine form; only real errors get the styling
   (UX-minor-10 r2). */
div.sf-form-error.validation-summary-valid { display: none; }

/* Checkboxes were browser-default blue on the themed pages; radios got this
   in round 1 (UX-minor-17 r2). */
.sf-body input[type="checkbox"] { accent-color: var(--sf-brand); }

/* FFL picker refinements (UX-major-7 / UX-minor-8 r2). */
.sf-ffl-heading-hint { font-size: var(--sf-fs-200); font-weight: 400; color: var(--sf-text-soft); }

.sf-ffl-selected-label {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-100);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sf-track-caps);
    color: var(--sf-text-soft);
}

.sf-ffl-result-count {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-fs-200);
    font-variant-numeric: tabular-nums;
    color: var(--sf-text-soft);
    margin: var(--sf-space-2) 0 var(--sf-space-1);
}

.sf-ffl-type { font-size: var(--sf-fs-200); font-weight: 600; color: var(--sf-text-soft); }
.sf-ffl-licensee { font-size: var(--sf-fs-200); color: var(--sf-text-faint); }

/* Inline hint under form fields (register password rules, UX-minor-17 r2). */
.sf-field-hint { font-size: var(--sf-fs-200); color: var(--sf-text-faint); margin-top: 2px; }

/* Money block (cart / checkout review / confirmation). One presentation for
   all three, so the tax row always looks the same wherever it appears. */
.sf-totals { width: 100%; margin-top: var(--sf-space-5); }

.sf-totals-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sf-space-5);
    width: 100%;
    padding: var(--sf-space-1) 0;
    font-size: var(--sf-fs-300);
}

/* Values right, tabular, always. */
.sf-totals-row span:last-child {
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--sf-ink);
}

.sf-totals .sf-cart-total { margin-top: var(--sf-space-1); }

.sf-tax-note {
    font-size: var(--sf-fs-200);
    color: var(--sf-text-soft);
    margin: var(--sf-space-2) 0 0;
}

.sf-tax-note-due {
    font-weight: 600;
    color: var(--sf-text);
}

/* ================================================================
   Tablet and desktop story (shop-UX pass). Targets are the builder preview
   widths: 390 / 834 / 1280.
   ================================================================ */

/* 390: things that must stack on a phone and did not. */
@media (max-width: 640px) {
    .sf-ffl-search { flex-direction: column; align-items: stretch; }
    .sf-ffl-search .sf-btn { width: 100%; text-align: center; }
    .sf-checkout-actions { flex-direction: column; align-items: stretch; }
    .sf-checkout-actions .sf-btn { width: 100%; text-align: center; }
    .sf-account-head { flex-direction: column; align-items: flex-start; }
    .sf-order-row { flex-direction: column; align-items: flex-start; }
    .sf-cart-summary .sf-btn { width: 100%; text-align: center; }
    .sf-cart-panel { max-width: none; }
}

/* 834: the column gets real width, cart lines become a proper grid row
   instead of a flex-wrap accident, and the address pair sits side by side. */
@media (min-width: 700px) {
    .sf-commerce-container { max-width: 840px; }

    /* The four tracks of the cart line: thumb, identity, qty, money. */
    .sf-cart-line {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) max-content max-content;
        align-items: center;
        column-gap: var(--sf-space-4);
    }

    /* Review/confirmation lines carry no thumb or qty form: two tracks. */
    .sf-cart-line-compact { grid-template-columns: minmax(0, 1fr) max-content; }

    .sf-cart-line-main { flex-basis: auto; }
    .sf-cart-line-price { min-width: 96px; }

    .sf-address-grid { flex-wrap: nowrap; }
    .sf-checkout-form, .sf-account-form { max-width: 100%; }
    .sf-fulfill-line { padding: var(--sf-space-4) var(--sf-space-5); }
    .sf-checkout-steps { gap: var(--sf-space-3); }
}

/* 1280: two-column checkout with the sticky rail; the review and
   confirmation summaries stop being a narrow ribbon; the FFL result list
   uses the width. */
@media (min-width: 1024px) {
    .sf-commerce-container { max-width: 1040px; }
    .sf-account-container { max-width: 520px; }

    .sf-checkout-cols {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(32px, 4vw, 64px);
    }

    .sf-checkout-summary {
        position: sticky;
        top: calc(var(--sf-header-height) + var(--sf-space-4));
    }

    .sf-ffl-results {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-3);
    }

    /* Invoice-style: the money column right-aligns instead of stretching a
       two-word row across 900px. */
    .sf-totals { max-width: 460px; margin-left: auto; }
}