/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0a0a0f; --s1:#111118; --s2:#1a1a24; --s3:#22222f; --s4:#2a2a3a;
  --border:#2a2a3a; --accent:#f0a500; --accent2:#e05c00; --accent3:#00c2a8;
  --tx:#f0ede8; --tx2:#9994a8; --tx3:#5a5568;
  --danger:#e05050; --success:#2ecc71; --info:#3498db;
  --ff-head:'Syne',sans-serif; --ff-body:'DM Sans',sans-serif;
  --r:12px; --r-lg:20px; --shadow:0 4px 30px rgba(0,0,0,.5);
  --PLATFORM_FEE:0.14;
}
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--ff-body); background:var(--bg); color:var(--tx); min-height:100vh; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { font-family:var(--ff-body); cursor:pointer; }
input, select, textarea { font-family:var(--ff-body); }
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── SVG ICON SYSTEM ── */
/* All icons are inline <svg> — no external fonts needed.
   Icons get pointer-events:none so they never block clicks on their parent. */
svg.icon {
  display:inline-block; vertical-align:middle; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;          /* critical: never block button clicks */
  transition:transform .2s, stroke .2s;
}
button:hover svg.icon, a:hover svg.icon { transform:scale(1.12); }
.cat-card:hover svg.icon { transform:scale(1.18) rotate(-3deg); stroke:var(--accent); }
svg.icon.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border-radius:var(--r); border:none; font-size:14px;
  font-weight:500; cursor:pointer; transition:all .18s; white-space:nowrap;
  font-family:var(--ff-body); text-decoration:none;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary  { background:var(--accent); color:#000; font-weight:700; }
.btn-primary:hover:not(:disabled) { background:#ffb820; transform:translateY(-1px); }
.btn-success  { background:var(--success); color:#fff; font-weight:700; }
.btn-success:hover:not(:disabled) { background:#27ae60; transform:translateY(-1px); }
.btn-danger   { background:var(--danger); color:#fff; }
.btn-outline  { background:transparent; color:var(--tx); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost    { background:transparent; color:var(--tx2); }
.btn-ghost:hover { background:var(--s2); color:var(--tx); }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-lg { padding:13px 28px; font-size:16px; }
.btn-full { width:100%; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--tx2); margin-bottom:5px; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:11px 14px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r); color:var(--tx);
  font-family:var(--ff-body); font-size:15px;
  transition:border-color .2s; outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--tx3); }
.form-textarea { resize:vertical; min-height:90px; }
.form-select { cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-error { font-size:12px; color:var(--danger); margin-top:4px; }
@media(max-width:520px){ .form-row { grid-template-columns:1fr; } }

/* ── HEADER ── */
header {
  position:sticky; top:0; z-index:200;
  background:rgba(10,10,15,.96); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.header-top {
  display:flex; align-items:center; gap:14px;
  padding:10px 24px; max-width:1400px; margin:0 auto;
}
.logo {
  font-family:var(--ff-head); font-size:26px; font-weight:800;
  color:var(--accent); letter-spacing:-1px; cursor:pointer; flex-shrink:0;
  user-select:none;
}
.logo span { color:var(--tx); }

.search-wrap {
  flex:1; max-width:680px;
  display:flex; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; transition:border-color .2s;
}
.search-wrap:focus-within { border-color:var(--accent); }
.search-wrap input {
  flex:1; padding:11px 16px; background:transparent; border:none;
  outline:none; color:var(--tx); font-size:15px;
}
.search-wrap input::placeholder { color:var(--tx3); }
.search-wrap select {
  background:var(--s3); border:none; border-left:1px solid var(--border);
  color:var(--tx2); padding:0 10px; outline:none; cursor:pointer; font-size:13px; font-family:var(--ff-body);
}
.search-wrap button {
  background:var(--accent); border:none; padding:11px 16px;
  color:#000; cursor:pointer; transition:background .18s;
  display:flex; align-items:center;
}
.search-wrap button:hover { background:#ffb820; }

.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Cart button */
.cart-btn {
  position:relative; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r); padding:9px 14px; color:var(--tx);
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:14px; transition:all .18s; font-family:var(--ff-body);
}
.cart-btn:hover { border-color:var(--accent); color:var(--accent); }
.cart-badge {
  background:var(--accent); color:#000; font-size:10px; font-weight:800;
  padding:1px 6px; border-radius:20px; min-width:18px; text-align:center;
}

/* User avatar */
.user-wrap { position:relative; }
.user-avatar-btn {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none; color:#000; font-weight:800; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .2s; user-select:none;
}
.user-avatar-btn:hover { transform:scale(1.08); }
.user-dd {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r-lg); width:216px;
  box-shadow:0 16px 48px rgba(0,0,0,.6); overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:all .2s;
}
.user-dd.open { opacity:1; pointer-events:all; transform:translateY(0); }
.user-dd-head { padding:14px 16px; border-bottom:1px solid var(--border); }
.user-dd-name { font-weight:700; font-size:15px; }
.user-dd-email { font-size:12px; color:var(--tx3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-item {
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  color:var(--tx2); font-size:14px; cursor:pointer; border:none;
  background:none; width:100%; text-align:left; transition:all .15s;
  font-family:var(--ff-body);
}
.dd-item:hover { background:var(--s3); color:var(--tx); }
.dd-item.danger { color:var(--danger); }
.dd-item.danger:hover { background:rgba(224,80,80,.1); }

/* Nav bar */
.nav-bar { border-top:1px solid var(--border); overflow-x:auto; }
.nav-bar::-webkit-scrollbar { height:0; }
.nav-inner {
  display:flex; padding:0 24px;
  max-width:1400px; margin:0 auto; white-space:nowrap;
}
.nav-btn {
  padding:10px 14px; font-size:13px; font-weight:500;
  color:var(--tx2); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; transition:all .18s;
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-family:var(--ff-body);
}
.nav-btn:hover, .nav-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-btn.sell-btn { color:var(--accent); font-weight:700; margin-left:auto; }

/* ── HERO ── */
.hero {
  background:linear-gradient(135deg,var(--s1) 0%,#0f0f1a 50%,#0a1a14 100%);
  padding:60px 24px; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(240,165,0,.06) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 20%,rgba(0,194,168,.05) 0%,transparent 50%);
  pointer-events:none;
}
.hero-inner {
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  position:relative;
}
.hero-title {
  font-family:var(--ff-head); font-size:clamp(34px,4.5vw,58px);
  font-weight:800; line-height:1.1; letter-spacing:-2px;
}
.hero-title .hi { color:var(--accent); }
.hero-sub { color:var(--tx2); font-size:17px; margin:14px 0 26px; line-height:1.65; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.stat-card {
  background:var(--s2); border:1px solid var(--border);
  border-radius:16px; padding:22px 16px; text-align:center;
  transition:transform .2s, border-color .2s;
}
.stat-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.stat-num { font-family:var(--ff-head); font-size:28px; font-weight:800; color:var(--accent); margin-bottom:4px; }
.stat-lbl { font-size:12px; color:var(--tx2); }
.stat-icon-wrap { display:flex; justify-content:center; margin-bottom:8px; color:var(--accent); }

/* ── MAIN LAYOUT ── */
.main { max-width:1400px; margin:0 auto; padding:40px 24px; }
.section-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; flex-wrap:wrap; gap:10px;
}
.section-title { font-family:var(--ff-head); font-size:22px; font-weight:700; }
.section-title span { color:var(--accent); }

/* ── CATEGORY CARDS ── */
.cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px; margin-bottom:44px;
}
.cat-card {
  background:var(--s2); border:1px solid var(--border);
  border-radius:16px; padding:18px 10px; text-align:center;
  cursor:pointer; transition:all .2s; user-select:none;
}
.cat-card:hover, .cat-card.active {
  border-color:var(--accent); background:rgba(240,165,0,.07);
  transform:translateY(-2px);
}
.cat-card svg.icon { width:30px; height:30px; stroke:var(--tx2); margin-bottom:8px; transition:stroke .2s, transform .2s; }
.cat-card:hover svg.icon, .cat-card.active svg.icon { stroke:var(--accent); transform:scale(1.18) rotate(-3deg); }
.cat-name { font-size:12px; font-weight:600; color:var(--tx2); }

/* ── LISTINGS ── */
.listings-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;
}
.listing-card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .22s, border-color .22s, box-shadow .22s;
  position:relative; display:flex; flex-direction:column;
}
.listing-card:hover {
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 12px 40px rgba(240,165,0,.1);
}
.listing-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px;
}
.badge-auction { background:var(--accent2); color:#fff; }
.badge-new     { background:var(--accent3); color:#000; }
.badge-offer   { background:var(--info); color:#fff; }

.listing-img {
  width:100%; height:190px; background:var(--s2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  flex-shrink:0;
}
.listing-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.listing-card:hover .listing-img img { transform:scale(1.04); }
.listing-img svg.icon { width:56px; height:56px; stroke:var(--s4); opacity:.6; }

.listing-body { padding:14px; flex:1; display:flex; flex-direction:column; }
.listing-title { font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px; }
.listing-price { font-family:var(--ff-head); font-size:22px; font-weight:700; color:var(--accent); }
.listing-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.listing-seller { font-size:12px; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.listing-cond { font-size:11px; font-weight:600; color:var(--accent3); background:rgba(0,194,168,.1); padding:2px 8px; border-radius:20px; }

.listing-actions {
  display:flex; gap:8px; padding:10px 14px;
  border-top:1px solid var(--border); margin-top:auto;
}
.listing-actions .btn { flex:1; }

/* Sort bar */
.sort-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.count-label { font-size:14px; color:var(--tx2); }
.sort-select {
  background:var(--s2); border:1px solid var(--border);
  color:var(--tx); padding:8px 12px; border-radius:var(--r);
  outline:none; cursor:pointer; font-family:var(--ff-body); font-size:14px;
}

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; }

/* ── MODALS ── */
.overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.overlay.open { display:flex; }
.modal {
  background:var(--s1); border:1px solid var(--border);
  border-radius:var(--r-lg); width:100%; max-width:520px;
  max-height:92vh; overflow-y:auto;
  animation:modalIn .25s ease;
}
.modal.wide { max-width:820px; }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px 0;
}
.modal-title { font-family:var(--ff-head); font-size:20px; font-weight:700; }
.modal-close {
  width:34px; height:34px; border-radius:50%;
  background:var(--s2); border:none; color:var(--tx2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .18s; flex-shrink:0;
}
.modal-close:hover { background:var(--danger); color:#fff; }
.modal-close svg.icon { pointer-events:none; }
.modal-body { padding:22px 24px; }

/* ── DIVIDER ── */
.divider { display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--tx3); font-size:13px; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── TABS ── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab {
  padding:10px 16px; font-size:14px; font-weight:500;
  color:var(--tx2); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:all .18s; font-family:var(--ff-body);
}
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r); padding:13px 18px;
  display:flex; align-items:center; gap:10px; max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  transform:translateX(140%); transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { transform:translateX(0); }
.toast-icon { flex-shrink:0; display:flex; }
.toast.t-success { border-color:var(--success); }
.toast.t-error   { border-color:var(--danger); }
.toast.t-info    { border-color:var(--info); }

/* ── PRODUCT DETAIL ── */
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.product-main-img {
  width:100%; height:340px; background:var(--s2);
  border-radius:var(--r); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.product-main-img img { width:100%; height:100%; object-fit:cover; }
.product-main-img svg.icon { width:80px; height:80px; stroke:var(--s4); }
.product-price { font-family:var(--ff-head); font-size:36px; font-weight:800; color:var(--accent); }
.product-cond { display:inline-block; background:rgba(0,194,168,.1); color:var(--accent3); font-size:13px; font-weight:600; padding:4px 12px; border-radius:20px; margin:8px 0 14px; }
.seller-card { background:var(--s2); border:1px solid var(--border); border-radius:var(--r); padding:14px; display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.seller-av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#000; flex-shrink:0; }
.trust-badge { background:rgba(0,194,168,.07); border:1px solid rgba(0,194,168,.2); border-radius:var(--r); padding:11px 14px; font-size:13px; color:var(--accent3); display:flex; align-items:center; gap:8px; margin-bottom:16px; }

/* ── CART ── */
.cart-wrap { display:grid; grid-template-columns:1fr 320px; gap:28px; }
.cart-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); align-items:center; }
.cart-thumb { width:76px; height:76px; border-radius:var(--r); background:var(--s2); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-thumb svg.icon { width:26px; height:26px; stroke:var(--s4); }
.cart-info { flex:1; min-width:0; }
.cart-t { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-p { font-family:var(--ff-head); font-size:19px; font-weight:700; color:var(--accent); margin-top:4px; }
.cart-remove { background:none; border:none; color:var(--tx3); cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; transition:all .15s; flex-shrink:0; }
.cart-remove:hover { background:rgba(224,80,80,.1); color:var(--danger); }

.order-panel { background:var(--s2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; position:sticky; top:90px; }
.order-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:10px; }
.order-row .lbl { color:var(--tx2); display:flex; align-items:center; gap:6px; }
.fee-badge { background:var(--s3); color:var(--accent); font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; }
.order-total-row { border-top:1px solid var(--border); padding-top:14px; margin-top:6px; display:flex; justify-content:space-between; align-items:center; }
.order-total-amt { font-family:var(--ff-head); font-size:26px; font-weight:800; color:var(--accent); }

/* ── CHECKOUT ── */
.checkout-grid { display:grid; grid-template-columns:1fr 300px; gap:24px; }
.ck-section { margin-bottom:22px; }
.ck-title { font-size:15px; font-weight:700; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.pay-options { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.pay-opt { display:flex; align-items:center; gap:12px; padding:13px 15px; border:2px solid var(--border); border-radius:var(--r); cursor:pointer; transition:all .18s; }
.pay-opt:hover { border-color:var(--accent3); }
.pay-opt.selected { border-color:var(--accent); background:rgba(240,165,0,.04); }
.pay-opt input[type=radio] { accent-color:var(--accent); width:17px; height:17px; flex-shrink:0; }
.pay-opt-lbl { font-weight:600; font-size:15px; }
.pay-opt-sub { font-size:12px; color:var(--tx3); }
.ck-summary { background:var(--s2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; position:sticky; top:80px; }

/* ── PROFILE / DASHBOARD ── */
.profile-header { background:linear-gradient(135deg,var(--s2),var(--s3)); border-radius:var(--r-lg); padding:28px; margin-bottom:28px; display:flex; align-items:center; gap:20px; border:1px solid var(--border); flex-wrap:wrap; }
.profile-av { width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:28px; color:#000; flex-shrink:0; }
.profile-name { font-family:var(--ff-head); font-size:24px; font-weight:700; }
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:28px; }
.dash-card { background:var(--s2); border:1px solid var(--border); border-radius:16px; padding:20px; }
.dash-val { font-family:var(--ff-head); font-size:28px; font-weight:800; color:var(--accent); }
.dash-lbl { font-size:13px; color:var(--tx2); margin-top:3px; }

/* Fee info banner */
.fee-banner { background:rgba(240,165,0,.05); border:1px solid rgba(240,165,0,.2); border-radius:var(--r); padding:14px 18px; margin-bottom:24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── EMPTY STATES ── */
.empty { text-align:center; padding:70px 20px; }
.empty svg.icon { width:60px; height:60px; stroke:var(--tx3); margin-bottom:16px; }
.empty h3 { font-family:var(--ff-head); font-size:22px; margin-bottom:8px; }
.empty p { color:var(--tx2); margin-bottom:20px; }

/* ── ORDERS ── */
.order-card { background:var(--s2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; margin-bottom:14px; }
.order-row-detail { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; background:var(--s3); border-radius:var(--r); padding:12px; margin-top:12px; font-size:14px; }
.order-detail-lbl { color:var(--tx3); font-size:12px; margin-bottom:3px; }
.status-pill { background:rgba(46,204,113,.1); color:var(--success); padding:3px 12px; border-radius:20px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:5px; }

/* ── IMG UPLOAD ── */
.img-upload { border:2px dashed var(--border); border-radius:var(--r); padding:28px; text-align:center; cursor:pointer; transition:all .2s; }
.img-upload:hover { border-color:var(--accent); background:rgba(240,165,0,.02); }
.img-upload svg.icon { width:36px; height:36px; stroke:var(--tx3); margin-bottom:8px; }
.img-previews { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.img-prev { aspect-ratio:1; border-radius:8px; background:var(--s2); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.img-prev img { width:100%; height:100%; object-fit:cover; }
.img-prev-rm { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.75); border:none; color:#fff; border-radius:50%; width:20px; height:20px; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* ── MESSAGES ── */
.msg-layout { display:grid; grid-template-columns:280px 1fr; gap:20px; height:580px; }
.msg-panel { background:var(--s2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.msg-panel-head { padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }

/* ── FOOTER ── */
footer { background:var(--s1); border-top:1px solid var(--border); padding:48px 24px 24px; margin-top:72px; }
.footer-inner { max-width:1400px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:36px; }
.footer-logo { font-family:var(--ff-head); font-size:22px; font-weight:800; color:var(--accent); margin-bottom:12px; display:block; cursor:pointer; }
.footer-logo span { color:var(--tx); }
.footer-desc { color:var(--tx2); font-size:14px; line-height:1.6; max-width:270px; }
.footer-col h4 { font-family:var(--ff-head); font-size:13px; font-weight:700; margin-bottom:12px; letter-spacing:.5px; color:var(--tx); }
.footer-link { display:block; color:var(--tx3); font-size:14px; margin-bottom:8px; cursor:pointer; transition:color .18s; }
.footer-link:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding-top:18px; display:flex; align-items:center; justify-content:space-between; color:var(--tx3); font-size:13px; flex-wrap:wrap; gap:12px; }
.footer-badges { display:flex; gap:8px; }
.footer-badge { background:var(--s2); border:1px solid var(--border); padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .hero-inner { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:repeat(3,1fr); }
  .product-grid { grid-template-columns:1fr; }
  .cart-wrap { grid-template-columns:1fr; }
  .checkout-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .msg-layout { grid-template-columns:1fr; }
}
@media(max-width:600px){
  .header-top { flex-wrap:wrap; }
  .search-wrap { order:3; width:100%; max-width:100%; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
}

/* Spinner */
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loading-wrap { display:flex; justify-content:center; padding:56px; }

/* Stars */
.stars { color:var(--accent); letter-spacing:2px; }