/* ════════════════════════════════════════════════════════════════════════
   PORTRAITGIFT TRUST PALETTE — 2026-06-12
   Loaded LAST so it owns the cascade. One coherent system replaces the
   pink/red/IG-blue/purple/brown patchwork:

     Ink        #0f172a headings · #1f2937 body · #64748b secondary
     Surfaces   #ffffff cards · #f8fafc app bg · #e2e8f0 hairlines
     Action     emerald #059669 (the ONLY action/brand color)
     Warmth     amber #92400e on #fffbeb — prices, urgency, savings
     Hearts     #ed4956 — likes & notification badges only
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Root variable remap (kills IG-blue + hot-pink at the source) ──── */
:root {
    --primary-color: #059669 !important;
    --secondary-color: #047857 !important;
    --ig-primary: #059669 !important;
    --ig-primary-hover: #047857 !important;
    --ig-text-link: #047857 !important;
    --ig-border: #e2e8f0 !important;
    --ig-background: #f8fafc !important;
    --ig-text-primary: #1f2937 !important;
    --ig-text-secondary: #64748b !important;
    /* Story-ring gradient on the card avatar → quiet emerald sweep */
    --ig-gradient-start: #34d399 !important;
    --ig-gradient-mid: #059669 !important;
    --ig-gradient-end: #10b981 !important;
}

/* ── 2 · App chrome ────────────────────────────────────────────────────── */
body { background: #f8fafc !important; }

/* Top sale strip: red alarm → warm amber (urgency without anxiety) */
#saleMidnightBanner {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.08) !important;
}

/* Sticky header: calm white bar in BOTH states; the cart button carries
   the brand color instead of the whole bar screaming pink */
.header-cart-bar.has-items {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 10px rgba(15, 23, 42, 0.06) !important;
}
.header-cart-bar.has-items .header-cart-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(5, 150, 105, 0.32) !important;
}
.header-cart-bar.has-items .header-cart-btn:hover { background: linear-gradient(135deg, #059669, #047857) !important; }
.header-cart-bar.has-items .header-cart-count { background: #fff !important; color: #047857 !important; }
.header-cart-btn { background: #0f172a !important; border-color: #0f172a !important; }

/* Share button: pink circle → quiet ghost control. The old mobile style
   hardcoded a WHITE icon (css-4 `.share-gallery-btn i`) — force the icon
   and label to ink too, or it vanishes on the white button. */
.share-gallery-btn,
.header-cart-bar.has-items .share-gallery-btn {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}
.share-gallery-btn i,
.share-gallery-btn span,
.header-cart-bar.has-items .share-gallery-btn i,
.header-cart-bar.has-items .share-gallery-btn span {
    color: #475569 !important;
}
.share-gallery-btn:hover { background: #f8fafc !important; color: #0f172a !important; }
.share-gallery-btn:hover i { color: #0f172a !important; }

/* ── 3 · Urgency countdown card: muddy brown → deep slate + amber digits ─ */
.urgency-timer-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
.timer-label, #defaultUrgencyBanner .timer-label { color: #e2e8f0 !important; }
.timer-digits, #defaultUrgencyBanner .timer-digits,
#defaultUrgencyBanner #urgencyBannerCountdown { color: #fbbf24 !important; }
.timer-sublabel, #defaultUrgencyBanner .timer-sublabel { color: #94a3b8 !important; }
.urgency-info { background: #fffbeb !important; border-top: 1px solid #fde68a !important; }
.urgency-info .info-icon, .urgency-info .info-text { color: #78350f !important; }
.urgency-info .info-text strong { color: #92400e !important; }

/* ── 4 · Grid helper cards ─────────────────────────────────────────────── */
/* Generate-new: dashed pink → neutral slate with an emerald spark */
.artwork-item.generate-new-item {
    border: 2px dashed #cbd5e1 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}
.artwork-item.generate-new-item:hover { border-color: #10b981 !important; background: #f0fdf4 !important; }
.generate-new-icon {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}
.generate-new-title { color: #0f172a !important; }
.generate-new-subtitle { color: #64748b !important; }

/* Share-gallery card: purple gradient → clean white card, emerald icon.
   Platform buttons keep their native brand colors (recognition = trust). */
.share-gallery-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
.share-gallery-card .share-card-header i {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
.share-gallery-card .share-card-header h3 { color: #0f172a !important; }
.share-gallery-card .share-card-header p { color: #64748b !important; }

/* Share popup (modal twin of the card) */
.share-popup-header i { color: #059669 !important; }
.share-popup-header h3 { color: #0f172a !important; }
.share-link-box button {
    background: #0f172a !important;
    color: #fff !important;
}

/* Selected card ring: unify the greens onto the brand emerald */
.artwork-item.selected {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16), 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}

/* ── 5 · Floating elements ─────────────────────────────────────────────── */
.floating-cart {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 5px 16px rgba(5, 150, 105, 0.38) !important;
}
.floating-cart:hover { background: linear-gradient(135deg, #059669, #047857) !important; }

/* ── 6 · Cart drawer accents ───────────────────────────────────────────── */
/* Flash-sale promo widget: red alarm → premium amber voucher */
.promo-coupon-widget {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 2px dashed #d97706 !important;
}
.promo-coupon-flash-badge {
    background: linear-gradient(90deg, #d97706, #f59e0b) !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
}
.promo-coupon-headline { color: #78350f !important; }
.promo-coupon-headline-pct { color: #92400e !important; }
.promo-coupon-sub { color: #92400e !important; }
.promo-coupon-code {
    border: 1px dashed #d97706 !important;
    color: #78350f !important;
}
.promo-coupon-copy-btn {
    background: #fff !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}
.promo-coupon-apply-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}
.promo-coupon-apply-btn:hover { background: linear-gradient(135deg, #059669, #047857) !important; }
.promo-coupon-deadline { color: #b45309 !important; }
.promo-coupon-countdown { color: #92400e !important; }

/* Cart upsell price + misc stray pinks → emerald */
.video-upsell-price { color: #059669 !important; }

/* ── 7 · Stray hardcoded blues (FB-blue buttons outside platform CTAs) ─── */
.artwork-item .ig-selection-badge { background: #059669 !important; }

/* ── 8 · Typography ────────────────────────────────────────────────────── */
/* Inter for all UI — sharper than the Roboto/system mix, tabular numerals
   for prices & timers. Cormorant Garamond gives the big headings a gallery
   voice (it was already the design intent in the shipping-trust modal). */
body, button, input, select, textarea,
.ig-order-btn, .cart-checkout-cta, .header-cart-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h2, .cart-summary-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
}
h2 { font-size: 1.85rem !important; }
.cart-summary-title { font-size: 1.35rem !important; }
/* Prices, totals and countdowns: lining tabular figures, no jitter */
.vt-price, .apt-price, .mobile-total-value, .header-cart-total,
.timer-digits, .promo-coupon-countdown, .cart-savings-row,
.product-token-price, .pill-price {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Quieter, better-set body copy under headings */
.timer-label { font-weight: 600 !important; letter-spacing: 0.01em !important; }

/* ── 9 · Green diet ────────────────────────────────────────────────────── */
/* Emerald = buy actions & live selection ONLY. Informational surfaces that
   were green-washed go neutral; the signal moves into small accents. */

/* No-risk strip: green slab → quiet white card, slate text */
.no-risk-strip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.05) !important;
}
.no-risk-strip .nr-item { color: #475569 !important; }
.no-risk-strip .nr-item:not(:last-child)::after { background: #e2e8f0 !important; }

/* In-grid tier banner: mint slab → white card; only the progress fill and
   achieved tiers stay emerald */
.in-grid-tier-banner,
.in-grid-tier-banner.igb-maxed {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05) !important;
}
.in-grid-tier-banner .igb-title { color: #0f172a !important; }
.in-grid-tier-banner .igb-badge {
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
.in-grid-tier-banner .igb-track { background: #e2e8f0 !important; }
.in-grid-tier-banner .igb-node { border-color: #cbd5e1 !important; }
.in-grid-tier-banner .igb-node--on { border-color: #059669 !important; background: #059669 !important; }
.in-grid-tier-banner .igb-tier {
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid transparent !important;
}
.in-grid-tier-banner .igb-tier--on {
    color: #047857 !important;
    background: #fff !important;
    border-color: #6ee7b7 !important;
    box-shadow: none !important;
}
.in-grid-tier-banner .igb-msg { color: #334155 !important; }

/* Cart savings rows: two loud green gradient bars → calm ledger lines,
   the saved AMOUNT carries the green */
#cartFomoLineTop.cart-savings-fomo,
#cartBundleLineTop.cart-savings-fomo,
#cartFomoLineInline.cart-savings-fomo {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 600 !important;
}
#cartFomoLineTop.cart-savings-fomo span:last-child,
#cartBundleLineTop.cart-savings-fomo span:last-child,
#cartFomoLineInline.cart-savings-fomo span:last-child {
    color: #047857 !important;
    font-weight: 800 !important;
}
#cartFomoDeadlineTop, #cartFomoDeadlineInline { color: #94a3b8 !important; }

/* Bundle progress strip in cart: green slab → sleek neutral card with a
   thin progress accent. #progressText used to render INSIDE the 6px bar
   and clipped into a smudge — gone. */
.bundle-savings-strip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
}
#discountTierTitle { font-size: 13px !important; color: #0f172a !important; }
#milestoneMessage { color: #64748b !important; }
.bundle-progress {
    background: #e2e8f0 !important;
    height: 4px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
}
.bundle-progress-fill {
    background: linear-gradient(90deg, #34d399, #059669) !important;
    border-radius: 999px !important;
}
#progressText { display: none !important; }

/* Catch-all: ANY savings bar still wearing a green/blue gradient goes
   neutral — the saved amount alone carries the green */
.cart-savings-row.cart-savings-fomo {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 600 !important;
}
.cart-savings-row.cart-savings-fomo span:last-child { color: #047857 !important; font-weight: 800 !important; }
.cart-savings-volume { color: #475569 !important; }
.cart-savings-volume span:last-child { color: #047857 !important; font-weight: 700 !important; }

/* Item prices are information, not actions: ink instead of green.
   Green in the cart now = saved amounts + the checkout button, nothing else. */
.cart-item-price-new { color: #0f172a !important; }
.video-upsell-price { color: #475569 !important; }

/* Combined-discount stack: one card, three jobs — count the deals, itemize
   them, say when they expire. Rows lose their own card chrome inside it. */
.discount-stack {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}
.discount-stack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: #0f172a;
    border-bottom: 1px dashed #e2e8f0;
}
.discount-stack-header .dsh-left b { font-weight: 800; }
.discount-stack-header .dsh-right { font-weight: 600; color: #475569; }
.discount-stack-header .dsh-right b { color: #047857; font-weight: 800; font-size: 13.5px; }
.discount-stack .cart-savings-row.cart-savings-fomo {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
}
.discount-stack #cartFomoLineTop { border-bottom: 1px dashed #eef2f7 !important; }
/* The footer carries the deadline once — per-row repeat is noise */
.discount-stack #cartFomoDeadlineTop { display: none !important; }
.discount-stack-fomo {
    padding: 7px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: #fffbeb;
    border-top: 1px dashed #fde68a;
}
/* Inline remove control on the 45% row (proxies promoCouponCancelBtn) */
.dsh-label-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.discount-stack .dsh-remove {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
}
.discount-stack .dsh-remove:hover { color: #dc2626; }
/* The 45% row hosts the remove control now — the widget's duplicate link
   goes quiet (the proxy clicks it programmatically, hidden still works) */
.promo-coupon-widget.is-applied .promo-coupon-cancel-btn { display: none !important; }

/* Promo widget applied-state: mint card → neutral confirmation, the ✓ keeps
   the green */
.promo-coupon-widget.is-applied {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
.promo-coupon-widget.is-applied .promo-coupon-headline { color: #0f172a !important; }
.promo-coupon-widget.is-applied .promo-coupon-sub { color: #64748b !important; }

/* Share card spark + links: informational → slate, not brand-green */
.share-gallery-card .share-card-header i {
    background: none !important;
    -webkit-text-fill-color: #475569 !important;
    color: #475569 !important;
}
.share-popup-header i { color: #475569 !important; }
:root { --ig-text-link: #334155 !important; }

/* Card avatar story-ring: emerald sweep → quiet slate hairline */
:root {
    --ig-gradient-start: #e2e8f0 !important;
    --ig-gradient-mid: #cbd5e1 !important;
    --ig-gradient-end: #94a3b8 !important;
}