/* ============================================================
   MOONLIT STREETS — MAIN STYLESHEET (No GSAP, Pure CSS)
   ============================================================ */

/* ── TOKENS ── */
:root {
  --primary: #F7F6F3;
  --surface: #FFFFFF;
  --accent:  #E63946;
  --text:    #17161A;
  --muted:   #6B6B70;
  --border:  rgba(20,18,15,0.10);
  --glass:   rgba(247,246,243,0.85);

  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Outfit', sans-serif;

  --r-sm: 4px; --r-base: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
  --shadow-lg: 0 20px 60px rgba(20,18,15,0.12);
  --transition: 0.3s ease;
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--primary);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}
input,textarea,select{font-family:inherit;color:inherit}

/* ── LAYOUT ── */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section--sm{padding:56px 0}

/* ── FLEX UTILS ── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar{
  background:var(--accent);color:#fff;
  font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:0.15em;text-transform:uppercase;
  padding:8px 0;overflow:hidden;position:relative;z-index:100;
}
.announcement-bar__track{
  display:flex;gap:48px;white-space:nowrap;
  animation:marquee 22s linear infinite;
}
.announcement-bar__track span{flex-shrink:0;display:flex;align-items:center;gap:12px}
.announcement-bar__track span::before{content:'✦';font-size:8px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── HEADER ── */
.site-header{
  position:sticky;top:0;z-index:1000;height:70px;
  display:flex;align-items:center;
  background:var(--primary);
  border-bottom:1px solid var(--border);
  transition:background 0.4s,box-shadow 0.4s,backdrop-filter 0.4s;
}
.site-header.scrolled{
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 32px rgba(20,18,15,0.08);
}
.header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:32px;width:100%;
}
/* Logo */
.header__logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:38px;height:38px;background:var(--accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:15px;color:#fff;letter-spacing:-0.05em;
  flex-shrink:0;
}
.logo-text{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-0.02em;line-height:1}
.logo-text span{display:block;font-size:9px;font-weight:400;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* Nav */
.header__nav{display:flex;align-items:center;gap:2px}
.nav__link{
  font-family:var(--font-head);font-size:13px;font-weight:500;letter-spacing:0.03em;
  color:var(--muted);padding:8px 14px;border-radius:var(--r-full);
  transition:color 0.2s,background 0.2s;display:block;white-space:nowrap;
}
.nav__link:hover,.nav__link.active{color:var(--text);background:rgba(20,18,15,0.05)}
.nav__link--accent{color:var(--accent);font-weight:700}
.nav__link--accent:hover{background:rgba(230,57,70,0.1)}
/* Header icons */
.header__actions{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.header__icon-btn{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);color:var(--muted);
  transition:color 0.2s,background 0.2s;position:relative;
}
.header__icon-btn:hover{color:var(--text);background:rgba(20,18,15,0.05)}
.header__icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.badge{
  position:absolute;top:5px;right:5px;
  width:17px;height:17px;background:var(--accent);color:#fff;
  border-radius:var(--r-full);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
}
/* Mobile menu button */
.mobile-menu-btn{
  display:none;width:40px;height:40px;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
}
.mobile-menu-btn span{display:block;height:1.5px;background:var(--text);border-radius:1px;transition:all 0.3s}
.mobile-menu-btn span:nth-child(1){width:24px}
.mobile-menu-btn span:nth-child(2){width:16px}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:14px 28px;border-radius:var(--r-sm);
  transition:all 0.25s;cursor:pointer;border:none;white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#c62535;transform:translateY(-2px);box-shadow:0 8px 24px rgba(230,57,70,0.4)}
.btn--secondary{background:transparent;color:var(--text);border:1px solid rgba(20,18,15,0.18)}
.btn--secondary:hover{border-color:rgba(20,18,15,0.5);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--muted);padding:14px 20px}
.btn--ghost:hover{color:var(--text)}
.btn--sm{padding:8px 18px;font-size:11px}
.btn--lg{padding:16px 36px;font-size:13px}
.btn--full{width:100%}

/* ── SECTION HEADERS ── */
.section-header{margin-bottom:48px}
.section-header--center{text-align:center}
.section-eyebrow{
  font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);
  margin-bottom:10px;display:inline-flex;align-items:center;gap:10px;
}
.section-eyebrow::before,.section-eyebrow::after{content:'—';color:rgba(230,57,70,0.4)}
.section-title{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-0.03em;
  line-height:0.95;text-transform:uppercase;color:var(--text);
}
.section-title .accent{color:var(--accent)}
.section-title .outline{-webkit-text-stroke:1px rgba(20,18,15,0.25);color:transparent}
.section-desc{font-size:15px;color:var(--muted);max-width:520px;margin-top:16px;line-height:1.75}
.section-header--center .section-desc{margin-left:auto;margin-right:auto}

/* ── HERO ── */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  background:var(--primary);
}
/* Left gradient */
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 70% at 30% 50%, rgba(230,57,70,0.1) 0%,transparent 65%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(230,57,70,0.05) 0%,transparent 50%),
    linear-gradient(135deg,#080808 0%,#121212 60%,#1a0a0b 100%);
  z-index:0;
}
.hero__content{
  position:relative;z-index:3;
  padding:140px 0 100px;max-width:560px;
}
.hero__eyebrow{
  font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);
  margin-bottom:24px;display:flex;align-items:center;gap:12px;
  /* CSS fade-in */
  animation:fadeUp 0.7s ease 0.2s both;
}
.hero__eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--accent)}
.hero__headline{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(3.5rem,9vw,7rem);
  line-height:0.92;letter-spacing:-0.04em;text-transform:uppercase;
  margin-bottom:24px;
}
.hero__headline .line{
  display:block;overflow:hidden;
  animation:slideUp 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__headline .line:nth-child(1){animation-delay:0.35s}
.hero__headline .line:nth-child(2){animation-delay:0.48s;color:var(--accent);text-shadow:0 0 60px rgba(230,57,70,0.4)}
.hero__headline .line:nth-child(3){animation-delay:0.61s;-webkit-text-stroke:1px rgba(245,245,245,0.22);color:transparent}
.hero__headline .line:nth-child(4){animation-delay:0.74s}
.hero__subline{
  font-size:16px;color:var(--muted);max-width:440px;line-height:1.75;
  margin-bottom:36px;
  animation:fadeUp 0.7s ease 0.9s both;
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:12px;
  animation:fadeUp 0.7s ease 1.05s both;
}

/* Hero right panel */
.hero-panel{
  position:absolute;right:0;top:0;bottom:0;width:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1a0a0c 0%,#200d12 40%,#0d0d0d 100%);
  overflow:hidden;z-index:1;
  animation:panelReveal 1s ease 0.3s both;
}
.hero-panel::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 35% 55%,rgba(230,57,70,0.2) 0%,transparent 60%);
}
/* Giant shirt silhouette */
.hero-panel__shirt{
  position:relative;z-index:2;opacity:0.16;
  animation:floatY 5s ease-in-out infinite;
}
.hero-panel__shirt svg{width:300px;height:340px}
/* Floating product badge */
.hero-panel__badge{
  position:absolute;bottom:48px;left:40px;z-index:3;
  background:rgba(230,57,70,0.92);
  border-radius:10px;padding:14px 20px;
  animation:fadeUp 0.8s ease 1.2s both;
}
.hero-panel__badge-sub{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:3px}
.hero-panel__badge-name{font-family:var(--font-head);font-size:15px;font-weight:800;color:#fff}
/* Stats pill */
.hero-panel__stat{
  position:absolute;top:30%;right:36px;z-index:3;
  background:rgba(18,18,18,0.88);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;padding:18px 22px;
  backdrop-filter:blur(14px);
  animation:fadeUp 0.8s ease 1.35s both;
}
.hero-panel__stat-num{font-family:var(--font-head);font-size:28px;font-weight:800;color:#fff;line-height:1}
.hero-panel__stat-lbl{font-family:var(--font-head);font-size:9px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.38);margin-top:4px}
/* Photo guide */
.hero-panel__guide{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(0,0,0,0.5);border:1px dashed rgba(255,255,255,0.15);
  border-radius:6px;padding:7px 16px;white-space:nowrap;
  font-family:var(--font-head);font-size:9px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.28);
}
/* Scroll indicator */
.hero__scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:fadeUp 0.6s ease 1.5s both;
}
.hero__scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,transparent,var(--muted));animation:scrollPulse 2s ease-in-out infinite}
.hero__scroll-text{font-family:var(--font-head);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* Hero keeps its own dark, editorial backdrop regardless of site theme — force light text/controls within it */
.hero__headline{color:#F5F5F5}
.hero__headline .line:nth-child(2){color:var(--accent)}
.hero__headline .line:nth-child(4){color:#F5F5F5}
.hero__subline{color:rgba(245,245,245,0.68)}
.hero__scroll-line{background:linear-gradient(to bottom,transparent,rgba(245,245,245,0.55))}
.hero__scroll-text{color:rgba(245,245,245,0.55)}
.hero .btn--secondary{color:#F5F5F5;border-color:rgba(245,245,245,0.3)}
.hero .btn--secondary:hover{border-color:rgba(245,245,245,0.7)}

/* ── CSS Keyframes ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{transform:translateY(110%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes panelReveal{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}
@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
/* Scroll-triggered fade up for cards/sections */
@keyframes cardIn{
  from{opacity:0;transform:translateY(36px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── TICKER ── */
.ticker{background:var(--accent);padding:16px 0;overflow:hidden}
.ticker__track{
  display:flex;gap:48px;white-space:nowrap;
  animation:marquee 30s linear infinite;
}
.ticker__item{
  flex-shrink:0;font-family:var(--font-head);font-size:17px;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.02em;color:#fff;
  display:flex;align-items:center;gap:32px;
}
.ticker__item::after{content:'✦';color:rgba(255,255,255,0.35)}
.ticker__item--outline{-webkit-text-stroke:1px rgba(255,255,255,0.4);color:transparent}

/* ── PRODUCT CARDS ── */
.product-card{
  position:relative;background:var(--surface);border-radius:var(--r-base);
  overflow:hidden;transition:transform 0.3s,box-shadow 0.3s;cursor:pointer;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
/* image area */
.product-card__image{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  min-height:260px;
}
/* ── PLACEHOLDER image inside card ── */
.pc-img{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.pc-img__tee{
  width:105px;height:95px;opacity:0.3;
  transition:opacity 0.3s,transform 0.4s;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.65));
}
.product-card:hover .pc-img__tee{opacity:0.55;transform:scale(1.1) translateY(-8px)}
.pc-img__label{
  font-family:var(--font-head);font-size:9px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.22);margin-top:10px;
}
.pc-img__wm{
  position:absolute;font-family:var(--font-head);font-size:5rem;font-weight:900;
  letter-spacing:-0.05em;color:rgba(255,255,255,0.03);
  pointer-events:none;user-select:none;
}
.pc-img__swatches{position:absolute;bottom:10px;right:10px;display:flex;gap:4px}
.pc-img__dot{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25)}
/* gradient color helpers */

.ph-blue  {background:linear-gradient(150deg,#09101e 0%,#121b32 55%,#0a1020 100%)}
.ph-green {background:linear-gradient(150deg,#091b0e 0%,#0f2a16 55%,#091408 100%)}
.ph-gold  {background:linear-gradient(150deg,#1c1608 0%,#2a2208 55%,#1a1508 100%)}
.ph-purple{background:linear-gradient(150deg,#120a1e 0%,#201230 55%,#120a1c 100%)}
.ph-slate {background:linear-gradient(150deg,#0d1016 0%,#181c24 55%,#0d1016 100%)}
.ph-brick {background:linear-gradient(150deg,#1e0e08 0%,#301608 55%,#1c0e08 100%)}
.ph-teal  {background:linear-gradient(150deg,#081e1c 0%,#0f2e2a 55%,#081e1a 100%)} 
/* badges */
.product-card__badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:4px;z-index:3}
.badge--product{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);line-height:1}
.badge--new{background:var(--accent);color:#fff}
.badge--sale{background:#fff;color:#121212}
/* quick action buttons */  
.product-card__actions{
  position:absolute;bottom:12px;right:12px;
  display:flex;flex-direction:column;gap:6px;z-index:3;
  opacity:0;transform:translateX(8px); 
  transition:opacity 0.3s,transform 0.3s;
}
.product-card {
    border: 1px solid #f1ebeb;
}
.product-card:hover .product-card__actions{opacity:1;transform:translateX(0)}
.product-card__action-btn{
  width:36px;height:36px;background:var(--primary);
  border:1px solid var(--border);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);transition:all 0.2s;
}
.product-card__action-btn:hover{background:var(--accent);border-color:var(--accent)}
.product-card__action-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.product-card__action-btn.active svg{fill:var(--accent);stroke:var(--accent)}
/* quick add sizes */
.product-card__quick-add{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border);
  padding:10px 14px;transform:translateY(100%);
  transition:transform 0.3s;z-index:3;
}
.product-card:hover .product-card__quick-add{transform:translateY(0)}
.size-chips{display:flex;gap:6px;flex-wrap:wrap}
.size-chip{
  min-width:32px;height:26px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-family:var(--font-head);font-size:10px;font-weight:700;
  color:var(--muted);background:transparent;cursor:pointer;
  transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:0 6px;
}
.size-chip:hover,.size-chip.active{border-color:var(--text);color:var(--text);background:rgba(20,18,15,0.05)}
/* card info */
.product-card__info{display:block;padding:16px}
.product-card__category{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.product-card__name{font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--text);margin-bottom:8px;line-height:1.3}
.product-card__price{display:flex;align-items:center;gap:8px}
.price__current{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--text)}
.price__original{font-family:var(--font-head);font-size:12px;color:var(--muted);text-decoration:line-through}
.price__discount{font-family:var(--font-head);font-size:10px;font-weight:800;color:var(--accent);background:rgba(230,57,70,0.12);padding:2px 6px;border-radius:var(--r-sm)}

/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-grid--3{grid-template-columns:repeat(3,1fr)}

/* CSS scroll animation for product grid cards */
.product-grid .product-card,
.product-grid--3 .product-card{
  animation:cardIn 0.6s ease both;
}
.product-grid .product-card:nth-child(1){animation-delay:0.05s}
.product-grid .product-card:nth-child(2){animation-delay:0.12s}
.product-grid .product-card:nth-child(3){animation-delay:0.19s}
.product-grid .product-card:nth-child(4){animation-delay:0.26s}

/* ── SLIDER ── */
.new-drop{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.slider-container{position:relative;overflow:hidden}
.slider-track{
  display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:8px;
}
.slider-track::-webkit-scrollbar{display:none}
.slider-track .product-card{flex:0 0 270px;scroll-snap-align:start}
.slider-controls{display:flex;gap:8px;margin-top:24px}
.slider-btn{
  width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.slider-btn:hover{background:var(--accent);border-color:var(--accent)}
.slider-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ── CATEGORY GRID ── */
.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.category-card{
  position:relative;border-radius:var(--r-base);overflow:hidden;
  aspect-ratio:2/3;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:transform 0.3s,box-shadow 0.3s;
  background: linear-gradient(160deg, #1a0a0c, #2a1018);
}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.category-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,transparent 60%)}
.cat-icon{font-size:2.8rem;z-index:2;transition:transform 0.4s;line-height:1}
.category-card:hover .cat-icon{transform:scale(1.15) translateY(-10px)}
.category-card__content{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:2}
.category-card__name{font-family:var(--font-head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:#F5F5F5;line-height:1.25}
.category-card__count{font-size:10px;color:rgba(245,245,245,0.65);margin-top:3px}

/* ── STREET FEED / REELS ── */
.street-feed{background:var(--primary)}
.street-feed__layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.street-feed__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);background:rgba(230,57,70,0.08);border:1px solid rgba(230,57,70,0.2);
  padding:8px 16px;border-radius:var(--r-full);margin-bottom:24px;
}
.street-feed__tag::before{content:'▶';font-size:8px}
.reels-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 16px}
.reels-carousel::-webkit-scrollbar{display:none}
.reel-card{
  flex:0 0 220px;scroll-snap-align:start;
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:380px;cursor:pointer;
  transition:transform 0.3s,box-shadow 0.3s;
}
.reel-card:hover{transform:scale(1.02) translateY(-4px);box-shadow:var(--shadow-lg)}
.reel-card:nth-child(even){margin-top:28px}
.reel-card__video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* placeholder content */
.reel-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:1;
}
.reel-ph__icon{font-size:3.2rem;opacity:0.18;transition:opacity 0.3s}
.reel-card:hover .reel-ph__icon{opacity:0.35}
.reel-ph__text{font-family:var(--font-head);font-size:9px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.18);text-align:center;line-height:1.9}
.reel-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.1) 55%,transparent 100%);z-index:2}
.reel-card__num{position:absolute;top:14px;left:14px;font-family:var(--font-head);font-size:10px;font-weight:800;color:rgba(255,255,255,0.28);z-index:3}
.reel-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50px;height:50px;background:rgba(255,255,255,0.14);
  border:2px solid rgba(255,255,255,0.38);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;z-index:3;
  backdrop-filter:blur(4px);transition:all 0.3s;
}
.reel-card:hover .reel-card__play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.1)}
.reel-card__play svg{width:18px;height:18px;fill:#fff;stroke:none;margin-left:3px}
.reel-card__content{position:absolute;bottom:0;left:0;right:0;padding:16px;z-index:3}
.reel-card__product-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(230,57,70,0.9);color:#fff;
  font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-full);margin-bottom:8px;
}
.reel-card__product-tag::before{content:'🏷';font-size:9px}
.reel-card__title{font-family:var(--font-head);font-size:14px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:8px}
.reel-card__shop-link{font-family:var(--font-head);font-size:10px;font-weight:700;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.1em;display:inline-flex;align-items:center;gap:4px;transition:color 0.2s}
.reel-card__shop-link:hover{color:var(--accent)}
.reel-card__shop-link::after{content:'→'}
/* Reel backgrounds */
.reel-bg-1{background:linear-gradient(160deg,#1a0508 0%,#2d0b12 50%,#1a0508 100%)}
.reel-bg-2{background:linear-gradient(160deg,#050a1a 0%,#0b1232 50%,#050a1a 100%)}
.reel-bg-3{background:linear-gradient(160deg,#050f0a 0%,#0b2016 50%,#050f0a 100%)}

/* ── FEATURED BANNERS ── */
.featured-banner{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.banner-card{
  position:relative;border-radius:var(--r-base);overflow:hidden;
  padding:48px;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:400px;cursor:pointer;
}
.banner-card--large{min-height:560px}
.banner-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.28) 55%,transparent 100%);z-index:1}
.bnr-ph{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9rem;color:rgba(255,255,255,0.04);pointer-events:none;user-select:none;
}
/* geometric accent circles */
.banner-card::after{
  content:'';position:absolute;width:280px;height:280px;
  border:1px solid rgba(230,57,70,0.08);border-radius:50%;
  top:-80px;right:-80px;z-index:0;
}
.banner-card__content{position:relative;z-index:2}
.banner-card__eyebrow{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.banner-card__title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,3.5vw,2.8rem);letter-spacing:-0.03em;text-transform:uppercase;color:#F5F5F5;line-height:0.94;margin-bottom:24px}
.banner-card__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#F5F5F5;transition:gap 0.2s}
.banner-card__link::after{content:'→';transition:transform 0.2s}
.banner-card:hover .banner-card__link::after{transform:translateX(4px)}
.banner-card__link-line{flex:1;height:1px;background:rgba(245,245,245,0.28);min-width:36px;max-width:72px}
/* hover zoom */
.banner-card{transition:box-shadow 0.3s}
.banner-card:hover{box-shadow:var(--shadow-lg)}

/* ── BRAND STORY ── */
.brand-story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* Visual side */
.brand-story__visual{position:relative;height:520px}
.bsv-main{
  position:absolute;top:0;left:0;width:72%;height:78%;
  background:linear-gradient(135deg,#1a1a1a,#252525);
  border-radius:var(--r-xl);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bsv-accent{
  position:absolute;bottom:0;right:0;width:52%;height:52%;
  background:linear-gradient(135deg,#1a0a0b,#251215);
  border-radius:var(--r-xl);border:4px solid var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.bsv-stat{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--accent);border-radius:var(--r-base);
  padding:16px 22px;text-align:center;
  box-shadow:0 0 40px rgba(230,57,70,0.45);z-index:2;
}
.bsv-stat-n{font-family:var(--font-head);font-size:2rem;font-weight:800;color:#fff;line-height:1}
.bsv-stat-l{font-size:9px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.8);margin-top:3px}
/* pillars */
.brand-story__pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.brand-pillar{padding:16px;border:1px solid var(--border);border-radius:var(--r-base);transition:border-color 0.3s,background 0.3s}
.brand-pillar:hover{border-color:rgba(230,57,70,0.3);background:rgba(230,57,70,0.04)}
.brand-pillar__icon{font-size:1.5rem;margin-bottom:8px}
.brand-pillar__name{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.brand-pillar__desc{font-size:12px;color:var(--muted);line-height:1.55}

/* ── NEWSLETTER ── */
.newsletter{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.newsletter__inner{text-align:center;max-width:540px;margin:0 auto}
.newsletter__form{display:flex;gap:10px;margin-top:24px}
.newsletter__input{
  flex:1;background:rgba(20,18,15,0.035);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:14px 20px;font-size:14px;color:var(--text);
  outline:none;transition:border-color 0.2s;
}
.newsletter__input:focus{border-color:var(--accent)}
.newsletter__input::placeholder{color:var(--muted)}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.gallery-item{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer}
.gal-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;transition:transform 0.4s}
.gallery-item:hover .gal-inner{transform:scale(1.07)}
.gallery-item__overlay{position:absolute;inset:0;background:rgba(230,57,70,0.75);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity 0.3s}
.gallery-item:hover .gallery-item__overlay{opacity:1}
/* gallery bg colors */
.gal-1{background:linear-gradient(135deg,#1a0a0c,#2a1016)}.gal-2{background:linear-gradient(135deg,#0a101a,#101828)}
.gal-3{background:linear-gradient(135deg,#1a1508,#28200a)}.gal-4{background:linear-gradient(135deg,#0a1a10,#102816)}
.gal-5{background:linear-gradient(135deg,#120a1a,#1e1028)}.gal-6{background:linear-gradient(135deg,#1a0a0a,#2a1010)}

/* ── FOOTER ── */
.footer{background:#0c0c0c;border-top:1px solid rgba(255,255,255,0.08)}
.footer__main{padding:64px 0;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer .header__logo .logo-text{color:#F5F5F5}
.footer .header__logo .logo-text span{color:#8a8a8a}
.footer__brand p{font-size:13px;color:#9a9a9a;max-width:280px;line-height:1.75;margin-top:16px}
.footer__social{display:flex;gap:10px;margin-top:24px}
.social-link{
  width:36px;height:36px;border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  color:#9a9a9a;transition:all 0.2s;
}
.social-link:hover{border-color:var(--accent);color:var(--accent);background:rgba(230,57,70,0.08)}
.footer__col-title{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#F5F5F5;margin-bottom:20px}
.footer__links{display:flex;flex-direction:column;gap:12px}
.footer__link{font-size:13px;color:#9a9a9a;transition:color 0.2s;display:flex;align-items:center;gap:6px}
.footer__link:hover{color:#F5F5F5}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.08);padding:20px 0;display:flex;align-items:center;justify-content:space-between}
.footer__copyright{font-size:11px;color:#8a8a8a}
.footer__legal{display:flex;gap:24px}
.footer__legal a{font-size:11px;color:#8a8a8a;transition:color 0.2s}
.footer__legal a:hover{color:#F5F5F5}

/* ── CART DRAWER ── */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;
  background:var(--surface);border-left:1px solid var(--border);
  z-index:2000;transform:translateX(100%);transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);
  display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1999;opacity:0;pointer-events:none;transition:opacity 0.3s}
.drawer-overlay.visible{opacity:1;pointer-events:all}
.cart-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--border)}
.cart-drawer__title{font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:-0.02em}
.cart-drawer__count{font-size:13px;color:var(--muted);margin-left:8px}
.cart-drawer__close{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.2s}
.cart-drawer__close:hover{color:var(--text);border-color:var(--text)}
.cart-drawer__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.cart-drawer__items{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.cart-drawer__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;color:var(--muted)}
.cart-drawer__empty-icon{font-size:3rem;margin-bottom:16px;opacity:0.5}
.cart-item{display:grid;grid-template-columns:80px 1fr auto;gap:14px;padding:14px;background:rgba(20,18,15,0.025);border-radius:var(--r-base);border:1px solid var(--border)}
.cart-item__image{width:80px;height:80px;border-radius:var(--r-sm);overflow:hidden;background:#1a1a1a;flex-shrink:0}
.cart-item__name{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.cart-item__variant{font-size:11px;color:var(--muted);margin-bottom:10px}
.qty-control{display:flex;align-items:center;gap:8px;background:rgba(20,18,15,0.04);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px;width:fit-content}
.qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--text);transition:background 0.2s}
.qty-btn:hover{background:rgba(20,18,15,0.08)}
.qty-value{font-family:var(--font-head);font-size:13px;font-weight:700;min-width:20px;text-align:center}
.cart-item__remove{color:var(--muted);font-size:11px;transition:color 0.2s;align-self:flex-start}
.cart-item__remove:hover{color:var(--accent)}
.cart-item__price{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--text);align-self:flex-start}
.cart-drawer__footer{padding:24px;border-top:1px solid var(--border)}
.cart-summary{margin-bottom:20px}
.cart-summary__row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;color:var(--muted)}
.cart-summary__row--total{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--text);border-top:1px solid var(--border);margin-top:8px;padding-top:16px}

/* ── SEARCH OVERLAY ── */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:3000;display:flex;flex-direction:column;align-items:center;padding-top:15vh;opacity:0;pointer-events:none;transition:opacity 0.3s}
.search-overlay.open{opacity:1;pointer-events:all}
.search-overlay__inner{width:100%;max-width:640px;padding:0 24px}
.search-overlay__form{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--accent);padding-bottom:16px}
.search-overlay__input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-head);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:var(--text);letter-spacing:-0.02em}
.search-overlay__input::placeholder{color:rgba(245,245,245,0.18)}
.search-overlay__close{color:var(--muted);font-size:1.5rem;transition:color 0.2s}
.search-overlay__close:hover{color:var(--accent)}

/* ── MOBILE BOTTOM NAV ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:900;padding-bottom:env(safe-area-inset-bottom)}
.mobile-nav__inner{display:grid;grid-template-columns:repeat(5,1fr);height:100%}
.mobile-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);transition:color 0.2s;font-family:var(--font-head);font-size:8px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase}
.mobile-nav__item.active,.mobile-nav__item:hover{color:var(--accent)}
.mobile-nav__item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ── MOBILE DRAWER ── */
.mobile-drawer{display:none;position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;background:var(--surface);border-right:1px solid var(--border);z-index:2000;transform:translateX(-100%);transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);overflow-y:auto;padding:24px}
.mobile-drawer.open{transform:translateX(0)}

/* ── TOAST ── */
.toast-container{position:fixed;top:88px;right:24px;z-index:5000;display:flex;flex-direction:column;gap:10px;max-width:300px}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-base);padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);font-size:13px;animation:fadeUp 0.4s ease both}
.toast--success{border-left:3px solid #22c55e}.toast--error{border-left:3px solid var(--accent)}.toast--info{border-left:3px solid #3b82f6}
.toast__icon{font-size:16px}.toast__msg{flex:1}

/* ── IMG GUIDE label (placeholder indicator) ── */
.img-guide{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.55);border:1px dashed rgba(255,255,255,0.15);
  border-radius:6px;padding:5px 12px;white-space:nowrap;
  font-family:var(--font-head);font-size:8px;font-weight:700;
  letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.28);z-index:4;
  pointer-events:none;
}

/* ── LEGAL PAGES ── */
.legal-content{max-width:720px;margin:0 auto;padding:64px 0}
.legal-content h2{font-family:var(--font-head);font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;margin:40px 0 14px;color:var(--text)}
.legal-content h3{font-family:var(--font-head);font-size:1.1rem;font-weight:600;margin:24px 0 10px;color:var(--text)}
.legal-content p{color:var(--muted);line-height:1.85;margin-bottom:14px}
.legal-content ul{list-style:disc;padding-left:24px;color:var(--muted);line-height:1.85;margin-bottom:14px}
.legal-content ul li{margin-bottom:6px}
.legal-content a{color:var(--accent)}

/* ── PAGE HERO ── */
.page-hero{min-height:38vh;display:flex;align-items:flex-end;padding-bottom:64px;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(230,57,70,0.12) 0%,transparent 60%),var(--primary)}
.page-hero__title{font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,9vw,6rem);letter-spacing:-0.04em;text-transform:uppercase;line-height:0.9}

/* ── ORDERS: LIST PAGE ── */
.orders-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px}
.order-filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.order-filter-tab{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;border:1px solid var(--border);border-radius:var(--r-full);color:var(--muted);cursor:pointer;transition:all .2s;background:transparent}
.order-filter-tab:hover{color:var(--text);border-color:rgba(20,18,15,.35)}
.order-filter-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.order-search{display:flex;align-items:center;gap:8px;background:rgba(20,18,15,0.03);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;min-width:220px}
.order-search input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text)}
.order-search input::placeholder{color:var(--muted)}
.order-search svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}

.order-list{display:flex;flex-direction:column;gap:16px}
.order-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;transition:border-color .25s,box-shadow .25s}
.order-row:hover{border-color:rgba(230,57,70,.35);box-shadow:var(--shadow-lg)}
.order-row__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.order-row__id{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:-.01em}
.order-row__date{font-size:11px;color:var(--muted);margin-top:3px}
.order-row__body{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.order-row__thumbs{display:flex}
.order-thumb{width:48px;height:48px;border-radius:var(--r-sm);background:linear-gradient(135deg,#1e1e1e,#2a2a2a);display:flex;align-items:center;justify-content:center;font-size:1.25rem;border:2px solid var(--surface);margin-left:-12px;flex-shrink:0}
.order-thumb:first-child{margin-left:0}
.order-row__label{font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.order-row__summary{font-size:11px;color:var(--muted)}
.order-row__total{font-family:var(--font-head);font-weight:800;font-size:15px;white-space:nowrap}
.order-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-full);white-space:nowrap}
.order-status::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.order-status--processing{background:rgba(255,184,0,.12);color:#FFB800}.order-status--processing::before{background:#FFB800}
.order-status--shipped{background:rgba(59,130,246,.12);color:#3b82f6}.order-status--shipped::before{background:#3b82f6}
.order-status--delivered{background:rgba(34,197,94,.12);color:#22c55e}.order-status--delivered::before{background:#22c55e}
.order-status--cancelled{background:rgba(230,57,70,.12);color:var(--accent)}.order-status--cancelled::before{background:var(--accent)}

/* ── ORDERS: DETAILS PAGE ── */
.order-detail-header{padding:32px 0 24px;border-bottom:1px solid var(--border);margin-bottom:36px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.order-detail-header__id{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.order-tracker{display:flex;justify-content:space-between;position:relative;margin-bottom:44px;padding:0 4px}
.order-tracker::before{content:'';position:absolute;top:17px;left:34px;right:34px;height:2px;background:var(--border);z-index:0}
.order-tracker__fill{position:absolute;top:17px;left:34px;height:2px;background:var(--accent);z-index:1;transition:width .5s ease;max-width:calc(100% - 68px)}
.order-tracker__step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;text-align:center}
.order-tracker__dot{width:34px;height:34px;border-radius:50%;background:var(--primary);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--muted);transition:all .3s;font-family:var(--font-head)}
.order-tracker__step.done .order-tracker__dot{background:var(--accent);border-color:var(--accent);color:#fff}
.order-tracker__step.cancelled .order-tracker__dot{background:var(--accent);border-color:var(--accent);color:#fff}
.order-tracker__label{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.order-tracker__step.done .order-tracker__label{color:var(--text)}
.order-tracker__date{font-size:9px;color:var(--muted)}

.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:20px}
.detail-card__title{font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.detail-card__body{font-size:13px;color:var(--text);line-height:1.85}
.detail-card__body strong{font-family:var(--font-head);font-weight:700;font-size:13px;display:block;margin-bottom:2px}
.detail-card__row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.detail-card__row:last-child{border-bottom:none}
.detail-card__row span:first-child{color:var(--muted)}
.order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ── ACCOUNT / PROFILE PAGE ── */
.account-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;padding-bottom:80px}
.account-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 20px;position:sticky;top:88px;text-align:center;height:fit-content}
.account-avatar{width:72px;height:72px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff;margin:0 auto 14px;letter-spacing:-.02em}
.account-sidebar__name{font-family:var(--font-head);font-weight:700;font-size:15px}
.account-sidebar__email{font-size:11px;color:var(--muted);margin-top:3px;word-break:break-all}
.account-nav{display:flex;flex-direction:column;gap:4px;margin-top:24px;text-align:left}
.account-nav__item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:all .2s;cursor:pointer;background:transparent;border:none;width:100%;text-align:left}
.account-nav__item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.account-nav__item:hover{color:var(--text);background:rgba(20,18,15,.04)}
.account-nav__item.active{color:var(--text);background:rgba(230,57,70,.12)}
.account-nav__item--danger{color:var(--accent)}
.account-nav__divider{height:1px;background:var(--border);margin:10px 4px}

.account-section{display:none}
.account-section.active{display:block}
.account-section-title{font-family:var(--font-head);font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:6px}
.account-section-desc{font-size:13px;color:var(--muted);margin-bottom:28px}

.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.account-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-base);padding:18px;text-align:center}
.account-stat__num{font-family:var(--font-head);font-weight:800;font-size:1.6rem}
.account-stat__label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.address-card{background:rgba(20,18,15,.02);border:1px solid var(--border);border-radius:var(--r-base);padding:18px;position:relative}
.address-card.is-default{border-color:rgba(230,57,70,.4)}
.address-card__badge{position:absolute;top:14px;right:14px;font-family:var(--font-head);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:rgba(230,57,70,.1);padding:4px 10px;border-radius:var(--r-full)}
.address-card__label{font-family:var(--font-head);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:8px}
.address-card__name{font-family:var(--font-head);font-weight:700;font-size:13px;margin-bottom:6px}
.address-card__text{font-size:12px;color:var(--muted);line-height:1.75}
.address-card__actions{display:flex;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.address-card__actions button{font-family:var(--font-head);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);transition:color .2s}
.address-card__actions button:hover{color:var(--text)}
.address-card__actions button.danger:hover{color:var(--accent)}
.add-address-card{border:1.5px dashed var(--border);border-radius:var(--r-base);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--muted);transition:all .2s;min-height:150px;font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.add-address-card:hover{border-color:var(--accent);color:var(--accent)}
.add-address-card svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ── CHECKOUT: SAVED ADDRESS CHOOSER ── */
.addr-chooser{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.addr-chooser__label{font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.addr-choice{cursor:pointer;transition:all .2s}
.addr-choice:hover{border-color:rgba(230,57,70,.35)}
.addr-choice.selected{border-color:var(--accent);background:rgba(230,57,70,.07)}
.addr-choice-new{border:1.5px dashed var(--border);border-radius:var(--r-base);display:flex;align-items:center;justify-content:center;min-height:110px;color:var(--muted);font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all .2s}
.addr-choice-new:hover{border-color:var(--accent);color:var(--accent)}
.addr-choice-new.selected{border-color:var(--accent);color:var(--accent);border-style:solid;background:rgba(230,57,70,.07)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .category-grid{grid-template-columns:repeat(6, 1fr)}
  .footer__main{grid-template-columns:1fr 1fr;gap:32px}
  .brand-story{grid-template-columns:1fr}
  .brand-story__visual{height:360px}
  .street-feed__layout{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
  .header__nav{display:none}
  .header__icon-btn--search,.header__icon-btn--wish,.header__icon-btn--account{display:none}
  .mobile-menu-btn{display:flex}
  .mobile-nav{display:block}
  .mobile-drawer{display:block}
  body{padding-bottom:64px}
  .header__inner{grid-template-columns:auto 1fr auto}
  .hero-panel{width:100%;opacity:0.12;z-index:0}
  .hero__content{padding:110px 0 80px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .category-grid{grid-template-columns:repeat(6, 1fr);gap:10px}
  .featured-banner{grid-template-columns:1fr}
  .banner-card--large{min-height:360px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer__main{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .footer__bottom{flex-direction:column;gap:10px;text-align:center}
  .newsletter__form{flex-direction:column}
  .reel-card{flex:0 0 180px;min-height:310px}
  .reel-card:nth-child(even){margin-top:0}
  .brand-story__visual{height:280px}
  .bsv-main{width:70%;height:75%}
  .bsv-accent{width:50%;height:50%}
  .order-row__body{align-items:flex-start;flex-direction:column}
  .order-row__body>div:last-child{width:100%;justify-content:space-between}
  .order-tracker__label{font-size:8px}
  .order-tracker{padding:0}
  .order-tracker::before,.order-tracker__fill{left:17px;right:17px}
  .account-layout{grid-template-columns:1fr}
  .account-sidebar{position:static}
  .address-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}