/* ══════════════════════════════════════════════
   DESIGN TOKENS — LUMINA Brand System
══════════════════════════════════════════════ */
:root {
  --cream:  #f7f3ed;
  --paper:  #faf8f5;
  --white:  #ffffff;
  --ink:    #0c0a08;
  --ink60:  rgba(12,10,8,.6);
  --ink30:  rgba(12,10,8,.3);
  --ink10:  rgba(12,10,8,.07);
  --volt:   #c8ff00;
  --coral:  #ff4d2b;
  --azure:  #0057ff;
  --blush:  #ff2d78;
  --sky:    #00d5e8;
  --amber:  #ffb800;
  --lavender:#b388ff;
  --fh: 'Cabinet Grotesk', sans-serif;
  --fs: 'Instrument Serif', serif;
  --fm: 'Geist Mono', monospace;
  --eoe: cubic-bezier(.16,1,.3,1);
  --esp: cubic-bezier(.34,1.56,.64,1);
  --sh:  0 8px 32px rgba(12,10,8,.07);
  --sh2: 0 24px 64px rgba(12,10,8,.11);
}

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body { font-family:var(--fh); background:var(--cream); color:var(--ink); overflow-x:hidden; cursor:none; min-height:100vh }
a { color:inherit; text-decoration:none }
button,input,select { font-family:inherit }
img { display:block; max-width:100% }

/* Grain */
body::after { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity:.025; pointer-events:none; z-index:9000 }

/* Scrollbar */
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--cream) }
::-webkit-scrollbar-thumb { background:var(--coral); border-radius:2px }

/* ── MESH BG CANVAS ── */
#mesh-canvas { position:fixed; inset:0; z-index:-1; pointer-events:none }

/* ── CURSOR ── */
#cdot { position:fixed; width:8px; height:8px; background:#fff; border-radius:50%; pointer-events:none; z-index:99990; transform:translate(-50%,-50%); transition:transform .2s,box-shadow .2s; mix-blend-mode:difference; box-shadow:0 0 0 1px rgba(255,255,255,.2) }
#cring { position:fixed; width:44px; height:44px; border:1.5px solid rgba(255,255,255,.85); border-radius:50%; pointer-events:none; z-index:99989; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:opacity .2s,transform .2s,border-color .2s }
body.ch #cdot { transform:translate(-50%,-50%) scale(2.5); box-shadow:0 0 0 7px rgba(255,77,43,.2) }
body.ch #cring { opacity:.35; transform:translate(-50%,-50%) scale(1.2) }

/* ── SCROLL PROGRESS ── */
#spbar { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--coral),var(--blush)); z-index:99999; width:0%; pointer-events:none }

/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 64px; display:flex; align-items:center; justify-content:space-between; transition:padding .5s var(--eoe),background .4s }
nav.stuck { padding:13px 64px; background:rgba(247,243,237,.92); backdrop-filter:blur(24px); border-bottom:1px solid var(--ink10) }
.logo { font-family:var(--fh); font-weight:900; font-size:19px; letter-spacing:-1px; display:flex; align-items:center; gap:7px; cursor:none }
.lmark { width:26px; height:26px; background:var(--ink); border-radius:7px; display:flex; align-items:center; justify-content:center; transition:background .3s }
.lmark svg { width:13px; height:13px }
.logo:hover .lmark { background:var(--coral) }
.nav-r { display:flex; align-items:center; gap:16px }
.nav-back { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink60); cursor:none; transition:color .2s }
.nav-back:hover { color:var(--ink) }
.nav-back svg { transition:transform .3s var(--esp) }
.nav-back:hover svg { transform:translateX(-4px) }
.cart-count-badge { background:var(--coral); color:var(--white); width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:var(--fm) }

/* ── LAYOUT ── */
.page-wrap { max-width:1280px; margin:0 auto; padding:120px 64px 80px }
.cart-layout { display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:start }

/* ── PAGE HEADER ── */
.page-header { margin-bottom:40px }
.page-eyebrow { font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink60); display:flex; align-items:center; gap:10px; margin-bottom:12px }
.page-eyebrow::before { content:''; width:20px; height:1px; background:var(--coral) }
.page-title { font-size:clamp(40px,5vw,72px); font-weight:900; letter-spacing:-3px; line-height:.92 }
.page-title .it { font-family:var(--fs); font-style:italic; font-weight:400 }

/* ══════════════════════════════════════════════
   CART ITEMS
══════════════════════════════════════════════ */
.cart-items-wrap { display:flex; flex-direction:column; gap:0 }

/* Each cart item row */
.cart-item {
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:20px; align-items:center;
  padding:24px 0;
  border-bottom:1px solid var(--ink10);
  opacity:0; transform:translateX(-20px);
  transition:background .2s;
}
.cart-item:first-child { border-top:1px solid var(--ink10) }
.cart-item.removing { animation:removeItem .4s var(--eoe) forwards }
@keyframes removeItem { to { opacity:0; transform:translateX(-30px) translateY(-8px); max-height:0; padding:0; margin:0 } }

/* Item image */
.ci-img { width:90px; height:90px; border-radius:16px; overflow:hidden; flex-shrink:0; position:relative }
.ci-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--eoe) }
.cart-item:hover .ci-img img { transform:scale(1.06) }
.ci-img-badge { position:absolute; top:6px; left:6px; background:var(--coral); color:var(--white); font-family:var(--fm); font-size:9px; padding:2px 7px; border-radius:100px; font-weight:500 }

/* Item info */
.ci-info { flex:1; min-width:0 }
.ci-tag { font-family:var(--fm); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink30); margin-bottom:4px }
.ci-name { font-size:17px; font-weight:800; letter-spacing:-.4px; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ci-desc { font-size:13px; color:var(--ink60); margin-bottom:12px; line-height:1.5 }
.ci-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.ci-pill { background:var(--paper); border:1px solid var(--ink10); border-radius:8px; padding:4px 10px; font-size:12px; color:var(--ink60); font-weight:500 }

/* Quantity + remove */
.ci-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px }
.ci-price { font-size:20px; font-weight:900; letter-spacing:-1px }
.ci-orig { font-size:12px; color:var(--ink30); text-decoration:line-through; text-align:right }

/* Qty stepper */
.qty-stepper { display:flex; align-items:center; gap:0; background:var(--white); border:1px solid var(--ink10); border-radius:12px; overflow:hidden }
.qty-btn { width:36px; height:36px; background:none; border:none; cursor:none; font-size:17px; font-weight:700; color:var(--ink60); transition:all .2s; display:flex; align-items:center; justify-content:center }
.qty-btn:hover { background:var(--ink10); color:var(--ink) }
.qty-val { width:32px; text-align:center; font-family:var(--fm); font-size:13px; font-weight:700; color:var(--ink) }
.remove-btn { background:none; border:none; cursor:none; font-size:12px; font-weight:600; color:var(--ink30); font-family:var(--fm); letter-spacing:.06em; display:flex; align-items:center; gap:5px; transition:color .2s; padding:0 }
.remove-btn:hover { color:var(--coral) }

/* Empty state */
.empty-cart { text-align:center; padding:80px 32px; display:none; flex-direction:column; align-items:center; gap:20px }
.empty-cart.show { display:flex }
.empty-icon { width:80px; height:80px; border-radius:24px; background:var(--paper); border:1px solid var(--ink10); display:flex; align-items:center; justify-content:center; font-size:32px }
.empty-title { font-size:24px; font-weight:800; letter-spacing:-.8px }
.empty-sub { font-size:15px; color:var(--ink60); max-width:280px; line-height:1.6 }

/* Coupon row */
.coupon-row { display:flex; gap:10px; margin-top:28px }
.coupon-input { flex:1; background:var(--white); border:1.5px solid var(--ink10); border-radius:14px; padding:13px 18px; font-size:14px; font-weight:600; color:var(--ink); outline:none; transition:border-color .2s; font-family:var(--fm); letter-spacing:.04em }
.coupon-input::placeholder { color:var(--ink30); font-weight:400 }
.coupon-input:focus { border-color:var(--azure) }
.coupon-btn { background:var(--ink); color:var(--white); border:none; border-radius:14px; padding:13px 24px; font-size:14px; font-weight:700; cursor:none; transition:all .3s var(--esp) }
.coupon-btn:hover { background:var(--azure); transform:scale(1.02) }
.coupon-success { display:none; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#00b86c; font-family:var(--fm); margin-top:8px }
.coupon-success.show { display:flex }

/* ══════════════════════════════════════════════
   ORDER SUMMARY SIDEBAR
══════════════════════════════════════════════ */
.order-summary {
  background:var(--white); border-radius:28px;
  border:1px solid rgba(12,10,8,.06);
  box-shadow:var(--sh2);
  overflow:hidden;
  position:sticky; top:100px;
}
.os-header { padding:28px 32px 0; border-bottom:1px solid var(--ink10) }
.os-title { font-size:20px; font-weight:900; letter-spacing:-.6px; margin-bottom:20px }

/* Summary rows */
.os-body { padding:24px 32px }
.os-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:14px }
.os-row .label { color:var(--ink60); font-weight:500 }
.os-row .val { font-weight:700; letter-spacing:-.3px }
.os-row.discount .val { color:var(--coral) }
.os-divider { height:1px; background:var(--ink10); margin:16px 0 }
.os-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px }
.os-total .label { font-size:16px; font-weight:700 }
.os-total .val { font-size:28px; font-weight:900; letter-spacing:-1.5px }

/* Savings badge */
.os-savings { background:rgba(200,255,0,.2); border:1px solid rgba(200,255,0,.4); border-radius:14px; padding:12px 18px; display:flex; align-items:center; gap:10px; margin-bottom:22px }
.os-savings-icon { font-size:18px }
.os-savings-text { font-size:13px; font-weight:700 }
.os-savings-sub { font-size:12px; color:var(--ink60); font-weight:400 }

/* Checkout button */
.checkout-btn {
  width:100%; background:var(--ink); color:var(--white);
  border:none; border-radius:18px; padding:18px 24px;
  font-size:16px; font-weight:800; cursor:none;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .35s var(--esp);
  letter-spacing:-.3px;
}
.checkout-btn:hover { background:var(--coral); transform:scale(1.02); box-shadow:0 20px 50px rgba(255,77,43,.28) }
.checkout-btn svg { transition:transform .3s var(--esp) }
.checkout-btn:hover svg { transform:translateX(5px) }

/* Trust badges */
.os-trust { padding:20px 32px; border-top:1px solid var(--ink10); display:flex; flex-direction:column; gap:10px }
.trust-item { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink60); font-weight:500 }
.trust-icon { width:28px; height:28px; background:var(--paper); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0 }

/* Installment note */
.os-installment { padding:0 32px 24px; font-size:12px; color:var(--ink60); text-align:center; line-height:1.6 }
.os-installment strong { color:var(--azure) }

/* ══════════════════════════════════════════════
   YOU MAY ALSO LIKE
══════════════════════════════════════════════ */
.upsell-section { margin-top:64px }
.us-title { font-size:22px; font-weight:900; letter-spacing:-.8px; margin-bottom:24px }
.upsell-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px }
.upsell-card { background:var(--white); border-radius:18px; overflow:hidden; border:1px solid rgba(12,10,8,.06); box-shadow:var(--sh); cursor:none; transition:all .35s var(--eoe) }
.upsell-card:hover { transform:translateY(-4px); box-shadow:var(--sh2) }
.uc-img { height:130px; overflow:hidden }
.uc-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--eoe) }
.upsell-card:hover .uc-img img { transform:scale(1.07) }
.uc-body { padding:16px }
.uc-name { font-size:14px; font-weight:800; letter-spacing:-.3px; margin-bottom:4px }
.uc-price { font-size:13px; font-weight:700; color:var(--azure) }
.uc-add { width:100%; background:var(--paper); border:1px solid var(--ink10); border-radius:10px; padding:9px; font-size:12px; font-weight:700; cursor:none; margin-top:10px; transition:all .25s var(--esp) }
.uc-add:hover { background:var(--ink); color:var(--white) }

/* ── BUTTONS ── */
.btn-outline-sm { display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--ink); padding:11px 22px; border-radius:100px; font-size:13px; font-weight:700; border:1.5px solid var(--ink10); transition:all .3s; cursor:none }
.btn-outline-sm:hover { border-color:var(--ink); background:var(--ink); color:var(--white) }

/* ── RESPONSIVE ── */
@media (max-width:1060px) { .cart-layout { grid-template-columns:1fr } .order-summary { position:static } .upsell-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px) { nav { padding:16px 24px } nav.stuck { padding:11px 24px } .page-wrap { padding:90px 24px 60px } .cart-item { grid-template-columns:72px 1fr; } .ci-actions { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center } .upsell-grid { grid-template-columns:1fr } }

@media (hover:none), (pointer:coarse), (max-width:900px) {
  body, a, button, input, select, textarea, .cart-item, .upsell-card, .qty-btn, .remove-btn, .coupon-btn, .checkout-btn, .uc-add, .btn-outline-sm {
    cursor: auto !important;
  }

  #cdot,
  #cring {
    display: none !important;
  }
}