/* ═══════════════════════════════════════════════════════════
   NZBAZZAR v4 — DESIGN PREMIUM ÉDITORIAL
   Instrument Serif (titres serif expressifs)
   Outfit (corps et UI clean)
   Rouge #D92B3A · Noir #0C0C0C · Fond #F8F7F4 (chaud)
═══════════════════════════════════════════════════════════ */

:root {
  --red:       #D92B3A;
  --red-d:     #b8202e;
  --red-l:     #f03547;
  --red-pale:  #fdf0f1;
  --red-glow:  rgba(217,43,58,.14);

  --black:     #0C0C0C;
  --dark:      #141414;
  --dark-2:    #1c1c1c;

  --bg:        #F8F7F4;
  --bg-2:      #F2F1ED;
  --surface:   #FFFFFF;
  --border:    #E8E6E0;
  --border-2:  #D8D5CE;

  --text:      #0C0C0C;
  --text-2:    #3A3835;
  --muted:     #7A7570;
  --muted-l:   #A8A39C;

  --green:     #1A7A4A;
  --amber:     #C07B1A;

  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --sh-xs: 0 1px 4px rgba(0,0,0,.06);
  --sh-sm: 0 2px 10px rgba(0,0,0,.08);
  --sh-md: 0 6px 24px rgba(0,0,0,.10);
  --sh-lg: 0 14px 44px rgba(0,0,0,.12);
  --sh-xl: 0 24px 72px rgba(0,0,0,.16);
  --sh-red:0 4px 20px rgba(217,43,58,.3);

  --header-h: 66px;
  --nav-h:    44px;
  --t:        .2s cubic-bezier(.4,0,.2,1);
  --t-spring: .4s cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Outfit', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
img { max-width:100%; display:block; }
input, textarea, select { font-family:inherit; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:99px; }

/* ── CONTAINER ──────────────────────────────────────────── */
.container { max-width:1360px; margin:0 auto; padding:0 28px; }

/* ══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
.topbar {
  background:var(--black); color:rgba(255,255,255,.42);
  font-size:11.5px; font-weight:400; padding:7px 0;
  letter-spacing:.15px;
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:14px; }
.tb-item { display:flex; align-items:center; gap:5px; }
.tb-sep { opacity:.2; font-weight:300; }
.topbar-right a { color:rgba(255,255,255,.42); transition:color .2s; }
.topbar-right a:hover { color:rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:900;
  transition:box-shadow var(--t);
}
.header.scrolled { box-shadow:var(--sh-md); }
.header-inner {
  height:var(--header-h);
  display:flex; align-items:center; gap:20px;
}

/* LOGO */
.logo { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo-mark {
  width:42px; height:42px;
  background:var(--red);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  position:relative; overflow:hidden;
  box-shadow:var(--sh-red);
  transition:transform var(--t-spring);
}
.logo:hover .logo-mark { transform:scale(1.05) rotate(-3deg); }
.logo-mark::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 55%);
}
.logo-mark.small { width:32px; height:32px; border-radius:var(--r-sm); }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name {
  font-family:'Outfit', sans-serif;
  font-weight:800; font-size:18px; letter-spacing:-.4px;
  color:var(--text);
}
.logo-tagline { font-size:10px; color:var(--muted-l); font-weight:400; letter-spacing:.3px; margin-top:1px; }

/* SEARCH */
.search-wrap {
  flex:1; max-width:580px; position:relative;
}
.search-inner {
  display:flex; align-items:center;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-lg); transition:var(--t); overflow:hidden;
}
.search-wrap:focus-within .search-inner {
  border-color:var(--red);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--red-glow);
}
.search-ico { margin-left:16px; color:var(--muted); flex-shrink:0; }
.search-inner input {
  flex:1; border:none; background:transparent;
  padding:11px 13px; font-size:13.5px; color:var(--text);
}
.search-inner input::placeholder { color:var(--muted-l); }
.search-inner input:focus { outline:none; }
.search-btn {
  background:var(--red); color:#fff;
  padding:10px 22px; font-size:13px; font-weight:600;
  transition:background var(--t); white-space:nowrap;
  letter-spacing:.1px;
}
.search-btn:hover { background:var(--red-d); }

.search-suggestions {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  display:none; z-index:200; overflow:hidden;
}
.search-suggestions.show { display:block; }
.suggestion-item {
  padding:11px 16px; cursor:pointer; font-size:13.5px;
  display:flex; align-items:center; gap:12px;
  transition:background var(--t);
  border-bottom:1px solid var(--border);
}
.suggestion-item:last-child { border-bottom:none; }
.suggestion-item:hover { background:var(--bg); }
.suggestion-item .sug-price { margin-left:auto; font-weight:700; color:var(--red); font-size:13px; }
.suggestion-item .sug-icon { color:var(--muted-l); }

/* HEADER ACTIONS */
.header-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.hbtn {
  width:40px; height:40px; border-radius:var(--r-sm);
  background:transparent; color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:var(--t); position:relative;
  border:1px solid transparent;
}
.hbtn:hover { background:var(--bg); color:var(--red); border-color:var(--border); }
.hbtn-badge {
  position:absolute; top:3px; right:3px;
  background:var(--red); color:#fff;
  border-radius:99px; min-width:15px; height:15px;
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  border:1.5px solid var(--surface);
}
.cart-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--black); color:#fff;
  padding:9px 18px; border-radius:var(--r-lg);
  font-size:13.5px; font-weight:600;
  transition:var(--t); margin-left:6px;
  border:1.5px solid transparent;
}
.cart-btn:hover { background:var(--red); }
.cart-label { font-weight:500; }
.cart-count {
  background:rgba(255,255,255,.15); color:#fff;
  border-radius:99px; min-width:20px; height:20px;
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ══════════════════════════════════════════════════════════
   CAT NAV
══════════════════════════════════════════════════════════ */
.cat-nav {
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:sticky; top:var(--header-h); z-index:880;
}
.cat-nav .container { padding:0 28px; }
.cat-nav-inner {
  display:flex; align-items:stretch;
  height:var(--nav-h); gap:0;
  overflow-x:auto; scrollbar-width:none;
}
.cat-nav-inner::-webkit-scrollbar { display:none; }

.cat-all {
  display:flex; align-items:center; gap:8px;
  padding:0 16px; cursor:pointer;
  background:var(--red); color:#fff;
  font-size:12.5px; font-weight:600;
  position:relative; flex-shrink:0;
  transition:background var(--t); letter-spacing:.1px;
  user-select:none;
}
.cat-all:hover { background:var(--red-d); }

.mega-menu {
  position:absolute; top:100%; left:0;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-top:2px solid var(--red);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-xl); width:320px;
  display:none; z-index:100; overflow:hidden;
}
.cat-all:hover .mega-menu { display:block; }
.mega-item {
  display:flex; align-items:center; gap:13px;
  padding:13px 18px; cursor:pointer;
  transition:background var(--t);
  border-bottom:1px solid var(--border);
}
.mega-item:last-child { border-bottom:none; }
.mega-item:hover { background:var(--bg); }
.mega-icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid var(--border);
  color:var(--text-2);
}
.mega-name { font-size:13.5px; font-weight:600; color:var(--text); }
.mega-count { font-size:11px; color:var(--muted); margin-top:1px; }

.cat-pill {
  display:flex; align-items:center; gap:6px;
  padding:0 14px; height:100%;
  font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.5); white-space:nowrap;
  flex-shrink:0; position:relative;
  transition:color var(--t);
}
.cat-pill::after {
  content:''; position:absolute; bottom:0; left:14px; right:14px;
  height:2px; background:var(--red);
  border-radius:99px 99px 0 0;
  transform:scaleX(0); transition:transform var(--t);
}
.cat-pill:hover { color:#fff; }
.cat-pill:hover::after { transform:scaleX(1); }
.cat-pill-promo { color:rgba(255,200,100,.7); }
.cat-pill-promo:hover { color:#FFC864; }
.cat-pill-promo::after { background:#FFC864; }
.cat-pill-new { color:rgba(100,220,160,.7); }
.cat-pill-new:hover { color:#64DCA0; }
.cat-pill-new::after { background:#64DCA0; }

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero { position:relative; overflow:hidden; background:var(--dark); }
.hero-track { display:flex; transition:transform .7s cubic-bezier(.77,0,.175,1); }
.hero-slide {
  min-width:100%; height:480px;
  display:flex; align-items:center;
  padding:0 80px; position:relative; overflow:hidden;
}
.hero-slide::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 55%,transparent 100%);
  z-index:1;
}
.hero-slide-content { position:relative; z-index:2; max-width:560px; }
.hero-eyebrow {
  display:inline-flex; align-items:center;
  background:var(--red); color:#fff;
  padding:5px 14px; border-radius:2px;
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:18px;
}
.hero-title {
  font-family:'Instrument Serif', Georgia, serif;
  font-size:72px; line-height:.95;
  color:#fff; margin-bottom:16px;
  letter-spacing:-.5px;
}
.hero-title em { font-style:italic; color:#FFC864; }
.hero-sub { color:rgba(255,255,255,.65); font-size:15px; margin-bottom:30px; line-height:1.65; max-width:420px; font-weight:400; }
.hero-btns { display:flex; gap:10px; }
.btn-hero-primary {
  background:var(--red); color:#fff; padding:13px 28px;
  border-radius:var(--r); font-size:14px; font-weight:600;
  transition:var(--t); display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.1px;
}
.btn-hero-primary:hover { background:var(--red-d); transform:translateY(-2px); box-shadow:var(--sh-red); }
.btn-hero-ghost {
  background:rgba(255,255,255,.1); color:#fff;
  padding:13px 24px; border-radius:var(--r);
  font-size:14px; font-weight:400; letter-spacing:.1px;
  transition:var(--t); border:1px solid rgba(255,255,255,.22);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); }

.hero-stat-strip {
  position:absolute; right:80px; bottom:40px; z-index:2;
  display:flex; gap:1px;
}
.hero-stat {
  padding:14px 20px; background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.hero-stat:first-child { border-radius:var(--r) 0 0 var(--r); }
.hero-stat:last-child  { border-radius:0 var(--r) var(--r) 0; }
.hero-stat-n { font-size:20px; font-weight:800; color:#fff; line-height:1; }
.hero-stat-l { font-size:10px; color:rgba(255,255,255,.45); margin-top:3px; letter-spacing:.5px; }

.hero-arr {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:#fff; display:flex; align-items:center;
  justify-content:center; z-index:10; transition:var(--t);
}
.hero-arr:hover { background:rgba(255,255,255,.22); }
.hero-prev { left:20px; }
.hero-next { right:20px; }

.hero-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10; }
.hero-dot { width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.3); cursor:pointer; transition:.3s; }
.hero-dot.active { width:24px; background:#fff; }

/* ══════════════════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════════════════ */
.trust-bar { background:var(--surface); border-bottom:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item {
  display:flex; align-items:center; gap:13px;
  padding:15px 20px; border-right:1px solid var(--border);
  transition:background var(--t);
}
.trust-item:last-child { border-right:none; }
.trust-item:hover { background:var(--bg); }
.trust-ico {
  width:38px; height:38px; border-radius:var(--r);
  background:var(--red); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-spring);
}
.trust-item:hover .trust-ico { transform:scale(1.1); }
.trust-copy strong { display:block; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:1px; }
.trust-copy span   { font-size:11.5px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════ */
.section { padding:52px 0; }
.cats-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; }
.section-label { display:flex; flex-direction:column; gap:3px; }
.section-eyebrow {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--muted-l);
}
.section-title {
  font-family:'Instrument Serif', Georgia, serif;
  font-size:32px; font-weight:400; letter-spacing:-.3px;
  line-height:1; color:var(--text); margin:0;
}
.see-all-link {
  display:flex; align-items:center; gap:6px;
  color:var(--text-2); font-size:13px; font-weight:500;
  transition:var(--t); padding-bottom:2px;
  border-bottom:1px solid var(--border-2);
}
.see-all-link:hover { color:var(--red); border-color:var(--red); gap:9px; }

/* ══════════════════════════════════════════════════════════
   GRILLE PRODUITS
══════════════════════════════════════════════════════════ */
.products-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }

.product-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  position:relative;
}
.product-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--sh-lg);
  border-color:var(--border-2);
}

/* Image */
.pc-img-wrap {
  position:relative; background:var(--bg);
  padding-top:78%; overflow:hidden;
}
.pc-img-placeholder {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  color:var(--muted-l);
}
.pc-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:12px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .pc-img { transform:scale(1.04); }

/* Badges */
.pc-badge {
  position:absolute; top:10px; left:10px;
  padding:3px 9px; border-radius:2px;
  font-size:9.5px; font-weight:700; z-index:2;
  letter-spacing:.8px; text-transform:uppercase;
}
.pc-badge-promo { background:var(--red); color:#fff; }
.pc-badge-new   { background:var(--black); color:#fff; }
.pc-badge-sold  { background:var(--muted); color:#fff; }

/* Favoris */
.pc-wish {
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
  transition:var(--t); border:1px solid var(--border);
  color:var(--muted-l);
}
.pc-wish:hover { border-color:var(--red); color:var(--red); transform:scale(1.12); }
.pc-wish.active { background:var(--red-pale); border-color:var(--red); color:var(--red); }

/* Corps */
.pc-body { padding:14px; }
.pc-brand {
  font-size:10px; color:var(--muted-l); font-weight:600;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.6px;
}
.pc-name {
  font-size:13px; font-weight:500; line-height:1.4; margin-bottom:10px;
  color:var(--text); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-pricing { display:flex; align-items:baseline; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.pc-price { font-size:15px; font-weight:800; color:var(--red); }
.pc-old   { font-size:12px; color:var(--muted-l); text-decoration:line-through; }
.pc-pct   {
  font-size:9.5px; font-weight:700; color:var(--red);
  background:var(--red-pale); padding:2px 7px;
  border-radius:2px; letter-spacing:.4px;
}
.pc-add {
  width:100%; background:var(--black); color:#fff;
  padding:10px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:600;
  transition:var(--t); display:flex; align-items:center;
  justify-content:center; gap:6px; letter-spacing:.1px;
}
.pc-add:hover { background:var(--red); }
.pc-add.added { background:var(--green); }
.pc-add.added:hover { background:#155d38; }

/* Skeleton */
.skeleton {
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--border) 50%,var(--bg-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
  border-radius:var(--r-xs);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════════════════
   STRIP BANNERS
══════════════════════════════════════════════════════════ */
.promo-strip { padding:0 0 52px; }
.strip-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pb-card {
  border-radius:var(--r-xl); overflow:hidden;
  position:relative; height:210px;
  display:flex; align-items:center; padding:40px 44px;
  transition:transform var(--t), box-shadow var(--t); cursor:pointer;
}
.pb-card:hover { transform:translateY(-3px); box-shadow:var(--sh-xl); }
.pb-card::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.1);
}
.pb-content { position:relative; z-index:2; }
.pb-eyebrow {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:rgba(255,255,255,.5); margin-bottom:8px;
}
.pb-title {
  font-family:'Instrument Serif', Georgia, serif;
  font-size:42px; color:#fff; line-height:.95;
  margin-bottom:18px; letter-spacing:-.3px;
}
.pb-title em { font-style:italic; color:#FFC864; }
.pb-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.15); color:#fff;
  padding:9px 18px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500;
  border:1px solid rgba(255,255,255,.22);
  transition:var(--t); backdrop-filter:blur(4px);
}
.pb-btn:hover { background:rgba(255,255,255,.25); }
.pb-deco {
  position:absolute; right:40px; top:50%; transform:translateY(-50%);
  opacity:.08; color:#fff;
}
.pb-deco svg { width:120px; height:120px; }

/* ══════════════════════════════════════════════════════════
   CATÉGORIES CARDS
══════════════════════════════════════════════════════════ */
.cat-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-card {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:24px;
  display:flex; align-items:center; gap:18px;
  cursor:pointer; transition:var(--t);
  position:relative; overflow:hidden;
}
.cat-card::before {
  content:''; position:absolute; top:-50%; right:-50%;
  width:200%; height:200%; border-radius:50%;
  opacity:0; transition:.4s;
}
.cat-card:hover { border-color:var(--red); background:var(--red-pale); box-shadow:var(--sh-sm); }
.cat-card:hover .cat-card-ico { background:var(--red); color:#fff; }

.cat-card-ico {
  width:52px; height:52px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:var(--t); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-2);
}
.cat-card-info h3 { font-size:14.5px; font-weight:700; margin-bottom:3px; }
.cat-card-info p  { font-size:12px; color:var(--muted); margin-bottom:8px; }
.cat-card-subs { display:flex; flex-wrap:wrap; gap:4px; }
.cat-sub-tag {
  background:var(--surface); border:1px solid var(--border);
  border-radius:99px; padding:2px 9px;
  font-size:10.5px; color:var(--muted); font-weight:500;
}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════════ */
.nl-section { padding:52px 0; }
.nl-box {
  background:var(--dark); border-radius:var(--r-xl);
  padding:52px 64px;
  display:flex; align-items:center; gap:64px;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.nl-box::after {
  content:''; position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,43,58,.12), transparent 70%);
  pointer-events:none;
}
.nl-left { display:flex; align-items:flex-start; gap:18px; flex:1; }
.nl-icon {
  width:46px; height:46px; border-radius:var(--r);
  background:rgba(217,43,58,.15); border:1px solid rgba(217,43,58,.2);
  color:var(--red); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.nl-eyebrow {
  font-size:9.5px; font-weight:700; letter-spacing:2px;
  color:var(--muted-l); margin-bottom:6px;
}
.nl-left h2 {
  font-family:'Instrument Serif', Georgia, serif;
  font-size:38px; color:#fff; line-height:1; font-weight:400;
  margin-bottom:8px;
}
.nl-left h2 em { font-style:italic; color:#FFC864; }
.nl-sub { color:rgba(255,255,255,.45); font-size:13.5px; line-height:1.6; }

.nl-form { display:flex; flex-direction:column; gap:9px; width:300px; flex-shrink:0; }
.nl-form input {
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.12);
  color:#fff; padding:12px 16px; border-radius:var(--r);
  font-size:13.5px; transition:border-color var(--t);
}
.nl-form input::placeholder { color:rgba(255,255,255,.35); }
.nl-form input:focus { outline:none; border-color:rgba(255,255,255,.35); }
.nl-form button {
  background:var(--red); color:#fff; padding:12px;
  border-radius:var(--r); font-size:13.5px; font-weight:600;
  transition:var(--t); display:flex; align-items:center;
  justify-content:center; gap:7px;
}
.nl-form button:hover { background:var(--red-d); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer { background:var(--dark); color:rgba(255,255,255,.4); padding:60px 0 0; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:48px; }

.footer-logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Outfit',sans-serif; font-weight:800;
  font-size:17px; color:#fff; margin-bottom:14px;
}
.footer-brand p { font-size:12.5px; line-height:1.8; margin-bottom:20px; }
.footer-socials { display:flex; gap:8px; }
.soc-ico {
  width:34px; height:34px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); transition:var(--t);
}
.soc-ico:hover { background:var(--red); border-color:var(--red); color:#fff; }
.footer-col h4 { color:#fff; font-size:12.5px; font-weight:700; margin-bottom:14px; letter-spacing:.2px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col ul li a { font-size:12.5px; transition:color var(--t); }
.footer-col ul li a:hover { color:rgba(255,255,255,.85); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06);
  padding:16px 0; display:flex;
  justify-content:space-between; align-items:center; font-size:11.5px;
}
.pay-logos { display:flex; gap:6px; align-items:center; }
.pay-chip {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  padding:4px 10px; border-radius:var(--r-xs);
  font-size:10.5px; font-weight:600;
  color:rgba(255,255,255,.45); letter-spacing:.2px;
}

/* ══════════════════════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
  z-index:1000; opacity:0; pointer-events:none; transition:.28s;
}
.overlay.open { opacity:1; pointer-events:all; }

/* ══════════════════════════════════════════════════════════
   PANIER
══════════════════════════════════════════════════════════ */
.cart-panel {
  position:fixed; right:0; top:0; bottom:0; width:400px;
  background:var(--surface); z-index:1001;
  transform:translateX(100%);
  transition:.35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-4px 0 40px rgba(0,0,0,.12);
  border-left:1px solid var(--border);
}
.cart-panel.open { transform:translateX(0); }

.panel-head {
  padding:20px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.panel-head h3 { font-family:'Instrument Serif',Georgia,serif; font-size:22px; font-weight:400; }
.panel-count { font-size:12px; color:var(--muted); margin-top:2px; display:block; }
.panel-close {
  width:32px; height:32px; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:var(--t);
}
.panel-close:hover { background:var(--red); color:#fff; border-color:var(--red); }

.cart-body { flex:1; overflow-y:auto; padding:16px; }
.cart-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; gap:10px; text-align:center;
}
.cart-empty-ico { color:var(--border-2); margin-bottom:6px; }
.cart-empty strong { font-size:14.5px; font-weight:600; }
.cart-empty small { color:var(--muted); font-size:12.5px; }

.cart-item-card {
  display:flex; gap:12px; padding:12px;
  background:var(--bg); border-radius:var(--r);
  margin-bottom:10px; border:1px solid var(--border);
  animation:fadeUp .2s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
.ci-img {
  width:56px; height:56px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden; color:var(--muted-l);
}
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:12.5px; font-weight:600; margin-bottom:3px; line-height:1.35; }
.ci-price { font-size:13px; font-weight:800; color:var(--red); }
.ci-controls { display:flex; align-items:center; gap:7px; margin-top:8px; }
.ci-qty-btn {
  width:26px; height:26px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xs);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:var(--t); color:var(--text-2);
}
.ci-qty-btn:hover { background:var(--red); color:#fff; border-color:var(--red); }
.ci-qty-num { font-size:13px; font-weight:700; min-width:20px; text-align:center; }
.ci-del { margin-left:auto; background:none; color:var(--border-2); font-size:13px; transition:var(--t); }
.ci-del:hover { color:var(--red); }

.cart-foot {
  padding:16px; border-top:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.cart-lines { margin-bottom:12px; }
.cart-line {
  display:flex; justify-content:space-between;
  font-size:12.5px; margin-bottom:7px; color:var(--text-2);
}
.cart-discount-line { color:var(--green); }
.cart-total-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:15px; font-weight:500; padding:10px 0;
  border-top:1px solid var(--border); margin-bottom:14px;
}
.cart-total-row strong { font-size:18px; font-weight:800; color:var(--red); }
.coupon-row { display:flex; gap:7px; margin-bottom:10px; }
.coupon-row input {
  flex:1; border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:9px 12px; font-size:13px; transition:border-color var(--t);
  background:var(--bg);
}
.coupon-row input:focus { outline:none; border-color:var(--red); }
.coupon-row button {
  background:var(--black); color:#fff; padding:9px 16px;
  border-radius:var(--r-sm); font-size:12.5px; font-weight:600;
  transition:var(--t);
}
.coupon-row button:hover { background:var(--red); }

.btn-checkout {
  width:100%; background:var(--red); color:#fff;
  padding:13px; border-radius:var(--r);
  font-size:14px; font-weight:600;
  transition:var(--t); display:flex; align-items:center;
  justify-content:center; gap:8px; letter-spacing:.1px;
}
.btn-checkout:hover { background:var(--red-d); transform:translateY(-1px); box-shadow:var(--sh-red); }
.btn-checkout:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ══════════════════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════════════════ */
.checkout-modal {
  position:fixed; inset:24px;
  background:var(--surface); border-radius:var(--r-xl);
  z-index:1002; display:none; flex-direction:column;
  box-shadow:var(--sh-xl); overflow:hidden;
  border:1px solid var(--border);
}
.checkout-modal.open { display:flex; }
.co-head {
  padding:20px 28px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.co-head h3 { font-family:'Instrument Serif',Georgia,serif; font-size:22px; font-weight:400; }
.co-body {
  flex:1; overflow-y:auto;
  display:grid; grid-template-columns:1fr 360px;
}
.co-form { padding:28px 32px; overflow-y:auto; }
.cf-block {
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--muted); padding-bottom:12px;
  border-bottom:1px solid var(--border); margin-bottom:18px;
}
.cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.cf-full { grid-column:1/-1; }
.cf-field { display:flex; flex-direction:column; gap:6px; }
.cf-field label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.cf-field input, .cf-field textarea {
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:10px 13px; font-size:13.5px; color:var(--text);
  transition:border-color var(--t); background:var(--bg);
}
.cf-field input:focus, .cf-field textarea:focus { outline:none; border-color:var(--red); background:var(--surface); }
.cf-field textarea { resize:vertical; min-height:64px; }

.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:24px; }
.pay-opt { display:flex; cursor:pointer; }
.pay-opt input { position:absolute; opacity:0; pointer-events:none; }
.pay-opt-inner {
  display:flex; align-items:center; gap:9px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:12px 14px; font-size:13px; font-weight:500;
  transition:var(--t); width:100%; color:var(--text-2);
}
.pay-opt input:checked + .pay-opt-inner {
  border-color:var(--red); background:var(--red-pale); color:var(--text);
}
.pay-opt-inner:hover { border-color:var(--border-2); }

.co-summary {
  background:var(--bg); padding:28px;
  border-left:1px solid var(--border); overflow-y:auto;
  display:flex; flex-direction:column;
}
.co-sum-title { font-family:'Instrument Serif',Georgia,serif; font-size:18px; font-weight:400; margin-bottom:14px; }
.co-sum-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--surface);
  border-radius:var(--r-sm); margin-bottom:8px;
  font-size:13px; border:1px solid var(--border);
}
.co-sum-item-ico { color:var(--muted-l); }
.co-sum-item-info { flex:1; min-width:0; }
.co-sum-item-name { font-weight:600; }
.co-sum-item-qty  { font-size:11px; color:var(--muted); }
.co-sum-item-price { font-weight:800; color:var(--red); white-space:nowrap; }
.co-sum-total { border-top:1.5px solid var(--border); margin-top:12px; padding-top:12px; margin-bottom:16px; }
.co-sum-line { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:7px; color:var(--text-2); }
.co-sum-grand { font-size:15px; font-weight:500; }
.co-sum-grand span:last-child { font-size:17px; font-weight:800; color:var(--red); }

/* ══════════════════════════════════════════════════════════
   SUCCESS MODAL
══════════════════════════════════════════════════════════ */
.success-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:48px 44px;
  text-align:center; z-index:1003; max-width:380px; width:90%;
  box-shadow:var(--sh-xl);
}
.success-check {
  width:64px; height:64px; border-radius:50%;
  background:rgba(26,122,74,.1); color:var(--green);
  border:2px solid rgba(26,122,74,.2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.success-modal h2 { font-family:'Instrument Serif',Georgia,serif; font-size:26px; font-weight:400; margin-bottom:10px; }
.success-modal p { color:var(--muted); line-height:1.75; margin-bottom:26px; font-size:13.5px; }
.success-modal strong { color:var(--text); font-weight:700; }

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--black); color:#fff;
  padding:12px 22px; border-radius:var(--r);
  font-size:13.5px; font-weight:500; z-index:9999;
  transition:.3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap; border-left:3px solid transparent;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { border-left-color:#22c55e; }
.toast.error   { border-left-color:var(--red); }
.toast.info    { border-left-color:#60a5fa; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1200px) {
  .products-grid { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:960px) {
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .nl-box { flex-direction:column; gap:32px; padding:40px 40px; }
  .nl-form { width:100%; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:768px) {
  :root { --header-h:58px; --nav-h:42px; }
  .topbar { display:none; }
  .header-inner { gap:10px; }
  .logo-tagline { display:none; }
  .logo-name { font-size:16px; }
  .search-wrap { max-width:none; }
  .search-btn { padding:10px 14px; font-size:12px; }
  .cart-btn .cart-label { display:none; }
  .hero-slide { height:280px; padding:0 24px; }
  .hero-title { font-size:48px; }
  .hero-sub { display:none; }
  .hero-stat-strip { display:none; }
  .hero-arr { display:none; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .pc-name { -webkit-line-clamp:1; }
  .pc-brand { display:none; }
  .cat-cards-grid { grid-template-columns:1fr; }
  .strip-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:24px; }
  .cart-panel { width:100%; border-radius:0; }
  .checkout-modal { inset:0; border-radius:0; }
  .co-body { grid-template-columns:1fr; }
  .co-summary { display:none; }
  .nl-box { padding:32px 24px; }
  .nl-left { flex-direction:column; gap:12px; }
  .section { padding:36px 0; }
  .section-title { font-size:26px; }
  .pb-title { font-size:32px; }
  .pb-deco { display:none; }
}
@media(max-width:480px) {
  .container { padding:0 16px; }
  .products-grid { gap:8px; }
  .hero-slide { height:220px; }
  .hero-title { font-size:38px; }
  .hero-eyebrow { display:none; }
  .section-eyebrow { display:none; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item:not(:first-child) { display:none; }
}