/* ============================================================
   Self-hosted Inter + Bodoni Moda. Both are variable fonts (one
   woff2 per family covers every weight in the declared range), so
   we ship 74 KB of fonts instead of 11 separate Google CDN files.
   font-display:optional means the browser uses fallback metrics if
   the font hasn't loaded in 100 ms - no late swap, no CLS.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:optional;src:url('/assets/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 800;font-display:optional;src:url('/assets/fonts/bodoni-moda.woff2') format('woff2')}

/* ============================================================
   Lady Void - Shared site CSS
   ----------------------------------------------------------------
   This file's STRUCTURE is identical for every tenant. The only
   per-tenant content is the :root block below — brand colours and
   their RGB triples. brandStyleBlock() in header.php overrides
   --red / --red-deep / --red-rgb / --red-deep-rgb at runtime from
   the tenant's storefront_brand row, so the values here only act
   as a static fallback if the dynamic injection ever fails.

   Variable name "--red" is kept for codebase parity across all
   tenants; the actual colour is whatever the tenant's brand uses.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #000;
  --bg-soft: #0a0a0a;
  --border: #1a1a1a;
  --border-2: #222;
  --red: #d61f1f;
  --red-deep: #b51a1a;
  --red-rgb: 214, 31, 31;
  --red-deep-rgb: 181, 26, 26;
  --text: #ece8e6;
  --text-dim: #999;
  --text-faint: #666;
}

html { overflow-x: hidden; overflow-x: clip; } /* mobile pass 2026-06-12: clip off-canvas drawer overflow; clip (not hidden) preserves the sticky header by not forming a scroll container; hidden is the old-browser fallback */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
header.site-header {
  padding: 22px 40px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(12px);
  z-index: 100;
}
.logo {
  text-decoration: none; color: var(--text);
  display: flex; align-items: center; gap: 14px;
}
.logo .V {
  color: var(--red); font-family: 'Bodoni Moda', serif;
  font-weight: 700; font-size: 44px; line-height: 0.9;
}
.logo-block { display: flex; flex-direction: column; gap: 3px; }
.logo-name { font-size: 14px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; line-height: 1; }
.logo-tag { font-size: 10px; color: var(--text-faint); letter-spacing: 2px; text-transform: uppercase; font-weight: 500; }

nav.pills { display: flex; gap: 6px; align-items: center; }
nav.pills a {
  color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 9px 18px; border-radius: 50px; transition: all 0.2s;
}
nav.pills a:hover { color: var(--red); background: rgba(var(--red-rgb), 0.08); }
nav.pills a.active { background: var(--red); color: #fff; }

.cart-btn {
  background: none; border: 1px solid var(--border-2); color: var(--text);
  padding: 9px 16px; border-radius: 50px;
  cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500; transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.cart-btn:hover { border-color: var(--red); color: var(--red); }
.cart-count {
  background: var(--red); color: #fff;
  padding: 2px 8px; border-radius: 50px;
  font-size: 11px; font-weight: 600;
}

/* Hamburger button - hidden on desktop */
.hamburger {
  display: none;
  background: none; border: 1px solid var(--border-2);
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  transition: all 0.2s;
}
.hamburger:hover { border-color: var(--red); }
.hamburger span {
  display: block; position: relative;
  width: 18px; height: 2px; background: var(--text);
  transition: all 0.2s;
}
.hamburger span::before,
.hamburger span::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--text);
  transition: all 0.2s;
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }

/* ============================================================
   MOBILE DRAWER (slide-in menu)
   ============================================================ */
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; transition: opacity 0.3s;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 80%; max-width: 320px;
  background: linear-gradient(180deg, #0e0e0e 0%, #050505 100%);
  border-left: 1px solid var(--border-2);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  flex-direction: column;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-head {
  padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-title {
  font-size: 12px; font-weight: 700; color: var(--red);
  letter-spacing: 3px; text-transform: uppercase;
}
.mobile-drawer-close {
  background: none; border: none; color: var(--text);
  font-size: 32px; line-height: 1; cursor: pointer; padding: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-drawer-close:hover { color: var(--red); }

.mobile-drawer-nav {
  display: flex; flex-direction: column;
  padding: 12px 0; flex: 1; overflow-y: auto;
}
.mobile-drawer-nav a {
  color: var(--text); text-decoration: none;
  padding: 16px 24px; font-size: 16px; font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
  display: block;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:active {
  color: var(--red); background: rgba(var(--red-rgb), 0.05);
}
.mobile-drawer-nav a.active { color: var(--red); border-left: 3px solid var(--red); padding-left: 21px; }

.mobile-drawer-foot { padding: 24px; border-top: 1px solid var(--border); }
.mobile-tg-link {
  display: block; text-align: center;
  background: var(--red); color: #fff;
  padding: 14px 20px; border-radius: 50px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.mobile-tg-link:hover { background: var(--red-deep); }

/* ============================================================
   MOBILE BAG ICON (in header, next to hamburger)
   Hidden on desktop (which uses the .cart-btn pill).
   ============================================================ */
a.mobile-bag-icon,
a.mobile-bag-icon:link,
a.mobile-bag-icon:visited,
a.mobile-bag-icon:hover,
a.mobile-bag-icon:active {
  display: none;
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-2);
  align-items: center; justify-content: center;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: all 0.2s;
}
a.mobile-bag-icon:hover { border-color: var(--red); color: var(--red) !important; }
a.mobile-bag-icon svg { display: block; stroke: currentColor !important; fill: none !important; }
a.mobile-bag-icon * { text-decoration: none !important; }
.mobile-bag-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red) !important; color: #fff !important;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 50px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  letter-spacing: 0;
  text-decoration: none !important;
}
.mobile-bag-badge.hidden { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer {
  padding: 60px 40px 30px;
  border-top: 1px solid var(--border);
  margin-top: 80px;
}
.footer-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px;
  padding-bottom: 30px;
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p {
  font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 320px;
}
.footer-col h5 {
  font-size: 11px; color: var(--text); margin-bottom: 14px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
.footer-col a {
  display: block; color: var(--text-dim); text-decoration: none;
  font-size: 13px; padding: 4px 0; transition: color 0.2s;
}
.footer-col a:hover { color: var(--red); }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 12px; color: var(--text-faint); letter-spacing: 0.5px; }

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 50px;
  text-decoration: none; font-size: 14px; font-weight: 600;
  transition: all 0.2s; cursor: pointer;
  font-family: inherit; border: none;
  text-align: center;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.btn-secondary:hover { border-color: var(--red); color: var(--red); }

/* ============================================================
   MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width: 900px) {
  header.site-header { padding: 16px 18px; }
  .logo .V { font-size: 38px; }
  .logo-name { font-size: 12px; letter-spacing: 4px; }

  /* Hide desktop nav and bag, show hamburger + bag icon */
  nav.pills { display: none; }
  .cart-btn { display: none; }
  .hamburger { display: flex; }
  a.mobile-bag-icon, a.mobile-bag-icon:link, a.mobile-bag-icon:visited { display: inline-flex; }
  
  /* Show mobile drawer infrastructure */
  .mobile-overlay { display: block; pointer-events: none; }
  .mobile-drawer { display: flex; }

  /* Header gets a small gap between bag icon and hamburger */
  .site-header > .mobile-bag-icon { margin-left: auto; }
  .site-header > .hamburger { margin-left: 8px; }

  footer.site-footer { padding: 50px 24px 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 30px; }
  .footer-bottom { padding-top: 24px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}