/* ── Price Numbers ── */
.pc-price, .pc-old, #dr-tot-v, .di-price, .item-price,
[class*="price"], .sr-pr { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; }
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap');

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


/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; border: 0; }
body {
  background: #0a0a0a;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
img  { max-width: 100%; display: block; }
button, input { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
svg { display: block; flex-shrink: 0; }

/* ===================== VARS ===================== */
:root {
  --bg:    #0a0a0a;
  --bg2:   #111;
  --bg3:   #1a1a1a;
  --bg4:   #222;
  --or:    #ff6b00;
  --or2:   #ff8533;
  --odim:  rgba(255,107,0,.10);
  --obdr:  rgba(255,107,0,.28);
  --bdr:   rgba(255,255,255,.08);
  --bdr2:  rgba(255,255,255,.14);
  --sil:   #aaa;
  --sil2:  #666;
  --r:     8px;
  --rlg:   14px;
  --rxl:   20px;
  --pill:  9999px;
  --navh:  64px;
}

/* ===================== LAYOUT ===================== */
.wrap { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 24px; }

/* ===================== NAVBAR ===================== */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navh);
  background: #111;
  border-bottom: 2px solid var(--or);
  z-index: 500;
  overflow: visible;
}
#nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  overflow: visible;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 7px;
  direction: ltr;
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo-dot {
  width: 8px; height: 8px;
  background: var(--or);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--or);
  flex-shrink: 0;
}
.logo-orange { color: var(--or); }

/* Nav links */
#nav-links {list-style:none;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
#nav-links a {
  font-size: 13px;
  color: #aaa;
  white-space: nowrap;
  transition: color .2s;
  position: relative;
  padding-bottom: 2px;
}
#nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--or); border-radius: 2px;
  transition: width .22s;
}
#nav-links a:hover { color: #fff; }
#nav-links a:hover::after { width: 100%; }

/* Search */
#nav-search {
  flex: 1;
  min-width: 0;
  max-width: 300px;
  height: 36px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--pill);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  transition: border-color .2s;
  position: relative;
}
#nav-search:focus-within { border-color: var(--obdr); }
#nav-search input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 13px; color: #fff; min-width: 0;
}
#nav-search input::placeholder { color: #555; }
#s-clr { cursor: pointer; color: #555; display: none; flex-shrink: 0; }
#s-res {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #111; border: 1px solid var(--bdr);
  border-radius: var(--rlg);
  overflow: hidden; display: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  z-index: 100;
}
#s-res.show { display: block; }
.sr { display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer; transition: background .15s; }
.sr:hover { background: var(--bg3); }
.sr-th { width: 36px; height: 36px; background: var(--bg3); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-th img { width: 100%; height: 100%; object-fit: cover; }
.sr-nm  { font-size: 13px; font-weight: 500; }
.sr-br  { font-size: 11px; color: #555; }
.sr-pr  { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--or); white-space: nowrap; }
.sr-nil { padding: 14px; text-align: center; font-size: 13px; color: #555; }

/* Nav right */
#nav-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-left: auto;
}
.nb {
  width: 36px; height: 36px;
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  color: #aaa; cursor: pointer; transition: all .2s;
  position: relative; text-decoration: none; flex-shrink: 0;
}
.nb:hover { border-color: var(--obdr); color: var(--or); }
#cart-badge {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: var(--or); color: #000;
  font-size: 9px; font-weight: 700;
  border-radius: 50%; border: 2px solid #111;
  display: flex; align-items: center; justify-content: center;
}
#cart-badge.hide { display: none; }
#nav-signin {
  background: var(--or); color: #000;
  padding: 7px 16px; border-radius: var(--pill);
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
  white-space: nowrap; flex-shrink: 0;
}
#nav-signin:hover { opacity: .88; }
#nav-ham { display: none; color: #aaa; padding: 4px; flex-shrink: 0; }

/* Mobile menu */
#mob {
  position: fixed;
  top: var(--navh); left: 0; right: 0;
  background: #111; border-bottom: 1px solid var(--bdr);
  z-index: 499; padding: 0 24px;
  transform: translateY(-110%);
  transition: transform .28s ease;
}
#mob.show { transform: none; }
#mob a { display: block; padding: 12px 0; font-size: 14px; color: #aaa; border-bottom: 1px solid var(--bdr); transition: color .2s; }
#mob a:last-child { border: none; }
#mob a:hover { color: var(--or); }

/* ===================== SLIDESHOW ===================== */
#ss {
  margin-top: var(--navh);
  width: 100%;
  height: 430px;
  position: relative;
  overflow: hidden;
  background: #111;
}
#ss-track {
  display: flex;
  height: 100%;
  direction: ltr;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.slide {
  min-width: 100%; height: 100%;
  position: relative; flex-shrink: 0; overflow: hidden;
}
.slide img, .slide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  pointer-events: none;
}
.slide-txt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 60px; max-width: 520px;
}
.slide-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--or);
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.slide-tag::before { content: ''; width: 14px; height: 2px; background: var(--or); border-radius: 2px; display: inline-block; }
.slide-h {
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35); margin-bottom: 10px;
}
.slide-h span { color: var(--or); }
.slide-sub {
  font-size: 13px; color: rgba(255,255,255,.7);
  font-weight: 300; margin-bottom: 20px; max-width: 360px;
}
.slide-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.ss-fallback {
  min-width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: #555; text-align: center;
}
.ss-fallback svg { opacity: .2; }
.ss-fallback p { font-size: 13px; }

/* Arrows */
.ss-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 40px; height: 40px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; transition: background .2s, border-color .2s;
}
.ss-arr:hover { background: var(--or); border-color: var(--or); }
#ss-prev { left: 16px; }
#ss-next { right: 16px; }

/* Dots */
#ss-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 6px;
}
.dot {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.3); border-radius: var(--pill);
  cursor: pointer; transition: all .25s; border: none;
}
.dot.on { background: var(--or); width: 20px; box-shadow: 0 0 6px rgba(255,107,0,.5); }

/* Progress */
#ss-prog {
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--or); z-index: 5;
  box-shadow: 0 0 6px rgba(255,107,0,.55);
}

/* ===================== MARQUEE ===================== */
#mq {
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: #111; overflow: hidden; padding: 11px 0;
}
.mq-track { display: flex; gap: 38px; width: max-content; animation: mq 26s linear infinite; }
.mq-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #555; white-space: nowrap;
}
.mq-item svg { color: var(--or); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ===================== SECTIONS ===================== */
section { padding: 50px 0; }
.no-top { padding-top: 0; }

/* Eyebrow + title */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--or); margin-bottom: 8px;
}
.eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--or); border-radius: 2px; display: inline-block; }
.sec-h { font-family: 'Syne', sans-serif; font-size: clamp(22px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
.sec-h span { color: var(--or); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: var(--pill);
  font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .2s; white-space: nowrap;
  border: 1px solid transparent;
}
.btn-or   { background: var(--or); color: #000; border-color: var(--or); }
.btn-or:hover { background: var(--or2); }
.btn-out  { background: transparent; color: var(--or); border-color: var(--obdr); }
.btn-out:hover { background: var(--odim); }
.btn-gh   { background: var(--bg3); color: #aaa; border-color: var(--bdr); }
.btn-gh:hover { color: #fff; border-color: var(--bdr2); }
.btn-sm   { padding: 6px 14px; font-size: 12px; }

/* ===================== CATEGORIES ===================== */
#c-grid { display: flex; flex-direction: column; }
/* CATEGORIES SIDEBAR LAYOUT */
.cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.cat-sidebar-box { background: #111; border: 1px solid var(--bdr); border-radius: var(--rlg); overflow: hidden; position: sticky; top: 80px; }
.cat-sidebar-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: var(--odim); border-bottom: 1px solid var(--bdr); font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: .5px; }
.cat-right { background: #111; border: 1px solid var(--bdr); border-radius: var(--rlg); }
.cat-right-inner { padding: 32px; }
/* CAT ROWS */
.cat-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; cursor: pointer; transition: all .15s; border-bottom: 1px solid var(--bdr); }
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: rgba(255,255,255,.03); }
.cat-row.active { background: var(--odim); }
.cat-row-left { display: flex; align-items: center; gap: 10px; }
.cat-row-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--or); flex-shrink: 0; }
.cat-row-icon:empty { display: none; }
.cat-row-icon:not(:empty) { background: var(--bg3); border: 1px solid var(--bdr); }
.cat-row.active .cat-row-icon { background: var(--odim); border-color: var(--obdr); }
.cat-row-name { font-size: 13px; font-weight: 500; color: var(--sil); }
.cat-row.active .cat-row-name { color: var(--or); }
.cat-row:hover .cat-row-name { color: #fff; }
.cat-row-right { display: flex; align-items: center; gap: 6px; }
.cat-row-cnt { font-size: 10px; color: var(--sil2); }
.cat-row-arrow { color: var(--sil2); transition: transform .25s; flex-shrink: 0; }
.cat-row.active .cat-row-arrow { transform: rotate(90deg); color: var(--or); }
/* SUBCATEGORIES ACCORDION */
.cat-subs { overflow: hidden; max-height: 0; transition: max-height .3s ease; background: rgba(0,0,0,.3); }
.cat-subs.open { max-height: 400px; }
.cat-sub-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 9px 54px; font-size: 12px; color: var(--sil2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.04); transition: all .15s; }
.cat-sub-link:hover { color: var(--or); background: var(--odim); padding-left: 58px; }
.cat-sub-link:last-child { border-bottom: none; }
.cat-sub-cnt { font-size: 10px; color: var(--sil2); }
.cat-all-link { display: flex; align-items: center; padding: 9px 16px 9px 54px; font-size: 12px; color: var(--or); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.04); transition: all .15s; gap: 6px; }
.cat-all-link:hover { background: var(--odim); }
@media(max-width:900px){ .cat-layout{grid-template-columns:1fr;} .cat-sidebar-box{position:static;} }

/* ===================== PRODUCT GRIDS ===================== */
.g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

/* ===================== PRODUCT CARD ===================== */
.pc {
  background: #111; border: 1px solid var(--bdr);
  border-radius: var(--rlg); overflow: hidden;
  cursor: pointer; transition: border-color .2s, transform .2s;
}
.pc:hover { border-color: var(--obdr); 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 .35s; }
.pc:hover .pc-img img { transform: scale(1.04); }
.pc-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; color: var(--bg4);
}
.pc-bdg {
  position: absolute; top: 9px; left: 9px;
  font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--pill);
}
.b-new { background: var(--or); color: #000; }
.b-sale { background: #ef4444; color: #fff; }
.pc-wsh {
  position: absolute; top: 7px; right: 7px;
  width: 30px; height: 30px;
  background: rgba(0,0,0,.7); border: 1px solid var(--bdr);
  border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  color: #aaa; opacity: 0; transition: opacity .2s, background .2s;
}
.pc:hover .pc-wsh { opacity: 1; }
.pc-wsh:hover, .pc-wsh.on { background: #ef4444; color: #fff; border-color: #ef4444; }
.pc-body  { padding: 13px; }
.pc-brand { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; margin-bottom: 4px; }
.pc-name  {
  font-family:'Roboto',sans-serif; font-size: 14px; font-weight: 600;
  margin-bottom: 7px; color: #fff;
  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: flex-end; justify-content: space-between; }
.pc-price-wrap { display:flex; flex-direction:column; gap:1px; }
.pc-old-line { font-size:11px; color:#555; text-decoration:line-through; font-family:'Roboto Mono',monospace; height:16px; line-height:16px; display:block; }
.pc-price { font-family: 'Roboto Mono', monospace; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-price.s { color:var(--or); }
.pc-disc-tag { position:absolute; top:0; right:0; background:var(--or); color:#000; font-size:10px; font-weight:800; padding:5px 10px 5px 14px; clip-path:polygon(16px 0,100% 0,100% 100%,0 100%); font-family:'Roboto',sans-serif; line-height:1; z-index:2; }
.pc-price.s { color: var(--or); }
.pc-old  { font-size: 11px; color: #555; text-decoration: line-through; font-family:'Roboto Mono',monospace; }
.pc-add {
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  color: #aaa; transition: all .2s;
}
.pc-add:hover { background: var(--or); border-color: var(--or); color: #000; }

/* ===================== DEALS BAR ===================== */
.deals-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 14px;
}
.cd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-lbl { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #555; }
.cd-lbl svg { color: var(--or); }
.cd-pills { display: flex; align-items: center; gap: 3px; }
.cd-pill {
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--r);
  padding: 3px 9px; display: flex; align-items: baseline; gap: 2px;
}
.cd-pill .n { font-family:'Roboto Mono',monospace; font-size: 16px; font-weight: 700; color: var(--or); min-width: 20px; text-align: center; }
.cd-pill .l { font-size: 9px; color: #555; }
.cd-sep { color: #555; font-weight: 700; }

/* ===================== FEATURES ===================== */
.ft-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--bdr);
  border: 1px solid var(--bdr); border-radius: var(--rxl); overflow: hidden;
}
.ft { background: #111; padding: 28px 22px; transition: background .2s; }
.ft:hover { background: var(--bg3); }
.ft-ic {
  width: 42px; height: 42px;
  background: var(--odim); border: 1px solid var(--obdr); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--or); margin-bottom: 14px;
}
.ft-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ft-desc  { font-size: 12px; color: #555; font-weight: 300; line-height: 1.6; }

/* ===================== NEWSLETTER ===================== */
.nl-box { max-width: 480px; margin: 0 auto; text-align: center; }
.nl-form {
  display: flex; background: #111;
  border: 1px solid var(--bdr); border-radius: var(--pill);
  padding: 4px; gap: 3px; margin-top: 7px; transition: border-color .2s;
}
.nl-form:focus-within { border-color: var(--obdr); }
.nl-in {
  flex: 1; background: none; border: none; outline: none;
  padding: 8px 15px; font-size: 13px; color: #fff; min-width: 0;
}
.nl-in::placeholder { color: #555; }

/* ===================== FOOTER ===================== */
footer { background: #111; border-top: 1px solid var(--bdr); margin-top: 60px; }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding: 56px 0 44px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ft-logo { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.ft-logo .d { width: 7px; height: 7px; background: var(--or); border-radius: 50%; box-shadow: 0 0 6px var(--or); }
.ft-logo .o { color: var(--or); }
.ft-desc { font-size: 12px; color: #555; font-weight: 300; line-height: 1.8; max-width: 210px; margin-bottom: 18px; }
.ft-soc  { display: flex; gap: 7px; }
.ft-sc {
  width: 31px; height: 31px;
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center; color: #555; transition: all .2s;
}
.ft-sc:hover { border-color: var(--obdr); color: var(--or); }
.ft-ch  { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--or); margin-bottom: 18px; }
.ft-ul  { display: flex; flex-direction: column; gap: 10px; }
.ft-ul a { font-size: 13px; color: #777; font-weight: 400; transition: color .2s; }
.ft-ul a:hover { color: #fff; padding-left: 4px; }
.ft-bot { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ft-copy { font-size: 12px; color: #555; }
.ft-bl   { display: flex; gap: 20px; }
.ft-bl a { font-size: 12px; color: #555; transition: color .2s; }
.ft-bl a:hover { color: #aaa; }

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

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

/* ===================== CART DRAWER ===================== */
#overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#overlay.on { opacity: 1; pointer-events: all; }

#drawer {
  position: fixed;
  top: 0; right: 0;
  width: 390px; max-width: 100%;
  height: 100vh;           /* KEY FIX */
  background: #111;
  border-left: 1px solid var(--bdr);
  z-index: 601;
  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(--bdr);
  font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700;
  flex-shrink: 0;           /* KEY FIX */
}
#dr-x {
  width: 30px; height: 30px;
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  color: #aaa; cursor: pointer; transition: color .2s;
}
#dr-x:hover { color: #fff; }

#dr-body { flex: 1; overflow-y: auto; padding: 12px 20px; }  /* flex: 1 expands */

.di { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--bdr); }
.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: #555; 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(--or); 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(--bdr); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #aaa; cursor: pointer; font-size: 13px; transition: all .15s;
}
.di-qb:hover { border-color: var(--obdr); color: var(--or); }
.di-qn  { font-size: 13px; font-weight: 600; min-width: 18px; text-align: center; }
.di-rm  { color: #555; padding: 4px; cursor: pointer; transition: color .2s; }
.di-rm:hover { color: #ef4444; }

#dr-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--bdr);
  flex-shrink: 0;           /* KEY FIX */
}
#dr-tot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#dr-tot-l { color: #aaa; font-size: 13px; }
#dr-tot-v { font-family: 'Roboto Mono', monospace; font-size: 19px; font-weight: 700; color: var(--or); }

/* ===================== 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(--bdr);
  border-radius: var(--r); font-size: 13px; min-width: 230px;
  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} }

/* ===================== OFFER BANNERS ===================== */
.offer-banner {
  position: relative; border-radius: var(--rlg); overflow: hidden;
  height: 160px; cursor: pointer; display: block; text-decoration: none;
  transition: transform .2s;
}
.offer-banner:hover { transform: translateY(-3px); }
.offer-banner img { width: 100%; height: 100%; object-fit: cover; }
.offer-banner-scrim { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.65) 0%, transparent 70%); }
.offer-banner-txt { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.offer-banner-tag { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.offer-banner-h { font-family: 'Syne', sans-serif; font-size: clamp(16px, 2vw, 24px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 8px; }
.offer-banner-h span { color: var(--or); }
.offer-banner-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; background: var(--or); color: #000; border-radius: var(--pill); font-size: 11px; font-weight: 700; width: fit-content; }
.offer-banner-solid { background: linear-gradient(135deg, #1a0a00, #2d1200); border: 1px solid var(--obdr); }

/* BRAND CHIP */
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 22px; background: #111; border: 1px solid var(--bdr);
  border-radius: var(--rlg); font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--sil);
  cursor: pointer; transition: all .2s; text-decoration: none;
  white-space: nowrap;
}
.brand-chip:hover { border-color: var(--obdr); color: var(--or); background: var(--odim); }

/* ===================== TICKET MODAL ===================== */
#tk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:8000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
#tk-overlay.show{display:flex;}
#tk-box{width:min(520px,96vw);background:#111;border:1px solid var(--bdr);border-radius:20px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.9);animation:tk-in .25s ease;}
@keyframes tk-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
#tk-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--bdr);background:#1a1a1a;}
.tk-icon{width:40px;height:40px;background:var(--odim);border:1px solid var(--obdr);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--or);flex-shrink:0;}
#tk-head-info h3{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:2px;}
#tk-head-info p{font-size:11px;color:var(--sil2);}
#tk-x{width:28px;height:28px;background:rgba(255,255,255,.07);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sil);margin-left:auto;flex-shrink:0;border:none;}
#tk-x:hover{color:#fff;background:rgba(255,255,255,.14);}
#tk-body{padding:20px;display:flex;flex-direction:column;gap:14px;}
.tk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tk-group{display:flex;flex-direction:column;gap:6px;}
.tk-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sil2);}
.tk-inp{background:#1a1a1a;border:1px solid var(--bdr);border-radius:var(--r);padding:10px 13px;font-size:13px;color:#fff;outline:none;font-family:'Roboto',sans-serif;width:100%;transition:border-color .2s;}
.tk-inp:focus{border-color:var(--obdr);}
.tk-inp::placeholder{color:#444;}
.tk-priority{display:flex;gap:6px;}
.tk-pri{flex:1;padding:7px;border:1px solid var(--bdr);border-radius:var(--r);font-size:11px;font-weight:600;text-align:center;cursor:pointer;transition:all .15s;color:var(--sil);background:#1a1a1a;}
.tk-pri:hover{border-color:var(--bdr2);color:#fff;}
.tk-pri.on{border-color:var(--obdr);color:var(--or);background:var(--odim);}
.tk-pri.urgent.on{border-color:rgba(239,68,68,.4);color:#f87171;background:rgba(239,68,68,.08);}
#tk-foot{padding:14px 20px;border-top:1px solid var(--bdr);display:flex;gap:8px;background:#1a1a1a;}
.tk-submit{flex:1;padding:11px;background:var(--or);border:none;border-radius:var(--r);font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:#000;cursor:pointer;transition:opacity .2s;}
.tk-submit:hover{opacity:.88;}
.tk-submit:disabled{opacity:.4;cursor:not-allowed;}
.tk-cancel{padding:11px 16px;background:#1a1a1a;border:1px solid var(--bdr);border-radius:var(--r);font-size:13px;color:var(--sil);cursor:pointer;}
.tk-cancel:hover{color:#fff;}
/* success state */
#tk-success{display:none;padding:36px 20px;text-align:center;}
#tk-success.show{display:block;}
#tk-body.hide{display:none;}
#tk-foot.hide{display:none;}
/* ===================== UTILS ===================== */
.w100 { width: 100%; }
.mt8  { margin-top: 8px; }
.empty { text-align: center; padding: 50px 20px; color: #555; font-size: 13px; }
.empty svg { margin: 0 auto 12px; opacity: .2; }
.empty strong { display: block; font-size: 14px; color: #aaa; margin-bottom: 4px; }

.dd-link{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r);font-size:13px;color:var(--sil);text-decoration:none;transition:all .15s;cursor:pointer;}
.dd-link:hover{background:var(--bg3);color:#fff;}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::selection { background: var(--odim); color: var(--or2); }

/* ===================== RTL SUPPORT ===================== */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .logo { flex-direction: row; }
[dir="rtl"] #nav .wrap { flex-direction: row-reverse; }
[dir="rtl"] #nav-links { flex-direction: row-reverse; }
[dir="rtl"] .cat-layout { direction: rtl; }
[dir="rtl"] .cat-sidebar-box { border-right: none; border-left: 1px solid var(--bdr); }
[dir="rtl"] .slide-txt { left: auto; right: 0; padding: 0 60px 0 20px; }
[dir="rtl"] .slide::after { background: linear-gradient(to left, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 55%, transparent 100%); }
[dir="rtl"] .eyebrow::before { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .sec-head { flex-direction: row-reverse; }
[dir="rtl"] .ft-top { direction: rtl; }
[dir="rtl"] .ft-desc { text-align: right; }
[dir="rtl"] .ft-bot { flex-direction: row-reverse; }
[dir="rtl"] #drawer { left: 0; right: auto; transform: translateX(-100%); border-left: none; border-right: 1px solid var(--bdr); }
[dir="rtl"] #drawer.on { transform: none; }
[dir="rtl"] .cat-sub-link { padding: 9px 54px 9px 16px; }
[dir="rtl"] .cat-sub-link:hover { padding-right: 58px; padding-left: 16px; }
[dir="rtl"] .cat-all-link { padding: 9px 54px 9px 16px; }
.cat-row-left { direction: ltr; }
[dir="rtl"] .cat-row-name { text-align: right; }
[dir="rtl"] .pc-brand, [dir="rtl"] .pc-name { text-align: right; }
[dir="rtl"] .pc-foot { flex-direction: row-reverse; }
[dir="rtl"] #nav-right { flex-direction: row-reverse; }
[dir="rtl"] .ft-soc { flex-direction: row-reverse; }
[dir="rtl"] .ft-logo { direction: ltr; justify-content: flex-end; }
[dir="rtl"] .ft-soc { justify-content: flex-end; }
[dir="rtl"] .slide-tag { flex-direction: row-reverse; }
[dir="rtl"] .slide-tag::before { display: none; }

/* ===================== RESPONSIVE ===================== */
@media(max-width:1100px) {
  .g5 { grid-template-columns: repeat(4,1fr); }
  .g4 { grid-template-columns: repeat(3,1fr); }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media(max-width:900px) {
  #ss   { height: 340px; }
  .slide-txt { padding: 0 36px; }
  .g5,.g4 { grid-template-columns: repeat(3,1fr); }
  .ft-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:768px) {
  #nav-links, #nav-search { display: none; }
  #nav-ham { display: flex; }
  #ss { height: 280px; }
  .slide-txt { padding: 0 22px; max-width: 100%; }
  .slide-h  { font-size: clamp(20px,5vw,30px); }
  .slide-sub { display: none; }
  .g5,.g4  { grid-template-columns: repeat(2,1fr); }
  .deals-bar { flex-direction: column; align-items: flex-start; }
}
@media(max-width:480px) {
  .g4 { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  .ft-top  { grid-template-columns: 1fr; }
  .ft-bot  { flex-direction: column; text-align: center; }
}


@keyframes spin{to{transform:rotate(360deg)}}