/**
 * Cart page only: sections 12 (empty cart) and 13 (populated cart) of the theme stylesheet, moved out of css/main.css so
 * other pages stop downloading them (N-62, §14.2). Enqueued by farahat_enqueue_assets() when is_cart(), after main.css
 * and before rtl.css, so each rule keeps its place in the cascade: everything it followed in main.css it still follows,
 * and the main.css rules that came after it and name cart-like classes are all scoped to .fm-account__main,
 * .fm-checkout or .fmp-page, none of which renders on the cart (verified 2026-10-19).
 * The coupon control stays in main.css: its input and button rules are shared with the checkout coupon.
 */
/* ─────────────────────────────────────────────────
   12. EMPTY CART — redesigned 2026-10-08 (owner brief)

   Replaces the D2/S6 block. Its seven selectors are deleted, not renamed: the
   four panel ones described the old design (".cart-alert-box" named exactly the
   alert framing this removes) and the three .fm-section-title /
   .fm-products-grid ones styled the "New in store" upsell, now gone from the
   markup. Grepped first: zero hits in *.php, *.js and the other stylesheets,
   and all seven were scoped under the old wrapper, so nothing generic is left
   behind (§17.5, §9.9).

   Block is fm-cart-empty, not fm-empty-cart: 'fm-empty-cart' is the nonce
   action in inc/cart-actions.php and cart.php (§23.1.1), and reusing the token
   as a class would make every grep for that nonce ambiguous.

   Contrast, measured: title 16.36:1, copy 5.18:1, CTA 5.57:1 / 7.27:1 hover,
   focus ring 5.27:1 (SC 1.4.11). The glyph is 6.33:1 and aria-hidden, so that
   is headroom, not a requirement.
   ───────────────────────────────────────────────── */
.fm-cart-empty {
    /* page.php owns the surrounding geometry and is not touched. Its <h1>
       already gives mb-4 (24px); 8px lands the gap on the approved ~32px. */
    margin-block: var(--fm-space-2) 0;
    /* Bootstrap's container/row/col padding nets to a 12px gutter, under
       §10.3's 16px floor. 4px added for this component, not site-wide. */
    padding-inline: var(--fm-space-1);
}

/* Card ~72px above the footer instead of ~96px (24px here + the container's
   own 48px py-5). :has() is a refinement: unsupported, the rule drops and the
   page keeps today's 96px, so no fallback is needed (§19.3, §21.4). */
.page-content:has(> .woocommerce > .fm-cart-empty) {
    margin-block-end: var(--fm-space-6) !important; /* beats Bootstrap's own !important .mb-5 (§9.3) */
}

.fm-cart-empty__card {
    max-inline-size: 720px;
    margin-inline: auto;
    padding-block: var(--fm-space-8);
    padding-inline: var(--fm-space-8);
    background: var(--fm-canvas);
    /* Hairline, no shadow — §14.6: a shadow has to earn its place. */
    border: var(--fm-border);
    border-radius: var(--fm-radius-xl);
    text-align: center;
}

.fm-cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: var(--fm-space-5);
    background: var(--fm-brand-100);
    border-radius: 50%;
    color: var(--fm-brand-700);
}

.fm-cart-empty__glyph {
    inline-size: 30px;
    block-size: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fm-cart-empty__title {
    /* 22px at 360px, 28px at 1440px — the brief's range, from the existing
       token rather than a new clamp (§9.1). */
    margin-block: 0 var(--fm-space-3);
    color: var(--fm-ink);
    font-size: var(--fm-text-2xl);
    font-weight: var(--fm-weight-bold);
    line-height: var(--fm-leading-snug);
}

.fm-cart-empty__text {
    max-inline-size: 42ch;
    margin-block: 0 var(--fm-space-6);
    margin-inline: auto;
    color: var(--fm-muted);
    font-size: var(--fm-text-base); /* §10.3's 16px floor */
    line-height: var(--fm-leading-base);
}

.fm-cart-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    /* 48px clears §12.2's 44px house standard. min-block-size, not height, so
       a translated label that wraps grows the button instead of clipping. */
    min-block-size: 48px;
    inline-size: 100%; /* full width on phones; auto from 576px up */
    padding-block: var(--fm-space-3);
    padding-inline: var(--fm-space-8);
    background: var(--fm-brand-600);
    border-radius: var(--fm-radius-lg);
    color: var(--fm-surface);
    font-size: var(--fm-text-base);
    font-weight: var(--fm-weight-semibold);
    text-decoration: none;
    transition: background-color var(--fm-duration-base) var(--fm-ease);
}

.fm-cart-empty__cta:hover,
.fm-cart-empty__cta:focus-visible {
    background: var(--fm-brand-700);
    color: var(--fm-surface);
}

.fm-cart-empty__cta:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

.fm-cart-empty__arrow {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 576px) {
    .fm-cart-empty__card {
        padding-block: var(--fm-space-12);
        padding-inline: var(--fm-space-12);
    }

    .fm-cart-empty__icon {
        inline-size: 72px;
        block-size: 72px;
    }

    .fm-cart-empty__glyph {
        inline-size: 34px;
        block-size: 34px;
    }

    .fm-cart-empty__cta {
        inline-size: auto;
    }
}












/* ─────────────────────────────────────────────────
   13. CART — populated cart, redesigned 2026-10-08 (owner brief)

   Replaces the D2/S5 block wholesale: every class it styled is gone from the
   markup (.cart-page-header, .cart-steps-card, .step-number, .cart-item-row,
   .cart-items-header, .product-img-box, .category-tag, .product-name-link,
   .item-total-price, .qty-input-clean, .coupon-box, .summary-card,
   .summary-count, .vendor-name, .remove-action). Grepped before deleting: zero
   remaining hits in *.php, *.js, *.css (§17.5, §9.9). The six --wc-* tokens go
   with it, so that parallel blue ramp is out of the codebase, not merely off
   :root (D-S1) — this section builds from --fm-brand-* only. rtl.css loses its
   .cart-page-header entry for the same reason. Dropping .summary-card also
   ends the name-sharing with checkout/form-checkout.php.

   Three rules reach outside .fm-cart on purpose: the column widener, the
   shop_table_responsive neutraliser, and a.checkout-button (core's class,
   emitted only by cart/proceed-to-checkout-button.php — grepped).

   Contrast, measured: title 17.28:1, unit price 5.47:1, category and line
   subtotal 7.27:1, qty glyph 6.69:1, qty number 15.91:1, remove 5.47:1 /
   5.10:1 hover, totals labels 5.47:1, values 17.28:1, total 7.27:1, discount
   5.38:1, checkout 5.57:1 / 7.27:1, continue 7.27:1, focus 5.12–5.57:1.
   ───────────────────────────────────────────────── */

/* page.php pins EVERY page to .col-lg-8.mx-auto, which left the items panel
   around 540px at 1440px — the "row feels compressed" symptom. page.php is
   shared site-wide, so the column is widened for the cart page only, keyed on
   WooCommerce's body class: (0,5,1) vs Bootstrap's (0,1,0), no !important, and
   only from lg up where .col-lg-8 narrows anything. */
@media (min-width: 992px) {
    body.woocommerce-cart .container > .row > .col-lg-8.mx-auto {
        flex: 0 0 auto;
        inline-size: 100%;
    }
}

.fm-cart {
    /* page.php's <h1> already contributes mb-4 (24px). */
    margin-block: var(--fm-space-2) 0;
}

/* ── Top bar: item count + a quiet Clear cart ─────────────────────────── */

.fm-cart__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-3);
    margin-block-end: var(--fm-space-5);
}

.fm-cart__count {
    margin: 0;
    color: var(--fm-muted);
    font-size: var(--fm-text-base);
}

/* Secondary by weight and colour, never by size: it still has to be a
   comfortable target (§12.2), so the 44px comes from padding, not from a
   button face. */
.fm-cart__clear {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--fm-target-comfy);
    padding-inline: var(--fm-space-3);
    border-radius: var(--fm-radius-md);
    color: var(--fm-muted);
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--fm-duration-base) var(--fm-ease),
                background-color var(--fm-duration-base) var(--fm-ease);
}

.fm-cart__clear:hover,
.fm-cart__clear:focus-visible {
    background: var(--fm-danger-bg);
    color: var(--fm-danger-strong);
}

.fm-cart__clear:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

/* ── Two-column layout ───────────────────────────────────────────────── */

/* CSS Grid, not Bootstrap's row/col: §9.5 forbids depending on vendor grid
   internals, and the 2fr/1fr split is one declaration. */
.fm-cart__layout {
    display: grid;
    gap: var(--fm-space-6);
}

@media (min-width: 992px) {
    .fm-cart__layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--fm-space-8);
        align-items: start;
    }
}

.fm-cart__main {
    min-inline-size: 0;
}

/* ── Items panel ─────────────────────────────────────────────────────── */

.fm-cart__panel {
    padding: var(--fm-space-4);
    background: var(--fm-surface);
    border: var(--fm-border);
    border-radius: var(--fm-radius-xl);
}

@media (min-width: 576px) {
    .fm-cart__panel {
        padding: var(--fm-space-6);
    }
}

.fm-cart__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One grid per line item, reflowed three times. DOM order stays core's
   (remove, media, info, qty, subtotal); only placement moves, which is how
   Remove sits first on desktop without leaving its item's tab position.
   At 320px: 320 − 24 gutter − 32 panel = 264 usable; media 72 + 16 gap leaves
   176 for info and 92 for the qty control, so nothing collides or overflows. */
.fm-cart-item {
    /* One knob for the media column, so each step below sets a value instead of
       restating grid-template-columns. Brief: ~70–80px phone, ~80–90 tablet,
       ~90–110 desktop. */
    --fm-cart-media: 72px;
    display: grid;
    grid-template-columns: var(--fm-cart-media) minmax(0, 1fr) auto;
    grid-template-areas:
        "media info   remove"
        "media qty    qty"
        "media price  price";
    align-items: center;
    column-gap: var(--fm-space-4);
    row-gap: var(--fm-space-3);
    padding-block: var(--fm-space-4);
    border-block-end: var(--fm-border);
}

.fm-cart-item:first-child {
    padding-block-start: 0;
}

.fm-cart-item:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

@media (min-width: 480px) {
    .fm-cart-item {
        grid-template-areas:
            "media info  remove"
            "media qty   price";
    }
}

@media (min-width: 576px) {
    .fm-cart-item {
        --fm-cart-media: 86px;
    }
}

@media (min-width: 768px) {
    .fm-cart-item {
        --fm-cart-media: 96px;
        grid-template-columns: auto var(--fm-cart-media) minmax(0, 1fr) auto auto;
        grid-template-areas: "remove media info qty price";
    }
}

@media (min-width: 1200px) {
    .fm-cart-item {
        --fm-cart-media: 104px;
    }
}

/* ── Remove ──────────────────────────────────────────────────────────── */

.fm-cart-item__remove {
    grid-area: remove;
    justify-self: end;
}

/* 36px: clears SC 2.5.8's 24px minimum, and deliberately not the 44px house
   size — §12.2 reserves that for add-to-cart, quantity, checkout and submits,
   and a destructive action should not be the row's biggest target. */
.fm-cart-item__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    color: var(--fm-muted);
    font-size: 1.375rem;
    line-height: 1;
    text-decoration: none;
    transition: color var(--fm-duration-base) var(--fm-ease),
                background-color var(--fm-duration-base) var(--fm-ease);
}

.fm-cart-item__remove-btn:hover,
.fm-cart-item__remove-btn:focus-visible {
    background: var(--fm-danger-bg);
    color: var(--fm-danger-strong);
}

.fm-cart-item__remove-btn:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

/* ── Media ───────────────────────────────────────────────────────────── */

.fm-cart-item__media {
    grid-area: media;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: var(--fm-space-2);
    overflow: hidden;
    background: var(--fm-canvas);
    border: var(--fm-border);
    border-radius: var(--fm-radius-lg);
}

.fm-cart-item__media-link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
}

/* contain, never cover: cropping a forceps loses the tip, which is
   product information, not a styling trade-off. */
.fm-cart-item__media img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

/* ── Info ────────────────────────────────────────────────────────────── */

.fm-cart-item__info {
    grid-area: info;
    align-self: center;
    min-inline-size: 0;
}

/* No letter-spacing. The old .category-tag carried 0.04em, which breaks
   Arabic's cursive joining (§11.7) — dropped rather than carried forward. */
.fm-cart-item__cat {
    display: block;
    margin-block-end: var(--fm-space-1);
    color: var(--fm-brand-700); /* 7.27:1 */
    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-semibold);
    text-transform: uppercase;
}

.fm-cart-item__title {
    display: block;
    color: var(--fm-ink);
    font-size: var(--fm-text-base);
    font-weight: var(--fm-weight-semibold);
    line-height: var(--fm-leading-snug);
    /* A long SKU or model number has no break opportunity; without this it
       would push past minmax(0, 1fr) and overflow the panel. */
    overflow-wrap: anywhere;
}

/* The anchor arrives from inside woocommerce_cart_item_name, so it is styled
   as a descendant — the filter owns the element, this owns its appearance. */
.fm-cart-item__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--fm-duration-base) var(--fm-ease);
}

.fm-cart-item__title a:hover,
.fm-cart-item__title a:focus-visible {
    color: var(--fm-brand-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fm-cart-item__title a:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

/* Variation and plugin meta, from wc_get_formatted_cart_item_data(). Core
   emits a <dl class="variation"> with <dt>/<dd> pairs. */
.fm-cart-item__info .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--fm-space-2);
    margin-block: var(--fm-space-1) 0;
    color: var(--fm-muted);
    font-size: var(--fm-text-sm);
}

.fm-cart-item__info .variation dt,
.fm-cart-item__info .variation dd {
    margin: 0;
    font-weight: var(--fm-weight-regular);
}

.fm-cart-item__info .variation dd {
    margin-inline-end: var(--fm-space-3);
}

.fm-cart-item__info .variation p,
.fm-cart-item__info .backorder_notification {
    margin-block: var(--fm-space-1) 0;
    font-size: var(--fm-text-sm);
}

.fm-cart-item__info .backorder_notification {
    color: var(--fm-warning-strong); /* 5.19:1 */
}

/* The UNIT price, absent before: at quantity 2 the customer saw only 550 with
   no way to tell what one cost. Muted so it never competes with the name. */
.fm-cart-item__unit {
    display: block;
    margin-block-start: var(--fm-space-1);
    color: var(--fm-muted); /* 5.47:1 */
    font-size: var(--fm-text-sm);
}

/* ── Quantity ────────────────────────────────────────────────────────── */

.fm-cart-item__qty {
    grid-area: qty;
    justify-self: start;
}

/* .fm-qty is the appearance. .qty-controller, .qty-btn, .minus/.plus and the
   input's 'qty' class are the CONTRACT with js/main.js (§23.1.3) and carry no
   styling, so a restyle cannot quietly break the handler by renaming one. */
.fm-qty {
    display: inline-flex;
    align-items: center;
    background: var(--fm-brand-50);
    border: var(--fm-border);
    border-radius: var(--fm-radius-lg);
}

/* 44px — a quantity control is named in §12.2's house standard. */
.fm-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--fm-target-comfy);
    block-size: var(--fm-target-comfy);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--fm-radius-lg);
    color: var(--fm-brand-700); /* 6.69:1 on --fm-brand-50 */
    font-size: var(--fm-text-lg);
    font-weight: var(--fm-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--fm-duration-base) var(--fm-ease);
}

.fm-qty__btn:hover {
    background: var(--fm-brand-100);
}

.fm-qty__btn:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: calc(var(--fm-focus-offset) * -1);
}

.fm-qty__btn:disabled {
    color: var(--fm-disabled);
    cursor: not-allowed;
}

/* (0,2,1) beats core's .woocommerce .quantity .qty at (0,2,0) regardless of
   source order. The .quantity wrapper comes from global/quantity-input.php. */
.fm-qty .quantity {
    margin: 0;
}

.fm-qty input.fm-qty__input {
    inline-size: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--fm-ink); /* 15.91:1 */
    /* 16px floor: §10.3, and iOS zooms the page on any smaller focused input. */
    font-size: var(--fm-text-base);
    font-weight: var(--fm-weight-semibold);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fm-qty input.fm-qty__input:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: calc(var(--fm-focus-offset) * -1);
}

.fm-qty input.fm-qty__input::-webkit-outer-spin-button,
.fm-qty input.fm-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Line subtotal ───────────────────────────────────────────────────── */

.fm-cart-item__subtotal {
    grid-area: price;
    justify-self: end;
    color: var(--fm-brand-700); /* 7.27:1 */
    font-size: var(--fm-text-lg);
    font-weight: var(--fm-weight-bold);
    /* EGP amounts are Western numerals by decision (§11.7); tabular figures
       keep the column from jittering as quantities change. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Continue shopping ───────────────────────────────────────────────── */

.fm-cart__continue {
    margin-block: var(--fm-space-5) 0;
    text-align: center;
}

@media (min-width: 576px) {
    .fm-cart__continue {
        text-align: start;
    }
}

.fm-cart__continue-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--fm-target-comfy);
    padding-inline: var(--fm-space-2);
    border-radius: var(--fm-radius-md);
    color: var(--fm-brand-700); /* 7.27:1 */
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fm-cart__continue-link:hover,
.fm-cart__continue-link:focus-visible {
    background: var(--fm-brand-50);
    color: var(--fm-brand-800);
}

.fm-cart__continue-link:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

/* ── Summary card ────────────────────────────────────────────────────── */

.fm-cart__aside {
    min-inline-size: 0;
}

.fm-cart__summary {
    padding: var(--fm-space-5);
    background: var(--fm-surface);
    border: var(--fm-border);
    border-radius: var(--fm-radius-xl);
}

/* Sticky only where there is a second column to stick beside. 100px clears the
   header; inset-block-start, not top, because the offset is on the block
   axis. */
@media (min-width: 992px) {
    .fm-cart__summary {
        position: sticky;
        inset-block-start: 100px;
        padding: var(--fm-space-6);
    }
}

/* Core's cart-totals.php owns this markup; the theme only dresses it. */
.fm-cart__summary .cart_totals h2 {
    margin-block: 0 var(--fm-space-4);
    color: var(--fm-ink);
    font-size: var(--fm-text-xl);
    font-weight: var(--fm-weight-bold);
}

/* (0,3,1) against core's .woocommerce table.shop_table at (0,2,1). */
.fm-cart__summary .cart_totals table.shop_table {
    inline-size: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
}

.fm-cart__summary .cart_totals table.shop_table th,
.fm-cart__summary .cart_totals table.shop_table td {
    padding-block: var(--fm-space-3);
    padding-inline: 0;
    border: 0;
    border-block-start: var(--fm-border);
    font-size: var(--fm-text-base);
    line-height: var(--fm-leading-snug);
    vertical-align: baseline;
}

.fm-cart__summary .cart_totals table.shop_table tr:first-child th,
.fm-cart__summary .cart_totals table.shop_table tr:first-child td {
    border-block-start: 0;
    padding-block-start: 0;
}

/* Muted label, strong value — the hierarchy the brief asks for. */
.fm-cart__summary .cart_totals table.shop_table th {
    inline-size: 55%;
    color: var(--fm-muted); /* 5.47:1 */
    font-weight: var(--fm-weight-regular);
    text-align: start;
}

.fm-cart__summary .cart_totals table.shop_table td {
    color: var(--fm-ink); /* 17.28:1 */
    font-weight: var(--fm-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* A discount is a credit; it reads as one rather than as another charge. */
.fm-cart__summary .cart_totals table.shop_table tr.cart-discount td {
    color: var(--fm-success-strong); /* 5.38:1 */
}

/* The strongest row, by size, weight, colour AND a heavier rule above it —
   four signals, so none of them is carrying the meaning alone (§12.3). */
.fm-cart__summary .cart_totals table.shop_table tr.order-total th,
.fm-cart__summary .cart_totals table.shop_table tr.order-total td {
    padding-block-start: var(--fm-space-4);
    border-block-start: 2px solid var(--fm-line);
}

.fm-cart__summary .cart_totals table.shop_table tr.order-total th {
    color: var(--fm-ink);
    font-size: var(--fm-text-lg);
    font-weight: var(--fm-weight-bold);
}

.fm-cart__summary .cart_totals table.shop_table tr.order-total td,
.fm-cart__summary .cart_totals table.shop_table tr.order-total td strong {
    color: var(--fm-brand-700); /* 7.27:1 */
    font-size: var(--fm-text-xl);
    font-weight: var(--fm-weight-bold);
}

/* Shipping lists and calculator, for when zones exist. The store has zero
   zones today so these rows are absent; styled anyway, because the row appears
   the moment a zone is added (§6.8). */
.fm-cart__summary .cart_totals ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: var(--fm-weight-regular);
}

.fm-cart__summary .cart_totals ul#shipping_method li {
    margin-block-end: var(--fm-space-1);
}

.fm-cart__summary .cart_totals .woocommerce-shipping-destination,
.fm-cart__summary .cart_totals .shipping-calculator-button {
    display: block;
    margin-block-start: var(--fm-space-1);
    color: var(--fm-muted);
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-regular);
}

.fm-cart__summary .cart_totals small,
.fm-cart__summary .cart_totals .includes_tax {
    color: var(--fm-muted);
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-regular);
}

/*
 * Neutralises core's woocommerce-smallscreen.css (linked media="max-width:
 * 768px") inside this card only. That sheet hides <th>, re-labels each <td>
 * from data-title via a floated ::before, stripes rows, and forces
 * text-align:right !important. Rejected here because the label/value pair
 * already fits a narrow card, pseudo-element labels are neither selectable nor
 * translatable, and `right` is PHYSICAL — in Arabic the value would land on the
 * label's side. The one !important below is §9.3's single sanctioned case:
 * third-party CSS that is itself !important. Overriding cart-totals.php to drop
 * the class would put a core template under theme maintenance instead.
 */
@media (max-width: 768px) {
    .fm-cart__summary .cart_totals table.shop_table_responsive tbody th {
        display: table-cell;
    }

    .fm-cart__summary .cart_totals table.shop_table_responsive tr {
        display: table-row;
    }

    .fm-cart__summary .cart_totals table.shop_table_responsive tr td {
        display: table-cell;
        text-align: end !important; /* beats core's text-align:right!important (§9.3) */
    }

    .fm-cart__summary .cart_totals table.shop_table_responsive tr td::before {
        content: none;
    }

    .fm-cart__summary .cart_totals table.shop_table_responsive tr:nth-child(2n) td {
        background-color: transparent;
    }
}

/* ── Checkout CTA ────────────────────────────────────────────────────── */

/* Core gives this wrapper a clearfix and 1em padding. Express-payment buttons
   (wc_get_pay_buttons @10) also mount here, so it is spaced for a stack. */
.fm-cart__summary .wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-3);
    margin-block-start: var(--fm-space-5);
    padding: 0;
}

.fm-cart__summary .wc-proceed-to-checkout::before,
.fm-cart__summary .wc-proceed-to-checkout::after {
    content: none;
}

/* (0,4,1) beats core's (0,3,1) on specificity alone. The theme's old global
   .checkout-button rule — seven !importants, a 50px pill, a 20px shadow — was
   removed from the "forward links" section in the same change: it was unscoped
   and its !importants beat the theme's own CSS, which §9.3 forbids. One place,
   no !important. */
.fm-cart__summary .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 54px;
    margin: 0;
    padding-block: var(--fm-space-3);
    padding-inline: var(--fm-space-5);
    background: var(--fm-brand-600);
    border: 0;
    border-radius: 13px;
    box-shadow: none;
    color: var(--fm-surface); /* 5.57:1 */
    font-size: var(--fm-text-base);
    font-weight: var(--fm-weight-bold);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--fm-duration-base) var(--fm-ease);
}

.fm-cart__summary .wc-proceed-to-checkout a.checkout-button:hover,
.fm-cart__summary .wc-proceed-to-checkout a.checkout-button:focus-visible {
    background: var(--fm-brand-700); /* 7.27:1 */
    color: var(--fm-surface);
}

.fm-cart__summary .wc-proceed-to-checkout a.checkout-button:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}

/* ── Update cart ─────────────────────────────────────────────────────── */

/* Seen only on focus — the markup carries Bootstrap's
   `visually-hidden-focusable`; cart.php documents why. Pointer users never
   reach it (js/main.js clicks it after a debounced qty change), so these are
   the revealed-state styles. No !important needed: .checkout-button and
   button[name="update_cart"] both left the global rule above. */
.fm-cart__update {
    margin-block-start: var(--fm-space-4);
    padding-block: var(--fm-space-2);
    padding-inline: var(--fm-space-5);
    background: var(--fm-brand-600);
    border: 0;
    border-radius: var(--fm-radius-lg);
    box-shadow: none;
    color: var(--fm-surface); /* 5.57:1 */
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);
    cursor: pointer;
}

.fm-cart__update:focus-visible {
    outline: var(--fm-focus-ring);
    outline-offset: var(--fm-focus-offset);
}