/* ════════════════════════════════════════
   frontend/public/assets/css/main.css
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --bg3:       #1a1a1a;
  --bg4:       #222222;
  --orange:    #ff6b00;
  --orange-lt: #ff8533;
  --o-dim:     rgba(255,107,0,.10);
  --o-bdr:     rgba(255,107,0,.28);
  --white:     #ffffff;
  --silver:    #a8a8a8;
  --silver-dk: #5e5e5e;
  --border:    rgba(255,255,255,.07);
  --border-hv: rgba(255,255,255,.14);
  --danger:    #ef4444;
  --success:   #22c55e;
  --warning:   #f59e0b;
  --fh:        'Syne',    sans-serif;
  --fb:        'DM Sans', sans-serif;
  --r:         8px;
  --rlg:       14px;
  --rxl:       20px;
  --rfull:     9999px;
  --navh:      64px;
  --wrap:      1260px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background:  var(--bg);
  color:       var(--white);
  font-family: var(--fb);
  font-size:   15px;
  line-height: 1.6;
  overflow-x:  hidden;
  /* FIX: no margin, no padding, no border on body */
  margin:  0;
  padding: 0;
  border:  0;
}
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button, input, select, textarea {
  font-family: inherit; font-size: inherit;
  border: none; outline: none; color: inherit;
}
button { cursor: pointer; background: none; }
svg    { display: block; flex-shrink: 0; }

/* ── Container ── */
.wrap {
  width:     100%;
  max-width: var(--wrap);
  margin:    0 auto;
  padding:   0 24px;
}

/* ── Buttons ── */
.btn {
  display:      inline-flex;
  align-items:  center;
  gap:          7px;
  padding:      9px 20px;
  border-radius:var(--rfull);
  font-family:  var(--fb);
  font-size:    13px;
  font-weight:  500;
  cursor:       pointer;
  transition:   all 0.2s;
  white-space:  nowrap;
  border:       1px solid transparent;
}
.btn-primary { background: var(--orange);  color: #000; border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-lt); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--orange); border-color: var(--o-bdr); }
.btn-outline:hover { background: var(--o-dim); border-color: var(--orange); }
.btn-ghost   { background: var(--bg3); color: var(--silver); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-hv); color: var(--white); }
.btn-sm { padding: 7px 16px; font-size: 12px; }
.btn-lg { padding: 13px 28px; font-size: 14px; }

/* ── Section eyebrow ── */
.eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--orange);
  margin-bottom:  9px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.sec-title {
  font-family:    var(--fh);
  font-size:      clamp(24px, 3vw, 38px);
  font-weight:    700;
  letter-spacing: -0.03em;
  line-height:    1.05;
}
.sec-title span { color: var(--orange); }

.sec-head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   28px;
  flex-wrap:       wrap;
  gap:             12px;
}

/* ── Product card ── */
.pc {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--rlg);
  overflow:      hidden;
  cursor:        pointer;
  transition:    border-color 0.2s, transform 0.2s;
}
.pc:hover { border-color: var(--o-bdr); transform: translateY(-4px); }

.pc-img {
  position:   relative;
  height:     185px;
  background: var(--bg3);
  overflow:   hidden;
}
.pc-img img {
  width:100%; height:100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.pc:hover .pc-img img { transform: scale(1.04); }
.pc-img-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--bg4);
}

.pc-badge {
  position:absolute; top:9px; left:9px;
  font-size:9px; font-weight:700;
  padding:3px 8px; border-radius:var(--rfull);
}
.b-new  { background:var(--orange); color:#000; }
.b-sale { background:var(--danger);  color:#fff; }

.pc-wish {
  position:absolute; top:7px; right:7px;
  width:30px; height:30px;
  background:rgba(0,0,0,.65); border:1px solid var(--border);
  border-radius:var(--rfull);
  display:flex; align-items:center; justify-content:center;
  color:var(--silver); opacity:0; transition:opacity 0.2s, background 0.2s;
}
.pc:hover .pc-wish { opacity:1; }
.pc-wish:hover, .pc-wish.on { background:var(--danger); color:#fff; border-color:var(--danger); }

.pc-body    { padding:13px; }
.pc-brand   { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--silver-dk); margin-bottom:4px; }
.pc-name    {
  font-family:var(--fh); font-size:14px; font-weight:600;
  color:var(--white); margin-bottom:7px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; line-height:1.3;
}
.pc-stars   { display:flex; align-items:center; gap:2px; margin-bottom:9px; }
.pc-foot    { display:flex; align-items:center; justify-content:space-between; }
.pc-price   { font-family:var(--fh); font-size:16px; font-weight:700; }
.pc-price.s { color:var(--orange); }
.pc-old     { font-size:11px; color:var(--silver-dk); text-decoration:line-through; margin-left:5px; }
.pc-add {
  width:32px; height:32px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--rfull);
  display:flex; align-items:center; justify-content:center;
  color:var(--silver); transition:all 0.2s;
}
.pc-add:hover { background:var(--orange); border-color:var(--orange); color:#000; }

/* ── Skeleton ── */
.sk {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--rlg);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Toast ── */
#toasts {
  position:fixed; bottom:20px; right:20px;
  z-index:9999; display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.t {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); font-size:13px;
  min-width:230px; pointer-events:all;
  animation: tin .28s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.t.ok  { border-color:rgba(34,197,94,.3); }
.t.err { border-color:rgba(239,68,68,.3); }
.t.wrn { border-color:rgba(245,158,11,.3); }
@keyframes tin { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:none} }

/* ── CART DRAWER — FIX: must be fixed, not affected by anything ── */
#overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  z-index:800;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
#overlay.on { opacity:1; pointer-events:all; }

#drawer {
  position:fixed;
  top:0; right:0; bottom:0;   /* FIX: explicit top/bottom */
  width:390px; max-width:100%;
  background:var(--bg2);
  border-left:1px solid var(--border);
  z-index:801;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
#drawer.on { transform:none; }

.dr-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  font-family:var(--fh); font-size:16px; font-weight:700;
  flex-shrink:0;   /* FIX */
}
.dr-x {
  width:30px; height:30px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--rfull);
  display:flex; align-items:center; justify-content:center;
  color:var(--silver); cursor:pointer; transition:all .2s;
}
.dr-x:hover { color:var(--white); }

.dr-body { flex:1; overflow-y:auto; padding:12px 20px; }

.di {
  display:flex; align-items:center; gap:11px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.di:last-child { border:none; }
.di-img {
  width:56px; height:56px;
  background:var(--bg3); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.di-img img { width:100%; height:100%; object-fit:cover; }
.di-info  { flex:1; min-width:0; }
.di-brand { font-size:9px; color:var(--silver-dk); text-transform:uppercase; letter-spacing:1px; }
.di-name  { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:2px 0 5px; }
.di-price { font-size:12px; color:var(--orange); font-weight:600; }
.di-qty   { display:flex; align-items:center; gap:5px; margin-top:5px; }
.di-qb {
  width:22px; height:22px;
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--silver); cursor:pointer; font-size:13px;
  transition:all .15s;
}
.di-qb:hover { border-color:var(--o-bdr); color:var(--orange); }
.di-qn    { font-size:13px; font-weight:600; min-width:18px; text-align:center; }
.di-rm    { color:var(--silver-dk); padding:4px; cursor:pointer; transition:color .2s; }
.di-rm:hover { color:var(--danger); }

.dr-foot {
  padding:14px 20px;
  border-top:1px solid var(--border);
  flex-shrink:0;   /* FIX */
}
.dr-tot {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.dr-tot-l { color:var(--silver); font-size:13px; }
.dr-tot-v { font-family:var(--fh); font-size:19px; font-weight:700; color:var(--orange); }

/* ── Reveal ── */
.rv { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:.1s; }
.rv.d2 { transition-delay:.2s; }
.rv.d3 { transition-delay:.3s; }
.rv.d4 { transition-delay:.4s; }

/* ── Utils ── */
.w100 { width:100%; }
.mt8  { margin-top:8px; }

.empty {
  text-align:center; padding:50px 20px;
  color:var(--silver-dk); font-size:13px;
}
.empty svg { margin:0 auto 12px; opacity:.25; }
.empty strong { display:block; font-size:14px; color:var(--silver); margin-bottom:4px; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }
::selection { background:var(--o-dim); color:var(--orange-lt); }