/* ════════════════════════════════════════════════════════════════════════
   CART & CHECKOUT — brand "Editorial Boutique" pass (Issue #12)
   ────────────────────────────────────────────────────────────────────────
   Enqueued ONLY on is_cart() || is_checkout() (see functions.php).
   Loads AFTER components.css + woocommerce.css, so it refines/extends the
   base button + form rules there (it does not re-declare the whole button).

   Rules of the house (DESIGN.md):
   • Colours come from style.css :root tokens — NEVER hardcode hex.
   • Gold (--color-gold) ONLY for CTAs, prices, totals, moments of joy.
   • No pure black; secondary text uses --color-text-soft (AA-safe on cream).
   • No divider lines — separation via tonal background shifts + whitespace.
   • RTL-first; touch targets ≥44px; motion guarded by prefers-reduced-motion.
   • Curve language to match PDP/homepage: radius-lg cards, radius-pill CTAs.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Page title ──────────────────────────────────────────────────────────
   /cart is a WordPress page rendered by page.php, whose <h1.zohar-page__title>
   prints the page's DB title — which is the English "Cart". In the RTL column
   that English word reads left-to-right and, with no container constraint on
   .zohar-content/.site-main, sits flush to the viewport's right edge and
   overflows. We can't edit page.php (out of scope), so fix it here, scoped to
   body.woocommerce-cart only:
   • contain the title in the same centred editorial column as the cart body;
   • hide the English glyphs and print the Hebrew "סל הקניות" in brand serif,
     RTL-correct, right-aligned. */
body.woocommerce-cart .zohar-page__title {
    /* No page title on the cart — hide it entirely. */
    display: none;
}

/* ── Page canvas ─────────────────────────────────────────────────────────
   Give both pages a comfortable, centred editorial column on the cream
   canvas. RTL is inherited from <body.rtl> but pinned here for safety. */
.woocommerce-cart-wrap,
.woocommerce-checkout-wrap {
    direction: rtl;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    text-align: right;
}

/* ════════════════════════════════════════════════════════════════════════
   1 · CART TABLE — line items
   The table is laid out by WooCommerce; we strip its lines and let tone +
   whitespace do the separating (No-Line Rule).
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart-wrap table.cart {
    border: none;
    border-collapse: collapse;
    margin-bottom: var(--space-xl);
    background: transparent;
}

.woocommerce-cart-wrap table.cart th,
.woocommerce-cart-wrap table.cart td {
    border: none;
    background: transparent;
    vertical-align: middle;
}

/* Column header row — quiet uppercase labels, not a heavy bar. */
.woocommerce-cart-wrap table.cart thead th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--color-text-soft);
    text-align: right;
    padding: 0 var(--space-md) var(--space-sm);
}

/* Each line item sits on its own softly-tinted "paper" row (tonal layering,
   no border). Spacing between rows reads as the separator. */
.woocommerce-cart-wrap table.cart tbody tr.cart_item td {
    padding: var(--space-md);
    background: var(--color-surface, #fff);
    background: color-mix(in srgb, var(--color-cream) 55%, #fff);
}

/* Round the outer corners of each row (first/last cell in RTL). */
.woocommerce-cart-wrap table.cart tbody tr.cart_item td:first-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.woocommerce-cart-wrap table.cart tbody tr.cart_item td:last-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Breathing room between item rows (No-Line separation). */
.woocommerce-cart-wrap table.cart tbody tr.cart_item {
    box-shadow: 0 0 0 100vmax transparent; /* no-op anchor for spacing below */
}
.woocommerce-cart-wrap table.cart tbody tr.cart_item + tr.cart_item td {
    border-top: var(--space-sm) solid var(--color-cream); /* gap as cream "air" */
}

/* ── Line-item thumbnail ─────────────────────────────────────────────────
   Real images are rounded + cropped to a tidy portrait. Missing-file images
   are already swapped server-side for `.zohar-img-placeholder--loop` by
   inc/woocommerce.php (woocommerce_product_get_image filter) — so we only
   size both consistently here; no broken-image glyph can appear. */
.woocommerce-cart-wrap td.product-thumbnail {
    width: 90px;
}
.woocommerce-cart-wrap td.product-thumbnail a,
.woocommerce-cart-wrap td.product-thumbnail > img,
.woocommerce-cart-wrap td.product-thumbnail .zohar-img-placeholder {
    display: block;
    width: 72px;
}
.woocommerce-cart-wrap td.product-thumbnail img {
    width: 72px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-md);
    color: transparent; /* hide alt text if any raw <img> ever 404s at runtime */
}
/* Placeholder panel scaled to the cart thumb footprint. */
.woocommerce-cart-wrap td.product-thumbnail .zohar-img-placeholder {
    width: 72px;
    min-height: 96px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}
.woocommerce-cart-wrap td.product-thumbnail .zohar-img-placeholder__mark {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
}
.woocommerce-cart-wrap td.product-thumbnail .zohar-img-placeholder__name {
    font-size: 0.7rem;
    line-height: 1.2;
}

/* ── Product name + meta ─────────────────────────────────────────────────  */
.woocommerce-cart-wrap td.product-name a {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce-cart-wrap td.product-name a:hover,
.woocommerce-cart-wrap td.product-name a:focus-visible {
    color: var(--color-gold);
}
.woocommerce-cart-wrap td.product-name .variation,
.woocommerce-cart-wrap td.product-name dl {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    margin-top: var(--space-xs);
}

/* ── Prices + subtotal → gold (brand rule: price = gold) ─────────────────  */
.woocommerce-cart-wrap td.product-price,
.woocommerce-cart-wrap td.product-subtotal {
    font-weight: 700;
    color: var(--color-gold-hover);
    white-space: nowrap;
}
.woocommerce-cart-wrap td.product-price .amount,
.woocommerce-cart-wrap td.product-subtotal .amount {
    color: var(--color-gold-hover);
}

/* ── Quantity pill — mirrors the PDP stepper (woocommerce.css §quantity) ──
   The qty +/- render as input.button.is-form; without this they'd inherit
   the big gold uppercase .button block from components.css. Recast the whole
   control as one slim rounded pill, scoped to the cart so it never touches
   the PDP rules. Specificity (.woocommerce-cart-wrap .quantity input.minus)
   out-points `.woocommerce input.button`, so no !important needed. */
.woocommerce-cart-wrap td.product-quantity .quantity {
    display: inline-flex;
    align-items: center;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.woocommerce-cart-wrap .quantity input.minus,
.woocommerce-cart-wrap .quantity input.plus {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-cart-wrap .quantity input.minus:hover,
.woocommerce-cart-wrap .quantity input.plus:hover,
.woocommerce-cart-wrap .quantity input.minus:focus-visible,
.woocommerce-cart-wrap .quantity input.plus:focus-visible {
    background: var(--color-cream-low);
    color: var(--color-gold-hover);
    outline: none;
}
.woocommerce-cart-wrap .quantity input.qty {
    width: 48px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    -moz-appearance: textfield;
}
.woocommerce-cart-wrap .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-wrap .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Fallback: when there are NO +/- (a lone numeric input), give the
   bare field the same pill shell so it never looks unstyled. */
.woocommerce-cart-wrap td.product-quantity .quantity input.qty:only-child {
    width: 64px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-cream);
}

/* ── Remove "×" → quiet gold ghost, never harsh ──────────────────────────  */
.woocommerce-cart-wrap td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-soft) !important; /* WC ships an inline-ish red */
    background: transparent;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-cart-wrap td.product-remove a.remove:hover,
.woocommerce-cart-wrap td.product-remove a.remove:focus-visible {
    color: var(--color-gold) !important;
    background: var(--color-cream-low);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   2 · CART ACTIONS — coupon + update
   The whole .actions cell becomes a tidy two-end row: coupon on the start
   (right in RTL), "update cart" on the end.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart-wrap td.actions {
    padding: var(--space-md) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}
.woocommerce-cart-wrap td.actions .coupon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-inline-end: auto; /* pushes "update cart" to the far (left) end */
}
.woocommerce-cart-wrap td.actions .coupon label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}
.woocommerce-cart-wrap td.actions .coupon input#coupon_code {
    min-height: 48px;
    min-width: 180px;
    padding: 0.625rem var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-cream);
    font-family: var(--font-body);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-cart-wrap td.actions .coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}

/* "Apply coupon" + "Update cart" share the pill geometry. Pin it explicitly:
   the base .button can let a two-word label ("UPDATE CART") wrap to a second
   line, and with a pill radius that collapses into a tall oval/circle.
   inline-flex + nowrap + a ≥44px height keep them clean, tappable pills.
   Hierarchy split: "Apply coupon" is the CTA of the coupon form, so it carries
   the gold fill (DESIGN.md — gold only on CTAs / moments of joy); "Update cart"
   stays a quiet ghost pill. The primary proceed-to-checkout lives in a separate
   totals card below, so one gold apply here reads as this row's action without
   competing with it. */
.woocommerce-cart-wrap td.actions button[name="apply_coupon"],
.woocommerce-cart-wrap td.actions button[name="update_cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-lg);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    transition: background var(--transition-fast), color var(--transition-fast),
                transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Update cart → quiet ghost pill (secondary). */
.woocommerce-cart-wrap td.actions button[name="update_cart"] {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
.woocommerce-cart-wrap td.actions button[name="update_cart"]:hover,
.woocommerce-cart-wrap td.actions button[name="update_cart"]:focus-visible {
    background: var(--color-cream-low);
    color: var(--color-gold-hover);
    outline: none;
}
/* Apply coupon → gold pill CTA (the action of the coupon form). Shares the
   lifted-lozenge depth with the other filled primaries. */
.woocommerce-cart-wrap td.actions button[name="apply_coupon"] {
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    border: none;
    box-shadow: var(--btn-depth);
}
.woocommerce-cart-wrap td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart-wrap td.actions button[name="apply_coupon"]:focus-visible {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}
.woocommerce-cart-wrap td.actions button[name="apply_coupon"]:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* ════════════════════════════════════════════════════════════════════════
   3 · CART TOTALS CARD
   A floating "fine paper" card with the grand total in gold. Right-aligned
   in the RTL column.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart-wrap .cart-collaterals {
    display: flex;
    justify-content: flex-start; /* card hugs the start (right) edge in RTL */
}
.woocommerce-cart-wrap .cart_totals {
    width: 100%;
    max-width: 420px;
    background: color-mix(in srgb, var(--color-cream) 50%, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
}
.woocommerce-cart-wrap .cart_totals h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}
.woocommerce-cart-wrap .cart_totals table {
    border: none;
    margin: 0;
    width: 100%;
}
.woocommerce-cart-wrap .cart_totals table th,
.woocommerce-cart-wrap .cart_totals table td {
    border: none;
    padding: var(--space-sm) 0;
    background: transparent;
    text-align: right;
}
.woocommerce-cart-wrap .cart_totals table th {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text-soft);
    width: 45%;
}
/* ── Applied coupon row → the "moment of joy" (a gold saving) ─────────────
   WooCommerce prints each applied coupon as tr.cart-discount inside .cart_totals:
     <th>Coupon: CODE</th>
     <td><span class="amount">-₪X</span> <a class="woocommerce-remove-coupon">[…]</a></td>
   The saved amount is a small delight, so it reads in gold like the prices; the
   remove link stays a quiet ghost (never a harsh red). */
.woocommerce-cart-wrap .cart_totals tr.cart-discount th {
    color: var(--color-text);
    font-weight: 600;
}
.woocommerce-cart-wrap .cart_totals tr.cart-discount td,
.woocommerce-cart-wrap .cart_totals tr.cart-discount .amount {
    color: var(--color-gold-hover);
    font-weight: 700;
    white-space: nowrap;
}
.woocommerce-cart-wrap .cart_totals tr.cart-discount .woocommerce-remove-coupon {
    display: inline-block;
    margin-inline-start: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce-cart-wrap .cart_totals tr.cart-discount .woocommerce-remove-coupon:hover,
.woocommerce-cart-wrap .cart_totals tr.cart-discount .woocommerce-remove-coupon:focus-visible {
    color: var(--color-gold);
    text-decoration: underline;
    outline: none;
}

/* Grand total row — the moment of gold. Tonal shift, not a divider line. */
.woocommerce-cart-wrap .cart_totals tr.order-total th,
.woocommerce-cart-wrap .cart_totals tr.order-total td {
    padding-top: var(--space-md);
}
.woocommerce-cart-wrap .cart_totals tr.order-total th {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.05rem;
}
.woocommerce-cart-wrap .cart_totals tr.order-total td,
.woocommerce-cart-wrap .cart_totals tr.order-total .amount {
    color: var(--color-gold-hover);
    font-weight: 800;
    font-size: 1.25rem;
}

/* ── Proceed to checkout → gold pill CTA (the primary conversion) ─────────  */
.woocommerce-cart-wrap .wc-proceed-to-checkout {
    padding: var(--space-md) 0 0;
}
.woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    /* Shared lifted-lozenge depth (felt, not a hard drop shadow). */
    box-shadow: var(--btn-depth);
    transition: background var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button:focus-visible {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}
.woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* ════════════════════════════════════════════════════════════════════════
   4 · EMPTY CART STATE — composed, not a stray notice
   `wc_empty_cart_message` prints <p class="cart-empty woocommerce-info">,
   followed by .return-to-shop > a.button.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart-wrap .cart-empty,
.woocommerce .cart-empty.woocommerce-info {
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    background: transparent;
    border: none;
    padding: var(--space-2xl) var(--space-md) var(--space-sm);
    margin: 0 auto;
    max-width: 28ch;
}
.woocommerce-cart-wrap .cart-empty::before,
.woocommerce .cart-empty.woocommerce-info::before {
    content: none; /* drop WC's default info icon */
}
.woocommerce .return-to-shop {
    text-align: center;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-2xl);
}
.woocommerce .return-to-shop a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.75em 2.5em;
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    border-radius: var(--radius-pill);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: var(--btn-depth);
    transition: background var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.woocommerce .return-to-shop a.button:hover,
.woocommerce .return-to-shop a.button:focus-visible {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}
.woocommerce .return-to-shop a.button:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* ════════════════════════════════════════════════════════════════════════
   5 · CHECKOUT — "Your order" heading + layout
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-checkout-wrap #order_review_heading,
.woocommerce-checkout-wrap h3#order_review_heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-text);
    margin: var(--space-xl) 0 var(--space-md);
}

/* Two-column desktop layout reads better with a gap; collapses on mobile
   (the woocommerce.css media query already stacks .col2-set ≤768px). */
@media (min-width: 769px) {
    .woocommerce-checkout-wrap .col2-set {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: start;
    }
    /* WooCommerce core draws a clearfix on .col2-set:
         .col2-set::before, .col2-set::after { content:""; display:table }
       In a float/table layout those are invisible, but once .col2-set becomes a
       GRID they turn into real grid items — ::before takes (row1,col1), pushing
       .col-1 to (row1,col2), .col-2 to (row2,col1) and ::after to (row2,col2).
       The result is the ~800px void where .col-2 sits a full row below .col-1.
       Kill the pseudos so only the two real columns are placed, flush at the top. */
    .woocommerce-checkout-wrap .col2-set::before,
    .woocommerce-checkout-wrap .col2-set::after {
        content: none;
        display: none;
    }
    .woocommerce-checkout-wrap .col2-set .col-1,
    .woocommerce-checkout-wrap .col2-set .col-2 {
        width: auto;
        float: none;
    }
}

/* Billing / shipping section headings. */
.woocommerce-checkout-wrap h3 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-size: 1.2rem;
}

/* ── Form fields — cream inputs, gold focus rings, brand fonts ────────────
   woocommerce.css already styles .input-text/.textarea; we extend to cover
   <select> + the wrapper, raise labels to AA-safe soft text, and ensure
   ≥44px control height. Higher specificity here wins the cascade. */
.woocommerce-checkout-wrap .woocommerce-checkout .form-row label,
.woocommerce-checkout-wrap form .form-row label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-soft); /* was --color-text-muted (fails AA) */
    margin-bottom: var(--space-xs);
}
.woocommerce-checkout-wrap .form-row .required {
    color: var(--color-gold);
    text-decoration: none;
}

.woocommerce-checkout-wrap form .form-row input.input-text,
.woocommerce-checkout-wrap form .form-row textarea,
.woocommerce-checkout-wrap form .form-row select,
.woocommerce-checkout-wrap .select2-container .select2-selection {
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-checkout-wrap .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}
.woocommerce-checkout-wrap form .form-row input.input-text:focus,
.woocommerce-checkout-wrap form .form-row textarea:focus,
.woocommerce-checkout-wrap form .form-row select:focus,
.woocommerce-checkout-wrap .select2-container--focus .select2-selection {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}
.woocommerce-checkout-wrap form .form-row textarea {
    min-height: 96px;
}

/* ════════════════════════════════════════════════════════════════════════
   5b · CHECKOUT COUPON — "יש לך קופון?" toggle + form (classic checkout)
   ────────────────────────────────────────────────────────────────────────
   woocommerce_checkout_coupon_form() (hooked on woocommerce_before_checkout_form,
   which fires INSIDE .woocommerce-checkout-wrap) prints a tonal info banner with
   a .showcoupon toggle link, then a hidden form.checkout_coupon that JS slides
   open. Brand all three: the banner reuses the §7 notice panel; the toggle is a
   gold text link; the form is a cream "fine paper" card whose apply button is the
   one gold CTA (DESIGN.md — gold only on CTAs / moments of joy).
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-checkout-wrap .woocommerce-form-coupon-toggle {
    margin-bottom: var(--space-md);
}
.woocommerce-checkout-wrap .woocommerce-form-coupon-toggle .woocommerce-info {
    font-size: 0.9rem;
}
/* The "click here to enter your code" toggle → quiet gold text link. */
.woocommerce-checkout-wrap .showcoupon {
    color: var(--color-gold);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce-checkout-wrap .showcoupon:hover,
.woocommerce-checkout-wrap .showcoupon:focus-visible {
    color: var(--color-gold-hover);
    text-decoration: underline;
    outline: none;
}
/* The revealed coupon form → cream "fine paper" card (tonal, no divider line). */
.woocommerce-checkout-wrap form.checkout_coupon {
    background: color-mix(in srgb, var(--color-cream) 50%, #fff);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-card);
    text-align: right;
}
.woocommerce-checkout-wrap form.checkout_coupon p:first-child {
    color: var(--color-text-soft);
    font-size: 0.88rem;
    margin-top: 0;
}
.woocommerce-checkout-wrap form.checkout_coupon .form-row {
    margin-bottom: var(--space-sm);
}
.woocommerce-checkout-wrap form.checkout_coupon input#coupon_code {
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-cream);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-checkout-wrap form.checkout_coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}
/* Apply coupon → gold pill CTA (the moment of joy of the coupon card). */
.woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-xl);
    white-space: nowrap;
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--btn-depth);
    transition: background var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"]:focus-visible {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}
.woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"]:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* ════════════════════════════════════════════════════════════════════════
   6 · ORDER REVIEW / TOTALS CARD (checkout)
   Same "fine paper" card as the cart totals, with the gold grand total.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-checkout-wrap #order_review {
    background: color-mix(in srgb, var(--color-cream) 50%, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    margin-top: var(--space-md);
}
.woocommerce-checkout-wrap #order_review table.shop_table {
    border: none;
    background: transparent;
    margin: 0;
}
.woocommerce-checkout-wrap #order_review table.shop_table th,
.woocommerce-checkout-wrap #order_review table.shop_table td {
    border: none;
    background: transparent;
    padding: var(--space-sm) 0;
    text-align: right;
}
.woocommerce-checkout-wrap #order_review table.shop_table thead th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--color-text-soft);
}
.woocommerce-checkout-wrap #order_review .cart_item td.product-name {
    font-family: var(--font-body);
    color: var(--color-text);
}
.woocommerce-checkout-wrap #order_review .cart_item td.product-total,
.woocommerce-checkout-wrap #order_review tr.cart-subtotal td {
    color: var(--color-gold-hover);
    font-weight: 600;
    white-space: nowrap;
}
/* Applied coupon row in the order review → gold saving + quiet remove link. */
.woocommerce-checkout-wrap #order_review tr.cart-discount td,
.woocommerce-checkout-wrap #order_review tr.cart-discount .amount {
    color: var(--color-gold-hover);
    font-weight: 600;
    white-space: nowrap;
}
.woocommerce-checkout-wrap #order_review tr.cart-discount .woocommerce-remove-coupon {
    margin-inline-start: var(--space-sm);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce-checkout-wrap #order_review tr.cart-discount .woocommerce-remove-coupon:hover,
.woocommerce-checkout-wrap #order_review tr.cart-discount .woocommerce-remove-coupon:focus-visible {
    color: var(--color-gold);
    text-decoration: underline;
    outline: none;
}
.woocommerce-checkout-wrap #order_review tr.order-total th {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1.05rem;
    padding-top: var(--space-md);
}
.woocommerce-checkout-wrap #order_review tr.order-total td,
.woocommerce-checkout-wrap #order_review tr.order-total .amount {
    color: var(--color-gold-hover);
    font-weight: 800;
    font-size: 1.2rem;
    padding-top: var(--space-md);
}

/* Order-review line-item thumbnails (if a payment plugin adds them) reuse
   the same graceful sizing — broken files already swap to the placeholder. */
.woocommerce-checkout-wrap #order_review img {
    border-radius: var(--radius-sm);
    object-fit: cover;
    color: transparent;
}

/* Payment methods box — quiet tonal panel, no harsh borders. */
.woocommerce-checkout-wrap #payment {
    background: transparent;
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}
.woocommerce-checkout-wrap #payment ul.payment_methods {
    border: none;
    background: var(--color-cream);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: 0 0 var(--space-md);
}
.woocommerce-checkout-wrap #payment ul.payment_methods li {
    list-style: none;
}
.woocommerce-checkout-wrap #payment div.payment_box {
    background: var(--color-cream-low);
    border-radius: var(--radius-md);
    color: var(--color-text);
}
.woocommerce-checkout-wrap #payment div.payment_box::before {
    border-bottom-color: var(--color-cream-low); /* recolour the callout arrow */
}

/* ── Place order → gold pill CTA (the conversion moment) ──────────────────  */
.woocommerce-checkout-wrap #place_order,
.woocommerce-checkout #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--btn-depth);
    transition: background var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.woocommerce-checkout-wrap #place_order:hover,
.woocommerce-checkout-wrap #place_order:focus-visible,
.woocommerce-checkout #place_order:hover {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}
.woocommerce-checkout-wrap #place_order:active,
.woocommerce-checkout #place_order:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* Terms / privacy note quiet + AA-readable. */
.woocommerce-checkout-wrap .woocommerce-terms-and-conditions-wrapper {
    color: var(--color-text-soft);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
}

/* ── Inline field error (email validation, main.js) ──────────────────────
   A visible, non-colour-only message under an invalid field (WCAG 1.4.1 /
   IS 5568). Refined error tone, small caps of weight — never a harsh banner. */
.woocommerce-checkout-wrap .zohar-field-error {
    display: block;
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-error);
}
.woocommerce-checkout-wrap .zohar-field-error[hidden] {
    display: none;
}
/* Pair the message with a matching field border so the cue is redundant
   (colour + text + border), not colour-only. */
.woocommerce-checkout-wrap #billing_email[aria-invalid="true"] {
    border-color: var(--color-error);
}

/* ════════════════════════════════════════════════════════════════════════
   7 · WooCommerce notices (coupon applied, errors) on-brand
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart-wrap .woocommerce-message,
.woocommerce-checkout-wrap .woocommerce-message,
.woocommerce-cart-wrap .woocommerce-info,
.woocommerce-checkout-wrap .woocommerce-info {
    background: var(--color-cream-low);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-md);
}
.woocommerce-cart-wrap .woocommerce-message::before,
.woocommerce-checkout-wrap .woocommerce-message::before,
.woocommerce-cart-wrap .woocommerce-info::before,
.woocommerce-checkout-wrap .woocommerce-info::before {
    color: var(--color-gold);
}
.woocommerce-cart-wrap .woocommerce-error,
.woocommerce-checkout-wrap .woocommerce-error {
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-cream));
    color: var(--color-error);
    border: none;
    border-radius: var(--radius-md);
}
/* WC auto-focuses the first "added to cart" notice for a11y, which paints a
   hard browser outline that reads as a black box on the cream notice. Keep it
   keyboard-accessible via a soft gold ring instead of the harsh default. */
.woocommerce-cart-wrap .woocommerce-message:focus,
.woocommerce-cart-wrap .woocommerce-message:focus-visible,
.woocommerce-checkout-wrap .woocommerce-message:focus,
.woocommerce-checkout-wrap .woocommerce-message:focus-visible,
.woocommerce-cart-wrap .woocommerce-info:focus,
.woocommerce-cart-wrap .woocommerce-info:focus-visible,
.woocommerce-checkout-wrap .woocommerce-info:focus,
.woocommerce-checkout-wrap .woocommerce-info:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}
/* The notice's "continue shopping" link is a SECONDARY action — demote it from
   the loud global gold .button to a quiet ghost pill so only the checkout CTA
   carries the gold weight. */
.woocommerce-cart-wrap .woocommerce-message .button,
.woocommerce-cart-wrap .woocommerce-message a.wc-forward {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: none;
}
.woocommerce-cart-wrap .woocommerce-message .button:hover,
.woocommerce-cart-wrap .woocommerce-message a.wc-forward:hover,
.woocommerce-cart-wrap .woocommerce-message .button:focus-visible,
.woocommerce-cart-wrap .woocommerce-message a.wc-forward:focus-visible {
    background: var(--color-cream-low);
    color: var(--color-gold-hover);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   8 · RESPONSIVE — phones
   The WC responsive cart table flips to stacked rows ≤768px (shop_table_
   responsive). Keep our card look + right alignment intact there.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .woocommerce-cart-wrap,
    .woocommerce-checkout-wrap {
        padding: var(--space-md) var(--space-sm) var(--space-xl);
    }

    /* Stacked responsive cart: each item becomes a card-ish block.
       The row is set to display:block, but its <td>s default to table-cell,
       so the browser rebuilds an anonymous table that crams every column into
       one narrow horizontal strip (name squished, the "×" collapses to 0-width
       over the thumbnail). Force each cell to block so they truly stack.       */
    .woocommerce-cart-wrap table.cart tbody {
        display: block;
    }
    .woocommerce-cart-wrap table.cart tbody tr.cart_item {
        display: block;
        position: relative;
        background: color-mix(in srgb, var(--color-cream) 55%, #fff);
        border-radius: var(--radius-lg);
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    .woocommerce-cart-wrap table.cart tbody tr.cart_item td {
        display: block;
        width: 100%;
        background: transparent;
        border-radius: 0;
        padding: var(--space-xs) 0;
        text-align: right; /* RTL: cell content hugs the start (right) edge */
    }
    .woocommerce-cart-wrap table.cart tbody tr.cart_item + tr.cart_item td {
        border-top: none;
    }
    /* Show the data-title label inline for the value-bearing rows so each
       number is legible once stacked (WC hides price/subtotal by default). */
    .woocommerce-cart-wrap td.product-price,
    .woocommerce-cart-wrap td.product-quantity,
    .woocommerce-cart-wrap td.product-subtotal {
        display: flex !important; /* WC core sets price/subtotal display:none ≤768px */
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
    }
    .woocommerce-cart-wrap td.product-price::before,
    .woocommerce-cart-wrap td.product-quantity::before,
    .woocommerce-cart-wrap td.product-subtotal::before {
        content: attr(data-title);
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--color-text-soft);
    }
    /* Thumbnail + name read as the item header, hugging the right edge. */
    .woocommerce-cart-wrap td.product-thumbnail {
        width: auto;
        text-align: right;
    }
    .woocommerce-cart-wrap td.product-name {
        font-size: 1.05rem;
        padding-top: var(--space-sm);
    }
    /* Remove "×" out of the flow → pinned to the start (left in RTL) corner. */
    .woocommerce-cart-wrap td.product-remove {
        position: absolute;
        top: var(--space-sm);
        left: var(--space-sm);
        width: auto;
        padding: 0;
    }
    .woocommerce-cart-wrap td.product-quantity .quantity {
        display: inline-flex;
    }

    .woocommerce-cart-wrap td.actions {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce-cart-wrap td.actions .coupon {
        flex-wrap: wrap;
        margin-inline-end: 0;
    }
    .woocommerce-cart-wrap td.actions .coupon input#coupon_code {
        flex: 1 1 auto;
        min-width: 0;
    }
    .woocommerce-cart-wrap .cart_totals {
        max-width: none;
    }

    /* ── CookieHub launcher clearance (mobile cart/checkout) ─────────────────
       CookieHub injects a 41x41 fixed launcher (.ch2-icon) pinned bottom-left.
       On the narrow, full-width mobile cart it sat directly over the second
       line-item's price/quantity controls (whose values hug the left edge in
       RTL). CookieHub isn't a theme asset (it's an injected third-party
       snippet), so we can't move its markup — instead reserve a launcher-sized
       dead zone at the foot of the cart/checkout column so its interactive
       rows and totals never sit under the fixed icon, and tuck the icon fully
       into the corner. The launcher stays clickable; only inert whitespace
       falls beneath it. */
    body.woocommerce-cart .woocommerce-cart-wrap,
    body.woocommerce-checkout .woocommerce-checkout-wrap {
        padding-bottom: calc(var(--space-2xl) + 64px);
    }
    body.woocommerce-cart .ch2-icon,
    body.woocommerce-checkout .ch2-icon {
        bottom: 12px !important;
        left: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   8b · BLOCK CHECKOUT (WooCommerce Checkout Block)
   ────────────────────────────────────────────────────────────────────────
   This store's /checkout is the Gutenberg **Checkout Block** (.wc-block-checkout
   on a normal page), NOT the classic [woocommerce_checkout] shortcode — so the
   form-checkout.php override and the .woocommerce-checkout-wrap rules above do
   NOT apply to it. The block renders its own component markup
   (.wc-block-components-*) and ships near-unstyled defaults (sharp-corner white
   inputs, a dark slate place-order button). Brand it here with concrete
   component selectors. Block components honour a few CSS custom properties, so
   we also set those where they cleanly retint a whole sub-tree.
   ════════════════════════════════════════════════════════════════════════ */
.wc-block-checkout {
    direction: rtl;
    font-family: var(--font-body);
    color: var(--color-text);
    /* Retint the block's own accent/CTA tokens to brand gold in one place. */
    --wc-blocks-color-primary: var(--color-gold);
    --wc-blocks-color-primary-text: var(--color-text-on-gold);
}

/* Step headings → brand serif. */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-title {
    font-family: var(--font-heading);
    color: var(--color-text);
}

/* ── Form fields — cream pills, gold focus rings, ≥44px ──────────────────  */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-select .components-form-token-field__input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout select,
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout .components-text-control__input {
    min-height: 48px;
    box-sizing: border-box;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout .wc-block-components-combobox-control input:focus,
.wc-block-checkout .components-text-control__input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}
/* Floating label colour — AA-safe soft, gold when the field is active. */
.wc-block-checkout .wc-block-components-text-input label {
    color: var(--color-text-soft);
    font-family: var(--font-body);
}
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-text-input.is-active label {
    color: var(--color-gold);
}

/* Checkboxes / radios → gold selected state. */
.wc-block-checkout .wc-block-components-checkbox__input:checked,
.wc-block-checkout .wc-block-components-radio-control__input:checked {
    accent-color: var(--color-gold);
}
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control__option--checked {
    border-color: var(--color-gold);
}

/* ── Order summary sidebar → "fine paper" card, gold total ───────────────  */
.wc-block-checkout__sidebar,
.wc-block-components-order-summary {
    direction: rtl;
}
.wc-block-checkout__sidebar {
    background: color-mix(in srgb, var(--color-cream) 50%, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
}
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image .zohar-img-placeholder {
    border-radius: var(--radius-md);
    object-fit: cover;
    color: transparent;
}
.wc-block-components-product-name {
    font-family: var(--font-heading);
    color: var(--color-text);
}
/* Line + subtotal prices in the summary → gold. */
.wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
    color: var(--color-gold-hover);
    font-weight: 600;
}
/* Grand total footer → the gold moment. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
    color: var(--color-gold-hover);
    font-weight: 800;
    font-size: 1.2rem;
}
.wc-block-components-checkout-order-summary__title-price .wc-block-components-formatted-money-amount {
    color: var(--color-gold-hover);
    font-weight: 700;
}

/* ── Place-order → gold pill CTA (the conversion moment) ─────────────────  */
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout button.wc-block-components-button.contained {
    min-height: 54px;
    background: var(--color-gold);
    color: var(--color-text-on-gold);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: normal;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-checkout button.wc-block-components-button.contained:hover {
    background: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-1px);
    outline: none;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button__text {
    color: inherit;
}

/* "Return to cart" → quiet gold text link, not a second loud button. */
.wc-block-components-checkout-return-to-cart-button {
    color: var(--color-gold);
    text-decoration: none;
}
.wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-components-checkout-return-to-cart-button:focus-visible {
    color: var(--color-gold-hover);
}

/* Block notices on-brand (tonal panels, gold/refined-error glyphs). */
.wc-block-components-notice-banner.is-success { border-inline-start-color: var(--color-gold); }
.wc-block-components-notice-banner.is-error   { border-inline-start-color: var(--color-error); }

/* Terms / privacy note quiet + AA-readable. */
.wc-block-checkout__terms {
    color: var(--color-text-soft);
}

/* ── Block CART (if /cart is ever switched to the Cart Block too) ─────────
   Defensive: the current /cart is the classic shortcode (styled above), but
   if the Cart Block gets enabled these keep the CTA + prices on-brand. */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button.contained {
    min-height: 52px;
    background: var(--color-gold);
    color: var(--color-text-on-gold);
    border-radius: var(--radius-pill);
}
.wc-block-cart__submit-container .wc-block-components-button.contained:hover {
    background: var(--color-gold-hover);
}
.wc-block-cart .wc-block-components-product-price__value,
.wc-block-cart .wc-block-components-totals-item__value {
    color: var(--color-gold-hover);
}

/* ════════════════════════════════════════════════════════════════════════
   8c · ORDER-PAY RETRY NOTICE
   Rendered by inc/he-checkout-strings.php on the classic order-pay (retry)
   endpoint when a failed/pending order still needs payment — see that file
   for why. Quiet surface card, no divider lines, gold reserved for the link.
   ════════════════════════════════════════════════════════════════════════ */
.zohar-order-pay-retry {
    background-color: var(--color-cream-low);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-block-end: var(--space-lg);
}
.zohar-order-pay-retry p {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
}
.zohar-order-pay-retry__link {
    display: inline-block;
    color: var(--color-gold);
    font-weight: 600;
    text-decoration: underline;
}
.zohar-order-pay-retry__link:hover,
.zohar-order-pay-retry__link:focus-visible {
    color: var(--color-gold-hover);
}

/* ════════════════════════════════════════════════════════════════════════
   8d · COOKIEHUB FOUC MITIGATION (thank-you / checkout)
   CookieHub is a third-party snippet injected outside theme control (see the
   launcher-clearance note above) — we can't fix its own reappear-on-thank-you
   logic from here (that's a CookieHub session/consent-scope config question,
   not theme code). What theme CSS CAN do: the shopper report also flagged the
   banner briefly rendering in a raw/unstyled state for an instant right after
   injection, before its own stylesheet takes hold. Hide any of its known
   containers by default and only reveal them after a brief delay via a
   fill-forwards animation, giving CookieHub's own CSS time to land first so
   the customer never sees the unstyled flash — the banner still appears and
   is still fully interactive, just a beat later and pre-styled.
   ════════════════════════════════════════════════════════════════════════ */
body.woocommerce-checkout [class^="ch2-"],
body.woocommerce-checkout [class*=" ch2-"],
body.woocommerce-order-received [class^="ch2-"],
body.woocommerce-order-received [class*=" ch2-"] {
    opacity: 0;
    animation: zohar-ch2-reveal 0.18s ease forwards;
    animation-delay: 0.12s;
}
@keyframes zohar-ch2-reveal {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout [class^="ch2-"],
    body.woocommerce-checkout [class*=" ch2-"],
    body.woocommerce-order-received [class^="ch2-"],
    body.woocommerce-order-received [class*=" ch2-"] {
        animation: none;
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   9 · REDUCED MOTION
   components.css already neutralises global transitions under reduce, but we
   re-assert the transform kills for our CTAs so a hover lift never triggers
   vestibular discomfort even if load order changes.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-cart-wrap td.actions button[name="apply_coupon"]:hover,
    .woocommerce-cart-wrap td.actions button[name="apply_coupon"]:active,
    .woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"]:hover,
    .woocommerce-checkout-wrap form.checkout_coupon button[name="apply_coupon"]:active,
    .woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button:hover,
    .woocommerce-cart-wrap .wc-proceed-to-checkout a.checkout-button:active,
    .woocommerce-checkout-wrap #place_order:hover,
    .woocommerce-checkout-wrap #place_order:active,
    .woocommerce .return-to-shop a.button:hover,
    .woocommerce .return-to-shop a.button:active,
    .wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
    .wc-block-checkout button.wc-block-components-button.contained:hover {
        transform: none;
    }
}