/* ═══════════════════════════════════════════════
   DESIGN SYSTEM
   ═══════════════════════════════════════════════ */
:root {
  --black:#000; --dark:#0a0a0a; --white:#fff;
  --g900:#1a1a1a; --g800:#2a2a2a; --g700:#3a3a3a; --g600:#555; --g500:#777;
  --g400:#999; --g300:#bbb; --g200:#e0e0e0; --g100:#f2f2f2; --g50:#f8f8f8;
  --red:#d6232e; --red-h:#b91c24; --red-light:#fef2f2;
  --green:#25d366; --green-h:#1da851;
  --font-h:'Oswald',sans-serif;
  --font-b:'DM Sans',sans-serif;
  --max-w:1380px; --pad:60px;
  --radius:6px; --radius-lg:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-b);font-size:15px;line-height:1.65;color:var(--g900);background:var(--white);overflow-x:hidden}
body.no-scroll{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}
.w{max-width:var(--max-w);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.bgc{position:absolute;inset:0;background-size:cover;background-position:center}

/* Reveal animations */
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* Buttons */
.btn{font-family:var(--font-h);font-size:13px;font-weight:600;padding:14px 36px;border-radius:24px;letter-spacing:2px;text-transform:uppercase;transition:all .35s var(--ease);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn--red{background:var(--red);color:var(--white)}.btn--red:hover{background:var(--red-h);transform:translateY(-2px);box-shadow:0 8px 28px rgba(214,35,46,.25)}
.btn--green{background:var(--green);color:var(--white)}.btn--green:hover{background:var(--green-h);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.12);color:var(--white);backdrop-filter:blur(8px)}.btn--ghost:hover{background:rgba(255,255,255,.22)}
.btn--dark{background:var(--dark);color:var(--white)}.btn--dark:hover{background:var(--red);transform:translateY(-2px)}
.btn--outline{border:1.5px solid var(--g200);color:var(--g700);background:var(--white)}.btn--outline:hover{border-color:var(--dark);color:var(--dark)}
.btn svg{width:16px;height:16px}

/* Section headings */
.sec-head{margin-bottom:40px}
.sec-head__tag{font-family:var(--font-h);font-size:11px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.sec-head__title{font-family:var(--font-h);font-size:clamp(24px,3vw,36px);font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.1}
.sec-head--line{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:16px;border-bottom:1.5px solid var(--dark)}

/* ═══════════════════════════════════════════════
   OVERLAY (shared backdrop for slide panels)
   ═══════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1001;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.act{opacity:1;pointer-events:auto}


/* Product Card (shared component) */
/* Product Card */
.prod-card{position:relative;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-lg);overflow:hidden;transition:all .35s var(--ease)}
.prod-card:hover{border-color:var(--g200);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.prod-card__img{aspect-ratio:1;overflow:hidden;position:relative;background:var(--g50)}
.prod-card__img .bgc{transition:transform .6s var(--ease)}
.prod-card:hover .prod-card__img .bgc{transform:scale(1.04)}
.prod-card__badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--red);color:var(--white);font-family:var(--font-h);font-size:9px;font-weight:700;padding:3px 9px;text-transform:uppercase;letter-spacing:1px;border-radius:2px}
.prod-card__body{padding:14px 12px}
.prod-card__name{font-family:var(--font-h);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;line-height:1.3;margin-bottom:3px}
.prod-card__sku{font-size:11px;color:var(--g400);margin-bottom:6px}
.prod-card__price{font-family:var(--font-h);font-size:15px;font-weight:600;color:var(--red)}
.prod-card__moq{font-size:11px;color:var(--g500);margin-top:2px}