/* ═══════════════════════════════════════════════════════
   MIZLET THEME — MAIN CSS v1.0
   Kinetic Editorial Dark Design System
═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --y: #F5C800;  --y2: #c9a000;  --r: #C8001A;
  --bk: #060606; --dk: #0d0d0d;  --dk2: #141414; --dk3: #1e1e1e;
  --wh: #ECECEC; --gr: #4a4a4a;  --gr2: #7a7a7a;
  --F1: 'Anton', sans-serif;
  --F2: 'Barlow Condensed', sans-serif;
  --F3: 'DM Sans', sans-serif;
  --ease: cubic-bezier(.77,0,.18,1);
  --radius: 0px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body { background:var(--bk); color:var(--wh); font-family:var(--F3); overflow-x:hidden; cursor:none }
a { text-decoration:none; color:inherit }
img, video { display:block; max-width:100%; height:auto }
button { border:none; background:none; cursor:none; font-family:inherit; color:inherit }
ul { list-style:none }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bk) }
::-webkit-scrollbar-thumb { background:var(--y) }
::selection { background:var(--y); color:var(--bk) }

/* ── CURSOR ─────────────────────────────────────────── */
#cur, #cur-ring {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
}
#cur { width:10px; height:10px; background:var(--y); transition:width .18s,height .18s,opacity .18s }
#cur-ring { width:38px; height:38px; border:1.5px solid rgba(245,200,0,.55); transition:width .1s,height .1s,opacity .1s }
.c-grow #cur { width:44px; height:44px; background:transparent; border:2px solid var(--y) }
.c-grow #cur-ring { width:60px; height:60px; opacity:.2 }
.c-hide #cur, .c-hide #cur-ring { opacity:0 }

/* ── NAV ────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:0 40px; height:70px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom,rgba(6,6,6,.8) 0%,transparent 100%);
  transition:background .5s,height .3s,border-bottom .3s;
  border-bottom:1px solid transparent;
}
#nav.solid {
  background:rgba(6,6,6,.96); height:60px;
  border-bottom-color:rgba(255,255,255,.05);
  backdrop-filter:blur(24px);
}
.logo { display:flex; align-items:baseline; gap:3px; position:relative; z-index:901 }
.logo-myz { font-family:var(--F1); font-size:28px; color:var(--y); letter-spacing:1px; line-height:1 }
.logo-let { font-family:var(--F2); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(236,236,236,.4); margin-bottom:1px }
.logo-img { height:44px; width:auto; object-fit:contain }
.nav-right { display:flex; align-items:center; gap:8px; position:relative; z-index:901 }
.nav-cart-pill {
  display:flex; align-items:center; gap:6px;
  font-family:var(--F2); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--wh);
  border:1px solid rgba(255,255,255,.12); padding:8px 16px;
  transition:all .2s;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
.nav-cart-pill:hover { border-color:var(--y); color:var(--y) }
.mizlet-cart-count { background:var(--y); color:var(--bk); border-radius:50%; width:18px; height:18px; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center }
.nav-shop-pill {
  font-family:var(--F2); font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--bk); background:var(--y);
  padding:9px 24px;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition:background .2s,transform .2s;
}
.nav-shop-pill:hover { background:#fff; transform:translateY(-1px) }
#burger {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,.12); padding:0 10px;
  transition:border-color .2s,background .2s;
}
#burger:hover { border-color:rgba(245,200,0,.5); background:rgba(245,200,0,.05) }
.bline { display:block; height:1.5px; background:var(--wh); transform-origin:center; transition:transform .4s var(--ease),opacity .3s,width .3s,background .2s }
.bline:nth-child(1) { width:100% }
.bline:nth-child(2) { width:65% }
.bline:nth-child(3) { width:100% }
body.menu-open .bline:nth-child(1) { transform:translateY(6.5px) rotate(45deg); background:var(--bk) }
body.menu-open .bline:nth-child(2) { opacity:0; transform:scaleX(0) }
body.menu-open .bline:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); background:var(--bk) }
body.menu-open #burger { background:var(--y); border-color:var(--y) }

/* ── MENU OVERLAY ───────────────────────────────────── */
#menu-overlay {
  position:fixed; inset:0; z-index:800;
  display:grid; grid-template-columns:1fr 40%;
  pointer-events:none; visibility:hidden;
}
body.menu-open #menu-overlay { pointer-events:all; visibility:visible }
.menu-panel-left {
  background:var(--y);
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 80px;
  transform:translateX(-100%);
  transition:transform .7s var(--ease);
}
body.menu-open .menu-panel-left { transform:translateX(0) }
.menu-num { position:absolute; top:120px; right:40px; font-family:var(--F1); font-size:160px; color:rgba(0,0,0,.07); line-height:1; pointer-events:none }
.menu-links { list-style:none; margin-bottom:60px }
.menu-links li { overflow:hidden; margin-bottom:4px }
.menu-links a {
  font-family:var(--F1); font-size:clamp(48px,7vw,88px); line-height:1.05; color:var(--bk);
  display:block; transform:translateY(120%);
  transition:transform .6s var(--ease),color .2s,-webkit-text-stroke .2s;
}
body.menu-open .menu-links a { transform:translateY(0) }
body.menu-open .menu-links li:nth-child(1) a { transition-delay:.15s }
body.menu-open .menu-links li:nth-child(2) a { transition-delay:.2s }
body.menu-open .menu-links li:nth-child(3) a { transition-delay:.25s }
body.menu-open .menu-links li:nth-child(4) a { transition-delay:.3s }
body.menu-open .menu-links li:nth-child(5) a { transition-delay:.35s }
body.menu-open .menu-links li:nth-child(6) a { transition-delay:.4s }
.menu-links a:hover { color:transparent; -webkit-text-stroke:2px var(--bk) }
.menu-bottom { display:flex; gap:32px; transform:translateY(30px); opacity:0; transition:transform .6s var(--ease) .45s,opacity .6s .45s }
body.menu-open .menu-bottom { transform:translateY(0); opacity:1 }
.menu-contact a { font-family:var(--F2); font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(0,0,0,.5); transition:color .2s; display:block; margin-bottom:6px }
.menu-contact a:hover { color:var(--bk) }
.menu-panel-right { position:relative; overflow:hidden; transform:translateX(100%); transition:transform .7s var(--ease) .05s }
body.menu-open .menu-panel-right { transform:translateX(0) }
.menu-panel-right img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transform:scale(1.05); transition:transform 1s var(--ease) }
body.menu-open .menu-panel-right img { transform:scale(1) }
.menu-img-overlay { position:absolute; inset:0; background:linear-gradient(to left,transparent 60%,rgba(245,200,0,.15) 100%) }

/* ── HERO ───────────────────────────────────────────── */
#hero { position:relative; width:100%; height:100vh; min-height:680px; overflow:hidden; background:#000 }
.yt-frame { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh; pointer-events:none; z-index:1 }
.yt-frame iframe { width:100%; height:100%; border:none }
.hero-video-bg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; width:auto; height:auto; z-index:1; pointer-events:none }
.hero-image-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:1 }
.hero-scrim { position:absolute; inset:0; z-index:2; background:linear-gradient(to right,rgba(6,6,6,.88) 0%,rgba(6,6,6,.45) 55%,rgba(6,6,6,.12) 100%),linear-gradient(to top,rgba(6,6,6,.95) 0%,transparent 45%) }
.hero-pulse { position:absolute; width:700px; height:700px; background:radial-gradient(ellipse,rgba(200,0,26,.1) 0%,transparent 65%); top:30%; left:5%; z-index:3; pointer-events:none; animation:pulse 5s ease-in-out infinite }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1} }
.hero-side-label { position:absolute; left:44px; top:50%; transform:translateY(-50%) rotate(-90deg); z-index:5; font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:rgba(236,236,236,.2); white-space:nowrap; animation:fadeIn 1s 1.8s both }
.hero-body { position:absolute; bottom:13%; left:7%; z-index:5; max-width:820px }
.hero-eyebrow { display:flex; align-items:center; gap:12px; font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--y); margin-bottom:22px; animation:slideUp .7s .6s both }
.hero-eyebrow::before { content:''; display:block; width:28px; height:2px; background:var(--y) }
.hero-h1 { font-family:var(--F1); font-size:clamp(76px,11vw,156px); line-height:.88; letter-spacing:-1px }
.h1-line { display:block; overflow:hidden }
.h1-inner { display:block; animation:maskUp .9s var(--ease) both }
.h1-line:nth-child(1) .h1-inner { animation-delay:.7s; color:var(--wh) }
.h1-line.outline .h1-inner { animation-delay:.85s; color:transparent; -webkit-text-stroke:2px var(--y) }
.h1-line.accent .h1-inner { animation-delay:1s; color:var(--y); font-style:italic }
@keyframes maskUp { from{transform:translateY(110%)} to{transform:translateY(0)} }
.hero-sub { font-size:16px; font-weight:300; color:rgba(236,236,236,.55); line-height:1.7; max-width:420px; margin-top:22px; animation:slideUp .7s 1.2s both }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:34px; animation:slideUp .7s 1.4s both }
.btn-primary { font-family:var(--F2); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--bk); background:var(--y); padding:16px 40px; clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s; display:inline-block }
.btn-primary::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transition:left .5s; transform:skewX(-20deg) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(245,200,0,.4) }
.btn-primary:hover::after { left:150% }
.btn-outline { font-family:var(--F2); font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(236,236,236,.65); border-bottom:1px solid rgba(236,236,236,.25); padding-bottom:3px; display:flex; align-items:center; gap:8px; transition:color .2s,border-color .2s }
.btn-outline:hover { color:var(--wh); border-color:var(--wh) }
.hero-stats { position:absolute; bottom:32px; right:48px; display:flex; gap:1px; z-index:5; animation:fadeIn 1s 1.7s both }
.h-stat { padding:16px 24px; background:rgba(6,6,6,.7); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(8px); text-align:center }
.h-stat-n { font-family:var(--F1); font-size:32px; color:var(--y); line-height:1 }
.h-stat-l { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); margin-top:4px }
.scroll-cue { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; animation:fadeIn 1s 2s both }
.scroll-cue-line { width:1px; height:56px; background:rgba(236,236,236,.12); position:relative; overflow:hidden }
.scroll-cue-line::after { content:''; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--y); animation:scrollTick 2s ease-in-out infinite }
@keyframes scrollTick { 0%{top:-50%}100%{top:150%} }
.scroll-cue span { font-family:var(--F2); font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(236,236,236,.25) }
@keyframes slideUp { from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }

/* ── TICKER ─────────────────────────────────────────── */
.ticker { background:var(--y); height:46px; overflow:hidden; display:flex; align-items:center; position:relative; z-index:10 }
.ticker-track { display:flex; white-space:nowrap; animation:tick 25s linear infinite }
@keyframes tick { from{transform:translateX(0)}to{transform:translateX(-50%)} }
.ticker-item { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--bk); padding:0 40px; display:flex; align-items:center; gap:14px }
.t-sep { width:6px; height:6px; flex-shrink:0; background:rgba(0,0,0,.3); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%) }

/* ── SHARED ─────────────────────────────────────────── */
.label { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--y); display:flex; align-items:center; gap:10px; margin-bottom:14px }
.label-bar { display:block; width:22px; height:2px; background:var(--y); flex-shrink:0 }
.sh2 { font-family:var(--F1); font-size:clamp(48px,6.5vw,90px); line-height:.92; letter-spacing:.5px }
.sh2 em { font-style:normal; color:var(--y) }
.sh2 .st { color:transparent; -webkit-text-stroke:1.5px rgba(236,236,236,.4) }
.rv { opacity:0; transform:translateY(50px); transition:opacity .85s,transform .85s cubic-bezier(.25,.46,.45,.94) }
.rv.in { opacity:1; transform:none }
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.22s}.rv.d3{transition-delay:.34s}.rv.d4{transition-delay:.46s}
.view-all-link { font-family:var(--F2); font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); display:flex; align-items:center; gap:10px; transition:color .2s }
.view-all-link span { display:block; width:36px; height:1px; background:var(--gr2); transition:width .3s,background .2s }
.view-all-link:hover { color:var(--y) }
.view-all-link:hover span { width:56px; background:var(--y) }

/* ── PRODUCTS (HOME) ────────────────────────────────── */
#products, .home-products { padding:110px 64px; background:var(--dk); position:relative; overflow:hidden }
#products::before { content:'MYZ'; position:absolute; right:-60px; bottom:-80px; font-family:var(--F1); font-size:380px; line-height:1; color:rgba(245,200,0,.025); pointer-events:none; letter-spacing:-10px }
.products-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px }
.p-layout { display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:auto auto; gap:14px }
.pcard { background:var(--dk2); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.04); transition:border-color .35s,transform .4s cubic-bezier(.25,.46,.45,.94) }
.pcard:hover { border-color:rgba(245,200,0,.22); transform:translateY(-5px) }
.pcard.hero-prod { grid-row:span 2 }
.pcard-img { position:relative; overflow:hidden; background:var(--dk3) }
.pcard.hero-prod .pcard-img { height:540px }
.pcard:not(.hero-prod) .pcard-img { height:245px }
.pcard-img img { width:100%; height:100%; object-fit:cover; filter:saturate(.88); transition:transform .65s cubic-bezier(.25,.46,.45,.94),filter .4s }
.pcard:hover .pcard-img img { transform:scale(1.06); filter:saturate(1) }
.pcard-badge { position:absolute; top:16px; left:16px; font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 13px; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); z-index:2 }
.pcard-action { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,6,6,.95) 0%,transparent 50%); display:flex; align-items:flex-end; padding:20px; opacity:0; transition:opacity .3s; z-index:3 }
.pcard:hover .pcard-action { opacity:1 }
.btn-add { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--bk); background:var(--y); width:100%; padding:13px; text-align:center; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition:background .2s; cursor:none }
.btn-add:hover { background:#fff }
.pcard-info { padding:20px 22px 26px }
.pcard-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.pcard-name { font-family:var(--F2); font-size:20px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px }
.pcard-desc { font-size:13px; color:var(--gr2); line-height:1.55; margin-bottom:14px }
.pcard-price .pnow { font-family:var(--F1); font-size:28px; color:var(--y) }
.pcard-price .pwas { font-family:var(--F2); font-size:15px; color:var(--gr); text-decoration:line-through; margin-left:8px }

/* ── BRAND STRIP ────────────────────────────────────── */
#brand-strip { padding:100px 64px; background:var(--bk); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; position:relative; overflow:hidden }
.bs-left .sh2 { margin-bottom:28px }
.bs-body { font-size:16px; font-weight:300; color:rgba(236,236,236,.55); line-height:1.85; max-width:440px; margin-bottom:36px }
.bs-feats { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px }
.bs-feat { border-left:2px solid var(--y); padding-left:14px }
.bs-feat-name { font-family:var(--F2); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px }
.bs-feat-desc { font-size:12px; color:var(--gr2); line-height:1.5 }
.bs-right { position:relative; height:540px }
.bs-img-a { position:absolute; top:0; left:0; right:60px; bottom:60px; overflow:hidden }
.bs-img-a img { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.85) }
.bs-img-b { position:absolute; bottom:0; right:0; width:200px; height:200px; overflow:hidden; border:3px solid var(--y) }
.bs-img-b img { width:100%; height:100%; object-fit:cover; filter:saturate(.75) }
.bs-stats { display:flex; border:1px solid rgba(255,255,255,.06); width:fit-content }
.bs-stat { padding:20px 32px; border-right:1px solid rgba(255,255,255,.06) }
.bs-stat:last-child { border-right:none }
.bsn { font-family:var(--F1); font-size:42px; color:var(--y); line-height:1 }
.bsl { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); margin-top:4px }

/* ── COMMUNITY ──────────────────────────────────────── */
#community { padding:100px 64px; background:var(--dk2); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.comm-left .sh2 { margin-bottom:18px }
.comm-body { font-size:16px; font-weight:300; color:rgba(236,236,236,.5); line-height:1.8; max-width:420px; margin-bottom:32px }
.comm-perks { margin-bottom:36px }
.perk-row { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05) }
.perk-row:first-child { border-top:1px solid rgba(255,255,255,.05) }
.perk-icon-box { width:38px; height:38px; flex-shrink:0; background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2); display:flex; align-items:center; justify-content:center; font-size:15px }
.perk-text { font-family:var(--F2); font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(236,236,236,.65) }
.btn-wa { display:inline-flex; align-items:center; gap:12px; font-family:var(--F2); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--bk); background:#25D366; padding:16px 40px; clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); transition:all .25s }
.btn-wa:hover { background:#1fba57; transform:translateY(-2px); box-shadow:0 10px 36px rgba(37,211,102,.3) }
.comm-right { position:relative }
.comm-img-wrap { position:relative; overflow:visible }
.comm-img-wrap img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; filter:saturate(.85) }
.comm-img-frame { position:absolute; bottom:-16px; right:-16px; top:16px; left:16px; border:1px solid rgba(245,200,0,.2); pointer-events:none; transition:all .4s }
.comm-right:hover .comm-img-frame { bottom:-20px; right:-20px; top:20px; left:20px }
.comm-count-box { position:absolute; bottom:28px; left:28px; background:rgba(6,6,6,.92); border-left:3px solid var(--y); padding:14px 20px; backdrop-filter:blur(12px) }
.ccn { font-family:var(--F1); font-size:34px; color:var(--y); line-height:1 }
.ccl { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); margin-top:3px }

/* ── SOCIAL FEED ────────────────────────────────────── */
#social { padding:100px 64px; background:var(--bk) }
.social-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px }
.social-tabs { display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.06) }
.s-tab { font-family:var(--F2); font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); padding:12px 30px; display:flex; align-items:center; gap:8px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s,border-color .2s; cursor:none }
.s-tab.on, .s-tab:hover { color:var(--wh); border-color:var(--y) }
.feed-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px }
.feed-item { aspect-ratio:1; overflow:hidden; position:relative; background:var(--dk2); cursor:none }
.feed-item img { width:100%; height:100%; object-fit:cover; filter:saturate(.75); transition:transform .45s,filter .35s }
.feed-item:hover img { transform:scale(1.08); filter:saturate(1.05) }
.feed-ov { position:absolute; inset:0; background:rgba(6,6,6,.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s }
.feed-item:hover .feed-ov { opacity:1 }
.feed-ov-text { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y) }
.feed-note { margin-top:20px; text-align:center; font-family:var(--F2); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gr2) }
.feed-note a { color:var(--y) }
.feed-placeholder { background:var(--dk2); border:1px solid rgba(255,255,255,.06); padding:60px; text-align:center; color:var(--gr2); line-height:1.8 }
.feed-placeholder strong { color:var(--wh) }
.feed-placeholder a { color:var(--y) }

/* ── TESTIMONIALS ───────────────────────────────────── */
#testi { padding:100px 0; background:var(--dk); overflow:hidden }
.testi-head { padding:0 64px; margin-bottom:52px; display:flex; justify-content:space-between; align-items:flex-end }
.testi-scroll { display:flex; gap:20px; padding:0 64px 16px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory }
.testi-scroll::-webkit-scrollbar { display:none }
.tcard { min-width:340px; flex-shrink:0; background:var(--dk2); padding:34px; border:1px solid rgba(255,255,255,.05); scroll-snap-align:start; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); transition:border-color .3s; position:relative }
.tcard:hover { border-color:rgba(245,200,0,.2) }
.tcard-q { position:absolute; top:18px; right:22px; font-family:var(--F1); font-size:52px; color:var(--y); opacity:.07; line-height:1 }
.tcard-stars { color:var(--y); letter-spacing:2px; font-size:13px; margin-bottom:14px }
.tcard-text { font-size:14px; font-weight:300; color:rgba(236,236,236,.7); line-height:1.75; font-style:italic; margin-bottom:22px }
.tcard-author { display:flex; align-items:center; gap:12px }
.tcard-av { width:42px; height:42px; border-radius:50%; flex-shrink:0; background:var(--y); display:flex; align-items:center; justify-content:center; font-family:var(--F1); font-size:18px; color:var(--bk) }
.tcard-av-photo { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--y) }
.tcard-name { font-family:var(--F2); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase }
.tcard-role { font-size:12px; color:var(--gr2); margin-top:2px }

/* ── BLOG PREVIEW ───────────────────────────────────── */
#blog-preview { padding:100px 64px; background:var(--dk2) }
.blog-prev-head { margin-bottom:52px }
.blog-prev-top { display:flex; justify-content:space-between; align-items:flex-end; margin-top:8px }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.blog-card { background:var(--dk3); border:1px solid rgba(255,255,255,.04); overflow:hidden; transition:border-color .3s,transform .4s }
.blog-card:hover { border-color:rgba(245,200,0,.18); transform:translateY(-4px) }
.blog-card-img { display:block; position:relative; overflow:hidden; aspect-ratio:16/9 }
.blog-card-img img { width:100%; height:100%; object-fit:cover; filter:saturate(.8); transition:transform .5s,filter .4s }
.blog-card:hover .blog-card-img img { transform:scale(1.05); filter:saturate(1) }
.blog-card-img-ov { position:absolute; inset:0; background:rgba(6,6,6,.3); opacity:0; transition:opacity .3s }
.blog-card:hover .blog-card-img-ov { opacity:1 }
.blog-card-body { padding:22px 24px 28px }
.blog-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.blog-cat a { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y) }
.blog-time, .blog-date { font-family:var(--F2); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gr2) }
.blog-card-title { font-family:var(--F2); font-size:20px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; line-height:1.2; margin-bottom:10px }
.blog-card-title a { color:var(--wh); transition:color .2s }
.blog-card-title a:hover { color:var(--y) }
.blog-card-excerpt { font-size:13px; color:var(--gr2); line-height:1.65; margin-bottom:16px }
.blog-read-more { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y); transition:gap .2s; display:flex; align-items:center; gap:6px }
.blog-read-more:hover { gap:12px }

/* ── SHOP PAGE ──────────────────────────────────────── */
.shop-hero { height:320px; background:var(--dk); display:flex; align-items:flex-end; padding:0 64px 52px; position:relative; overflow:hidden; margin-top:70px }
.shop-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center top; opacity:.22; filter:saturate(.3) }
.shop-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,6,6,1) 0%,rgba(6,6,6,.2) 100%) }
.shop-hero-content { position:relative; z-index:1 }
.shop-layout { display:grid; grid-template-columns:260px 1fr; gap:40px; padding:60px 64px; align-items:start }
.shop-sidebar { position:sticky; top:80px }
.sb-block { margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.05) }
.sb-block:last-child { border-bottom:none }
.sb-title { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--y); margin-bottom:16px }
.sb-block ul { list-style:none }
.sb-block li { margin-bottom:8px }
.sb-block a { font-family:var(--F2); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--gr2); transition:color .2s }
.sb-block a:hover, .sb-block a.current-cat { color:var(--wh) }
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.05) }
.results-count, .woocommerce-result-count { font-family:var(--F2); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gr2) }
.woocommerce-ordering select, .sort-sel { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--wh); background:var(--dk2); border:1px solid rgba(255,255,255,.1); padding:8px 16px; outline:none; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); cursor:pointer }
.prod-grid4, ul.products { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:20px; list-style:none !important }

/* ── PAGE HERO ──────────────────────────────────────── */
.page-hero { height:380px; background:var(--dk); display:flex; align-items:flex-end; padding:0 64px 56px; position:relative; overflow:hidden; margin-top:70px }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,6,6,1) 0%,rgba(6,6,6,.2) 100%) }
.page-hero-content { position:relative; z-index:1 }
.page-h1 { font-family:var(--F1); font-size:clamp(64px,9vw,120px); line-height:.9 }
.page-h1 em { font-style:normal; color:var(--y) }
.page-hero-simple { padding:120px 64px 60px; background:var(--dk) }
.crumb { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gr2); margin-bottom:10px }
.crumb a { color:var(--gr2); transition:color .2s }.crumb a:hover { color:var(--y) }

/* ── ABOUT ──────────────────────────────────────────── */
.about-wrap { padding:100px 64px; background:var(--dk) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; margin-bottom:80px }
.about-img-block { position:relative }
.about-img-main { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; filter:saturate(.85) }
.about-img-accent { position:absolute; bottom:-28px; right:-28px; width:180px; height:180px; object-fit:cover; border:3px solid var(--y) }
.about-vline { position:absolute; left:-12px; top:0; width:4px; height:80px; background:var(--y) }
.about-text .sh2 { margin-bottom:24px }
.about-body-text { font-size:16px; font-weight:300; color:rgba(236,236,236,.6); line-height:1.9; margin-bottom:28px }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:32px }
.af { border-left:2px solid var(--y); padding-left:14px }
.af-name { font-family:var(--F2); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px }
.af-desc { font-size:12px; color:var(--gr2); line-height:1.5 }
.mission { background:var(--y); padding:80px 64px; text-align:center }
.mission h2 { font-family:var(--F1); font-size:clamp(36px,5vw,72px); color:var(--bk); line-height:1; margin-bottom:14px }
.mission p { font-size:16px; color:rgba(0,0,0,.6); max-width:540px; margin:0 auto; line-height:1.7 }
.timeline { padding:100px 64px; background:var(--bk) }
.tl-items { margin-top:52px; border-left:2px solid rgba(255,255,255,.07); padding-left:48px }
.tl-item { position:relative; margin-bottom:52px }
.tl-item::before { content:''; position:absolute; left:-56px; top:6px; width:16px; height:16px; background:var(--y); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%) }
.tl-year { font-family:var(--F1); font-size:40px; color:var(--y); line-height:1; margin-bottom:6px }
.tl-title { font-family:var(--F2); font-size:20px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px }
.tl-desc { font-size:14px; color:var(--gr2); line-height:1.6; max-width:480px }

/* ── GALLERY ─────────────────────────────────────────── */
.gallery-controls { padding:36px 64px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.05) }
.g-filter { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gr2); background:transparent; border:1px solid rgba(255,255,255,.08); padding:8px 18px; clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); transition:all .2s; cursor:none }
.g-filter.on, .g-filter:hover { color:var(--bk); background:var(--y); border-color:var(--y) }
.gallery-grid { padding:36px 64px 80px; columns:4; column-gap:10px }
.g-item { break-inside:avoid; margin-bottom:10px; overflow:hidden; position:relative; cursor:none; transition:opacity .4s }
.g-item img { width:100%; display:block; filter:saturate(.8); transition:all .5s }
.g-item:hover img { transform:scale(1.04); filter:saturate(1.1) }
.g-ov { position:absolute; inset:0; background:rgba(6,6,6,.75); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; flex-direction:column; gap:8px }
.g-item:hover .g-ov { opacity:1 }
.g-ov-icon { font-size:28px; color:var(--y) }
.g-ov-label { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--wh) }
.g-video-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:28px; color:#fff; background:rgba(0,0,0,.5); width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; padding-left:4px; z-index:1 }
#lb { position:fixed; inset:0; background:rgba(6,6,6,.96); z-index:9000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(10px) }
#lb.open { opacity:1; pointer-events:all }
#lb-img { max-width:85vw; max-height:85vh; object-fit:contain }
.lb-close { position:absolute; top:28px; right:36px; font-family:var(--F2); font-size:28px; color:var(--wh); cursor:none; width:48px; height:48px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:all .2s; background:transparent }
.lb-close:hover { background:var(--y); color:var(--bk); border-color:var(--y) }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); font-size:20px; color:var(--wh); cursor:none; width:52px; height:52px; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:all .2s; background:rgba(6,6,6,.5) }
.lb-nav:hover { background:var(--y); color:var(--bk); border-color:var(--y) }
.lb-prev { left:28px }.lb-next { right:28px }

/* ── CONTACT ────────────────────────────────────────── */
.contact-wrap { padding:100px 64px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start }
.contact-info .sh2 { margin-bottom:20px }
.contact-body { font-size:15px; font-weight:300; color:rgba(236,236,236,.55); line-height:1.8; margin-bottom:40px }
.c-items { display:flex; flex-direction:column; gap:24px }
.c-item { display:flex; gap:18px; align-items:flex-start }
.c-icon { width:42px; height:42px; flex-shrink:0; border:1px solid rgba(245,200,0,.25); background:rgba(245,200,0,.06); display:flex; align-items:center; justify-content:center; font-size:17px; clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%) }
.c-label { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y); margin-bottom:3px }
.c-val { font-size:14px; color:var(--wh) }
.c-val a { color:var(--wh); transition:color .2s }.c-val a:hover { color:var(--y) }
.f-group { margin-bottom:22px }
.f-label { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y); display:block; margin-bottom:8px }
.f-input, .f-textarea, .f-select, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width:100%; background:var(--dk2); border:1px solid rgba(255,255,255,.08); color:var(--wh); font-family:var(--F3); font-size:15px; padding:14px 18px; outline:none; transition:border-color .2s,background .2s; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%) }
.f-input::placeholder, .f-textarea::placeholder { color:var(--gr2) }
.f-input:focus, .f-textarea:focus, .f-select:focus { border-color:var(--y); background:var(--dk3) }
.f-textarea, .wpcf7 textarea { min-height:120px; resize:vertical }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.f-submit, .wpcf7 input[type="submit"] { font-family:var(--F2); font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--bk); background:var(--y); width:100%; padding:15px; cursor:none; clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); transition:all .25s; margin-top:8px; border:none }
.f-submit:hover, .wpcf7 input[type="submit"]:hover { background:#fff; transform:translateY(-1px); box-shadow:0 8px 30px rgba(245,200,0,.3) }
.wa-quick { background:var(--dk); padding:80px 64px; text-align:center }
.wa-quick h3 { font-family:var(--F1); font-size:clamp(32px,4vw,56px); color:var(--wh); margin-bottom:10px }
.wa-quick h3 em { font-style:normal; color:var(--y) }
.wa-quick p { font-size:14px; color:var(--gr2); margin-bottom:28px }
.mizlet-payment-instructions { background:var(--dk2); border-left:4px solid var(--y); padding:28px 32px; margin-top:28px }
.mizlet-payment-instructions h3 { font-family:var(--F2); font-size:16px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; color:var(--y) }
.bank-details-table { width:100%; border-collapse:collapse; margin-bottom:16px }
.bank-details-table td { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px }
.bank-details-table td:first-child { color:var(--gr2); width:40% }
.bank-details-table code { background:var(--dk3); padding:2px 8px; font-size:13px; color:var(--y) }

/* ── SINGLE BLOG POST ───────────────────────────────── */
.single-post-wrap { padding-top:70px }
.single-post-hero { position:relative; height:500px; overflow:hidden }
.single-post-img { position:absolute; inset:0 }.single-post-img img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) }
.single-post-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,6,6,1) 0%,rgba(6,6,6,.3) 60%,transparent 100%) }
.single-post-meta-wrap { position:absolute; bottom:0; left:0; right:0; padding:40px 64px }
.single-post-cats a { font-family:var(--F2); font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--y) }
.single-post-title { font-family:var(--F1); font-size:clamp(40px,5vw,72px); line-height:.95; margin:12px 0 }
.single-post-byline { font-family:var(--F2); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gr2); display:flex; align-items:center; gap:8px }
.single-post-content-wrap { padding:60px 64px 80px; max-width:860px; margin:0 auto }
.single-post-content { font-size:17px; line-height:1.9; color:rgba(236,236,236,.8) }
.single-post-content h2,.single-post-content h3 { font-family:var(--F1); color:var(--wh); margin:2em 0 .5em }
.single-post-content p { margin-bottom:1.4em }
.single-post-content a { color:var(--y) }
.single-post-content img { border:1px solid rgba(255,255,255,.06); margin:2em 0 }
.post-shop-cta { margin-top:48px; text-align:center; background:var(--dk2); border:1px solid rgba(245,200,0,.15); padding:40px; }
.post-shop-cta p { color:var(--gr2); margin-bottom:16px; font-family:var(--F2); font-size:13px; letter-spacing:2px; text-transform:uppercase }

/* ── FOOTER ─────────────────────────────────────────── */
footer { background:var(--dk2); border-top:1px solid rgba(255,255,255,.05); padding:80px 64px 40px }
.ft-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px }
.ft-logo { font-family:var(--F1); font-size:34px; color:var(--y); letter-spacing:1px; display:block; margin-bottom:14px }
.ft-logo-sub { font-family:var(--F2); font-size:12px; color:rgba(236,236,236,.3); letter-spacing:3px; margin-left:3px; text-transform:uppercase }
.ft-logo-img { height:40px; width:auto; object-fit:contain; display:block; margin-bottom:14px }
.ft-tagline { font-size:14px; font-weight:300; color:var(--gr2); line-height:1.7; max-width:250px; margin-bottom:24px }
.ft-socs { display:flex; gap:8px }
.ft-soc { width:36px; height:36px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--F2); font-weight:700; letter-spacing:1px; color:var(--gr2); clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); transition:all .2s }
.ft-soc:hover { background:var(--y); color:var(--bk); border-color:var(--y) }
.ft-col h5 { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--wh); margin-bottom:18px }
.ft-col-list { list-style:none }
.ft-col-list li { margin-bottom:9px }
.ft-col-list a { font-size:14px; color:var(--gr2); display:flex; align-items:center; gap:6px; transition:color .2s }
.ft-col-list a::before { content:'→'; font-size:10px; opacity:0; transition:opacity .2s,transform .2s; transform:translateX(-5px) }
.ft-col-list a:hover { color:var(--y) }
.ft-col-list a:hover::before { opacity:1; transform:translateX(0) }
.ft-bottom { border-top:1px solid rgba(255,255,255,.05); padding-top:28px; display:flex; justify-content:space-between; align-items:center }
.ft-copy { font-size:13px; color:var(--gr2) }
.ft-copy a { color:var(--y) }
.ft-pay { display:flex; align-items:center; gap:8px }
.pay-label { font-family:var(--F2); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gr2) }
.pay-tag { font-family:var(--F2); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gr2); border:1px solid rgba(255,255,255,.07); padding:4px 10px; clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%) }

/* ── PAGINATION ─────────────────────────────────────── */
.mz-pagination, .woocommerce-pagination { display:flex; gap:6px; justify-content:center; padding:40px 0 }
.mz-pagination .page-item a, .mz-pagination .page-item span, .woocommerce-pagination a, .woocommerce-pagination span { font-family:var(--F2); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gr2); border:1px solid rgba(255,255,255,.08); padding:10px 18px; display:block; transition:all .2s; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%) }
.mz-pagination .page-item a:hover, .woocommerce-pagination a:hover { color:var(--y); border-color:var(--y) }
.woocommerce-pagination .current { background:var(--y); color:var(--bk); border-color:var(--y) }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:1100px) {
  #nav { padding:0 24px }
  .hero-body { left:5%; bottom:14% }
  .hero-h1 { font-size:clamp(62px,17vw,100px) }
  .hero-stats { display:none }
  #products, .home-products, #brand-strip, #community, #social, #testi .testi-head, #blog-preview, footer, .shop-layout, .contact-wrap, .about-wrap, .timeline, .gallery-controls, .gallery-grid { padding-left:24px; padding-right:24px }
  .p-layout { grid-template-columns:1fr }
  .pcard.hero-prod { grid-row:span 1 }.pcard.hero-prod .pcard-img { height:300px }
  #brand-strip, #community { grid-template-columns:1fr }
  .bs-right, .comm-right { display:none }
  .blog-grid { grid-template-columns:1fr 1fr }
  .feed-grid { grid-template-columns:repeat(3,1fr) }
  .testi-head { padding:0 24px }
  .testi-scroll { padding:0 24px }
  .ft-grid { grid-template-columns:1fr 1fr; gap:40px }
  .about-grid { grid-template-columns:1fr }
  .about-img-block { display:none }
  .contact-wrap { grid-template-columns:1fr; gap:48px; padding:60px 24px }
  .shop-layout { grid-template-columns:1fr; }
  .shop-sidebar { display:none }
  .gallery-grid { columns:2 }
  .menu-panel-right { display:none }
  #menu-overlay { grid-template-columns:1fr }
  .menu-panel-left { padding:100px 40px }
  .menu-links a { font-size:clamp(40px,12vw,72px) }
  .page-hero, .shop-hero, .single-post-meta-wrap { padding-left:24px; padding-right:24px }
}
@media (max-width:640px) {
  .blog-grid { grid-template-columns:1fr }
  .p-layout { grid-template-columns:1fr }
  .prod-grid4, ul.products { grid-template-columns:1fr 1fr !important }
  .feed-grid { grid-template-columns:repeat(2,1fr) }
  .bs-feats, .about-features { grid-template-columns:1fr }
  .f-row { grid-template-columns:1fr }
  .ft-grid { grid-template-columns:1fr }
  .hero-actions { flex-direction:column; align-items:flex-start }
}