:root {
  --red: #C00000;
  --red-glow: rgba(192,0,0,0.35);
  --red-dim: #7a0000;
  --bg: #050505;
  --surface: #0e0e0e;
  --surface2: #161616;
  --border: rgba(255,255,255,0.06);
  --text: #f0ede8;
  --muted: #666;
  --bebas: 'Bebas Neue', sans-serif;
  --cormorant: 'Cormorant Garamond', serif;
  --body: 'DM Sans', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--body); overflow-x: hidden; cursor: none; }

/* CURSOR */
.cursor { width:10px; height:10px; background:var(--red); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width 0.2s,height 0.2s,background 0.2s; }
.cursor-ring { width:36px; height:36px; border:1px solid rgba(192,0,0,0.5); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width 0.25s,height 0.25s,border-color 0.2s; }
body:has(a:hover) .cursor, body:has(button:hover) .cursor { width:18px; height:18px; background:#fff; }
body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width:50px; height:50px; border-color:var(--red); }

/* GRAIN */
body::after { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events:none; z-index:9000; }

/* HEADER */
header { position:fixed; top:0; left:0; right:0; z-index:500; padding:22px 6%; display:flex; justify-content:space-between; align-items:center; background:rgba(5,5,5,0.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.logo { font-family:var(--bebas); font-size:28px; letter-spacing:3px; color:var(--red); text-decoration:none; }
.logo span { color:var(--text); font-size:11px; font-family:var(--body); font-weight:300; letter-spacing:5px; display:block; margin-top:-6px; text-transform:uppercase; }
nav { display:flex; gap:36px; align-items:center; }
nav a { color:var(--muted); text-decoration:none; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; transition:color 0.2s; }
nav a:hover { color:var(--text); }
.nav-cta { padding:9px 22px; background:var(--red); color:#fff !important; border-radius:2px; letter-spacing:2px; font-size:11px !important; }
.nav-cta:hover { background:#e00000 !important; box-shadow:0 0 24px var(--red-glow) !important; }

/* HERO */
.hero { min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:0 6%; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 70% 50%,rgba(192,0,0,0.08) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 20% 80%,rgba(192,0,0,0.05) 0%,transparent 60%); }
.hero-lines { position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.015) 0px,rgba(255,255,255,0.015) 1px,transparent 1px,transparent 80px); }
.hero-content { position:relative; z-index:2; max-width:900px; text-align:center; animation:heroIn 1.2s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes heroIn { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow { font-family:var(--body); font-size:11px; letter-spacing:6px; text-transform:uppercase; color:var(--red); margin-bottom:24px; display:flex; align-items:center; justify-content:center; gap:16px; }
.hero-eyebrow::before,.hero-eyebrow::after { content:''; width:40px; height:1px; background:var(--red); opacity:0.5; }
.hero h1 { font-family:var(--bebas); font-size:clamp(52px,13vw,160px); line-height:0.9; letter-spacing:4px; color:var(--text); margin-bottom:8px; }
.hero h1 em { color:var(--red); font-style:normal; display:block; }
.hero-sub { font-family:var(--cormorant); font-style:italic; font-size:clamp(18px,2vw,26px); color:var(--muted); margin-top:20px; margin-bottom:44px; letter-spacing:1px; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-primary { padding:15px 40px; background:var(--red); color:#fff; text-decoration:none; font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; border-radius:2px; transition:background 0.2s,box-shadow 0.3s,transform 0.2s; display:inline-block; }
.btn-primary:hover { background:#d40000; box-shadow:0 0 40px var(--red-glow); transform:translateY(-2px); }
.btn-ghost { padding:15px 40px; border:1px solid rgba(255,255,255,0.15); color:var(--text); text-decoration:none; font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; border-radius:2px; transition:border-color 0.2s,transform 0.2s; display:inline-block; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.4); transform:translateY(-2px); }
.scroll-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:10px; letter-spacing:3px; text-transform:uppercase; animation:float 2.5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,var(--red),transparent); }

/* MARQUEE */
.marquee-strip { background:var(--red); padding:13px 0; overflow:hidden; white-space:nowrap; }
.marquee-inner { display:inline-block; animation:marquee 18s linear infinite; }
.marquee-inner span { font-family:var(--bebas); font-size:16px; letter-spacing:4px; color:#fff; margin:0 32px; opacity:0.85; }
.marquee-inner span.dot { color:rgba(255,255,255,0.4); margin:0 8px; font-size:10px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTIONS */
section { padding:100px 6%; }
.section-label { display:flex; align-items:center; gap:16px; margin-bottom:16px; font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--red); }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); max-width:80px; }
.section-title { font-family:var(--bebas); font-size:clamp(48px,7vw,90px); line-height:0.95; letter-spacing:2px; margin-bottom:16px; }
.section-desc { font-family:var(--cormorant); font-style:italic; font-size:19px; color:var(--muted); max-width:480px; line-height:1.6; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:60px; }
.about-visual { position:relative; height:520px; }
.about-card { position:absolute; border-radius:4px; overflow:hidden; background:var(--surface2); }
.about-card-main { width:75%; height:420px; top:0; left:0; background:linear-gradient(135deg,#1a0000 0%,#0a0a0a 100%); border:1px solid rgba(192,0,0,0.2); display:flex; align-items:center; justify-content:center; }
.about-card-accent { width:55%; height:260px; bottom:0; right:0; background:linear-gradient(135deg,#0d0d0d 0%,#1a0a0a 100%); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.about-card-inner { text-align:center; padding:30px; }
.about-big-num { font-family:var(--bebas); font-size:100px; line-height:1; color:var(--red); opacity:0.15; }
.about-card-text { font-family:var(--cormorant); font-size:18px; font-style:italic; color:var(--muted); line-height:1.6; margin-top:-20px; }
.about-text h2 { margin-bottom:24px; }
.about-body { color:rgba(240,237,232,0.65); line-height:1.8; font-size:15px; margin-bottom:20px; }
.stat-row { display:flex; gap:40px; margin-top:40px; padding-top:40px; border-top:1px solid var(--border); }
.stat { flex:1; }
.stat-num { font-family:var(--bebas); font-size:36px; color:var(--red); line-height:1; }
.stat-label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* SHOP */
.shop-section { background:var(--surface); }
.shop-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:24px; }
.filter-tabs { display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:4px; border:1px solid var(--border); }
.filter-tab { padding:8px 20px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); cursor:pointer; border-radius:2px; transition:all 0.2s; border:none; background:none; }
.filter-tab.active { background:var(--red); color:#fff; }
.filter-tab:hover:not(.active) { color:var(--text); }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:24px; }

/* PRODUCT CARD */
.product-card { background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; cursor:pointer; transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s; position:relative; }
.product-card:hover { border-color:rgba(192,0,0,0.3); transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 30px rgba(192,0,0,0.08); }

/* IMAGE: full image, no cropping */
.product-img-wrap { position:relative; width:100%; min-height:260px; background:linear-gradient(135deg,#111 0%,#0a0a0a 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-img-wrap img { width:100%; height:auto; display:block; object-fit:contain; transition:transform 0.5s ease,filter 0.3s ease; }
.product-card:hover .product-img-wrap img { transform:scale(1.04); }

/* UNAVAILABLE / COMING SOON */
.product-img-wrap.unavailable img { filter:blur(9px) brightness(0.6) saturate(0.8); transform:scale(1.08); pointer-events:none; }
.product-img-wrap.unavailable:hover img { transform:scale(1.08); }
.coming-soon-badge { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; pointer-events:none; }
.coming-soon-badge span { font-family:var(--bebas); font-size:22px; letter-spacing:5px; color:#fff; padding:10px 22px; border:1px solid rgba(255,255,255,0.35); border-radius:2px; background:rgba(5,5,5,0.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.product-card.locked { cursor:pointer; }

/* IMAGE SWAP (front / back preview) */
.img-nav-btn { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:rgba(5,5,5,0.65); border:1px solid rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; font-size:14px; transition:background 0.2s,border-color 0.2s; }
.img-nav-btn:hover { background:var(--red); border-color:var(--red); }
.img-nav-prev { left:14px; }
.img-nav-next { right:14px; }
.img-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:4; }
.img-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.3); cursor:pointer; transition:background 0.2s,transform 0.2s; }
.img-dot.active { background:var(--red); transform:scale(1.3); }

.product-placeholder { width:100%; padding:50px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.placeholder-icon { font-size:60px; opacity:0.12; }
.placeholder-label { font-family:var(--bebas); font-size:22px; letter-spacing:3px; color:var(--red); opacity:0.4; }
.placeholder-color-swatch { width:40px; height:40px; border-radius:50%; border:2px solid rgba(255,255,255,0.1); }

.product-badge { position:absolute; top:14px; left:14px; background:var(--red); color:#fff; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:5px 10px; border-radius:2px; z-index:2; }
.product-badge.badge-new { background:var(--red); }
.product-badge.badge-sold { background:#333; color:var(--muted); }
.product-badge.badge-ltd { background:#111; border:1px solid var(--red); color:var(--red); }
.quick-preview { position:absolute; bottom:0; left:0; right:0; background:rgba(5,5,5,0.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:14px; text-align:center; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--red); transform:translateY(100%); transition:transform 0.25s ease; border-top:1px solid rgba(192,0,0,0.3); z-index:2; }
.product-card:hover .quick-preview { transform:translateY(0); }
.product-info { padding:20px; border-top:1px solid var(--border); }
.product-name { font-family:var(--cormorant); font-size:19px; font-weight:600; color:var(--text); margin-bottom:4px; }
.product-edition { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.product-footer { display:flex; justify-content:space-between; align-items:center; }
.product-price { font-family:var(--bebas); font-size:22px; letter-spacing:1px; color:var(--red); }
.product-price small { display:block; font-family:var(--body); font-size:10px; font-weight:400; letter-spacing:1px; color:var(--muted); line-height:1; }
.product-sizes { display:flex; gap:4px; }
.size-dot { width:26px; height:26px; border:1px solid var(--border); border-radius:2px; font-size:9px; font-weight:500; color:var(--muted); display:flex; align-items:center; justify-content:center; text-transform:uppercase; }

/* MODAL */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:800; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 0.3s ease; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:6px; max-width:900px; width:100%; max-height:90vh; max-height:90svh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; transform:scale(0.95) translateY(20px); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.modal-backdrop.open .modal { transform:scale(1) translateY(0); }

.modal-img-panel { background:linear-gradient(135deg,#0e0e0e 0%,#1a0000 100%); min-height:300px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.modal-img-panel::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(192,0,0,0.1) 0%,transparent 70%); pointer-events:none; }
.modal-img-panel img { width:100%; height:auto; display:block; object-fit:contain; position:relative; z-index:1; }

.modal-placeholder-big { text-align:center; position:relative; z-index:2; }
.modal-placeholder-big .ph-icon { font-size:120px; opacity:0.1; }
.modal-placeholder-big .ph-name { font-family:var(--bebas); font-size:32px; letter-spacing:4px; color:var(--red); opacity:0.5; margin-top:16px; }
.modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; background:rgba(0,0,0,0.6); border:1px solid var(--border); border-radius:50%; color:var(--text); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:background 0.2s; }
.modal-close:hover { background:var(--red); border-color:var(--red); }
.modal-content { padding:48px 40px; display:flex; flex-direction:column; overflow-y:auto; }
.modal-tag { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.modal-title { font-family:var(--cormorant); font-size:34px; font-weight:600; line-height:1.1; color:var(--text); margin-bottom:6px; }
.modal-edition { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.modal-price { font-family:var(--bebas); font-size:38px; color:var(--red); letter-spacing:2px; margin-bottom:4px; }
.modal-price-ngn { font-size:13px; color:var(--muted); margin-bottom:28px; }
.modal-desc { font-size:14px; line-height:1.8; color:rgba(240,237,232,0.6); margin-bottom:28px; }
.modal-section-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.size-grid { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.size-btn { width:48px; height:48px; border:1px solid var(--border); border-radius:2px; font-size:12px; font-weight:500; color:var(--muted); background:none; cursor:pointer; transition:all 0.15s; }
.size-btn:hover,.size-btn.selected { border-color:var(--red); color:var(--text); background:rgba(192,0,0,0.1); }
.size-btn.oos { opacity:0.3; cursor:not-allowed; text-decoration:line-through; }
.price-breakdown { border:1px solid var(--border); border-radius:4px; padding:14px 16px; margin-bottom:24px; display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,0.015); }
.price-row { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.price-row.total { padding-top:8px; border-top:1px solid var(--border); color:var(--text); font-weight:600; font-size:15px; }
.price-row.total span:last-child { color:var(--red); font-family:var(--bebas); font-size:19px; letter-spacing:1px; }
.coming-soon-lock { border:1px solid var(--border); border-radius:4px; padding:22px 18px; text-align:center; background:rgba(255,255,255,0.015); margin-top:4px; }
.coming-soon-lock .csl-title { font-family:var(--bebas); font-size:20px; letter-spacing:3px; color:var(--red); margin-bottom:6px; }
.coming-soon-lock .csl-sub { font-size:12px; color:var(--muted); line-height:1.6; }
.checkout-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:2px; padding:13px 14px; color:var(--text); font-family:var(--body); font-size:15px; outline:none; margin-bottom:8px; transition:border-color 0.2s; }
.checkout-input:focus { border-color:rgba(192,0,0,0.5); }
.checkout-input::placeholder { color:#555; }
.modal-add-btn { width:100%; padding:16px; background:var(--red); color:#fff; font-size:11px; font-weight:600; letter-spacing:4px; text-transform:uppercase; border:none; border-radius:2px; cursor:pointer; transition:background 0.2s,box-shadow 0.3s; margin-bottom:12px; }
.modal-add-btn:hover { background:#d40000; box-shadow:0 0 40px var(--red-glow); }
.modal-secondary-btn { width:100%; padding:14px; background:none; color:var(--muted); font-size:11px; letter-spacing:3px; text-transform:uppercase; border:1px solid var(--border); border-radius:2px; cursor:pointer; transition:color 0.2s,border-color 0.2s; }
.modal-secondary-btn:hover { color:var(--text); border-color:rgba(255,255,255,0.2); }
.modal-meta { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.meta-row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.meta-row span:last-child { color:var(--text); }

/* BRAND */
.brand-section { position:relative; overflow:hidden; background:#000; text-align:center; }
.brand-section::before { content:'BAMS'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--bebas); font-size:clamp(180px,30vw,380px); color:rgba(192,0,0,0.04); letter-spacing:20px; white-space:nowrap; pointer-events:none; }
.brand-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.brand-quote { font-family:var(--cormorant); font-size:clamp(28px,4vw,50px); font-style:italic; font-weight:300; line-height:1.3; color:var(--text); margin-bottom:32px; }
.brand-quote em { color:var(--red); font-style:italic; }
.brand-attribution { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); }

/* VALUES */
.values-section { background:var(--surface); padding:80px 6%; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:60px; }
.value-item { background:var(--surface); padding:40px 32px; transition:background 0.2s; }
.value-item:hover { background:var(--surface2); }
.value-icon { font-size:28px; margin-bottom:16px; }
.value-name { font-family:var(--bebas); font-size:24px; letter-spacing:2px; color:var(--text); margin-bottom:8px; }
.value-desc { font-size:13px; color:var(--muted); line-height:1.7; }

/* POLICIES (Delivery & Refund) */
.policies-section { background:var(--surface); }
.policies-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:60px; }
.policy-card { background:var(--surface); padding:44px 40px; }
.policy-card-icon { font-size:26px; margin-bottom:16px; }
.policy-card-title { font-family:var(--bebas); font-size:28px; letter-spacing:2px; color:var(--text); margin-bottom:18px; }
.policy-card p { color:rgba(240,237,232,0.65); line-height:1.8; font-size:14px; margin-bottom:14px; }
.policy-card p:last-child { margin-bottom:0; }
.policy-card strong { color:var(--text); }
.policy-contact-note { display:inline-block; margin-top:6px; font-size:12px; letter-spacing:1px; color:var(--red); }

/* CONTACT */
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.form-group input,.form-group textarea,.form-group select { background:var(--surface); border:1px solid var(--border); border-radius:2px; padding:14px 16px; color:var(--text); font-family:var(--body); font-size:14px; outline:none; transition:border-color 0.2s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:rgba(192,0,0,0.5); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-group select option { background:var(--surface2); }
.contact-info { padding-top:10px; }
.contact-detail { display:flex; flex-direction:column; gap:24px; margin-top:40px; }
.contact-item-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.contact-item-value { font-family:var(--cormorant); font-size:20px; color:var(--text); }
.social-row { display:flex; gap:16px; margin-top:40px; padding-top:40px; border-top:1px solid var(--border); }
.social-link { padding:10px 20px; border:1px solid var(--border); border-radius:2px; color:var(--muted); text-decoration:none; font-size:11px; letter-spacing:2px; text-transform:uppercase; transition:all 0.2s; }
.social-link:hover { border-color:var(--red); color:var(--red); }

/* FOOTER */
footer { background:#000; border-top:1px solid var(--border); padding:60px 6% 40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:60px; }
.footer-brand .logo-big { font-family:var(--bebas); font-size:48px; letter-spacing:4px; color:var(--red); line-height:1; }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.7; margin-top:16px; max-width:320px; }
.footer-col-title { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.footer-col a { display:block; color:rgba(240,237,232,0.5); text-decoration:none; font-size:14px; margin-bottom:10px; transition:color 0.2s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:30px; border-top:1px solid var(--border); flex-wrap:wrap; gap:16px; }
.footer-copy { font-size:12px; color:var(--muted); }
.footer-copy strong { color:var(--red); }
.footer-tagline { font-family:var(--cormorant); font-style:italic; font-size:16px; color:rgba(192,0,0,0.5); }

/* TOAST */
.toast { position:fixed; bottom:30px; right:30px; background:var(--surface); border:1px solid rgba(192,0,0,0.3); border-radius:4px; padding:16px 24px; font-size:13px; color:var(--text); z-index:1000; transform:translateY(80px); opacity:0; transition:all 0.3s ease; max-width:280px; }
.toast.show { transform:translateY(0); opacity:1; }
.toast-title { font-weight:600; color:var(--red); margin-bottom:2px; font-size:12px; letter-spacing:2px; text-transform:uppercase; }

/* FADE UP */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* TOUCH DEVICES — no custom cursor, no hover-only content */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none !important; }
  .quick-preview { transform: translateY(0); position: static; background: none; border-top: none; padding: 10px 0 0; }
  .product-card:hover { transform: none; box-shadow: none; }
}

@media (max-width:768px) {
  section { padding:70px 6%; }
  .about-grid,.contact-section { grid-template-columns:1fr; gap:48px; }
  .about-visual { height:400px; }
  .about-card-main { height:320px; }
  .about-card-accent { height:200px; }
  .about-big-num { font-size:64px; }
  .footer-grid { grid-template-columns:1fr; gap:40px; }
  .policies-grid { grid-template-columns:1fr; }
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal { grid-template-columns:1fr; max-height:92svh; border-radius:12px 12px 0 0; }
  .modal-img-panel { min-height:220px; }
  .modal-content { padding:28px 22px 40px; }
  .modal-title { font-size:27px; }
  .stat-row { gap:20px; }
  .toast { left:16px; right:16px; bottom:16px; max-width:none; }
  header { padding:14px 5%; }
  .logo { font-size:24px; }

  /* nav stays visible, just compacted */
  nav { gap:16px; }
  nav a { font-size:10px; letter-spacing:1px; }
  nav a:not(.nav-cta) { display:none; }
  .nav-cta { padding:8px 16px; }
}

@media (max-width:420px) {
  .hero-eyebrow { font-size:9px; letter-spacing:3px; }
  .hero-eyebrow::before,.hero-eyebrow::after { width:20px; }
  .hero-btns a { padding:14px 26px; font-size:10px; letter-spacing:2px; }
  .size-btn { width:44px; height:44px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .fade-up { opacity:1 !important; transform:none !important; }
}

/* ═══════════ BAG BUTTON (header) ═══════════ */
.bag-btn { position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,0.02); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; }
.bag-btn:hover { border-color:var(--red); background:rgba(192,0,0,0.12); }
.bag-btn.pop { animation:bagBump 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bagBump { 0%{transform:scale(1)} 30%{transform:scale(1.3) rotate(-10deg)} 55%{transform:scale(0.92) rotate(6deg)} 100%{transform:scale(1)} }
.bag-count { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; transform:scale(0); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 0 14px var(--red-glow); }
.bag-count.has-items { transform:scale(1); }
.bag-count.pop { animation:countPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes countPop { 0%{transform:scale(0.4)} 50%{transform:scale(1.6)} 100%{transform:scale(1)} }
.pop:not(.bag-btn):not(.bag-count) { animation:numPop 0.35s ease; display:inline-block; }
@keyframes numPop { 0%{transform:scale(1)} 40%{transform:scale(1.25);color:#fff} 100%{transform:scale(1)} }

/* fly-to-bag clone + landing ring + sparks */
.bag-fly { position:fixed; z-index:1200; pointer-events:none; background:var(--red) center/contain no-repeat; background-color:rgba(20,0,0,0.85); border:1px solid rgba(192,0,0,0.6); box-shadow:0 0 40px var(--red-glow); will-change:transform; }
.bag-ring { position:fixed; width:40px; height:40px; margin:-20px 0 0 -20px; border:2px solid var(--red); border-radius:50%; z-index:1200; pointer-events:none; animation:ringOut 0.7s ease-out forwards; }
@keyframes ringOut { from{transform:scale(0.6);opacity:1} to{transform:scale(2.6);opacity:0} }
.spark { position:fixed; width:6px; height:6px; background:var(--red); border-radius:1px; z-index:1300; pointer-events:none; box-shadow:0 0 8px var(--red-glow); }

/* ═══════════ ADD TO BAG (modal) ═══════════ */
.qty-stepper { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:2px; }
.qty-stepper button { width:34px; height:34px; background:none; border:none; color:var(--text); font-size:16px; cursor:pointer; transition:background 0.15s,color 0.15s; }
.qty-stepper button:hover { background:rgba(192,0,0,0.15); color:var(--red); }
.qty-stepper span { min-width:30px; text-align:center; font-size:13px; font-weight:500; }
.modal-qty { margin-bottom:24px; }
.modal-qty button { width:44px; height:44px; }
.add-bag-btn { position:relative; overflow:hidden; height:52px; padding:0; }
.add-bag-btn::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent); transform:skewX(-20deg); animation:shimmer 3.2s ease-in-out infinite; }
@keyframes shimmer { 0%,60%{left:-60%} 100%{left:130%} }
.abb-label,.abb-done { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1),opacity 0.3s; }
.abb-done { transform:translateY(100%); opacity:0; }
.abb-done path { stroke-dasharray:24; stroke-dashoffset:24; }
.add-bag-btn.added { background:#0f0f0f; box-shadow:inset 0 0 0 1px var(--red),0 0 40px var(--red-glow); animation:btnPunch 0.45s cubic-bezier(0.34,1.56,0.64,1); }
.add-bag-btn.added .abb-label { transform:translateY(-100%); opacity:0; }
.add-bag-btn.added .abb-done { transform:translateY(0); opacity:1; color:var(--text); }
.add-bag-btn.added .abb-done path { animation:drawCheck 0.4s 0.15s ease forwards; }
@keyframes drawCheck { to{stroke-dashoffset:0} }
@keyframes btnPunch { 0%{transform:scale(1)} 40%{transform:scale(0.95)} 100%{transform:scale(1)} }
.size-grid.shake { animation:shakeX 0.45s ease; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }

/* ═══════════ BAG DRAWER ═══════════ */
.bag-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:850; opacity:0; pointer-events:none; transition:opacity 0.4s ease; }
.bag-drawer { position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--surface); border-left:1px solid rgba(192,0,0,0.25); z-index:860; display:flex; flex-direction:column; transform:translateX(105%); transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); box-shadow:-30px 0 80px rgba(0,0,0,0.6); }
.bag-drawer::before { content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:linear-gradient(to bottom,transparent,var(--red),transparent); opacity:0; transition:opacity 0.6s 0.2s; }
body.bag-open .bag-backdrop { opacity:1; pointer-events:all; }
body.bag-open .bag-drawer { transform:translateX(0); }
body.bag-open .bag-drawer::before { opacity:1; }
.bag-head { display:flex; justify-content:space-between; align-items:center; padding:26px 28px 20px; border-bottom:1px solid var(--border); }
.bag-eyebrow { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--red); }
.bag-title { font-family:var(--bebas); font-size:40px; letter-spacing:2px; line-height:1; }
.bag-title span { color:var(--muted); font-size:24px; }
.bag-close { position:static; }
.bag-body { flex:1; overflow-y:auto; padding:20px 28px 40px; }
.bag-items { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.bag-item { position:relative; display:flex; gap:14px; padding:12px; border:1px solid var(--border); border-radius:4px; background:var(--bg); overflow:hidden; transition:height 0.35s ease,padding 0.35s ease,margin 0.35s ease,opacity 0.3s ease,transform 0.35s cubic-bezier(0.55,0,1,0.45),border-color 0.2s; }
.bag-item:hover { border-color:rgba(192,0,0,0.3); }
.bag-item.removing { animation:none; transform:translateX(110%) rotate(3deg); opacity:0; height:0 !important; padding-top:0; padding-bottom:0; margin-bottom:-12px; }
.stagger { animation:bagItemIn 0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay:calc(0.18s + var(--i) * 0.07s); }
@keyframes bagItemIn { from{opacity:0;transform:translateX(60px) skewX(-6deg)} to{opacity:1;transform:none} }
.bag-item-img { width:76px; height:76px; flex-shrink:0; border-radius:3px; background:linear-gradient(135deg,#111,#1a0000); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bag-item-img img { width:100%; height:100%; object-fit:contain; }
.bag-item-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.bag-item-name { font-family:var(--cormorant); font-size:17px; font-weight:600; line-height:1.15; padding-right:24px; }
.bag-item-meta { font-size:11px; letter-spacing:1px; color:var(--muted); margin:4px 0 10px; text-transform:uppercase; }
.bag-item-row { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.bag-item-row .qty-stepper button { width:28px; height:28px; }
.bag-item-total { font-family:var(--bebas); font-size:19px; letter-spacing:1px; color:var(--red); }
.bag-item-remove { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:none; border:1px solid transparent; color:var(--muted); font-size:11px; cursor:pointer; transition:all 0.2s; }
.bag-item-remove:hover { color:#fff; background:var(--red); transform:rotate(90deg); }
.bag-empty { text-align:center; padding:70px 10px; }
.bag-empty-icon { width:80px; height:80px; margin:0 auto 20px; border-radius:50%; border:1px dashed rgba(192,0,0,0.4); display:flex; align-items:center; justify-content:center; color:var(--red); animation:emptyFloat 3s ease-in-out infinite; }
.bag-empty-icon svg { width:32px; height:32px; }
@keyframes emptyFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.bag-empty-title { font-family:var(--bebas); font-size:30px; letter-spacing:2px; }
.bag-empty p { font-family:var(--cormorant); font-style:italic; color:var(--muted); font-size:17px; margin:6px 0 28px; }

/* ═══════════ SHOP TRANSITION (home → shop) ═══════════ */
body.warp-shake > header, body.warp-shake > section, body.warp-shake > footer, body.warp-shake > .marquee-strip { animation:warpShake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes warpShake { 10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,3px) rotate(-0.4deg)} 40%,60%{transform:translate(7px,-3px) rotate(0.4deg)} }
.shop-warp { position:fixed; inset:0; z-index:9500; pointer-events:all; overflow:hidden; }
.warp-shock { position:absolute; inset:0; background:radial-gradient(circle at var(--x) var(--y),#ff1a1a 0%,var(--red) 35%,#3a0000 100%); clip-path:circle(0 at var(--x) var(--y)); animation:shockOut 0.75s cubic-bezier(0.7,0,0.2,1) forwards; }
@keyframes shockOut { to{clip-path:circle(150% at var(--x) var(--y))} }
.warp-bars { position:absolute; inset:0; display:flex; flex-direction:column; }
.warp-bar { flex:1; background:#050505; transform:translateX(-105%); animation:barIn 0.5s cubic-bezier(0.8,0,0.2,1) forwards; animation-delay:calc(0.45s + var(--i) * 0.045s); }
.warp-bar:nth-child(even) { transform:translateX(105%); }
@keyframes barIn { to{transform:translateX(0)} }
.warp-word { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--bebas); font-size:clamp(80px,22vw,300px); letter-spacing:6px; color:#fff; white-space:nowrap; display:flex; z-index:2; }
.warp-word span { display:inline-block; opacity:0; transform:translateY(80%) scale(2.4) rotate(calc((var(--i) - 3) * 9deg)); filter:blur(14px); animation:letterSlam 0.55s cubic-bezier(0.2,1.4,0.4,1) forwards; animation-delay:calc(0.25s + var(--i) * 0.05s); text-shadow:-4px 0 rgba(0,255,255,0.55),4px 0 rgba(255,0,60,0.7); }
@keyframes letterSlam { to{opacity:1;transform:none;filter:blur(0)} }
.warp-word::before,.warp-word::after { content:attr(data-text); position:absolute; inset:0; opacity:0; letter-spacing:6px; }
.warp-word::before { color:#0ff; animation:glitchA 0.9s steps(2) 0.75s forwards; mix-blend-mode:screen; }
.warp-word::after { color:var(--red); animation:glitchB 0.9s steps(2) 0.75s forwards; mix-blend-mode:screen; }
@keyframes glitchA { 0%{opacity:0.8;clip-path:inset(10% 0 60% 0);transform:translate(-10px,0)} 25%{clip-path:inset(60% 0 10% 0);transform:translate(8px,0)} 50%{clip-path:inset(30% 0 40% 0);transform:translate(-14px,0)} 75%{clip-path:inset(80% 0 2% 0);transform:translate(6px,0)} 100%{opacity:0} }
@keyframes glitchB { 0%{opacity:0.8;clip-path:inset(50% 0 20% 0);transform:translate(12px,0)} 25%{clip-path:inset(5% 0 75% 0);transform:translate(-8px,0)} 50%{clip-path:inset(70% 0 5% 0);transform:translate(14px,0)} 75%{clip-path:inset(20% 0 55% 0);transform:translate(-6px,0)} 100%{opacity:0} }
.warp-tag { position:absolute; left:50%; top:calc(50% + clamp(50px,11vw,150px)); transform:translateX(-50%); font-size:11px; letter-spacing:8px; text-transform:uppercase; color:#fff; opacity:0; animation:tagIn 0.5s ease 0.8s forwards; white-space:nowrap; z-index:2; }
@keyframes tagIn { from{opacity:0;letter-spacing:20px} to{opacity:0.8;letter-spacing:8px} }
.warp-streaks { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,0.08) 60px 61px); opacity:0; animation:streak 0.4s linear infinite,fadeIn 0.3s 0.2s forwards; }
@keyframes streak { from{background-position:0 0} to{background-position:-122px 0} }
@keyframes fadeIn { to{opacity:1} }

/* ═══════════ SHOP PAGE ═══════════ */
.shop-intro { position:fixed; inset:0; z-index:9500; pointer-events:none; display:flex; flex-direction:column; }
.shop-intro .warp-bar { animation:none; transform:none; transition:transform 0.7s cubic-bezier(0.8,0,0.2,1); transition-delay:calc(var(--i) * 0.05s); }
.shop-intro:not(.from-warp) .warp-bar { background:var(--red); }
.shop-intro .intro-word { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--bebas); font-size:clamp(80px,22vw,300px); letter-spacing:6px; color:#fff; white-space:nowrap; transition:transform 0.7s cubic-bezier(0.7,0,0.3,1),opacity 0.5s; z-index:2; }
.shop-intro.go .warp-bar { transform:translateX(105%); }
.shop-intro.go .warp-bar:nth-child(even) { transform:translateX(-105%); }
.shop-intro.go .intro-word { transform:translate(-50%,-50%) scale(3); opacity:0; }

.shop-hero { padding:170px 6% 60px; position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 70% at 80% 30%,rgba(192,0,0,0.12),transparent 70%); }
.shop-hero::after { content:'SHOP'; position:absolute; right:-2%; bottom:-40px; font-family:var(--bebas); font-size:clamp(160px,28vw,420px); line-height:0.8; color:rgba(192,0,0,0.05); pointer-events:none; }
.shop-hero h1 { font-family:var(--bebas); font-size:clamp(64px,12vw,170px); line-height:0.88; letter-spacing:3px; position:relative; z-index:1; }
.shop-hero h1 em { color:var(--red); font-style:normal; display:block; }
.shop-hero h1 .line { display:block; overflow:hidden; }
.shop-hero h1 .line > span { display:block; animation:lineUp 1s cubic-bezier(0.16,1,0.3,1) both; }
.shop-hero h1 .line:nth-child(2) > span { animation-delay:0.12s; }
@keyframes lineUp { from{transform:translateY(105%)} to{transform:none} }
.shop-hero-sub { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:28px; position:relative; z-index:1; animation:heroIn 1s 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.shop-count { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); }
.shop-count strong { color:var(--red); }
.shop-page .shop-section { padding-top:40px; }
.shop-page .product-card { animation:cardIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.shop-page .product-card:nth-child(1){animation-delay:0.45s} .shop-page .product-card:nth-child(2){animation-delay:0.53s} .shop-page .product-card:nth-child(3){animation-delay:0.61s}
.shop-page .product-card:nth-child(4){animation-delay:0.69s} .shop-page .product-card:nth-child(5){animation-delay:0.77s} .shop-page .product-card:nth-child(n+6){animation-delay:0.85s}
@keyframes cardIn { from{opacity:0;transform:translateY(70px) rotateX(18deg) scale(0.94)} to{opacity:1;transform:none} }
.shop-page .products-grid { perspective:1200px; }
.view-all-row { display:flex; justify-content:center; margin-top:48px; }

@media (max-width:768px) {
  .bag-btn { width:36px; height:36px; }
  .bag-head { padding:20px 20px 16px; }
  .bag-body { padding:16px 20px 40px; }
  .shop-hero { padding:120px 6% 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-intro { display:none; }
  .add-bag-btn::after { display:none; }
}