/* ═══════════════════════════════════════════════════════════════════════════
   CART v2 (2026-09-05) — hierarchy + AOV layer for the cart drawer.
   Loads LAST in cart.html (after artworks-page-11.css and palette.css) so it
   owns the cascade. It only restyles/repositions; every id/class the JS in
   artworks-page-18.js / -22.js reads or writes is kept in the markup.

   Reading order the drawer now tells, top → bottom:
     1. Offer status (45% OFF applied · ends tonight)         — one slim bar
     2. What you are buying (items, format, add-on)           — visible on open
     3. Bundle ladder after the FIRST item (test-pinned spot)
     4. Add more (your generations + often-added styles)      — AOV
     5. One savings ledger (#discountStack)                   — no duplicates
     6. Included free + guarantees (objection handling)
     7. Sticky total + Secure Checkout
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --c2-ink: #1d1b18;
    --c2-ink-soft: #45403a;
    --c2-muted: #716b62;
    --c2-faint: #a39a8d;
    --c2-hair: #e6ddce;
    --c2-paper: #faf7f1;
    --c2-accent: #71313b;
    --c2-accent-dark: #58242d;
    --c2-green: #1e7c3a;
    --c2-green-bg: #eef8f0;
    --c2-green-line: #cfe8d6;
    --c2-gold: #aa8755;
}

/* ── 1. Shell rhythm ─────────────────────────────────────────────────────── */
#cartSummary .cart-main-column { padding: 10px 14px 0 !important; }
#cartSummary .cart-layout { padding-bottom: 6px; }
#cartSummary .cart-summary-header {
    height: 54px;
    min-height: 54px;
    background: #fff;
    border-bottom: 1px solid var(--c2-hair);
    box-shadow: none;
}
#cartHeaderCount { background: var(--c2-accent) !important; }
/* The 15-minute "reserved" countdown contradicted the honest midnight deadline
   and the team already removed the page-blocking countdown; retired here. */
#cartUrgencyTimer { display: none !important; }
/* Fabricated "N people ordered last hour" (random 30–89) — replaced by the
   Trustpilot line further down. Element kept for the script that writes it. */
#cartSocialProofMobile, #cartSocialProof { display: none !important; }

/* ── 2. Offer status bar (45OFF applied) ─────────────────────────────────── */
.promo-coupon-widget.is-applied {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 9px 12px !important;
    margin: 0 0 10px !important;
    background: var(--c2-green-bg) !important;
    border: 1px solid var(--c2-green-line) !important;
    border-radius: 10px !important;
}
.promo-coupon-widget.is-applied .promo-coupon-headline {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--c2-ink) !important;
}
.promo-coupon-widget.is-applied .promo-coupon-headline::before { background: var(--c2-green); }
.promo-coupon-widget.is-applied .promo-coupon-sub { display: none; }
.promo-coupon-widget.is-applied .promo-coupon-deadline {
    display: inline-flex !important;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c2-green) !important;
    text-transform: none;
    letter-spacing: 0;
}
.promo-coupon-widget.is-applied .promo-coupon-status { flex-basis: 100%; margin-top: 2px; }
/* Unapplied voucher state (rare — another offer blocked auto-apply): calmer */
.promo-coupon-widget:not(.is-applied) { padding: 20px 14px 12px !important; margin-bottom: 10px !important; }
.promo-coupon-widget:not(.is-applied) .promo-coupon-apply-btn { padding: 12px 16px !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── 3. Preview note: one compact card ───────────────────────────────────── */
#cartInfoNotes { margin: 0 0 10px; }
#cartInfoNotes > div { margin: 0 !important; }
#cartPreviewNote {
    background: #fff !important;
    border: 1px solid var(--c2-hair) !important;
    border-radius: 10px !important;
    padding: 8px 30px 8px 10px !important;
    color: var(--c2-ink-soft) !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}
#cartPreviewNote > span:first-child { background: var(--c2-gold) !important; }
#cartInfoNotesDismiss { top: 6px; right: 6px; border-color: var(--c2-hair); color: var(--c2-faint); }

/* ── 4. Item cards ───────────────────────────────────────────────────────── */
.cart-summary-item {
    border: 1px solid var(--c2-hair) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 2px rgba(29, 27, 24, 0.04);
}
.cart-item-row { gap: 12px; }
.cart-thumb-shield, .cart-item-thumbnail {
    width: 84px !important;
    height: 112px !important;
    border-radius: 10px !important;
    border: 1px solid var(--c2-hair) !important;
}
.cart-item-main { gap: 8px; }
.cart-item-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c2-ink);
    line-height: 1.25;
}
.cart-item-title .cart-item-num {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c2-faint);
    margin-top: 1px;
}
.cart-item-meta { font-size: 11.5px; color: var(--c2-muted); margin-top: 4px; line-height: 1.35; }
.cart-item-eta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c2-ink-soft);
}
.cart-item-eta svg { width: 12px; height: 12px; color: var(--c2-green); }
/* Price column: stacked (was · now · save) so it stays ~90px wide and the title/
   spec column keeps room on a 390px phone. */
.cart-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    max-width: 44%;
    text-align: right;
    font-size: 16px;
    line-height: 1.15;
}
.cart-item-price-old { display: block; margin: 0 0 1px; font-size: 11.5px; font-weight: 500; color: var(--c2-faint); }
.cart-item-price-new { color: var(--c2-ink) !important; font-size: 16px; font-weight: 800; }
.cart-item-save-chip {
    display: inline-block;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--c2-green);
    background: var(--c2-green-bg);
    border: 1px solid var(--c2-green-line);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}
/* Unapplied discount → the price column carries the tap that takes it.
   The chip never applies anything (owner rule 2026-09-06: the shopper applies
   the code, never the page) — it scrolls to the coupon card above the items and
   flashes its Apply button. Only the FIRST item's chip breathes; a cart of three
   pulsing chips reads as noise, and one moving thing is what the eye needs. */
/* The price column is capped at 44% so the title/spec keeps room on a 390px
   phone; a line carrying the chip needs a little more or the chip spills back
   over the title. Only that line widens. */
.cart-item-price.has-apply { max-width: 54%; }
.cart-item-apply-discount {
    display: inline-flex;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    margin-top: 5px;
    padding: 4px 8px;
    border: 1px solid #f0b4b4;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff6f5 0%, #ffe8e6 100%);
    color: #b3261e;
    line-height: 1.15;
    text-align: right;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    animation: pgItemApplyPulse 2.1s ease-in-out infinite;
}
.cart-item-apply-discount .ciad-main {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.cart-item-apply-discount .ciad-sub {
    font-size: 9.5px;
    font-weight: 700;
    color: #cf4b41;
    white-space: nowrap;
}
.cart-item-apply-discount:hover {
    background: #ffe0dd;
    border-color: #e08b86;
    animation: none;
}
.cart-item-apply-discount:active { transform: scale(0.97); animation: none; }
.cart-item-apply-discount:focus-visible { outline: 2px solid #b3261e; outline-offset: 2px; }
.cart-summary-item ~ .cart-summary-item .cart-item-apply-discount { animation: none; }
@keyframes pgItemApplyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.32); }
    60%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cart-item-apply-discount { animation: none !important; }
}

.cart-item-main > div:first-child { flex: 1 1 auto; min-width: 0; }
/* The remove/share pair used to sit under the title — now a quiet footer row */
.cart-item-remove-inline { display: none !important; }
.cart-item-extras { gap: 8px; margin-top: 10px; }
.cart-format-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    font-weight: 600;
    color: var(--c2-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cart-format-head span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c2-faint); }
.cart-format-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px !important;
    padding-top: 5px; /* room for the "Most popular" tag */
}
.cart-format-pill {
    padding: 7px 4px !important;
    border-radius: 9px !important;
    border: 1.5px solid var(--c2-hair) !important;
    box-shadow: none !important;
    overflow: visible;
}
.cart-format-pill:hover { border-color: var(--c2-ink) !important; transform: none !important; box-shadow: none !important; }
.cart-format-pill.active { background: var(--c2-ink) !important; border-color: var(--c2-ink) !important; box-shadow: none !important; }
.cart-format-pill.active::after { background: var(--c2-green) !important; top: 3px; right: 4px; }
.cart-format-pill .pill-label { font-size: 10.5px !important; }
.cart-format-pill .pill-price { font-size: 11.5px !important; }
.cart-format-pill .pill-tag {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--c2-accent);
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
    pointer-events: none;
}

/* "Bring It to Life" add-on: one compact row, brand palette instead of purple */
.video-upsell-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 9px;
    align-items: center !important;
    padding: 9px 10px !important;
    border: 1.5px solid var(--c2-hair) !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.video-upsell-toggle:hover { transform: none !important; box-shadow: none !important; border-color: var(--c2-accent) !important; }
.video-upsell-toggle.active { background: var(--c2-paper) !important; border-color: var(--c2-accent) !important; }
.video-upsell-toggle .upsell-check {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    margin-top: 0 !important;
    border: 1.5px solid #c9c0b3 !important;
}
.video-upsell-toggle.active .upsell-check { background: var(--c2-accent) !important; border-color: var(--c2-accent) !important; }
.video-upsell-info .upsell-title { font-size: 12.5px !important; color: var(--c2-ink) !important; }
.upsell-badge { background: var(--c2-gold) !important; font-size: 8px !important; }
.video-upsell-toggle .video-upsell-info .upsell-desc { font-size: 11px !important; color: var(--c2-muted) !important; opacity: 1 !important; }
.upsell-preview-link {
    margin-top: 5px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    color: var(--c2-accent) !important;
    background: #fff !important;
    border: 1px solid var(--c2-hair) !important;
}
.upsell-preview-link:hover { border-color: var(--c2-accent) !important; background: var(--c2-paper) !important; }
.video-upsell-cta-col { gap: 5px; }
.video-upsell-price { font-size: 13px !important; font-weight: 800 !important; color: var(--c2-ink) !important; }
.upsell-cta-pill { background: var(--c2-accent) !important; box-shadow: none !important; animation: none !important; }
.video-upsell-toggle.active .upsell-cta-pill { background: var(--c2-green-bg) !important; color: var(--c2-green) !important; }
.video-upsell-toggle.just-previewed .upsell-cta-pill { animation: none !important; }
.upsell-preview-share { background: var(--c2-accent) !important; }

/* Footer row: note (left) · share · remove (right, quiet) */
.cart-item-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.cart-item-foot .cart-item-note-disclosure { flex: 1 1 auto; min-width: 0; margin: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
.cart-item-foot .cart-item-note-disclosure > summary {
    font-size: 11.5px !important;
    color: var(--c2-muted) !important;
    font-weight: 600 !important;
}
.cart-item-foot .cart-item-note-disclosure[open] { flex-basis: 100%; order: 10; margin-top: 4px !important; }
.cart-item-foot .cart-item-note-disclosure .cart-item-note-input { border-color: var(--c2-hair); }
.cart-item-foot .cart-item-note-disclosure .cart-item-note-input:focus { border-color: var(--c2-accent); box-shadow: 0 0 0 2px rgba(113, 49, 59, 0.12); }
.cart-item-foot-btn,
.cart-item-foot .cart-item-remove-btn,
.cart-item-foot .cart-item-share-btn.cart-item-share-ghost {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--c2-hair) !important;
    background: #fff !important;
    color: var(--c2-muted) !important;
    font: inherit;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    white-space: nowrap;
}
.cart-item-foot .cart-item-share-btn.cart-item-share-ghost:hover { color: var(--c2-accent) !important; border-color: var(--c2-accent) !important; }
.cart-item-foot .cart-item-remove-btn { margin-left: auto !important; }
.cart-item-foot .cart-item-remove-btn:hover { color: #b91c1c !important; border-color: #f3b4b4 !important; background: #fff6f6 !important; }
.cart-item-foot .cart-item-remove-btn i { font-size: 10px; }

/* Cheaper-formats nudge stays retired */
.cheaper-options-nudge { display: none !important; }

/* ── 5. Bundle ladder (node is moved after the first item by JS) ─────────── */
#tieredDiscountProgress.bundle-savings-strip {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--c2-hair) !important;
    border-radius: 12px !important;
    background: var(--c2-paper) !important;
}
#tieredDiscountProgress.bundle-savings-strip.is-maxed { background: var(--c2-green-bg) !important; border-color: var(--c2-green-line) !important; }
#discountTierTitle { font-size: 12.5px !important; color: var(--c2-ink) !important; }
#milestoneMessage { font-size: 11.5px !important; color: var(--c2-muted) !important; margin-top: 2px !important; }
#tieredDiscountProgress.is-maxed #milestoneMessage { color: var(--c2-green) !important; }
.bundle-progress { display: none !important; } /* the chips already show progress */
#bundleTierChips { gap: 5px; margin-top: 8px; }
.bundle-tier-chip {
    background: #fff;
    border: 1px solid var(--c2-hair);
    color: var(--c2-muted);
    border-radius: 8px;
    padding: 4px 3px;
    font-size: 10.5px;
    font-weight: 600;
}
.bundle-tier-chip .btc-pct { font-size: 12.5px; color: var(--c2-ink); font-weight: 800; }
.bundle-tier-chip.reached { background: var(--c2-green-bg); border-color: var(--c2-green-line); color: var(--c2-green); }
.bundle-tier-chip.reached .btc-pct { color: var(--c2-green); }
.bundle-tier-chip.next { border-color: var(--c2-accent); color: var(--c2-accent-dark); box-shadow: none; }
.bundle-tier-chip.next .btc-pct { color: var(--c2-accent-dark); }

/* ── 6. Add more: your generations + often-added styles ──────────────────── */
.cart-history-strip {
    margin: 2px 0 10px !important;
    padding: 10px 12px 8px !important;
    background: #fff !important;
    border: 1px solid var(--c2-hair) !important;
    border-radius: 12px !important;
}
.cart-history-head { display: flex; align-items: flex-start !important; justify-content: space-between; gap: 8px; margin-bottom: 8px !important; }
.cart-history-title { display: block; font-size: 13px !important; color: var(--c2-ink) !important; font-weight: 700; }
.cart-history-hint { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--c2-green); }
.cart-history-hint:empty { display: none; }
.cart-history-addall { background: var(--c2-ink) !important; color: #fff; border: 0; border-radius: 999px !important; padding: 6px 12px !important; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.cart-history-addall:disabled { opacity: .5; cursor: default; }
/* Base layout duplicated from the style artworks-page-18.js injects at runtime, so
   the strip never depends on script order to lay out as a horizontal rail. */
.cart-history-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cart-history-item { flex: 0 0 auto; width: 84px !important; }
.cart-history-thumb { position: relative; width: 84px !important; height: 112px !important; border-radius: 10px !important; overflow: hidden; background: #eee; }
.cart-history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-history-thumb[data-history-zoom] { cursor: zoom-in; }
.cart-history-zoom-ico { position: absolute; bottom: 4px; right: 4px; font-size: 11px; line-height: 1; padding: 3px 4px; border-radius: 6px; background: rgba(0,0,0,0.55); color: #fff; pointer-events: none; z-index: 2; }
.cart-history-atc, .cart-history-share { display: block; width: 100%; font-size: 11px; font-weight: 700; padding: 6px 4px; border: 0; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.cart-history-atc { margin-top: 6px; background: var(--c2-accent) !important; color: #fff; border-radius: 8px !important; }
.cart-history-atc.added { background: var(--c2-green) !important; }
.cart-history-share { margin-top: 4px; background: #fff !important; color: var(--c2-muted) !important; border: 1px solid var(--c2-hair) !important; }

.cart-reco-section { background: #fff !important; border: 1px solid var(--c2-hair) !important; margin: 0 0 10px !important; }
.cart-reco-head { color: var(--c2-ink) !important; }
.cart-reco-price { color: var(--c2-ink-soft) !important; }
.cart-reco-cta { background: var(--c2-ink) !important; }

/* Contextual upgrade nudge (#cartUpsellBlock is filled by artworks-page-22.js) */
.optional-upsell-block {
    border: 1px solid var(--c2-hair) !important;
    background: var(--c2-paper) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin: 0 0 10px !important;
}
.optional-upsell-block strong { font-size: 13px; color: var(--c2-ink); }
#cartUpsellMessage { font-size: 12px !important; color: var(--c2-ink-soft) !important; margin-top: 3px !important; line-height: 1.4; }
.cart-upgrade-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--c2-accent);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.cart-upgrade-btn:hover { background: var(--c2-accent-dark); }

.coupon-disclosure-link { color: var(--c2-muted); font-size: 12px; }

/* ── 7. ONE savings ledger — the inline duplicates are hidden ────────────── */
#cartFomoLineInline, #cartVolumeLineInline { display: none !important; }
.discount-stack { margin: 0 0 10px !important; }
.discount-stack-header { padding: 10px 12px; }
.discount-stack-header .dsh-right b { font-size: 14px; color: var(--c2-green) !important; }
.discount-stack .cart-savings-row.cart-savings-fomo { font-size: 12px !important; }
.discount-stack-fomo { font-size: 11px; }

/* Included free — always shown once the cart has an item */
#cartSavingsInline { margin: 0 0 10px !important; display: flex; }
.cart-savings-free-items-inline {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--c2-hair) !important;
    border-top: 1px solid var(--c2-hair) !important;
    border-radius: 12px;
    background: #fff;
    gap: 5px !important;
}
.cart-included-head { font-size: 12.5px; font-weight: 700; color: var(--c2-ink); margin-bottom: 3px; }
.cart-free-item { font-size: 12px !important; color: var(--c2-ink-soft) !important; }
.cart-free-item svg { color: var(--c2-gold); }
.cart-free-tag { color: var(--c2-green) !important; }

/* Guarantees — the objections a gift buyer has at this exact moment */
.cart-guarantees {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--c2-hair);
    border-radius: 12px;
    background: var(--c2-paper);
}
.cart-guarantee {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 10px;
    align-items: center; /* icon centred on the two-line text block */
}
.cart-guarantee-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--c2-hair);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c2-accent);
}
.cart-guarantee-ico svg { width: 14px; height: 14px; }
.cart-guarantee b { display: block; font-size: 12.5px; color: var(--c2-ink); line-height: 1.25; }
.cart-guarantee span { display: block; font-size: 11.5px; color: var(--c2-muted); line-height: 1.35; margin-top: 1px; }
.cart-guarantee span b { display: inline; font-size: inherit; color: var(--c2-ink-soft); font-weight: 700; }
/* i18n badge slot kept for the translation wiring; the heading already says it */
.cart-guarantee .cart-guarantee-badge { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cart-refund-policy { border-top: 0 !important; margin: 0 0 8px !important; padding: 0 2px !important; }
.cart-refund-summary { color: var(--c2-muted) !important; font-size: 12px !important; }

/* Real proof instead of a random counter */
.cart-trust-real {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 6px;
    font-size: 11.5px;
    color: var(--c2-muted);
    text-decoration: none;
}
.cart-trust-real img { height: 14px; width: auto; }
.cart-trust-real b { color: var(--c2-ink); font-weight: 700; }
.cart-clear-button { color: var(--c2-faint) !important; font-size: 12px !important; }

/* ── 8. Sticky checkout bar (mobile / tablet) ────────────────────────────── */
.cart-mobile-checkout-bar { box-shadow: 0 -6px 18px rgba(29, 27, 24, 0.08) !important; border-top-color: var(--c2-hair) !important; }
.cart-checkout-trust { color: var(--c2-muted); font-size: 10.5px; gap: 10px; }
.cart-checkout-trust svg { color: var(--c2-green); }
.mobile-total-label { font-size: 11px; color: var(--c2-muted); }
.mobile-total-value { font-size: 19px !important; color: var(--c2-ink); }
.mobile-total-was { color: var(--c2-faint); }
#cartMobileSavingsChip { background: var(--c2-green-bg) !important; border-color: var(--c2-green-line) !important; color: var(--c2-green) !important; }
.cart-checkout-cta {
    background: linear-gradient(135deg, #22945a, #1e7c3a) !important;
    box-shadow: 0 6px 16px rgba(30, 124, 58, 0.28) !important;
    border-radius: 12px !important;
}
.cart-checkout-cta:disabled { background: #b8b1a6 !important; box-shadow: none !important; }
.cart-checkout-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 0 0;
    font-size: 9.5px;
    line-height: 1;
    color: var(--c2-faint);
}
.cart-checkout-pay > span {
    border: 1px solid var(--c2-hair);
    border-radius: 4px;
    padding: 3px 5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c2-muted);
    white-space: nowrap;
}
.cart-checkout-pay > .cart-checkout-pay-note { border: 0; padding: 3px 0 3px 4px; font-weight: 500; color: var(--c2-faint); }
@media (min-width: 1024px) { .cart-checkout-pay { display: none; } }

/* ── 9. Desktop: order summary aside ─────────────────────────────────────── */
@media (min-width: 1024px) {
    #cartDesktopSummaryColumn { padding: 12px 16px 14px 0 !important; }
    .cart-thumb-shield, .cart-item-thumbnail { width: 96px !important; height: 128px !important; }
    .cart-item-price { max-width: none; }
    .order-summary-box { border: 1px solid var(--c2-hair) !important; border-radius: 14px !important; padding: 14px !important; }
    /* "Secure Checkout · $360.71" on one line inside the 320px aside */
    #cartOrderButton.cart-summary-button { padding: 13px 14px !important; font-size: 15px !important; }
    #cartOrderButton .checkout-main-row { display: flex !important; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-size: 1em !important; }
    #cartOrderButton .checkout-text { font-size: 15px; }
    #cartOrderButtonTotal { font-size: 15px; font-weight: 800; margin-left: 0; }
    .order-summary-row { font-size: 13.5px; color: var(--c2-ink-soft); }
    .order-summary-row.total { border-top-color: var(--c2-hair) !important; font-size: 20px; color: var(--c2-ink); }
    #cartSummarySavingsLine.summary-savings-line { background: var(--c2-green-bg); border-color: var(--c2-green-line); color: var(--c2-green); }
    #cartDeliveryEstimate { background: #fff; border-color: var(--c2-hair); color: var(--c2-ink-soft); }
    .cart-pobox-details { margin: 2px 0 6px; font-size: 11px; color: var(--c2-muted); }
    .cart-pobox-details summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--c2-faint); }
    .cart-pobox-details summary::-webkit-details-marker { display: none; }
    .cart-pobox-details summary::before { content: '› '; }
    .cart-pobox-details[open] summary::before { content: '↓ '; }
    .cart-pobox-details p { margin: 6px 0 0; line-height: 1.45; }
    .cart-trust-strip { gap: 14px; }
    .compact-trust-note { color: var(--c2-faint); font-size: 11.5px; margin-top: 6px; }
}

/* ── 11. Boot: the drawer IS the page ────────────────────────────────────────
   cart.html sets html.pg-embed (drawer iframe on PDP/header/strip) and
   html.pg-cart-boot (first paint → items rendered) in a synchronous <head>
   script. Before this, the iframe painted the page chrome, then slid the drawer
   up, then filled it — three visible steps that read as "a page, then the cart". */
html.pg-embed .trustpilot-bar,
html.pg-embed #headerCartBarSentinel,
html.pg-embed #headerCartBar,
html.pg-embed #cartBackdrop,
html.pg-embed #floatingCart,
html.pg-embed #defaultUrgencyBanner:not(.pg-embed-banner) { display: none !important; }
html.pg-embed body { background: #fff; }
html.pg-embed .cart-summary { transition: none !important; }
html.pg-embed .cart-summary-overlay { display: none !important; }
/* Drawer shell visible from the first paint; its content stays hidden under the
   skeleton until the boot script lifts the flag. */
html.pg-cart-boot .cart-summary { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
html.pg-cart-boot .cart-summary-shell { position: relative; }
html.pg-cart-boot .cart-summary-shell > :not(.cart-boot-skeleton) { visibility: hidden; }
html.pg-cart-boot .cart-mobile-checkout-bar { visibility: hidden; }
.cart-boot-skeleton { display: none; }
html.pg-cart-boot .cart-boot-skeleton {
    display: block;
    position: absolute;
    inset: 0;
    padding: 10px 14px;
    overflow: hidden;
    pointer-events: none;
}
.cart-boot-skeleton .cbs-bar,
.cart-boot-skeleton .cbs-thumb,
.cart-boot-skeleton .cbs-lines i {
    background: linear-gradient(90deg, #efeae2 0%, #f7f3ec 40%, #efeae2 80%);
    background-size: 200% 100%;
    animation: cbsShimmer 1.4s linear infinite;
    border-radius: 8px;
}
.cart-boot-skeleton .cbs-bar { height: 44px; border-radius: 10px; margin-bottom: 10px; }
.cart-boot-skeleton .cbs-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--c2-hair);
    border-radius: 14px;
    margin-bottom: 10px;
    background: #fff;
}
.cart-boot-skeleton .cbs-thumb { width: 84px; height: 112px; border-radius: 10px; flex: 0 0 auto; }
.cart-boot-skeleton .cbs-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.cart-boot-skeleton .cbs-lines i { display: block; height: 13px; width: 60%; }
.cart-boot-skeleton .cbs-lines i:nth-child(2) { width: 85%; }
.cart-boot-skeleton .cbs-lines i:nth-child(3) { width: 40%; height: 28px; margin-top: 4px; }
/* Match the saved cart: 1 or 2 items → fewer placeholder cards */
html[data-pg-cart-expected="1"] .cart-boot-skeleton .cbs-card:nth-child(n+3),
html[data-pg-cart-expected="2"] .cart-boot-skeleton .cbs-card:nth-child(n+4) { display: none; }
@keyframes cbsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cart-boot-skeleton .cbs-bar, .cart-boot-skeleton .cbs-thumb, .cart-boot-skeleton .cbs-lines i { animation: none; } }

/* ── 10. Small phones: keep the item card readable ───────────────────────── */
@media (max-width: 380px) {
    .cart-thumb-shield, .cart-item-thumbnail { width: 72px !important; height: 96px !important; }
    .cart-item-title { font-size: 13.5px; }
    .cart-format-pill .pill-label { font-size: 10px !important; }
    .cart-format-pill .pill-price { font-size: 11px !important; }
    .video-upsell-toggle { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
    .video-upsell-cta-col { grid-column: 2; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
}