/* ═══════════════════════════════════════════════════════════
   REPPIN STUDIOS — base.css
   Shared by every page: design tokens, reset, navbar,
   mobile menu, cart drawer, footer, noise, reveal helpers.
   Page-specific styles live in storefront.css / product.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root{
  --red:#C41230;--red-deep:#8B0A22;--red-glow:rgba(196,18,48,0.35);
  --cream:#F5F0E8;--cream-dim:rgba(245,240,232,0.7);
  --black:#090909;--dark:#111111;--dark-card:#141414;
  --gold:#D4A853;--gold-dim:rgba(212,168,83,0.15);--gray:#888;
  /* Venue accent — overridden per venue at runtime from venue-config.js theme{} */
  --accent:#2C3E5A;--accent-deep:#1A2840;
  --on-accent-strong:rgba(255,255,255,0.9);--on-accent-soft:rgba(255,255,255,0.45);
  --on-accent-border:rgba(255,255,255,0.1);--on-accent-hover:rgba(255,255,255,0.04);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);--ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --nav-h:64px;--nav-h-m:56px;--logo-h:18px;--icon-size:18px;--nav-fg:rgba(245,240,232,0.85);
}

/* ── Reset / global ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (with hidden as the older-browser fallback) - `hidden`
   makes html/body scroll containers, which silently breaks every
   position:sticky on the site, including the Coming Soon veil. */
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--red) var(--black)}
body{overflow-x:hidden;overflow-x:clip;width:100%;background:var(--black);color:var(--cream);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%;height:auto}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* ── Film-grain overlay ── */
.noise{position:fixed;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' 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:90;opacity:0.5;mix-blend-mode:overlay;user-select:none}

/* ── Scroll-reveal helpers ── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s var(--ease-out-expo),transform 0.9s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:0.08s}.reveal.d2{transition-delay:0.16s}
.reveal.d3{transition-delay:0.24s}.reveal.d4{transition-delay:0.32s}

/* ── Universal navbar ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;padding:0 48px;background:rgba(9,9,9,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-left{display:flex;align-items:center;gap:20px;min-width:0;flex-shrink:1}
.logo{font-family:'Bebas Neue',sans-serif;font-size:var(--logo-h);letter-spacing:0.12em;color:var(--cream);display:flex;align-items:center;gap:2px;text-decoration:none;white-space:nowrap;flex-shrink:0;line-height:1}
.logo span{color:var(--red);font-size:24px;line-height:1}
.nav-divider{width:1px;height:22px;background:rgba(255,255,255,0.15);flex-shrink:0}
.nav-venue{font-family:'Instrument Serif',serif;font-style:italic;font-size:var(--logo-h);color:var(--nav-fg);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-center{display:flex;gap:32px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.nav-center a{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--nav-fg);text-decoration:none;transition:color 0.3s ease;font-weight:500}
.nav-center a:hover,.nav-center a.active{color:var(--cream)}
.nav-right{display:flex;align-items:center;gap:20px;margin-left:auto;flex-shrink:0}
.nav-icon{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);color:var(--nav-fg);transition:color 0.2s;padding:0}
.nav-icon:hover{color:var(--cream)}
.nav-icon svg{width:var(--icon-size);height:var(--icon-size);stroke:currentColor;fill:none;stroke-width:1.5}
.cart-btn{display:flex;align-items:center;justify-content:center;position:relative;background:none;border:none;cursor:pointer;width:var(--icon-size);height:var(--icon-size);color:var(--nav-fg);transition:color 0.2s;padding:0}
.cart-btn:hover{color:var(--cream)}
.cart-btn svg{width:var(--icon-size);height:var(--icon-size);stroke:currentColor;fill:none;stroke-width:1.5}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--red);color:white;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;letter-spacing:0;font-family:'DM Sans',sans-serif}
.menu-btn{display:none;background:none;border:none;cursor:pointer;width:var(--icon-size);height:var(--icon-size);flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;padding:0}
.menu-btn .bar{display:block;height:2px;background:var(--nav-fg);border-radius:0;transition:all 0.3s ease}
.menu-btn .bar:nth-child(1){width:100%}
.menu-btn .bar:nth-child(2){width:100%}
.menu-btn .bar:nth-child(3){width:60%;align-self:flex-end}

/* ── Mobile menu ── */
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(9,9,9,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);padding:16px 20px;z-index:99;transform:translateY(-10px);opacity:0;transition:transform 0.25s ease,opacity 0.25s ease;pointer-events:none}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{display:block;font-size:14px;letter-spacing:0.15em;text-transform:uppercase;color:var(--nav-fg);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-weight:500;transition:color 0.2s}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--cream)}
@media(max-width:768px){
  nav{height:var(--nav-h-m);padding:0 20px}
  .nav-left{gap:14px}
  .nav-venue{font-size:16px}
  .nav-center{display:none}
  .nav-right .nav-icon.search-icon,.nav-right .nav-icon.account-icon{display:none}
  .menu-btn{display:flex}
  .mobile-menu{display:block;top:var(--nav-h-m)}
}

/* ── Cart drawer (universal) ── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9990;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;background:var(--dark);z-index:9991;transform:translateX(100%);transition:transform 0.4s var(--ease-out-expo);display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,0.06)}
.cart-drawer.open{transform:translateX(0)}
.cart-header{padding:24px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center}
.cart-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.08em;color:var(--cream)}
.cart-close{background:none;border:none;cursor:pointer;color:rgba(245,240,232,0.5);font-size:24px;transition:color 0.2s;padding:4px}
.cart-close:hover{color:var(--cream)}
.cart-items{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.cart-empty{font-size:14px;color:rgba(245,240,232,0.4);text-align:center;padding:48px 0;font-style:italic;font-family:'Instrument Serif',serif}
.cart-item{display:flex;gap:16px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.06)}
.cart-item-img{width:80px;height:80px;background:transparent;flex-shrink:0;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-details{flex:1;display:flex;flex-direction:column;gap:4px}
.cart-item-name{font-family:'Instrument Serif',serif;font-size:15px;font-style:italic;color:var(--cream)}
.cart-item-variant{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245,240,232,0.4)}
.cart-item-price{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--cream);margin-top:auto}
.cart-item-remove{background:none;border:none;cursor:pointer;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,240,232,0.3);transition:color 0.2s;align-self:flex-start;padding:0;font-family:'DM Sans',sans-serif}
.cart-item-remove:hover{color:var(--red)}
.cart-footer{padding:24px;border-top:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:16px}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline}
.cart-subtotal-label{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,240,232,0.5);font-weight:600}
.cart-subtotal-val{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--cream)}
.btn-checkout{background:var(--red);color:white;padding:18px;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;border:none;cursor:pointer;text-align:center;font-family:'DM Sans',sans-serif;transition:all 0.3s ease;text-decoration:none;display:block}
.btn-checkout:hover{background:#e6163a;box-shadow:0 8px 24px rgba(196,18,48,0.3)}
.btn-checkout:disabled{background:#333;cursor:not-allowed;box-shadow:none}
.cart-powered{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,240,232,0.2);text-align:center;line-height:1.6}
/* Checkout status / problem message above the subtotal */
.cart-note{font-size:12px;line-height:1.5;padding:10px 12px;border-left:2px solid var(--red);background:rgba(196,18,48,0.08);color:rgba(245,240,232,0.85)}
.cart-note-warn{border-left-color:#E8A33D;background:rgba(232,163,61,0.1)}
.cart-note[hidden]{display:none}
.btn-checkout:disabled{opacity:0.9}

/* ── Shared store footer ── */
.store-footer{padding:60px 48px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center}
.footer-left{display:flex;flex-direction:column;gap:8px}
.footer-powered{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,240,232,0.3);font-weight:500}
.footer-powered a{color:var(--red);text-decoration:none;transition:color 0.3s}
.footer-powered a:hover{color:#e6163a}
.footer-copy{font-size:11px;color:rgba(245,240,232,0.2);letter-spacing:0.05em}
.footer-right{display:flex;gap:28px}
.footer-right a{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,240,232,0.35);text-decoration:none;transition:color 0.3s ease}
.footer-right a:hover{color:var(--cream)}
@media(max-width:768px){
  .store-footer{padding:32px 20px;flex-direction:column;gap:20px;text-align:center}
}

/* ══════════════════════════════════════════════════════════════
   TEMPORARY — "Coming Soon" veil
   Frosts over a block of real content without removing it. Used on
   the homepage (storefront sections) and, when a venue sets
   comingSoon:true, on that venue's product grid.

   The message is STICKY: it pins below the nav and rides down with
   the scroll, so it is on screen the whole time the veiled region
   is, not just at its midpoint.

   TO LIFT: homepage — see the markers in index.html.
            a venue  — set comingSoon:false in its venue-config.js.
   ══════════════════════════════════════════════════════════════ */
.veiled{position:relative}
.veiled>section,.veiled>.veiled-body{filter:blur(16px) saturate(.5) brightness(.7);pointer-events:none;user-select:none}

/* .veil is ABSOLUTE and covers exactly the veiled region, so the
   frosting stops dead at the region's bottom edge and never bleeds
   over How It Works. The message inside it (.veil-inner) is what is
   sticky, so it rides down with the scroll and comes to rest at the
   bottom of the region. Do NOT make .veil itself sticky with a
   negative bottom margin - that lets it travel a full viewport past
   the region and cover the sections below.
   Being absolute also keeps the veil out of the layout, so the page
   is exactly as long as it was without it.
   Sticky only works here because html/body use `overflow-x:clip`
   rather than `hidden` - see the top of this file. */
.veil{position:absolute;inset:0;z-index:4;padding:0 24px;
  background:linear-gradient(180deg,rgba(9,9,9,.80) 0%,rgba(9,9,9,.72) 50%,rgba(9,9,9,.82) 100%);
  backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
.veil-inner{position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;max-width:620px;margin:0 auto;
  opacity:0;animation:fadeUp .9s var(--ease-out-expo) .15s both}
.veil-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,232,.55);font-weight:600;margin-bottom:22px}
.veil-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-glow);animation:veilPulse 2.4s ease-in-out infinite}
@keyframes veilPulse{0%,100%{opacity:1}50%{opacity:.35}}
.veil-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,7vw,86px);line-height:.95;letter-spacing:.01em;color:var(--cream);margin:0 0 18px;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.veil-title em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--red);display:inline-block}
.veil-sub{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(15px,1.5vw,20px);line-height:1.6;color:rgba(245,240,232,.78);margin:0 auto 34px;max-width:46ch}
.veil-note{margin-top:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,240,232,.35);font-weight:600}
@media (max-width:760px){
  .veil{padding:0 20px}
  .veiled>section,.veiled>.veiled-body{filter:blur(12px) saturate(.5) brightness(.7)}
  .veil-title{font-size:clamp(32px,10vw,52px)}
}
@media (prefers-reduced-motion:reduce){.veil-inner{animation:none;opacity:1}.veil-eyebrow .dot{animation:none}}