@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Josefin+Sans:wght@300;400;600&family=Crimson+Pro:ital,wght@1,300;1,400&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --void:         #07060A;
  --void-2:       #0D0B12;
  --void-3:       #141020;
  --copper:       #C8714A;
  --copper-lt:    #E08860;
  --copper-dim:   #9A5030;
  --copper-glow:  rgba(200,113,74,0.14);
  --copper-haze:  rgba(200,113,74,0.06);
  --saffron:      #E8A030;
  --saffron-lt:   #F0BC58;
  --saffron-dim:  #B07818;
  --saffron-glow: rgba(232,160,48,0.12);
  --moon:         #F0EAE0;
  --moon-2:       #D8CEBC;
  --moon-3:       #A89880;
  --moon-4:       #685848;
  --moon-5:       #382818;
  --glass:        rgba(240,234,224,0.06);
  --glass-med:    rgba(240,234,224,0.1);
  --glass-str:    rgba(240,234,224,0.04);
  --b-ghost:      rgba(240,234,224,0.07);
  --b-soft:       rgba(240,234,224,0.13);
  --b-med:        rgba(240,234,224,0.2);
  --b-copper:     rgba(200,113,74,0.3);
  --b-saffron:    rgba(232,160,48,0.25);
  --danger:       #E05858;
  --ff-head:      'Yeseva One', Georgia, serif;
  --ff-sub:       'Crimson Pro', Georgia, serif;
  --ff-body:      'Josefin Sans', system-ui, sans-serif;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;
  --s-sm:   0 2px 20px rgba(0,0,0,0.4);
  --s-md:   0 6px 32px rgba(0,0,0,0.5);
  --s-copper: 0 4px 24px rgba(200,113,74,0.2);
  --banner-h: 34px;
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
body.cart-page:not(.dark-mode) {
  --void:         #F5F0E8;
  --void-2:       #EDE5D8;
  --void-3:       #E2D8C8;
  --copper:       #A04820;
  --copper-lt:    #C06030;
  --copper-dim:   #783010;
  --copper-glow:  rgba(160,72,32,0.1);
  --copper-haze:  rgba(160,72,32,0.05);
  --saffron:      #B07010;
  --saffron-lt:   #C88820;
  --saffron-dim:  #885008;
  --saffron-glow: rgba(176,112,16,0.1);
  --moon:         #2A1808;
  --moon-2:       #503020;
  --moon-3:       #806050;
  --moon-4:       #B09080;
  --moon-5:       #D8C8B8;
  --glass:        rgba(42,24,8,0.05);
  --glass-med:    rgba(42,24,8,0.09);
  --glass-str:    rgba(42,24,8,0.03);
  --b-ghost:      rgba(42,24,8,0.07);
  --b-soft:       rgba(42,24,8,0.13);
  --b-med:        rgba(42,24,8,0.2);
  --b-copper:     rgba(160,72,32,0.28);
  --b-saffron:    rgba(176,112,16,0.22);
  --s-sm:   0 2px 20px rgba(42,24,8,0.08);
  --s-md:   0 6px 32px rgba(42,24,8,0.12);
  --s-copper: 0 4px 20px rgba(160,72,32,0.18);
}

body.dark-mode.cart-page {
  --void:         #07060A;
  --void-2:       #0D0B12;
  --void-3:       #141020;
  --copper:       #C8714A;
  --copper-lt:    #E08860;
  --copper-dim:   #9A5030;
  --copper-glow:  rgba(200,113,74,0.14);
  --copper-haze:  rgba(200,113,74,0.06);
  --saffron:      #E8A030;
  --saffron-lt:   #F0BC58;
  --saffron-dim:  #B07818;
  --saffron-glow: rgba(232,160,48,0.12);
  --moon:         #F0EAE0;
  --moon-2:       #D8CEBC;
  --moon-3:       #A89880;
  --moon-4:       #685848;
  --moon-5:       #382818;
  --glass:        rgba(240,234,224,0.06);
  --glass-med:    rgba(240,234,224,0.1);
  --glass-str:    rgba(240,234,224,0.04);
  --b-ghost:      rgba(240,234,224,0.07);
  --b-soft:       rgba(240,234,224,0.13);
  --b-med:        rgba(240,234,224,0.2);
  --b-copper:     rgba(200,113,74,0.3);
  --b-saffron:    rgba(232,160,48,0.25);
}

/* ── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.cart-page {
  font-family: var(--ff-body) !important;
  background: var(--void-2) !important;
  color: var(--moon) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient copper bloom — bottom left */
body.cart-page::before {
  content: '';
  position: fixed;
  bottom: -20%; left: -10%;
  width: 70vw; height: 65vh;
  background: radial-gradient(ellipse at center,
    rgba(200,113,74,0.09) 0%,
    rgba(232,160,48,0.04) 38%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

body.cart-page:not(.dark-mode)::before { opacity: 0.5; }

/* ── TOP BANNER ──────────────────────────────────────────── */
.top-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--banner-h) !important;
  background: linear-gradient(90deg,
    var(--copper-dim), var(--copper), var(--saffron), var(--copper), var(--copper-dim)
  ) !important;
  color: #07060A !important;
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

body.cart-page:not(.dark-mode) .top-banner { color: #fff !important; }

.top-banner span {
  animation: scrollBanner 14s linear infinite !important;
  white-space: nowrap !important;
  padding-left: 100% !important;
  display: inline-block !important;
}

@keyframes scrollBanner {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.banner-close {
  background: none !important;
  border: none !important;
  color: inherit !important;
  font-size: 15px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.banner-close:hover { opacity: 1 !important; }

/* ── SPINNER ─────────────────────────────────────────────── */
#spinnerOverlay {
  background: rgba(7,6,10,0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
body.cart-page:not(.dark-mode) #spinnerOverlay {
  background: rgba(245,240,232,0.92) !important;
}
#spinnerOverlay > div {
  border-color: var(--b-soft) !important;
  border-top-color: var(--copper) !important;
  width: 40px !important;
  height: 40px !important;
  border-width: 2px !important;
}

/* ══════════════════════════════════════════════════════════
   THE BIG ONE: LAYOUT REDESIGN
   #mainCartContainer becomes a CSS Grid
   Left col  → #cartContainer (items)
   Right col → #cartSummary + #orderForm (sticky sidebar)
   ══════════════════════════════════════════════════════════ */

#mainCartContainer {
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
  margin-top: calc(var(--banner-h) + 1.5rem) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 1.5rem 2rem 4rem !important;

  /* THE GRID */
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  grid-template-rows: auto auto 1fr !important;
  grid-template-areas:
    "header  header"
    "topbar  topbar"
    "items   sidebar" !important;
  gap: 0 1.75rem !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1;
}

/* Header row — all three items share row 1 spanning full width.
   backBtn: justify-self start (left)
   h1: position absolute, transform center (middle)
   theme-toggle: justify-self end (right)
   Container is position:relative so h1 absolute works. */
#mainCartContainer > #backBtn,
#mainCartContainer > h1,
#mainCartContainer > .theme-toggle-btn {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
}

#backBtn {
  grid-area: header !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  justify-self: start !important;
  align-self: center !important;
  z-index: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0.45rem 1.1rem !important;
  background: var(--glass) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-pill) !important;
  color: var(--moon-3) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.18s ease !important;
  margin-bottom: 0 !important;
}

#backBtn:hover {
  background: var(--copper-haze) !important;
  border-color: var(--b-copper) !important;
  color: var(--copper-lt) !important;
  transform: none !important;
}

/* h1 — absolute center of the full header row */
#mainCartContainer > h1 {
  grid-area: header !important;
  font-family: var(--ff-head) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  color: var(--moon) !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  margin: 0 !important;

  /* Center it absolutely within the header row */
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  text-align: center !important;
  align-self: center !important;
  pointer-events: none !important;
}

/* Theme toggle — absolute right of header row */
.theme-toggle-btn {
  grid-area: header !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  justify-self: end !important;
  align-self: center !important;
  z-index: 2 !important;

  background: var(--glass) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-pill) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.theme-toggle-btn:hover {
  background: var(--copper-haze) !important;
  border-color: var(--b-copper) !important;
  transform: scale(1.1) !important;
}

/* Header row needs to be a flex container so back + h1 + toggle align */
/* Header row — consistent height, bottom margin */
#mainCartContainer > #backBtn,
#mainCartContainer > h1,
#mainCartContainer > .theme-toggle-btn {
  height: 48px !important;
  line-height: 48px !important;
  margin-bottom: 0.75rem !important;
}

/* ── TOP BAR ─────────────────────────────────────────────── */
#cartTopBar {
  grid-area: topbar !important;
  position: sticky !important;
  top: calc(var(--banner-h) + 4px) !important;
  background: rgba(13,11,18,0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 0.65rem 1.25rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 50 !important;
  font-family: var(--ff-body) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--moon-3) !important;
  margin-bottom: 1.25rem !important;
  overflow: hidden !important;
}

/* copper-saffron top thread */
#cartTopBar::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), var(--saffron), var(--copper), transparent);
  border-radius: 2px;
}

body.cart-page:not(.dark-mode) #cartTopBar {
  background: rgba(255,255,255,0.88) !important;
  border-color: var(--b-soft) !important;
  color: var(--moon-3) !important;
}

#cartTopBar #totalPrice {
  font-family: var(--ff-head) !important;
  font-size: 1.1rem !important;
  color: var(--copper) !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* ── CART ITEMS — left column ────────────────────────────── */
#cartContainer {
  grid-area: items !important;
  background: var(--glass) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--s-sm) !important;
  align-self: start !important;
}

body.cart-page:not(.dark-mode) #cartContainer {
  background: rgba(255,255,255,0.55) !important;
  border-color: var(--b-soft) !important;
}

/* "Your Selection" label */
#cartContainer:not(:empty)::before {
  content: 'Your Selection';
  display: block;
  font-family: var(--ff-body);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--saffron);
  padding: 1.1rem 1.75rem 0.9rem;
  border-bottom: 1px solid var(--b-ghost);
  background: linear-gradient(90deg, var(--copper-haze), transparent 55%);
}

body.cart-page:not(.dark-mode) #cartContainer:not(:empty)::before {
  background: linear-gradient(90deg, rgba(160,72,32,0.05), transparent 55%);
}

/* empty state */
#cartContainer > p {
  font-family: var(--ff-sub) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: var(--moon-3) !important;
  text-align: center !important;
  padding: 3.5rem 1.5rem !important;
}

/* ── SINGLE CART ITEM ────────────────────────────────────── */
.cart-item {
  display: flex !important;
  gap: 1.25rem !important;
  align-items: flex-start !important;
  padding: 1.25rem 1.75rem !important;
  border-bottom: 1px solid var(--b-ghost) !important;
  position: relative !important;
  transition: background 0.16s ease !important;
}

.cart-item:last-child { border-bottom: none !important; }

.cart-item:hover { background: var(--copper-haze) !important; }
body.cart-page:not(.dark-mode) .cart-item:hover { background: rgba(255,255,255,0.38) !important; }

/* fire streak — left edge on hover */
.cart-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  bottom: 18% !important;
  width: 3px !important;
  background: linear-gradient(180deg, transparent, var(--copper), var(--saffron), var(--copper), transparent) !important;
  border-radius: 3px !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
}

.cart-item:hover::before { opacity: 1 !important; }

/* Image */
.cart-item > img,
.cart-item img {
  width: 90px !important;
  height: 90px !important;
  object-fit: cover !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--b-copper) !important;
  flex-shrink: 0 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.cart-item:hover > img,
.cart-item:hover img {
  transform: scale(1.04) !important;
  box-shadow: var(--s-copper) !important;
}

/* Inner content div (JS renders this as a plain div with style="flex:1") */
.cart-item > div {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

/* Product name — p > strong */
.cart-item p { margin: 0 !important; }

.cart-item p strong {
  font-family: var(--ff-head) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--moon) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

/* Price line */
.cart-item p:not(:first-child) {
  font-family: var(--ff-sub) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 0.85rem !important;
  color: var(--moon-3) !important;
}

/* Controls row */
.cart-controls-row {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-top: 0.1rem !important;
}

/* ── QTY STEPPER ─────────────────────────────────────────── */
.quantity-controls {
  background: transparent !important;
  border: 1px solid var(--b-copper) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 !important;
  color: var(--moon) !important;
  font-family: var(--ff-body) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.quantity-controls button {
  background: transparent !important;
  border: none !important;
  color: var(--moon-3) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.13s ease !important;
  line-height: 1 !important;
}

.quantity-controls button:hover {
  background: var(--copper-glow) !important;
  color: var(--copper-lt) !important;
}

.quantity-controls span {
  font-family: var(--ff-head) !important;
  font-size: 0.9rem !important;
  color: var(--moon) !important;
  min-width: 34px !important;
  text-align: center !important;
  border-left: 1px solid var(--b-copper) !important;
  border-right: 1px solid var(--b-copper) !important;
  line-height: 32px !important;
  display: inline-block !important;
}

/* ── REMOVE BTN ──────────────────────────────────────────── */
.remove-btn {
  background: none !important;
  border: none !important;
  color: var(--moon-4) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.13s ease !important;
  padding: 0 !important;
}

.remove-btn:hover { color: var(--danger) !important; }

/* ── ITEM SUBTOTAL ───────────────────────────────────────── */
.subtotal,
.cart-item-subtotal {
  font-family: var(--ff-head) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--moon) !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.1rem !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════
   RIGHT SIDEBAR: #cartSummary + #orderForm
   Both placed in grid-area: sidebar via CSS order trick
   ══════════════════════════════════════════════════════════ */

#cartSummary {
  grid-area: sidebar !important;
  align-self: start !important;
  text-align: left !important;

  /* Card styling */
  background: var(--glass-med) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-xl) !important;
  padding: 1.75rem !important;
  box-shadow: var(--s-sm) !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  position: relative !important;
  overflow: hidden !important;
}

body.cart-page:not(.dark-mode) #cartSummary {
  background: rgba(255,255,255,0.65) !important;
  border-color: var(--b-soft) !important;
}

/* copper-saffron top thread */
#cartSummary::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper-dim), var(--copper), var(--saffron), var(--copper), var(--copper-dim), transparent);
}

/* "Order Summary" label */
#cartSummary::after {
  content: 'Order Summary';
  display: block;
  font-family: var(--ff-body);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 0.85rem;
}

.cart-summary-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}

.cart-total-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid var(--b-ghost) !important;
}

.cart-total-label {
  font-family: var(--ff-body) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--moon-4) !important;
  line-height: 1 !important;
  padding-bottom: 0.2rem !important;
}

body.cart-page:not(.dark-mode) .cart-total-label { color: var(--moon-3) !important; }

/* Gradient copper-saffron total — the centrepiece */
.cart-total-value {
  font-family: var(--ff-head) !important;
  font-size: 3rem !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg,
    var(--copper-dim) 0%,
    var(--copper)     30%,
    var(--saffron)    55%,
    var(--copper-lt)  80%,
    var(--copper)     100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: var(--copper) !important;
}

/* ── ORDER FORM — right sidebar bottom ───────────────────── */
#orderForm {
  grid-area: sidebar !important;
  align-self: start !important;
  margin-top: 1.25rem !important;

  background: var(--glass-med) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-xl) !important;
  padding: 1.75rem !important;
  box-shadow: var(--s-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

body.cart-page:not(.dark-mode) #orderForm {
  background: rgba(255,255,255,0.65) !important;
  border-color: var(--b-soft) !important;
}

/* Make summary + form stack inside their shared grid area */
/* CSS grid doesn't natively let two items share the same area vertically,
   so we use a subgrid trick: sidebar = single column, items stack naturally */


/* Warning box */
#orderForm > div[style*="background"],
#orderForm > div[style*="fff3cd"] {
  background: var(--saffron-glow) !important;
  border: 1px solid var(--b-saffron) !important;
  border-radius: var(--r-md) !important;
  color: var(--saffron-lt) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.77rem !important;
  font-weight: 400 !important;
  padding: 0.75rem 1rem !important;
}
body.cart-page:not(.dark-mode) #orderForm > div[style*="background"] {
  color: var(--saffron-dim) !important;
}

/* Payment heading */
#orderForm h3 {
  font-family: var(--ff-head) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--moon) !important;
  letter-spacing: 0.02em !important;
  margin: 0.1rem 0 0.2rem !important;
}

/* Inputs */
#orderForm input[type="text"],
#orderForm input[type="tel"] {
  display: block !important;
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid var(--b-soft) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  background: var(--glass-str) !important;
  color: var(--moon) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

#orderForm input::placeholder { color: var(--moon-5) !important; }

#orderForm input:focus {
  border-color: var(--b-copper) !important;
  box-shadow: 0 0 0 3px var(--copper-haze) !important;
  background: var(--glass) !important;
}

body.cart-page:not(.dark-mode) #orderForm input {
  background: rgba(255,255,255,0.6) !important;
  color: var(--moon) !important;
  border-color: var(--b-soft) !important;
}
body.cart-page:not(.dark-mode) #orderForm input::placeholder {
  color: var(--moon-4) !important;
}
body.cart-page:not(.dark-mode) #orderForm input:focus {
  background: rgba(255,255,255,0.9) !important;
  border-color: var(--b-copper) !important;
}

body.dark-mode.cart-page #orderForm input {
  background: var(--glass-str) !important;
  color: var(--moon) !important;
  border-color: var(--b-soft) !important;
}

#phoneError {
  color: var(--danger) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  margin: -0.4rem 0 0 !important;
}

/* ── PAYMENT METHODS ─────────────────────────────────────── */
.payment-method,
label[data-method] {
  display: flex !important;
  align-items: center !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--b-ghost) !important;
  border-radius: var(--r-md) !important;
  background: var(--glass-str) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-bottom: 0 !important;
}

.payment-method:hover,
label[data-method]:hover {
  background: var(--copper-haze) !important;
  border-color: var(--b-soft) !important;
}

.payment-method:has(input:checked),
label[data-method]:has(input:checked) {
  border-color: var(--b-copper) !important;
  background: var(--copper-glow) !important;
}

.payment-method input[type="radio"],
label[data-method] input[type="radio"] {
  accent-color: var(--copper) !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.payment-method > div,
label[data-method] > div { flex: 1 !important; }

.payment-method > div > div:first-child,
label[data-method] > div > div:first-child {
  font-family: var(--ff-body) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--moon) !important;
  letter-spacing: 0.02em !important;
}

.payment-method > div > div:not(:first-child),
label[data-method] > div > div:not(:first-child) {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  color: var(--moon-3) !important;
}

.payment-method i,
label[data-method] i {
  color: var(--copper) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  font-size: 1rem !important;
}

body.dark-mode.cart-page .payment-method,
body.dark-mode.cart-page label[data-method] {
  background: var(--glass-str) !important;
  border-color: var(--b-ghost) !important;
  color: var(--moon) !important;
}

body.dark-mode.cart-page label:hover {
  background: var(--copper-haze) !important;
}

/* ── CONFIRM BUTTON ──────────────────────────────────────── */
#confirmOrderBtn,
#actionButtons button {
  width: 100% !important;
  padding: 1rem !important;
  background: linear-gradient(135deg,
    var(--copper-dim) 0%,
    var(--copper)     40%,
    var(--saffron)    72%,
    var(--copper-lt)  100%
  ) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  font-family: var(--ff-head) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 22px rgba(200,113,74,0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 0.25rem !important;
}

#confirmOrderBtn::before,
#actionButtons button::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.58s ease;
}

#confirmOrderBtn:hover:not(:disabled)::before,
#actionButtons button:hover:not(:disabled)::before { left: 160%; }

#confirmOrderBtn:hover,
#actionButtons button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 30px rgba(200,113,74,0.35) !important;
  filter: brightness(1.05) !important;
}

/* ── SUCCESS STATE ───────────────────────────────────────── */
#orderForm h3 {
  font-family: var(--ff-head) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: var(--copper) !important;
  margin-bottom: 0.5rem !important;
}

#orderForm p {
  font-family: var(--ff-body) !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  color: var(--moon-3) !important;
  letter-spacing: 0.02em !important;
  margin: 0.25rem 0 !important;
  text-align: center !important;
}

.btn-continue,
a.btn-continue,
#continueShopping {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin-top: 1.1rem !important;
  padding: 0.88rem 2rem !important;
  border-radius: var(--r-pill) !important;
  background: linear-gradient(135deg, var(--copper-dim), var(--copper), var(--saffron)) !important;
  color: var(--void) !important;
  text-decoration: none !important;
  font-family: var(--ff-head) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 4px 20px rgba(200,113,74,0.25) !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.btn-continue:hover,
#continueShopping:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(200,113,74,0.35) !important;
  filter: brightness(1.05) !important;
}

.btn-continue::after,
a.btn-continue::after { content: "→" !important; }

/* ── DARK MODE — neutralise old JS inline styles ─────────── */
body.dark-mode.cart-page #mainCartContainer,
body.dark-mode.cart-page .cart-summary-box,
body.dark-mode.cart-page #cartTopBar {
  background-color: transparent !important;
  color: var(--moon) !important;
}

body.dark-mode.cart-page input {
  background-color: var(--glass-str) !important;
  color: var(--moon) !important;
  border: 1px solid var(--b-soft) !important;
  box-shadow: none !important;
}

body.dark-mode.cart-page input::placeholder { color: var(--moon-5) !important; }
body.dark-mode.cart-page .quantity-controls { background: transparent !important; }
body.dark-mode.cart-page .remove-btn { color: var(--moon-4) !important; }
body.dark-mode.cart-page .remove-btn:hover { color: var(--danger) !important; }
body.dark-mode.cart-page .cart-total-label { color: var(--moon-4) !important; }
body.dark-mode.cart-page a { color: var(--moon-3) !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — single column below 860px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  #mainCartContainer {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "topbar"
      "items"
      "sidebar-top"
      "sidebar-bottom" !important;
    grid-template-rows: auto !important;
    gap: 1.25rem !important;
    padding: 1.25rem 1.25rem 4rem !important;
  }
  

  #cartSummary  { margin-top: 0 !important; }
  #orderForm    { margin-top: 0 !important; }

  .cart-total-value { font-size: 2.5rem !important; }
  .theme-toggle-btn { top: 0rem !important; right: 1.25rem !important; }
}

@media (max-width: 600px) {
  #mainCartContainer {
    padding: 1rem 1rem 3.5rem !important;
    margin-top: calc(var(--banner-h) + 0.85rem) !important;
  }

  #mainCartContainer > h1 { font-size: 1.65rem !important; }

  .cart-item {
    padding: 1rem 1.1rem !important;
    gap: 1rem !important;
  }

  .cart-item > img, .cart-item img {
    width: 74px !important;
    height: 74px !important;
  }

  .cart-total-value { font-size: 2.1rem !important; }
  #cartSummary, #orderForm { padding: 1.25rem !important; }
  .theme-toggle-btn { top: 0rem !important; right: 1rem !important; }
}

@media (max-width: 400px) {
  #mainCartContainer { padding: 0.85rem 0.85rem 3rem !important; }
  #mainCartContainer > h1 { font-size: 1.35rem !important; }

  .cart-item { padding: 0.9rem 0.85rem !important; gap: 0.8rem !important; }
  .cart-item > img, .cart-item img { width: 64px !important; height: 64px !important; }
  .quantity-controls button { width: 28px !important; height: 28px !important; }
  .quantity-controls span { min-width: 28px !important; line-height: 28px !important; }
  .subtotal { font-size: 1rem !important; }
  .cart-total-value { font-size: 1.85rem !important; }
  #cartSummary, #orderForm { padding: 1rem !important; }
  #confirmOrderBtn, #actionButtons button { font-size: 0.88rem !important; }
  .theme-toggle-btn { width: 32px !important; height: 32px !important; font-size: 13px !important; top: 0rem !important; right: 0.85rem !important; }
}

@media (max-width: 330px) {
  #mainCartContainer { padding: 0.75rem 0.75rem 2.5rem !important; }
  #mainCartContainer > h1 { font-size: 1.15rem !important; }
  .cart-item { padding: 0.8rem 0.75rem !important; gap: 0.65rem !important; }
  .cart-item > img, .cart-item img { width: 55px !important; height: 55px !important; border-radius: var(--r-sm) !important; }
  .cart-item p strong { font-size: 0.88rem !important; }
  .quantity-controls button { width: 26px !important; height: 26px !important; font-size: 0.85rem !important; }
  .quantity-controls span { min-width: 26px !important; line-height: 26px !important; font-size: 0.8rem !important; }
  .subtotal { font-size: 0.92rem !important; }
  .cart-total-value { font-size: 1.6rem !important; }
  #cartSummary, #orderForm { padding: 0.85rem !important; border-radius: var(--r-lg) !important; }
  #orderForm input { padding: 0.65rem 0.75rem !important; font-size: 0.82rem !important; }
  .payment-method, label[data-method] { padding: 0.65rem 0.75rem !important; }
  #confirmOrderBtn, #actionButtons button { font-size: 0.82rem !important; padding: 0.82rem !important; letter-spacing: 0.06em !important; }
  #backBtn { font-size: 0.62rem !important; padding: 0.38rem 0.75rem !important; }
  .theme-toggle-btn { width: 28px !important; height: 28px !important; font-size: 12px !important; top: 0rem !important; right: 0.75rem !important; }
  #cartTopBar { font-size: 0.6rem !important; padding: 0.55rem 0.9rem !important; }
  #cartTopBar #totalPrice { font-size: 0.85rem !important; }
  .btn-continue, #continueShopping { padding: 0.72rem 1.25rem !important; font-size: 0.8rem !important; }
}
@media (max-width: 860px) {
  .payment-method,
  label[data-method] {
    padding: 1rem 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }

  #orderForm {
    gap: 1.1rem !important;
  }

  #orderForm h3 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }

  .payment-method > div > div:first-child,
  label[data-method] > div > div:first-child {
    font-size: 0.88rem !important;
    margin-bottom: 0.2rem !important;
  }

  .payment-method > div > div:not(:first-child),
  label[data-method] > div > div:not(:first-child) {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }
}
/* ── YOU MAY ALSO LIKE — sidebar gap filler ──────────────── */
#cartUpsell {
  grid-area: sidebar !important;
  align-self: start !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;

  /* Connects visually — no top border, no top radius */
  background: var(--glass) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--b-soft) !important;
  border-top: 1px solid var(--b-ghost) !important;
  border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--s-sm) !important;
}

body.cart-page:not(.dark-mode) #cartUpsell {
  background: rgba(255,255,255,0.45) !important;
}

/* Since #orderForm now sits above upsell, fix orderForm bottom radius */
#orderForm {
  border-radius: 0 !important;
  border-bottom: none !important;
}

.upsell-label {
  font-family: var(--ff-body);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--saffron);
  padding: 1rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--b-ghost);
  background: linear-gradient(90deg, var(--copper-haze), transparent 55%);
}

.upsell-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.9rem 1.25rem !important;
  border-bottom: 1px solid var(--b-ghost) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  position: relative !important;
}
.upsell-card:last-child { border-bottom: none !important; }
.upsell-card:hover { background: var(--copper-haze) !important; }
body.cart-page:not(.dark-mode) .upsell-card:hover {
  background: rgba(255,255,255,0.35) !important;
}

.upsell-card img {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--b-copper) !important;
  flex-shrink: 0 !important;
}

.upsell-info { flex: 1 !important; min-width: 0 !important; }

.upsell-name {
  font-family: var(--ff-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--moon) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0.2rem !important;
}

.upsell-price { display: flex !important; align-items: center !important; gap: 0.4rem !important; }

.upsell-new {
  font-family: var(--ff-head) !important;
  font-size: 0.88rem !important;
  color: var(--copper) !important;
}
.upsell-old {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  color: var(--moon-4) !important;
  text-decoration: line-through !important;
}

.upsell-arrow {
  font-size: 1.2rem !important;
  color: var(--moon-4) !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}
.upsell-card:hover .upsell-arrow {
  color: var(--copper) !important;
  transform: translateX(3px) !important;
}

/* Hide on mobile — not needed, sidebar becomes single column */
@media (max-width: 860px) {
  #cartUpsell { display: none !important; }
  /* Restore orderForm bottom radius on mobile */
  #orderForm {
    border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
    border-bottom: 1px solid var(--b-soft) !important;
  }
}

@media (max-width: 860px) {
  #cartUpsell { display: none !important; }
}

#orderForm {
  border-radius: var(--r-xl) !important;
}
/* ══════════════════════════════════════════════════════════
   SIDEBAR ORDER FIX — paste this at the very END of premiumcart.css
   replacing everything from "@supports" block onwards
   ══════════════════════════════════════════════════════════ */

/* 1. Grid: 4 rows in right column — summary / upsell / form */
@media (min-width: 861px) {
  #mainCartContainer {
    grid-template-columns: 1fr 360px !important;
    grid-template-areas:
      "header   header"
      "topbar   topbar"
      "items    sum"
      "items    upsell"
      "items    form" !important;
    grid-template-rows: auto auto auto auto 1fr !important;
    align-items: start !important;
  }

  #cartSummary  { grid-area: sum    !important; margin-top: 0 !important; }
  #cartUpsell   { grid-area: upsell !important; display: flex !important; }
  #orderForm    { grid-area: form   !important; margin-top: 0 !important; }
}


/* 3. Mobile — single column, upsell hidden, form fully rounded */
@media (max-width: 860px) {
  #mainCartContainer {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "topbar"
      "items"
      "sum"
      "form" !important;
    grid-template-rows: auto !important;
  }

  #cartSummary { grid-area: sum  !important; border-radius: var(--r-xl) !important; border-bottom: 1px solid var(--b-soft) !important; }
  #cartUpsell  { display: none !important; }
  #orderForm   { grid-area: form !important; border-radius: var(--r-xl) !important; border-top: 1px solid var(--b-soft) !important; margin-top: 0 !important; }
}

@media (min-width: 861px) {
  #mainCartContainer {
    grid-template-columns: 1fr 360px !important;
    grid-template-areas:
      "header  header"
      "topbar  topbar"
      "items   sidebar" !important;
    grid-template-rows: auto auto 1fr !important;
  }

  #cartSidebar {
    grid-area: sidebar !important;
    position: sticky !important;
    top: calc(var(--banner-h) + 10px) !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}

@media (max-width: 860px) {
  #cartSidebar {
    display: contents !important;
  }
  #cartUpsell { display: none !important; }
}
@media (min-width: 861px) {
  /* Summary: top card */
  #cartSidebar #cartSummary {
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  /* Upsell: middle strip */
  #cartSidebar #cartUpsell {
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  /* Form: bottom card */
  #cartSidebar #orderForm {
    border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
    border-top: none !important;
    margin: 0 !important;
  }
}@media (min-width: 861px) {
  #cartSidebar {
    width: 100% !important;
  }
    #cartSidebar {
    position: sticky !important;
    top: calc(var(--banner-h) + 70px) !important;
    align-self: start !important;
  }

  #cartSidebar #cartSummary,
  #cartSidebar #cartUpsell,
  #cartSidebar #orderForm {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}
/* ── ORDER SUCCESS STATE ───────────────────── */
#mainCartContainer.order-success {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80vh !important;
  padding: 2rem !important;
  gap: 0 !important;
}

#mainCartContainer.order-success > #backBtn,
#mainCartContainer.order-success > h1,
#mainCartContainer.order-success > .theme-toggle-btn,
#mainCartContainer.order-success > #cartTopBar,
#mainCartContainer.order-success > #cartContainer {
  display: none !important;
}

#mainCartContainer.order-success #cartSidebar {
  width: 100% !important;
  max-width: 480px !important;
  position: static !important;
}

#mainCartContainer.order-success #orderForm {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--b-soft) !important;
  border-top: 1px solid var(--b-soft) !important;
  width: 100% !important;
}
body.dark-mode.cart-page #orderForm input[type="text"],
body.dark-mode.cart-page #orderForm input[type="tel"] {
  color: var(--moon) !important;
  -webkit-text-fill-color: var(--moon) !important;
}

#mainCartContainer.order-success #cartUpsell {
  display: none !important;
}

#mainCartContainer.order-success #cartSidebar #cartUpsell {
  display: none !important;
}

#mainCartContainer.order-success {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 2rem !important;
  gap: 0 !important;
  margin-top: 0 !important;
}

#mainCartContainer.order-success > #backBtn,
#mainCartContainer.order-success > h1,
#mainCartContainer.order-success > .theme-toggle-btn,
#mainCartContainer.order-success > #cartTopBar,
#mainCartContainer.order-success > #cartContainer {
  display: none !important;
}

#mainCartContainer.order-success #cartSidebar {
  width: 100% !important;
  max-width: 480px !important;
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#mainCartContainer.order-success #cartSummary,
#mainCartContainer.order-success #cartUpsell {
  display: none !important;
}

#mainCartContainer.order-success #orderForm {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--b-soft) !important;
  border-top: 1px solid var(--b-soft) !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 0 !important;
}
/* Light mode input text */
body.cart-page:not(.dark-mode) #orderForm input[type="text"],
body.cart-page:not(.dark-mode) #orderForm input[type="tel"] {
  color: #2A1808 !important;
  -webkit-text-fill-color: #2A1808 !important;
  font-weight: 500 !important;
}

/* Dark mode input text */
body.dark-mode.cart-page #orderForm input[type="text"],
body.dark-mode.cart-page #orderForm input[type="tel"] {
  color: #F0EAE0 !important;
  -webkit-text-fill-color: #F0EAE0 !important;
  font-weight: 400 !important;
}