/* ═══════════════════════════════════════════════════════════════════════════
   cart-lane.css — cart conversion lane additions (2026-07-23, C2 + NEW-3).
   ONLY the styles that v2-extras.css does not already carry:
     1. .cart__note      — Jeanette's personal note (no portrait; C3 owns imagery)
     2. .cart__payments  — payment-icon row under the trust strip
     3. .cart__nudge-form / -unit / --piece — quick-add form glue for the
        nudge panel (the .cart__nudge core styles already live in v2-extras.css,
        jm-colored, together with the discount-badge classes)
   Enqueue (functions.php, wired BY HAND — this file only documents it):
     wp_enqueue_style('jm-cart-lane',
         get_stylesheet_directory_uri() . '/assets/cart-lane.css',
         ['jm-v2-extras'], filemtime(...));
   Scope guard: cart-card children follow v2-extras' convention
   (body.jm-v2.woocommerce-cart) so nothing leaks outside the cart page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Personal note (Jeanette) ─────────────────────────────────────────
   Replaces fabricly's .cart__camilla portrait block: same warm paper-scrap
   position in the card, but text-only — no portrait image. */
body.jm-v2.woocommerce-cart aside.cart > .cart__note {
    position: relative;
    margin: 12px 24px 16px;
    padding: 18px 20px 14px;
    background: var(--cream-dark, #F7F6F3);
    border: 1px dashed var(--jm-pink, #E27297);
    border-radius: 6px;
}
body.jm-v2.woocommerce-cart aside.cart > .cart__note .cart__note-tape {
    position: absolute;
    top: -10px;
    left: 30px;
    width: 64px;
    height: 18px;
    transform: rotate(-3deg);
    background: rgba(244, 169, 127, 0.45); /* peach tape — matches jm tape rgba */
    pointer-events: none;
}
body.jm-v2.woocommerce-cart aside.cart > .cart__note .cart__note-line {
    font-family: 'Caveat', cursive;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--text, #333);
}
body.jm-v2.woocommerce-cart aside.cart > .cart__note .cart__note-byline {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ─── 2. Payments row in the cart footer ──────────────────────────────────
   Icons come from jm_payment_icons() (functions.php) — each icon is a
   .jm-payment div wrapping an inline SVG. */
body.jm-v2.woocommerce-cart aside.cart .cart__payments {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
body.jm-v2.woocommerce-cart aside.cart .cart__payments .jm-payment {
    display: inline-flex;
    line-height: 0;
    opacity: 0.9;
}

/* ─── 3. Nudge quick-add form glue ────────────────────────────────────────
   The form element wraps the existing .cart__nudge-controls row; keep it
   invisible in the layout. Piece products (no meter stepper) right-align
   their single button. */
.cart__nudge-form {
    margin: 0;
    display: block;
}
.cart__nudge-controls--piece {
    justify-content: flex-end;
}
.cart__nudge-unit {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #999);
    white-space: nowrap;
}
/* Sale prices inside a nudge card (get_price_html can carry <del>/<ins>) —
   keep the struck part quiet so the card stays readable at 12px. */
.cart__nudge-price del {
    color: var(--text-muted, #999);
    font-weight: 600;
    margin-right: 4px;
}
.cart__nudge-price ins {
    text-decoration: none;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────
   Nudge mobile behavior (scroll-snap list, 44px steppers) already lives in
   v2-extras.css; only the new blocks need small-screen padding. */
@media (max-width: 639px) {
    body.jm-v2.woocommerce-cart aside.cart > .cart__note {
        margin: 12px 16px 14px;
        padding: 16px 16px 12px;
    }
    body.jm-v2.woocommerce-cart aside.cart > .cart__note .cart__note-line {
        font-size: 17px;
    }
    body.jm-v2.woocommerce-cart aside.cart .cart__payments {
        gap: 5px;
    }
}