/* ============================================
   Checkout restyle — Amasty One Step Checkout (modern, 3-column) brought into
   the portal new-theme: eyebrow section heads, white card surfaces, status
   tokens, 8px/40px controls, solid-black pill CTA. Loaded page-scoped on
   checkout_index_index.

   Specificity: every rule is prefixed with #checkout. The id beats Amasty's
   class selectors regardless of bundle load order, so almost nothing needs
   !important — the one exception is the primary-button colour, which the theme
   sets with !important (styles-l: .action.primary.checkout{background-color:
   #00ffcf !important}). External file only (checkout CSP blocks inline styles).
   ============================================ */

/* ---- Eyebrow section heads --------------------------------------------------
   The theme eyebrow (.eyebrow-title() + .eyebrow-rule()): a flex uppercase label
   with a leading 26px dash + FA5 Pro icon in ::before, no extra markup. The
   title node is either p.step-title.amcheckout-title (address/method/summary) or
   a div.step-title inside a div.amcheckout-title wrapper (payment) — the wrapper
   carries Amasty's #eee bar, so both the title and the .amcheckout-title wrapper
   are cleared. */
#checkout .step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    color: #777;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#checkout .amcheckout-title {
    background: none;
}

#checkout .step-title::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    color: #111;
    flex: 0 0 auto;
    padding-left: 34px; /* 26px dash + 8px gap before the glyph */
    background: linear-gradient(#111, #111) left center / 26px 1px no-repeat;
}

/* Per-section FA5 Pro Light glyph. */
#checkout #shipping .step-title::before { content: "\f3c5"; }            /* map-marker-alt */
#checkout #opc-shipping_method .step-title::before { content: "\f0d1"; } /* truck */
#checkout .payment-group .step-title::before { content: "\f09d"; }       /* credit-card */
#checkout .opc-block-summary .step-title::before { content: "\f543"; }   /* receipt */

/* ---- Wayfinding: a top eyebrow marking this as the card-prepayment checkout,
   plus a quiet postpaid-switch line placed below Pay Now (place-order.html). The
   eyebrow mirrors the .step-title heads (dash + FA glyph + uppercase). */
#checkout .checkout-prepay-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #777;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#checkout .checkout-prepay-eyebrow::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f09d"; /* credit-card */
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    color: #111;
    flex: 0 0 auto;
    padding-left: 34px; /* 26px dash + 8px gap before the glyph */
    background: linear-gradient(#111, #111) left center / 26px 1px no-repeat;
}

/* Checkout title — sized to the portal, not Luma's oversized default h1. Reads as
   the page heading under the eyebrow, with the sub line beneath it. */
#checkout .checkout-header .title {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
}

/* Header sub: one quiet line under the title carrying the postpaid shortcut
   (gated to eligible accounts in onepage.phtml). Mirrors the portal page-intro sub. */
#checkout .checkout-header-sub {
    margin: 6px 0 0;
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.5;
}

/* Postpaid alternative — a distinct bordered note (not the page description) so the
   two don't blur together. Quiet card chrome to match the theme. */
#checkout .checkout-postpaid-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color__base, #ccc);
    border-radius: var(--radius-control, 8px);
    background: #fafafa;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}
#checkout .checkout-postpaid-note__icon {
    color: var(--status-neutral, #6b7280);
    margin-top: 2px;
    flex: 0 0 auto;
}
/* In-card variant: spans the payment card and sits above the Credit Card method. */
#checkout .checkout-postpaid-note--payment {
    display: flex;
    width: 100%;
    margin: 0 0 16px;
}

/* Postpaid shortcut — the portal-open-link arrow affordance (underline that
   darkens + a trailing arrow that nudges on hover); .portal-open-link itself isn't
   loaded on checkout, so the effect is reproduced here. */
#checkout .checkout-postpaid-link,
#checkout .checkout-postpaid-link:link,
#checkout .checkout-postpaid-link:visited,
#checkout .checkout-postpaid-link:hover,
#checkout .checkout-postpaid-link:focus,
#checkout .checkout-postpaid-link:active {
    color: #111;
    text-decoration: none;
}
#checkout .checkout-postpaid-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}
#checkout .checkout-postpaid-link__text {
    border-bottom: 1px solid rgba(17, 17, 17, .28);
    transition: border-color .15s ease;
}
#checkout .checkout-postpaid-link:hover .checkout-postpaid-link__text { border-bottom-color: #111; }
#checkout .checkout-postpaid-link__arrow {
    font-size: .85em;
    flex: 0 0 auto;
    transition: transform .18s ease;
}
#checkout .checkout-postpaid-link:hover .checkout-postpaid-link__arrow { transform: translateX(3px); }

/* ---- Card surfaces & option chips ------------------------------------------
   Two reusable looks, each defined once and shared by every matching element so
   a restyle stays in one place:
   • Panel — the white .block-card (payment, the address & method section boxes,
     the summary). One padding/border/shadow, retune globally here.
   • Chip  — the grey selectable option (address card + shipping-method row):
     white + black border when selected, with a shared top-right corner radio. */
#checkout .payment-method {
    position: relative;
    margin: 0 0 12px;
    line-height: 1.5;
    font-size: 14px;
}

#checkout .payment-method._active {
    border-color: #111;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
}

/* Amasty indents the payment fields (0 20px 0 45px to clear the radio) and adds a
   20px bottom pad — drop both so the fields use the full card width and the foot
   stays tight, matching the other cards. */
#checkout .payment-method .payment-method-content,
#checkout .payment-method._active .payment-method-content {
    padding: 0;
}

/* Payment-method radio: Luma draws a custom blue radio on label::before (the
   native input is clipped). Recolour it to theme black + a filled dot when
   checked, and drop the blue glow — consistent with the rest of the checkout. */
#checkout .payment-method-title label::before {
    border-color: #000;
    box-shadow: none;
}

#checkout .payment-method-title input.radio:checked + label::before {
    border-color: #000;
    background-color: #000;
    box-shadow: inset 0 0 0 3px #fff;
}

/* Drop the label's 20px indent so the method title sits flush with the rest of
   the card content (the radio is an inline label::before, so it shifts with it —
   no overlap). */
#checkout .payment-method-title .label {
    padding: 0;
}

/* Column 2 stacks two sections (shipping method, then payment); give the second
   one breathing room so the Payment eyebrow doesn't touch the method card.
   Amasty zeroes step-container margins with !important, so this must match it. */
#checkout .amcheckout-column > .amcheckout-step-container + .amcheckout-step-container {
    margin-top: 26px !important;
}

/* Panel — one rule for every white card: payment, the address & method section
   boxes (the eyebrow sits above, the grey chips inside), and the summary. */
#checkout .payment-method,
#checkout #shipping .step-content,
#checkout #opc-shipping_method .step-content,
#checkout .opc-block-summary .step-content {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: var(--card-radius, 16px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
    padding: 16px;
}

/* Amasty wraps each card's content in .amcheckout-wrapper with its own padding —
   uneven across cards (20px 0 on address/method, 20px all round on summary).
   Zero it so every card's content sits at the same 16px card padding on all four
   sides, and the panels read identically. */
#checkout .amcheckout-wrapper {
    padding: 0;
}

/* Chip — one rule for both selectable option types (address card + method row).
   Selected / hover / corner-radio are the grouped rules just below. */
#checkout .shipping-address-item,
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method {
    position: relative;
    background: #f6f7f9;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    margin: 0 0 10px;
    cursor: pointer;
    line-height: 1.4;
}

/* Address chip text inset — room for the corner radio. */
#checkout .shipping-address-item {
    padding: 16px 46px 16px 16px;
    font-size: 14px;
}

/* Selected option (address OR method) — identical chrome: white, black border,
   soft shadow. The ✓ radio is the shared ::after rule below. */
#checkout .shipping-address-item.selected-item,
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method.-selected {
    background: #fff;
    border-color: #111;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---- COL1: shipping address ------------------------------------------------- */
/* Address links read as quiet underline links. */
#checkout .shipping-address-item a {
    color: #111;
    font-size: 0.9em;
    text-decoration: underline;
    border: 0;
    padding: 0;
    word-spacing: normal;
}

/* Whole-card selection (Forward Order dispatch-window pattern): the whole card
   is the click target and a corner radio shows the selected state — no button.
   The grey-chip + selected surface live with the card-surface rules above.
   Hover is shared with the method options (identical styles): tint + lift. */
#checkout .shipping-address-item:not(.selected-item):hover,
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method:not(.-selected):hover {
    background: #eef0f3;
    border-color: #d8dbe2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#checkout .shipping-address-item .action-select-shipping-item {
    display: none; /* replaced by whole-card click */
}

/* Corner radio (address + method): top-right hollow transparent ring → solid
   black with a white ✓ when selected. Shared so both option types are uniform. */
#checkout .shipping-address-item::after,
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid #111;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

#checkout .shipping-address-item.selected-item::after,
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method.-selected::after {
    content: "\2713";
    background: #111;
    color: #fff;
}

/* Only the saved-address list is height-capped (it can be long); the eyebrow +
   New Address button stay put while the cards scroll. */
#checkout #shipping .shipping-address-items {
    max-height: 800px;
    overflow-y: auto;
    padding-right: 6px;
}

/* Default-address chip → small neutral status pill, pinned to the card's
   top-right (the raw tag renders tiny and inline otherwise). */
#checkout .shipping-address-item .default-shipping-tag {
    position: absolute;
    top: 14px;
    right: 46px; /* sits just left of the corner radio */
    margin: 0;
    padding: 3px 12px;
    background: #f0f0f0;
    color: var(--status-neutral, #6b7280);
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* "New Address" → dark theme pill (bg/colour from the global .action rule), sized
   to the same 50px min-height as the Pay Now CTA, with clear space above it. */
#checkout .action.action-show-popup.-new-address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 600;
}

/* ---- Form controls (new/inline address, payment, order attributes) ---------- */
#checkout .fieldset > .field .control input.input-text,
#checkout .fieldset > .field .control select,
#checkout .fieldset > .field .control textarea,
#checkout .order-attributes input.input-text,
#checkout .order-attributes textarea,
#checkout .payment-method-content input.input-text,
#checkout .payment-method-content select {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: var(--radius-control, 8px);
    padding: 6px 14px;
    box-shadow: none;
}

#checkout .order-attributes textarea,
#checkout .fieldset > .field .control textarea {
    height: auto;
    min-height: 64px;
    padding-top: 10px;
}

#checkout .cvv .input-text {
    width: 70px;
}

/* Braintree credit-card fields are iframes inside .hosted-control divs (not
   input.input-text), so they need their own control styling. */
#checkout .hosted-control {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: var(--radius-control, 8px);
    padding: 4px 14px;
    background: #fff;
}

/* Card-number field: keep the detected-brand icon inside the field on the LEFT
   (Braintree's native spot) and indent the digits past it so they're never
   covered. */
#checkout .braintree-card-control {
    position: relative;
    display: block;
}

#checkout .braintree-card-control .braintree-credit-card-selected {
    left: 12px;
    right: auto;
}

#checkout .braintree-card-control .hosted-control {
    display: block;
    width: 100%;
    padding-left: 52px; /* clear the ~38px brand icon at left:12px */
}

#checkout .cvv .hosted-control.hosted-cid {
    width: 110px;
}

/* Braintree renders each field's error text persistently, reserving ~38px below
   every card field. Show it only once the field is actually invalid. */
#checkout .hosted-error {
    display: none;
}

#checkout .hosted-control.braintree-hosted-fields-invalid + .hosted-error {
    display: block;
}

/* Billing-address block (only populated when billing differs from shipping).
   No margin — its bottom margin otherwise escapes the content box and leaves
   ~20px of dead space at the card's foot when billing = shipping. */
#checkout .payment-method-billing-address {
    margin: 0;
}

/* Billing-address form actions (Update / Cancel — shown when "My billing and
   shipping address are the same" is unticked). Magento ships them unstyled; give
   them the theme button look: Update = solid dark, Cancel = quiet bordered. */
#checkout .payment-method-billing-address .action-update,
#checkout .payment-method-billing-address .action-cancel {
    min-height: 40px;
    padding: 0 22px;
    border-radius: 999px;  /* pill — matches the checkout's Pay Now CTA, not the square portal buttons */
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
}
/* Both buttons sit in the .primary wrapper, so the theme paints them solid dark;
   override (with !important, like the CTA) to keep Cancel as a quiet secondary. */
#checkout .payment-method-billing-address .action-update {
    background: #000 !important;
    border: 1px solid #000;
    color: #fff !important;
}
#checkout .payment-method-billing-address .action-update:hover {
    background: #333 !important;
    border-color: #333;
}
#checkout .payment-method-billing-address .action-cancel {
    margin-left: 8px;
    background: #fff !important;
    border: 1px solid var(--border-color__base, #ccc);
    color: #111 !important;
}
#checkout .payment-method-billing-address .action-cancel:hover {
    border-color: #111;
}

/* Tighten the Braintree card form so the payment card has no dead space below
   the last field. CVV is the last VISIBLE field — the relocated place-order
   toolbar and the (hidden) billing-address select trail it, so collapse those. */
#checkout .payment-method-content .fieldset {
    margin-bottom: 0;
}

#checkout .payment-method-content .fieldset > .field {
    margin-bottom: 12px;
}

#checkout .payment-method-content .fieldset > .field.cvv {
    margin-bottom: 0;
}

/* Same specificity as the .field rule above (and later), so these hidden
   trailing rows actually lose their margins — otherwise their collapsed margin
   escapes and leaves ~20px of dead space at the card foot. */
#checkout .payment-method-content .fieldset > .actions-toolbar,
#checkout .payment-method-content .fieldset > .field-select-billing {
    margin: 0;
}

/* ---- COL2: shipping method -------------------------------------------------- */
/* Method rows reuse the shared Chip chrome + corner radio (defined above); the
   row is already whole-row clickable and gets .-selected. Only the table reset
   and the row's internal layout live here. */
#checkout .table-checkout-shipping-method thead {
    display: none;
}

#checkout .table-checkout-shipping-method .col-1.col-method,
#checkout .table-checkout-shipping-method input.radio,
#checkout .table-checkout-shipping-method .amcheckout-label.-radio {
    display: none;
}

/* Method row uses the shared Chip chrome; only layout differs — equal 16px side
   padding, title on line 1, price right-aligned on its own line below. */
#checkout .table-checkout-shipping-method tbody tr.amcheckout-method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 16px;
}

#checkout .table-checkout-shipping-method td {
    border: 0;
    padding: 0;
}

/* Title takes line 1 (kept clear of the top-right radio); price drops to its own
   right-aligned line below, so the left/right margins read balanced. */
#checkout .table-checkout-shipping-method .col.col-method {
    order: 1;
    flex: 1 1 100%;
    padding-right: 30px; /* clear the top-right corner radio on line 1 */
    /* Match the body text of the other cards (address/payment 14px/400) rather
       than the heavier 16px/600 it shipped with. */
    font-size: 14px;
    font-weight: 400;
}

#checkout .table-checkout-shipping-method .col-comment {
    order: 1;
    flex: 0 0 auto;
}

#checkout .table-checkout-shipping-method .col-price {
    order: 2;
    flex: 0 0 100%;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* "No quotes" / generic checkout notice → quiet neutral note, no left accent. */
#checkout .no-quotes-block,
#checkout .message.notice {
    background: #eef1f5;
    border: 1px solid #e0e4ea;
    border-radius: var(--radius-control, 8px);
    color: var(--status-neutral, #6b7280);
    padding: 12px 16px;
}

/* ---- COL3: order summary — eyebrow ABOVE the card (matches other columns) --- */
/* summary.html is .opc-block-summary > [p.step-title, div.step-content], so the
   card is the .step-content and the title sits above it as the eyebrow. */
#checkout .amcheckout-step-container.-summary,
#checkout .opc-block-summary {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
/* (.opc-block-summary .step-content is styled by the shared Panel rule above.) */

/* Drop the trailing margin on the last block inside the summary (the totals
   table) so its bottom inset matches the 16px card padding like the other cards. */
#checkout .opc-block-summary .amcheckout-wrapper > :last-child {
    margin-bottom: 0;
}

/* Agreements + place-order sit below the summary card. */
#checkout .amcheckout-step-container.-summary .amcheckout-additional-options,
#checkout .amcheckout-step-container.-summary .checkout-payment-method.submit {
    margin-top: 14px;
}

/* "N Items in Cart" — the collapsible toggle heading for the line-items block.
   Styled as a single review-stat tile (Portal dealers.css .review-stat) so the
   summary head echoes the SO/FO review section: the qty as a big figure over a
   small uppercase label, in a bordered #fafafa box. The Amasty caret on the
   .title row is untouched (still the toggle). */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] strong {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #ececec;
    border-radius: var(--radius-control, 8px);
    background: #fafafa;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
}

/* The leading qty span is the big figure; the "Items in Cart" span stays the
   small uppercase label above it (KO renders both as <span> in the strong). */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] strong > span:first-child {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
}

/* Toggle row: the tile on the left, a round caret button on the right.
   [data-role="title"] is the collapsible's click target, so the whole row is
   the affordance (cursor + hover apply to it, not just the tile). */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

/* Suppress Luma's inherited chevron (a ::after on > .title) — we draw our own. */
#checkout .opc-block-summary .items-in-cart > .title::before,
#checkout .opc-block-summary .items-in-cart > .title::after {
    content: none;
}

#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] strong {
    flex: 0 0 auto;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Caret — 28px black circle (minicart-close size) with a centred FA chevron,
   drawn on ::after so it needs no extra markup; rotates 180deg when the block is
   expanded (.active is amCheckoutCollapsible's openedState; aria-expanded mirrors
   it, so track both). */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]::after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111;
    color: #fff;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#checkout .opc-block-summary .items-in-cart.active > .title [data-role="title"]::after,
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"][aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* The row reads as one clickable control: the tile lifts with the theme's
   canonical selectable-card hover and the caret lightens. */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]:hover strong {
    background: #eef0f3;
    border-color: #d8dbe2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]:hover::after {
    background: #333;
}

/* Summary line items → compact minicart-style rows, with a small thumbnail
   (the dropdown minicart hides its photo; here we keep it). */
#checkout .opc-block-summary .minicart-items .product-item {
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}

#checkout .opc-block-summary .minicart-items .product-item:last-child {
    border-bottom: 0;
}

#checkout .opc-block-summary .minicart-items .product-item .product {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Thumbnail — override the KO inline 75px sizing to a compact 52px tile. */
#checkout .opc-block-summary .product-image-container {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    border: 1px solid #e3e4e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

#checkout .opc-block-summary .product-image-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

#checkout .opc-block-summary .product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Details: name on top, a quiet size/qty meta line, then price. */
#checkout .opc-block-summary .product-item-details {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/* Two-line compact row like the minicart: name on top, Qty + price on the
   bottom. The minicart no longer shows size/options, so drop them here too. */
#checkout .opc-block-summary .product-item-inner {
    position: relative;
    padding-right: 70px; /* room for the price pinned bottom-right */
    min-height: 38px;
}

#checkout .opc-block-summary .product-item-name {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SKU + Qty share the quiet meta line under the name (minicart parity). */
#checkout .opc-block-summary .product-item-sku {
    display: inline-block;
    margin: 4px 10px 0 0;
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    color: #757575;
}

#checkout .opc-block-summary .details-qty.amcheckout-qty {
    display: inline-block;
    margin: 4px 0 0;
    font-size: 12px;
    color: #757575;
}

#checkout .opc-block-summary .product.options,
#checkout .opc-block-summary .item-options {
    display: none; /* minicart parity — no size/options clutter */
}

#checkout .opc-block-summary .cart-price {
    position: absolute;
    right: 0;
    bottom: 0;
}

#checkout .opc-block-summary .cart-price .price {
    font-size: 13px;
    font-weight: 600;
}

/* Bound the items list so the sticky summary keeps Totals + Pay in view even
   when the (collapsed-by-default) items block is expanded. */
#checkout .opc-block-summary .minicart-items-wrapper {
    max-height: 300px;
    overflow-y: auto;
}

/* Totals: left-align the amount column (like the SO/FO order forms) so every
   "$" and first digit line up vertically. As a table, the amount column shares
   one edge across rows; left-aligning it within a fixed width does the rest. */
#checkout .table-totals .mark,
#checkout .table-totals .amount {
    text-align: left;
}

#checkout .table-totals .amount {
    width: 130px;
    font-weight: bold;
    /* Line-item amount cells carry a 14px left inset; the grand-total cell ships
       with 0, so its $ sat 14px left of the rest. Set it on every amount cell so
       the Order Total lines up with the others. */
    padding-left: 14px;
}

/* Emphasise the Order Total — clearly larger than the 14px (1.4rem) line rows. */
#checkout .table-totals .grand.totals .mark,
#checkout .table-totals .grand.totals .amount strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}

#checkout .table-totals .totals.discount .amount,
#checkout .table-totals .totals.discount .price {
    color: var(--status-ok, #2e7d32);
    font-weight: 600;
}

/* Dropship fee — a gold "?" helper (FA Pro question-circle; the theme ships no
   luma-icons font) that reveals the reason + a mailto link on hover/focus, like
   the CVV helper. Gold (--status-warning) on the icon and the amount draws the
   dealer's eye to the added fee — same coloured-bold treatment as the discount
   row, gold instead of green. */
#checkout .table-totals .custom-fee .dropship-fee-tip {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}
#checkout .table-totals .custom-fee .dropship-fee-help {
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    line-height: 1;
}

#checkout .table-totals .custom-fee .dropship-fee-help::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f059";
    font-size: 16px;
    color: var(--status-warning, #c77f00);
}

#checkout .table-totals .custom-fee .dropship-fee-help:hover::before,
#checkout .table-totals .custom-fee .dropship-fee-tip:focus-within .dropship-fee-help::before {
    color: var(--status-elevated, #cf6a1f);
}

/* Reason popover — theme block-card look; clicking the "?" (focus) keeps it open
   so the mailto link is reachable. */
#checkout .table-totals .custom-fee .dropship-fee-pop {
    position: absolute;
    left: 0;
    /* Sit flush under the icon (no dead gap) so a hover→link slide stays open;
       the visual offset comes from the popover's own top padding. */
    top: 100%;
    z-index: 5;
    width: 230px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-color__base, #e3e4e8);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #555;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

#checkout .table-totals .custom-fee .dropship-fee-tip:hover .dropship-fee-pop,
#checkout .table-totals .custom-fee .dropship-fee-tip:focus-within .dropship-fee-pop {
    opacity: 1;
    visibility: visible;
}

#checkout .table-totals .custom-fee .dropship-fee-pop a {
    color: var(--status-warning, #c77f00);
    text-decoration: underline;
}

/* Amount in gold + bold, mirroring the discount row's coloured emphasis. */
#checkout .table-totals .custom-fee .amount,
#checkout .table-totals .custom-fee .price {
    color: var(--status-warning, #c77f00);
    font-weight: 600;
}

/* ============================================================================
   Inverted Order Summary card — mirrors the dashboard's dark "Total Outstanding"
   feature card (.dash-card--dark, dashboard-v2.css): a slate→near-black gradient
   with white text, muted secondaries and lifted status tints so everything reads
   on dark. Scoped to the summary card only; the other checkout cards stay light.
   ============================================================================ */
#checkout .opc-block-summary .step-content {
    /* A lighter dark-slate gradient than the dashboard hero (which falls to pure
       black) — this card is much taller, so it stays in the readable slate range
       top-to-bottom instead of going near-black. */
    background: linear-gradient(150deg, #3d434d 0%, #282d35 100%);
    border-color: transparent;
    color: #fff;
}

/* Totals labels + amounts → white. */
#checkout .opc-block-summary .table-totals .mark,
#checkout .opc-block-summary .table-totals .amount,
#checkout .opc-block-summary .table-totals .amount .price,
#checkout .opc-block-summary .table-totals td,
#checkout .opc-block-summary .table-totals th {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Order Total stays white + bold (override the light-card #111). */
#checkout .opc-block-summary .table-totals .grand.totals .mark,
#checkout .opc-block-summary .table-totals .grand.totals .amount strong {
    color: #fff;
}

/* Status tints lift on dark (match .dash-card--dark): discount green, dropship gold. */
#checkout .opc-block-summary .table-totals .totals.discount .amount,
#checkout .opc-block-summary .table-totals .totals.discount .price {
    color: #4ade80;
}

#checkout .opc-block-summary .table-totals .custom-fee .amount,
#checkout .opc-block-summary .table-totals .custom-fee .price {
    color: #fbbf24;
}

#checkout .opc-block-summary .table-totals .custom-fee .dropship-fee-help::before {
    color: #fbbf24;
}

#checkout .opc-block-summary .table-totals .custom-fee .dropship-fee-help:hover::before,
#checkout .opc-block-summary .table-totals .custom-fee .dropship-fee-tip:focus-within .dropship-fee-help::before {
    color: #fde68a;
}

/* Items-in-cart review-stat tile → a translucent white tile (dash badge tone). */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] strong {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
}

#checkout .opc-block-summary .items-in-cart > .title [data-role="title"] strong > span:first-child {
    color: #fff;
}

#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]:hover strong {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* Caret button → translucent-white circle (dash badge), white chevron. */
#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]::after {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

#checkout .opc-block-summary .items-in-cart > .title [data-role="title"]:hover::after {
    background: rgba(255, 255, 255, 0.28);
}

/* Line items → white name, muted meta, light separators; keep white thumb tiles. */
#checkout .opc-block-summary .minicart-items .product-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#checkout .opc-block-summary .product-item-name,
#checkout .opc-block-summary .product-item-name a,
#checkout .opc-block-summary .cart-price .price {
    color: #fff;
}

#checkout .opc-block-summary .product-item-sku,
#checkout .opc-block-summary .details-qty.amcheckout-qty {
    color: rgba(255, 255, 255, 0.8);
}

#checkout .opc-block-summary .product-image-container {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Purchase Order # / Order Note labels + the shipping-method title ship
   theme-muted (~#555) — nearly invisible on dark. Lift to a legible light tone.
   The field labels wrap their text in a <span> with its own colour, so the span
   must be targeted too. */
#checkout .opc-block-summary label,
#checkout .opc-block-summary label span,
#checkout .opc-block-summary .field .label,
#checkout .opc-block-summary .field .label span,
#checkout .opc-block-summary .field-name,
#checkout .opc-block-summary .table-totals .value {
    color: rgba(255, 255, 255, 0.85);
}

/* White field boxes on the dark summary — translucent-dark inputs read as
   invisible against the dark card, so these stay light with dark text (mirrors
   the Make Payment card fields). */
#checkout .opc-block-summary input[type="text"],
#checkout .opc-block-summary textarea {
    background: #fff;
    border-color: #ccc;
    color: #111;
}

/* The note textarea shipped at 14px while the PO# input is 16px, so the typed
   text looked smaller — match it to the PO# field. */
#checkout .opc-block-summary textarea {
    font-size: 16px;
}

#checkout .opc-block-summary input[type="text"]::placeholder,
#checkout .opc-block-summary textarea::placeholder {
    color: #999;
}

#checkout .opc-block-summary input[type="text"]:focus,
#checkout .opc-block-summary textarea:focus {
    border-color: #000;
}

#checkout .order-attributes .label,
#checkout .order-attributes-form .field > .label {
    color: #555;
    font-weight: 600;
}

/* ---- Primary CTA: solid black pill, full width ------------------------------
   Scoped to .amasty (the place-order button) so it never hits the cart-item
   "Update" or per-method submit buttons, which share .action.primary.checkout.
   Only the background needs !important (the theme's cyan highlight uses it). */
#checkout button.action.primary.checkout.amasty {
    display: flex;
    width: 100%;
    min-height: 58px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    background: #000 !important;
    border: 1px solid #000;
    border-radius: 999px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* Text is in a <span>; the theme colours it, so force white over the black pill. */
#checkout button.action.primary.checkout.amasty,
#checkout button.action.primary.checkout.amasty span {
    color: #fff !important;
}

/* Follow the theme's standard primary hover: lighten to @color-primary__hover
   (lighten(#000, 20%) = #333) over the theme's transition — no shadow/transform. */
#checkout button.action.primary.checkout.amasty:hover {
    background: #333 !important;
    border-color: #333;
}

#checkout button.action.primary.checkout.amasty[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Pay Now "submitting" feedback — mirrors the SO/FO order forms: dim the button
   and play the theme shimmer across it (never a spinner). The .is-submitting
   class is toggled by the inline submit-shimmer script in onepage.phtml on click,
   and overrides the [disabled] dim above so the shimmer stays readable. */
#checkout button.action.primary.checkout.amasty.is-submitting {
    position: relative;
    overflow: hidden;
    opacity: 0.7;
}

#checkout button.action.primary.checkout.amasty.is-submitting::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #checkout button.action.primary.checkout.amasty.is-submitting::after {
        animation: none;
    }
}

/* ---- Loading indicators ----------------------------------------------------
   Initial load = skeleton (#checkout-loader). After that, only the SECTION
   loaders show, each as a quiet scoped shimmer (no spinner) so the dealer sees
   exactly which section is recalculating:
     • order-summary / totals (e.g. after a shipping-method or qty change)
     • shipping-method rates
   The full-page veils are suppressed because they overlay already-rendered
   content and only add perceived wait:
     • the body loader (#html-body > .loading-mask, position:fixed)
     • the #checkout full-screen loader (full-screen-loader.js → processStart on
       #checkout, stopped at rjsResolver, so it lingers)
     • the payment/Braintree overlay
   The skeleton-shimmer keyframe is global. */

/* Suppress the full-page veils + payment overlay. */
.checkout-index-index > .loading-mask,
#checkout > .loading-mask:not(#checkout-loader),
#checkout .payment-method .loading-mask {
    display: none !important;
}

/* Section loaders → quiet scoped shimmer. */
#checkout .opc-block-summary .loading-mask,
#checkout #opc-shipping_method .loading-mask {
    overflow: hidden;
    background: rgba(247, 248, 250, 0.6);
}

#checkout .opc-block-summary .loading-mask .loader,
#checkout .opc-block-summary .loading-mask .loader > img,
#checkout .opc-block-summary .loading-mask .loader > p,
#checkout #opc-shipping_method .loading-mask .loader,
#checkout #opc-shipping_method .loading-mask .loader > img,
#checkout #opc-shipping_method .loading-mask .loader > p {
    display: none;
}

#checkout .opc-block-summary .loading-mask::after,
#checkout #opc-shipping_method .loading-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---- Layout: sticky summary on desktop -------------------------------------
   Amasty's JS sticky widget only wires up for the 2-column layout, so the
   3-column summary gets CSS stickiness instead. */
@media (min-width: 1024px) {
    #checkout .amcheckout-main-container.-layout-3columns {
        align-items: flex-start;
    }

    #checkout .amcheckout-main-container.-layout-3columns > .amcheckout-column:nth-of-type(3) {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}