/* ==================================================================
   GadgetHub design system
   Palette : Ink #0E1424 · Volt #F4C90C · Paper #FFFFFF · Slate #66707A
             Signal #FF4747 (deals) · Mint #1FAE6B (success/stock)
   Type    : Space Grotesk (display) / Inter (body) / JetBrains Mono (specs, prices)
   ================================================================== */

:root{
  --ink:#0E1424;
  --ink-soft:#171F35;
  --volt:#F4C90C;
  --paper:#FFFFFF;
  --canvas:#F5F6F8;
  --slate:#66707A;
  --slate-light:#A4ACB6;
  --line:#E4E7EC;
  --signal:#FF4747;
  --mint:#1FAE6B;
  --radius:10px;

  /* Storefront branding — overridden per-site by Admin > Settings > Branding.
     Structural chrome (cards, tables, admin panel) intentionally does NOT
     use these, so custom colors can't break internal readability. */
  --brand-header:var(--ink);
  --brand-footer:var(--ink);
  --brand-body:var(--canvas);
  --brand-text:var(--ink);
  --brand-accent:var(--volt);
  --brand-link:var(--ink);
}

*{box-sizing:border-box;}

body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--brand-text);
  background:var(--brand-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

.mono, .price, .sku-tag{
  font-family:'JetBrains Mono',ui-monospace,monospace;
}

a{ text-decoration:none; color:inherit; }

/* ---------- Topbar / Nav ---------- */
.topbar{
  background:var(--brand-header);
  color:#C9CEDA;
  font-size:.78rem;
  padding:.4rem 0;
  letter-spacing:.02em;
}
.topbar a{ color:#C9CEDA; }

.navbar-main{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}
.brand-mark{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.brand-mark .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--brand-accent);
  box-shadow:0 0 0 3px rgba(244,201,12,.25);
}
.nav-link-custom{
  font-weight:500;
  font-size:.92rem;
  color:var(--brand-text);
  padding:.5rem .9rem !important;
}
.nav-link-custom:hover{ color:var(--brand-link); }

.icon-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--canvas);
  border:1px solid var(--line);
  color:var(--ink);
}
.icon-btn:hover{ background:var(--brand-accent); border-color:var(--brand-accent); }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--signal); color:#fff;
  font-size:.65rem; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
  font-family:'JetBrains Mono',monospace;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--brand-header);
  color:#fff;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, transparent 55%, rgba(244,201,12,.14) 55.5%, rgba(244,201,12,.14) 57%, transparent 57.5%),
    linear-gradient(115deg, transparent 62%, rgba(244,201,12,.08) 62.5%, rgba(244,201,12,.08) 63.5%, transparent 64%);
  pointer-events:none;
}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-accent);
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.05;
  max-width:14ch;
}
.hero p{ color:#B9C0CE; max-width:42ch; }
.btn-volt{
  background:var(--brand-accent); color:var(--ink); border:none;
  font-weight:700; padding:.75rem 1.6rem; border-radius:6px;
  transition:transform .15s ease;
}
.btn-volt:hover{ filter:brightness(1.08); color:var(--ink); transform:translateY(-2px); }
.btn-outline-light-custom{
  border:1px solid rgba(255,255,255,.35); color:#fff; padding:.75rem 1.6rem; border-radius:6px; font-weight:600;
}
.btn-outline-light-custom:hover{ border-color:var(--brand-accent); color:var(--brand-accent); }

.btn-ink{
  background:var(--ink); color:#fff; border:none; font-weight:600;
  padding:.65rem 1.3rem; border-radius:6px;
}
.btn-ink:hover{ background:var(--ink-soft); color:var(--volt); }

/* ---------- Section headers ---------- */
.section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  display:flex; align-items:center; gap:.5rem;
}
.section-label::before{
  content:"";
  width:18px; height:2px; background:var(--brand-accent);
  display:inline-block;
}

/* ---------- Category chips ---------- */
.cat-chip{
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:999px;
  padding:.55rem 1.1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.cat-chip.active, .cat-chip:hover{
  background:var(--brand-header); color:#fff; border-color:var(--brand-header);
}

/* ---------- Product card ---------- */
.product-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  height:100%;
  transition:box-shadow .18s ease, transform .18s ease;
}
.product-card:hover{
  box-shadow:0 12px 28px rgba(14,20,36,.10);
  transform:translateY(-3px);
}
.product-thumb{
  aspect-ratio:1/1;
  background:var(--canvas);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.badge-deal{
  position:absolute; top:10px; left:10px;
  background:var(--signal); color:#fff;
  font-size:.68rem; font-weight:700;
  padding:.25rem .55rem; border-radius:4px;
  font-family:'JetBrains Mono',monospace;
}
.product-body{ padding:1rem; }
.product-cat{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--slate); font-family:'JetBrains Mono',monospace;
}
.product-name{ font-weight:600; font-size:.98rem; margin:.25rem 0 .4rem; }
.price-row{ display:flex; align-items:baseline; gap:.5rem; }
.price-now{ font-weight:700; font-size:1.05rem; }
.price-was{ color:var(--slate-light); text-decoration:line-through; font-size:.85rem; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--brand-footer); color:#B9C0CE; margin-top:4rem;
}
.site-footer h6{ color:#fff; font-family:'Space Grotesk',sans-serif; }
.site-footer a{ color:#B9C0CE; }
.site-footer a:hover{ color:var(--brand-accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; }

/* ---------- Misc surfaces ---------- */
.surface{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
.spec-row{ display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.spec-row:last-child{ border-bottom:none; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; width:fit-content; }
.qty-control button{ background:var(--canvas); border:none; width:34px; height:34px; font-weight:700; }
.qty-control input{ width:44px; text-align:center; border:none; }

.gallery-thumb{
  width:64px; height:64px; padding:0; border-radius:8px; overflow:hidden;
  border:2px solid var(--line); background:var(--canvas); cursor:pointer;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb.active{ border-color:var(--brand-accent); }

/* ---------- Homepage category carousel ---------- */
.category-carousel .carousel-item{ height:420px; border-radius:var(--radius); overflow:hidden; }
.category-carousel .carousel-slide-bg{ width:100%; height:100%; object-fit:cover; }
.category-carousel .carousel-caption-custom{
  position:absolute; left:5%; bottom:12%; max-width:420px; text-align:left;
}
.category-carousel .carousel-caption-custom h3{ color:#fff; font-size:2rem; }
.category-carousel .carousel-caption-custom p{ color:#D8DCE4; }
.category-carousel .carousel-indicators [data-bs-target]{ background:var(--brand-accent); }
.category-carousel .carousel-control-prev-icon,
.category-carousel .carousel-control-next-icon{ filter:invert(1); }

.step-badge{
  width:28px;height:28px;border-radius:50%;background:var(--ink); color:var(--volt);
  display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;
}

.table-admin th{ font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); border-top:none; }
.status-pill{ font-family:'JetBrains Mono',monospace; font-size:.72rem; padding:.25rem .6rem; border-radius:999px; font-weight:600; }
.status-paid, .status-delivered, .status-active{ background:rgba(31,174,107,.12); color:var(--mint); }
.status-pending, .status-processing{ background:rgba(244,201,12,.18); color:#8a6d00; }
.status-failed, .status-cancelled{ background:rgba(255,71,71,.12); color:var(--signal); }

.pagination .page-link{ color:var(--ink); border-color:var(--line); }
.pagination .page-item.active .page-link{ background:var(--ink); border-color:var(--ink); color:var(--volt); }
.pagination .page-link:hover{ background:var(--canvas); color:var(--ink); }

/* ---------- Admin shell ---------- */
.admin-sidebar{ background:var(--ink); min-height:100vh; color:#B9C0CE; }
.admin-sidebar a{ color:#B9C0CE; display:block; padding:.6rem 1rem; border-radius:6px; font-weight:500; font-size:.92rem; }
.admin-sidebar a.active, .admin-sidebar a:hover{ background:var(--ink-soft); color:var(--volt); }
.admin-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; padding:1rem; font-size:1.15rem; }
.stat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; }
.stat-value{ font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:700; }