/* Apex Cosmetics checkout, order-complete, payment-failed, bank-link and cart drawer (round 17): the approved preview
   design (Preview/Pages/CheckoutPage.razor, Site/BagDrawer.razor, the GuestOrderPage confirmation mode and
   Preview/assets/preview-site.css) on the real components. Loaded globally after app.css, the scoped-CSS bundle and
   cosmetics-storefront.css; every rule is scoped to .cs-checkout (the page bodies) or .cart-sidebar (the drawer), so no
   other page is restyled. Presentation only: no behaviour, price or rule changes.
   Tokens: ice blue #f2f7fc canvas (round 31; was ivory #faf9f6), white cards, ink #16213a text, muted #5d6b82 (5.3:1 on white), cobalt #1f55d6 buttons. */

.cs-checkout, .cart-sidebar {
    --cs-ice: #f2f7fc;      /* round 31: page / section background (was warm ivory #faf9f6) */
    --cs-white: #ffffff;
    --cs-navy: #0b1f3a;
    --cs-ink: #16213a;
    --cs-muted: #5d6b82;
    --cs-line: #dce5f0;     /* round 31: cool hairline (was warm #e4e2db) */
    --cs-field: #c4cad6;
    --cs-tint: #eef2f8;
    --cs-cobalt: #1f55d6;
    --cs-cobalt-dark: #1743b0;
    --cs-ok: #15803d;
    --cs-ok-ink: #14532d;
    --cs-danger: #b42318;
    --cs-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cs-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
}

/* ---------- Page canvas ---------- */
/* app.css gives .content an 81px top padding for the old fixed navbar; in the storefront shell the header and breadcrumbs
   are in the flow, so that padding is a black band above the page. Only for the pages this file owns. */
.cs-shell #main-content:has(> .cs-checkout) { padding-top: 0 !important; margin-top: 0 !important; background: #f2f7fc; }
.cs-checkout { background: var(--cs-ice); color: var(--cs-ink); overflow-x: clip; min-height: 70vh; padding: 28px 0 72px; font-size: 16px; line-height: 1.55; }
.cs-checkout, .cs-checkout :not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa):not(.bi):not([class^="bi-"]) { font-family: var(--cs-sans); }
.cs-checkout-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.cs-checkout-narrow { max-width: 760px; }
.cs-checkout h1 { margin: 0 0 6px; font-family: var(--cs-serif) !important; font-weight: 500; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; color: var(--cs-ink); }
.cs-checkout h2, .cs-checkout h3 { font-family: var(--cs-serif) !important; font-weight: 500; color: var(--cs-ink); letter-spacing: -.01em; }
.cs-checkout a:not(.cs-btn):not(.btn) { color: var(--cs-cobalt-dark); }
.cs-checkout :focus-visible { outline: 2px solid var(--cs-cobalt) !important; outline-offset: 2px; box-shadow: none !important; }
.cs-checkout-lead { color: var(--cs-muted); margin: 0 0 18px; }

/* Legacy utility classes inside the checkout read on the light canvas */
.cs-checkout .text-white, .cs-checkout .text-black, .cs-checkout .text-dark { color: var(--cs-ink) !important; }
.cs-checkout .text-muted, .cs-checkout .text-black-50, .cs-checkout .text-secondary { color: var(--cs-muted) !important; }
.cs-checkout .text-success { color: var(--cs-ok) !important; }
.cs-checkout .text-danger { color: var(--cs-danger) !important; }
.cs-checkout .text-warning { color: #8a5300 !important; }
.cs-checkout .text-primary { color: var(--cs-cobalt-dark) !important; }
.cs-checkout .inter-extrabold, .cs-checkout .inter-bold { font-weight: 700; }
.cs-checkout .inter-thin, .cs-checkout .inter-regular { font-weight: 400; color: var(--cs-ink); }

/* Section titles: serif, sentence case, as the preview's fieldset legends */
.cs-checkout .cs-co-title, .cs-checkout .card > h6:first-child, .cs-checkout .card h6.text-uppercase,
.cs-checkout h5.inter-extrabold:not(.text-truncate) {
    margin-bottom: 10px !important; font-family: var(--cs-serif) !important; font-weight: 500 !important; font-size: 21px !important;
    letter-spacing: -.01em; text-transform: none !important; color: var(--cs-ink) !important;
}

/* ---------- One-page checkout (round 24) ----------
   Desktop: the form on the left, ONE sticky order summary on the right. Phone: one column; the summary is a compact bar
   (closed by default, total shown) that opens. The summary comes first in the page order (phone: at the top). */
.cs-op-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 32px; align-items: start; margin-top: 18px; }
.cs-op-main { grid-column: 1; grid-row: 1; min-width: 0; }
.cs-op-summary { grid-column: 2; grid-row: 1; position: sticky; top: 88px; /* below the sticky site header */ display: flex; flex-direction: column; gap: 14px; padding: 20px;
    border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); color: var(--cs-ink); max-height: calc(100vh - 104px); overflow-y: auto; }
.cs-checkout .cs-op-summary-title { margin: 0; font-size: 22px; }
.cs-op-summary-toggle { display: none; }
.cs-op-section { margin: 0 0 16px; padding: 20px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); }
.cs-checkout .cs-op-section-title { margin: 0 0 12px; font-size: 22px; }
.cs-checkout .cs-op-subtitle { float: none; width: auto; margin: 0 0 8px; padding: 0; font-family: var(--cs-sans) !important; font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.cs-op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.cs-op-field { grid-column: span 2; min-width: 0; }
.cs-op-field.is-wide { grid-column: 1 / -1; }
.cs-op-field.is-narrow { grid-column: span 1; }
.cs-checkout .cs-op-field .form-label { display: block; margin: 0 0 4px; }
.cs-op-help { margin: 4px 0 0; color: var(--cs-muted); font-size: 13px; }
.cs-op-field-error { margin: 4px 0 0; color: var(--cs-danger); font-size: 13px; font-weight: 600; }
.cs-checkout .form-control.is-invalid, .cs-checkout .form-select.is-invalid { border-color: var(--cs-danger) !important; background-image: none; }
.cs-op-guest-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--cs-tint); font-size: 14px; }
.cs-op-inline-status { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--cs-tint); font-size: 14px; }
.cs-op-inline-note { margin: 10px 0 0; color: var(--cs-ink); font-size: 14px; }
.cs-op-suggest { top: 100%; left: 0; z-index: 2000; max-height: 220px; overflow-y: auto; }
.cs-op-rates, .cs-op-methods, .cs-op-billing { margin: 0; padding: 0; border: 0; min-width: 0; }
.cs-op-rate { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--cs-line); border-radius: 10px; cursor: pointer; }
.cs-op-rate.is-selected { border-color: var(--cs-cobalt); box-shadow: 0 0 0 1px var(--cs-cobalt) inset; }
.cs-op-rate .form-check-input { flex: 0 0 auto; margin: 0; }
.cs-op-rate-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cs-op-rate-name { font-weight: 600; }
.cs-op-rate-eta { color: var(--cs-muted); font-size: 13px; }
.cs-op-rate-price { font-weight: 600; white-space: nowrap; }
.cs-op-check { padding-left: 1.8em; }
.cs-op-billing { margin-top: 12px; }
.cs-op-pay { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cs-line); }
/* app.css animates "all" on .place-order-btn, which also fades the focus ring in from white (invisible on the page for
   250 ms); only the colour change is animated here. */
.cs-checkout .cs-op-pay .place-order-btn { transition: background-color .15s ease; }
@media (prefers-reduced-motion: reduce) { .cs-checkout .cs-op-pay .place-order-btn { transition: none; } }
.cs-checkout .cs-op-pay .place-order-btn:focus-visible { outline: 3px solid #0b1f3a !important; outline-color: #0b1f3a !important; outline-offset: 3px; box-shadow: none !important; }
.cs-op-pay-status { margin: 8px 0 0; color: var(--cs-ink); font-size: 14px; }
.cs-op-pay-status:empty { display: none; }
.cs-op-lines { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cs-op-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cs-op-line-photo { position: relative; display: block; width: 56px; height: 56px; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-ice); }
.cs-op-line-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.cs-op-line-qty-badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--cs-navy); color: var(--cs-white); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.cs-op-line-text { display: flex; flex-direction: column; min-width: 0; }
.cs-op-line-name { font-weight: 600; overflow-wrap: anywhere; }
.cs-op-line-meta { color: var(--cs-muted); font-size: 13px; }
.cs-op-line-saving { color: var(--cs-ok-ink); font-size: 13px; font-weight: 600; }
.cs-op-line-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-weight: 600; }
.cs-op-line-price s { color: var(--cs-muted); font-weight: 400; font-size: 13px; }
.cs-op-discount { padding-top: 12px; border-top: 1px solid var(--cs-line); }
.cs-op-disclosure { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--cs-cobalt-dark); font-weight: 600; text-decoration: underline; }
.cs-op-discount-panel { margin-top: 6px; }
.cs-op-chevron { display: inline-block; width: 8px; height: 8px; margin: 0 6px 3px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s ease; }
.cs-op-chevron.is-open { transform: rotate(-135deg); margin-bottom: -3px; }
@media (prefers-reduced-motion: reduce) { .cs-op-chevron { transition: none; } }
.cs-op-applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; }
.cs-op-savings { padding: 10px 12px; border: 1px solid #b7dfc4; border-radius: 8px; background: #e8f5ec; color: var(--cs-ok-ink); font-size: 14px; }
.cs-op-savings .text-muted { color: #24553a !important; }
.cs-op-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--cs-tint); color: var(--cs-ink); }
.cs-op-totals { margin: 0; padding-top: 12px; border-top: 1px solid var(--cs-line); font-size: 15px; }
.cs-op-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cs-op-totals dt { font-weight: 400; color: var(--cs-ink); }
.cs-op-totals dd { margin: 0; text-align: right; color: var(--cs-ink); }
.cs-op-totals .is-discount dt, .cs-op-totals .is-discount dd { color: var(--cs-ok-ink); }
.cs-op-totals .cs-op-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--cs-line); font-size: 18px; }
.cs-op-totals .cs-op-total dt, .cs-op-totals .cs-op-total dd { font-weight: 700; }

@media (max-width: 1023.98px) {
    .cs-op-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
    .cs-op-main, .cs-op-summary { grid-column: 1; grid-row: auto; }
    .cs-op-summary { position: static; max-height: none; overflow: visible; padding: 0; gap: 10px; border: 0; background: transparent; }
    .cs-checkout .cs-op-summary-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cs-op-summary-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px;
        border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-white); color: var(--cs-cobalt-dark); font-weight: 600; text-align: left; }
    .cs-op-summary-toggle-total { display: flex; flex-direction: column; align-items: flex-end; color: var(--cs-ink); font-size: 17px; font-weight: 700; }
    .cs-op-summary-toggle-kind { color: var(--cs-muted); font-size: 12px; font-weight: 600; }
    .cs-op-summary-body:not(.is-open) { display: none; }
    .cs-op-summary-body.is-open { padding: 14px; border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-white); }
    .cs-op-summary-totals.is-open .cs-op-totals { padding-top: 0; border-top: 0; }
    .cs-op-summary > .cs-op-discount { padding: 0 2px; border-top: 0; }
}
@media (max-width: 575.98px) {
    .cs-op-section { padding: 16px; }
    .cs-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-op-field, .cs-op-field.is-wide { grid-column: 1 / -1; }
    .cs-op-field.is-narrow { grid-column: span 1; }
}

/* ---------- Cards, fields, buttons ---------- */
.cs-checkout .card { background: var(--cs-white) !important; color: var(--cs-ink); border: 1px solid var(--cs-line) !important; border-radius: 12px !important; box-shadow: none !important; padding: 20px !important; }
.cs-checkout .checkout-section { margin-bottom: 16px; }
.cs-checkout .form-label, .cs-checkout .card .form-label, .cs-checkout label { color: var(--cs-ink); font-weight: 600; font-size: 14px; }
.cs-checkout .form-control, .cs-checkout .form-select, .cs-checkout .input-group-text {
    min-height: 44px; border: 1px solid var(--cs-field) !important; border-radius: 6px !important; background-color: var(--cs-white); color: var(--cs-ink); font-size: 15px;
}
.cs-checkout .input-group-text { background: var(--cs-tint); }
.cs-checkout .form-control::placeholder { color: #6b778c; opacity: 1; }
.cs-checkout .form-control:focus, .cs-checkout .form-select:focus { border-color: var(--cs-cobalt) !important; box-shadow: 0 0 0 3px rgba(31, 85, 214, .18) !important; }
.cs-checkout .form-check-input { border-color: #7a8599; }
.cs-checkout .form-check-input:checked { background-color: var(--cs-cobalt); border-color: var(--cs-cobalt); }
.cs-checkout .list-group-item { background: var(--cs-white); color: var(--cs-ink); border-color: var(--cs-line); }
.cs-checkout .list-group-item-action:hover { background: var(--cs-tint); }
.cs-checkout .place-order-btn, .cs-checkout .btn-primary, .cs-checkout .btn-dark, .cs-btn-cobalt-like {
    min-height: 48px; border: 0 !important; border-radius: 6px !important; background: var(--cs-cobalt) !important; color: var(--cs-white) !important;
    font-size: 16px; font-weight: 600; letter-spacing: .01em; text-transform: none !important;
}
.cs-checkout .place-order-btn:hover, .cs-checkout .btn-primary:hover, .cs-checkout .btn-dark:hover { background: var(--cs-cobalt-dark) !important; }
.cs-checkout .place-order-btn:disabled { background: #8ea3d8 !important; color: var(--cs-white) !important; opacity: 1; }
.cs-checkout .btn-outline-secondary, .cs-checkout .btn-outline-dark, .cs-checkout .btn-light {
    min-height: 44px; border: 1.5px solid var(--cs-cobalt) !important; border-radius: 6px !important; background: var(--cs-white) !important; color: var(--cs-cobalt-dark) !important; font-weight: 600;
}
.cs-checkout .btn-outline-danger { min-height: 34px; border-color: var(--cs-danger) !important; color: var(--cs-danger) !important; background: var(--cs-white) !important; }
.cs-checkout .btn-link { color: var(--cs-cobalt-dark) !important; }
.cs-checkout .loading-overlay { background: rgba(250, 249, 246, .88) !important; }
.cs-checkout .spinner-border { color: var(--cs-cobalt) !important; }

/* Messages */
.cs-checkout .alert { border-radius: 8px; }
.cs-checkout .alert-success { background: #e8f5ec !important; color: var(--cs-ok-ink) !important; border-color: #b7dfc4 !important; }
.cs-checkout .alert-info { background: #eef3fe !important; color: #173a8f !important; border-color: #c9d7f8 !important; }
.cs-checkout .alert-warning { background: #fef3c7 !important; color: #5b3a05 !important; border-color: #f2d98a !important; }
.cs-checkout .alert-danger { background: #fdecec !important; color: #8a1c1c !important; border-color: #f2b8b8 !important; }
.cs-checkout .alert-light { background: var(--cs-tint) !important; color: var(--cs-ink) !important; border-color: var(--cs-line) !important; }
.cs-checkout .alert * { color: inherit; }
.cs-checkout .alert a { color: var(--cs-cobalt-dark) !important; text-decoration: underline; }

/* Shipping: transparent costs, optional protection */
.cs-co-ship-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; background: var(--cs-tint); color: var(--cs-ink); font-size: 14px; }
.cs-co-ship-note strong { color: var(--cs-ink); }
.cs-checkout .cs-co-protection-label { color: var(--cs-ink) !important; font-size: 15px !important; font-weight: 600; text-transform: none !important; }

/* Order summary column */
.cs-checkout .order-summary-card, .cs-checkout .checkout-list-group .list-group-item { background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: 12px; box-shadow: none; }
.cs-checkout .order-summary-card hr { border-top-color: var(--cs-line); opacity: 1; }
.cs-checkout .summary-title, .cs-checkout .summary-total { color: var(--cs-ink); }
.cs-checkout .summary-meta { color: var(--cs-muted); }
.cs-checkout .summary-row.discount { color: var(--cs-ok); }
.cs-checkout .cs-co-totals { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); }
.cs-checkout .cs-co-totals hr { margin: 4px 0 !important; border-top: 1px solid var(--cs-line) !important; opacity: 1 !important; color: var(--cs-line) !important; }


/* Your order lines */
.cs-checkout .cart-item-card { background: var(--cs-white) !important; border: 1px solid var(--cs-line); border-radius: 10px; box-shadow: none !important; }
.cs-checkout .cart-item-card { flex-wrap: nowrap !important; gap: 10px; }
.cs-checkout .cart-item-card > div:first-child, .cs-checkout .cart-item-card .flex-grow-1 { flex: 1 1 auto !important; min-width: 0; }
.cs-checkout .cart-item-card > div:first-child { flex-wrap: nowrap !important; }
.cs-checkout .cart-item-card h5 { font-size: 15px !important; font-weight: 600 !important; font-family: var(--cs-sans) !important; text-transform: none !important; }
.cs-checkout .sale-tag { background: var(--cs-navy) !important; color: var(--cs-white) !important; }

/* Payment options */
.cs-checkout .payment-option.is-selected { border-color: var(--cs-cobalt) !important; }

/* ---------- Order complete / payment failed / bank link ---------- */
.cs-co-result { display: flex; flex-direction: column; gap: 16px; }
.cs-co-result-head { display: flex; align-items: center; gap: 12px; }
.cs-co-badge { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--cs-ok); color: var(--cs-white); font-size: 18px; }
.cs-co-badge.is-pending { background: #b45309; }
.cs-co-badge.is-failed { background: var(--cs-danger); }
.cs-co-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); color: var(--cs-ink); }
.cs-co-card h2 { margin: 0; font-size: 21px; }
.cs-co-card p { margin: 0; }
.cs-co-card.is-quiet { background: var(--cs-tint); }
.cs-co-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cs-co-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-co-code { padding: 10px; border: 2px dashed var(--cs-ok); border-radius: 10px; background: #f3faf5; color: var(--cs-ink); font-size: 20px; font-weight: 700; letter-spacing: 2px; text-align: center; }
.cs-co-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--cs-line); }
.cs-co-row:last-child { border-bottom: 0; }
.cs-co-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-co-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 6px; border: 1.5px solid var(--cs-cobalt); background: var(--cs-cobalt); color: var(--cs-white) !important; font-weight: 600; text-decoration: none !important; cursor: pointer; }
.cs-co-btn:hover { background: var(--cs-cobalt-dark); }
.cs-co-btn.is-outline { background: var(--cs-white); color: var(--cs-cobalt-dark) !important; }

/* ---------- Cart drawer (BagDrawer look) ---------- */
.cart-sidebar { background: var(--cs-white) !important; color: var(--cs-ink); box-shadow: -10px 0 40px rgba(7, 20, 43, .2) !important; }
.cart-sidebar, .cart-sidebar :not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa) { font-family: var(--cs-sans); }
.cart-sidebar .cart-header { border-bottom-color: var(--cs-line) !important; }
.cart-sidebar .cart-header h4, .cart-sidebar .cs-drawer-title { font-family: var(--cs-serif) !important; font-weight: 500 !important; font-size: 26px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cs-ink) !important; }
.cart-sidebar .close-btn { width: 44px; height: 44px; background: var(--cs-tint) !important; }
.cart-sidebar .close-btn i { color: var(--cs-ink) !important; }
.cart-sidebar h5, .cart-sidebar .inter-extrabold { color: var(--cs-ink); }
.cart-sidebar h5 { font-size: 15px !important; font-weight: 600 !important; }
.cart-sidebar small { color: var(--cs-muted); }
.cart-sidebar .cart-item-row { padding-bottom: 14px; border-bottom: 1px solid var(--cs-line); }
.cart-sidebar .custom-number-input { border: 1px solid var(--cs-line); }
.cart-sidebar .custom-number-input button { min-width: 34px; min-height: 34px; color: var(--cs-ink) !important; }
.cart-sidebar .btn-link { color: var(--cs-muted) !important; min-width: 34px; min-height: 34px; }
.cart-sidebar .cart-promo-banner { background: var(--cs-tint) !important; border-color: var(--cs-line) !important; }
.cart-sidebar .checkout-btn { min-height: 48px; border: 0 !important; border-radius: 6px !important; background: var(--cs-cobalt) !important; color: var(--cs-white) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .01em; text-transform: none !important; }
.cart-sidebar .checkout-btn:hover { background: var(--cs-cobalt-dark) !important; }
.cart-sidebar .cs-drawer-ship-note { margin: 6px 0 10px; color: var(--cs-muted); font-size: 13px; }
/* Round 19 (fees audit): every remaining charge named before checkout. */
.cart-sidebar .cs-drawer-fees { margin: 0 0 6px; font-size: 14px; }
.cart-sidebar .cs-drawer-fees > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cart-sidebar .cs-drawer-fees dt { font-weight: 500; color: var(--cs-ink); }
.cart-sidebar .cs-drawer-fees dd { margin: 0; color: var(--cs-ink); text-align: right; }
.cart-sidebar .cs-drawer-fees .cs-drawer-fees-total { border-top: 1px solid var(--cs-line); margin-top: 4px; padding-top: 6px; font-weight: 600; }
/* Round 19 (keyboard audit): visible focus in the drawer; the drawer itself only takes focus as a fallback. */
.cart-sidebar :focus-visible { outline: 2px solid var(--cs-cobalt) !important; outline-offset: 2px; box-shadow: none !important; }
.cart-sidebar:focus, .cart-sidebar:focus-visible { outline: none !important; }

@media (max-width: 1024px) {
    .cs-co-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .cs-checkout { padding-top: 18px; }
    .cs-checkout-inner { padding-left: 16px; padding-right: 16px; }
    .cs-checkout .card { padding: 16px !important; }
    .cs-checkout .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
}