/* Ozomatli — shared styles for sub-pages (tour, contact)
   Stays consistent with the dark sunset-LA vibe of the homepage hero. */

:root {
  --header-h: 84px;
  --announce-h: 34px;
  --footer-h: 5vh;
  --ink: #fff;
  --muted: rgba(255,255,255,0.6);
  --dim:   rgba(255,255,255,0.4);
  --accent: #f5b042;
  --bg-deep:   #0a0509;
  --bg-grad-1: #1a0d2e;
  --bg-grad-2: #4a1530;
  --bg-grad-3: #6b2418;
  --bg-grad-4: #924421;
}
@media (max-width: 640px) { :root { --header-h: 64px; } }

html, body { margin:0; padding:0; min-height:100%; background:var(--bg-deep);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; }

/* Sunset-vibe gradient backdrop for sub-pages */
body.subpage {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(149, 70, 60, 0.65), transparent 65%),
    radial-gradient(ellipse 80% 80% at 100% 100%, rgba(80, 30, 70, 0.55), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 35%, var(--bg-grad-3) 65%, var(--bg-grad-4) 100%);
  background-attachment: fixed;
  min-height:100vh;
}

/* Subtle film grain so the gradient doesn't look flat */
body.subpage::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity:0.7;
}

main { position:relative; z-index:1; }

/* ---------- Announcement bar (above the header, both layouts) ---------- */
.announce { position:fixed; left:0; right:0; top:0;
  height: var(--announce-h); background:#000;
  display:flex; align-items:center; justify-content:center;
  z-index:31; border-bottom:1px solid rgba(255,255,255,0.10); }
.announce a { color:#fff; text-decoration:none;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight:500; font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: calc(100vw - 32px); padding:0 16px;
  transition: color .2s; }
.announce a:hover { color: var(--accent); }

/* ---------- Top bar — 3 zones: nav left · logo center · socials+cart right ---------- */
.topbar { position:fixed; left:0; right:0; top: var(--announce-h);
  height: var(--header-h); background: #000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:30; }
.topbar-left  { display:flex; align-items:center; gap:24px; }
.topbar-right { display:flex; align-items:center; gap:6px; }
/* Cart auto-mounts as first child of .topbar-right — order pushes it after socials */
.topbar-right .cart-icon { order:2; }
.topbar-right .social-links { order:1; }
.topbar-center { position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%); display:block; }
.topbar-mark { height:46px; width:auto; display:block;
  transition: transform .25s ease;
  /* Promote to GPU compositor layer + force translateZ so scale animates with smooth subpixel interpolation
     instead of bitmap re-sampling per frame (which causes the jagged edges during the hover scale). */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }
.topbar-mark:hover { transform: translateZ(0) scale(1.05); }
.topnav { display:flex; align-items:center; gap:26px; }
.topnav a { color:#fff; text-decoration:none; font-size:12px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  letter-spacing:0.36em; text-transform:uppercase; padding:4px 0;
  font-weight: 500; }

/* JOIN — Bandsintown opt-in link, amber to read as an action */
.topnav a.join { color: var(--accent); }
.menu-overlay > a.join { color: var(--accent); }

/* ---------- Social icons (desktop header, right zone) ---------- */
.social-links { display:flex; align-items:center; gap:2px; }
.social-links a { display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; color:#fff; transition: color .2s, opacity .2s; }
.social-links a:hover { color: var(--accent); }
.social-links svg { width:17px; height:17px; display:block; fill:currentColor; }

/* LA time stack — floats over the photo, upper-right corner, under the cart/hamburger */
.la-time-stack { position:absolute; right:16px;
  top: calc(var(--announce-h) + var(--header-h) + 19px);   /* desktop: gap = (84-46)/2 = 19px */
  text-align: right; white-space:nowrap;
  pointer-events:none; z-index:7; color:#fff; }
.la-time-stack .la-time {
  font-size:14px; letter-spacing:0.04em; font-weight:500; line-height:1;
  /* System monospace stack — guarantees equal-width digits without relying on OpenType tnum */
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.la-time-stack .la-time .t-strong { font-weight: 500; }
.la-time-stack .la-time .t-light  { font-weight: 300; }
.la-time-stack .la-place {
  font-size:9px; letter-spacing:0.42em; text-transform:uppercase;
  margin-top:6px; margin-right:-0.42em;     /* nullify trailing letter-spacing so visible S aligns with visible M */
  line-height:1; opacity:0.85; }
@media (max-width: 640px) {
  .la-time-stack { top: calc(var(--announce-h) + var(--header-h) + 14px); }
  .la-time-stack .la-time  { font-size:12px; }
  .la-time-stack .la-place { font-size:8px; }
}

/* Hamburger */
.hamburger { width:48px; height:48px; background:transparent; cursor:pointer;
  padding:0; border:none; position:relative; transition: opacity .2s; }
.hamburger:hover { opacity:0.7; }
.hamburger span, .hamburger span::before, .hamburger span::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:28px; height:2px; background:#fff; border-radius:1px;
  box-shadow:0 1px 4px rgba(0,0,0,0.65); transition: transform .25s, top .25s; }
.hamburger span { top:50%; margin-top:-1px; }
.hamburger span::before { top:-9px; }
.hamburger span::after  { top:9px; }
.hamburger.open span { background:transparent; box-shadow:none; }
.hamburger.open span::before { top:0; transform: translateX(-50%) rotate(45deg); }
.hamburger.open span::after  { top:0; transform: translateX(-50%) rotate(-45deg); }

/* Mobile menu — full-screen takeover, big stacked links, socials at the bottom */
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.94);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  opacity:0; pointer-events:none; transition: opacity .35s; z-index:50; }
.menu-overlay.open { opacity:1; pointer-events:auto; }
.menu-overlay > a { color:#fff; text-decoration:none; font-size:24px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight:500;
  letter-spacing:0.42em; text-transform:uppercase; padding:14px 20px;
  transition: text-shadow .25s, color .25s; }
.menu-overlay > a:hover, .menu-overlay > a:active {
  text-shadow: 0 0 18px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.6); }
.menu-overlay .menu-socials { display:flex; align-items:center; gap:10px;
  margin-top:36px; }
.menu-overlay .menu-socials a { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:#fff; transition: color .2s; }
.menu-overlay .menu-socials a:hover { color: var(--accent); }
.menu-overlay .menu-socials svg { width:20px; height:20px; display:block; fill:currentColor; }

/* ---------- Mobile social/music row (hidden on desktop — header has the icons) ---------- */
.social-footer { display:none; }
@media (max-width: 900px) {
  .social-footer { display:flex; align-items:center; justify-content:center; gap:8px; }
  .social-footer a { display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; color:#fff; transition: color .2s; }
  .social-footer a:active, .social-footer a:hover { color: var(--accent); }
  .social-footer svg { width:19px; height:19px; display:block; fill:currentColor; }
  /* Home: fixed black strip under the video */
  body.home .social-footer { position:fixed; left:0; right:0; bottom:0;
    height:56px; background:#000; z-index:6;
    padding-bottom: env(safe-area-inset-bottom); }
  /* Subpages: centered row at the end of the page content */
  body.subpage .social-footer { margin: 48px 0 10px; }
}

/* ---------- Header responsive switch ----------
   ≥901px: desktop layout — nav left, logo center, socials+cart right, no hamburger.
   ≤900px: mobile layout — hamburger left, logo center, cart right, no nav/socials. */
@media (min-width: 901px) {
  .topbar .hamburger { display:none; }
  /* Left offset = exactly the visible gap between menu words (Damon 2026-07-23):
     26px flex gap + ~4px trailing letter-spacing on the preceding word. */
  .topbar { padding-left: 30px; }
}
@media (max-width: 900px) {
  .topnav { display:none; }
  .social-links { display:none; }
}
@media (max-width: 640px) {
  .topbar-mark { height:36px; }
}

/* ---------- Sub-page content shell ---------- */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--announce-h) + var(--header-h) + 60px) 32px 120px;
}
.page h1 {
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}
.page .lede {
  color: var(--muted);
  font-size: 14px; letter-spacing: 0.32em;
  text-transform: uppercase; margin: 0 0 56px;
}

/* Section header pattern */
.section-eyebrow {
  font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.section h2 {
  font-size: 22px; letter-spacing: 0.04em; font-weight: 700;
  text-transform: uppercase; margin: 0 0 14px;
}

@media (max-width: 640px) {
  .page { padding: calc(var(--announce-h) + var(--header-h) + 40px) 22px 80px; }
}

/* ---------- Cart icon (in topbar) ---------- */
.cart-icon { width:44px; height:44px; background:transparent; border:none;
  cursor:pointer; padding:0; position:relative; color:#fff;
  display:flex; align-items:center; justify-content:center; transition: opacity .2s; }
.cart-icon:hover { opacity:0.7; }
.cart-icon svg { display:block; }
.cart-badge { position:absolute; top:4px; right:2px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background: var(--accent); color:#0a0509;
  font-size:10px; font-weight:700; letter-spacing:0;
  display:none; align-items:center; justify-content:center;
  line-height:1; }
.cart-badge.show { display:flex; }

/* ---------- Cart drawer ---------- */
.cart-drawer { position:fixed; inset:0; z-index:60;
  pointer-events:none; visibility:hidden; }
.cart-drawer.open { visibility:visible; pointer-events:auto; }
.cart-drawer-overlay { position:absolute; inset:0;
  background:rgba(0,0,0,0.6); opacity:0; transition:opacity .25s; }
.cart-drawer.open .cart-drawer-overlay { opacity:1; }
.cart-drawer-panel { position:absolute; top:0; right:0; bottom:0;
  width: min(420px, 100%);
  background: #15101a;
  border-left:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,0.4);
}
.cart-drawer.open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-panel header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cart-drawer-panel header h3 {
  margin: 0; font-size: 14px; letter-spacing: 0.42em; text-transform: uppercase;
  font-weight: 700;
}
.cart-drawer-panel .close {
  background: transparent; border: none; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; padding: 0;
}
.cart-drawer-panel .close:hover { color: var(--accent); }

.cart-lines { flex:1; overflow-y:auto; padding: 12px 24px; }
.cart-empty {
  color: var(--muted); font-size: 12px; letter-spacing: 0.32em;
  text-transform: uppercase; text-align: center; padding: 60px 0;
}
.cart-line {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cart-line:last-child { border-bottom: none; }
.cart-line-img {
  width: 70px; height: 70px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.cart-line-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-line-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cart-line-variant { margin: 0 0 4px; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.cart-line-price { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
.cart-line-qty { display:flex; align-items:center; gap: 8px; }
.cart-line-qty button {
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  width: 26px; height: 26px; padding: 0; font-size: 14px;
  cursor: pointer; border-radius: 3px; line-height: 1;
}
.cart-line-qty .qty-remove {
  width: auto; padding: 0 10px; font-size: 9.5px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dim); background: transparent; border-color: transparent;
  margin-left: 6px;
}
.cart-line-qty .qty-remove:hover { color: #ff8866; }
.cart-line-qty button:hover { border-color: var(--accent); color: var(--accent); }
.cart-line-qty .qty-val { min-width: 18px; text-align: center; font-size: 13px; }

.cart-drawer-panel footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 24px 22px;
}
.cart-subtotal {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 14px;
}
.cart-subtotal span {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
}
.cart-subtotal-amount {
  font-size: 22px; font-weight: 700;
}
.checkout-btn {
  display:block; width:100%;
  background: rgba(255,255,255,0.94); color: #15101a; border: none;
  padding: 14px; font-size: 11.5px; letter-spacing: 0.42em;
  text-transform: uppercase; font-weight: 700;
  border-radius: 3px; cursor: pointer;
  transition: background .2s;
}
.checkout-btn:hover { background: var(--accent); }
.checkout-btn.disabled, .checkout-btn:disabled {
  background: rgba(255,255,255,0.18); color: var(--dim); cursor: not-allowed;
}
.cart-note {
  margin: 12px 0 0; text-align: center;
  color: var(--dim); font-size: 11px; letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  .cart-drawer-panel { width: 100%; }
}

/* ---------- Product detail page ---------- */
.product-page {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  margin-bottom: 96px;
}
.gallery { position: sticky; top: calc(var(--announce-h) + var(--header-h) + 24px); }
.gallery-main {
  width: 100%; aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 14px;
}
.gallery-main img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.gallery-thumb {
  aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10); cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover { border-color: rgba(245,176,66,0.6); }
.gallery-thumb.active { border-color: var(--accent); }

.product-detail h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800; letter-spacing: 0.02em; margin: 0 0 8px;
  text-transform: uppercase;
}
.product-detail .price {
  font-size: 22px; color: var(--accent); margin: 0 0 28px;
}
.product-detail .compare {
  color: var(--dim); text-decoration: line-through; margin-left: 10px; font-size: 16px;
}
.product-detail .sold-out-badge {
  display: inline-block; margin-bottom: 16px;
  background: rgba(220, 90, 50, 0.18); color: #ff8866;
  border: 1px solid rgba(220, 90, 50, 0.4); border-radius: 3px;
  padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.36em; text-transform: uppercase;
}
.option-group { margin-bottom: 24px; }
.option-group .label {
  font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.option-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.option-buttons button {
  padding: 10px 16px; font-size: 12px; letter-spacing: 0.06em;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 3px;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
  font-family: inherit;
}
.option-buttons button:hover { border-color: var(--accent); color: var(--accent); }
.option-buttons button.selected {
  background: rgba(245,176,66,0.15); border-color: var(--accent); color: var(--accent);
}
.option-buttons button.unavailable {
  text-decoration: line-through; color: var(--dim); border-color: rgba(255,255,255,0.10);
}

.qty-block { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 3px; overflow: hidden;
}
.qty-stepper button {
  background: transparent; color: #fff; border: none;
  width: 36px; height: 40px; font-size: 16px; cursor: pointer;
}
.qty-stepper input {
  width: 44px; height: 40px; text-align: center;
  background: transparent; color: #fff; border: none;
  font-family: inherit; font-size: 14px;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.add-to-cart {
  display: block; width: 100%;
  background: rgba(255,255,255,0.94); color: #15101a; border: none;
  padding: 16px; font-size: 12px; letter-spacing: 0.42em;
  text-transform: uppercase; font-weight: 700;
  border-radius: 3px; cursor: pointer;
  transition: background .2s, color .2s;
}
.add-to-cart:hover { background: var(--accent); }
.add-to-cart:disabled { background: rgba(255,255,255,0.18); color: var(--dim); cursor: not-allowed; }

.product-description {
  margin-top: 36px; line-height: 1.6; color: rgba(255,255,255,0.85);
  font-size: 14.5px;
}
.product-description p { margin: 0 0 1em; }

.related-section { margin-top: 60px; padding-top: 60px; border-top: 1px solid rgba(255,255,255,0.10); }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px; margin-top: 24px;
}

@media (max-width: 880px) {
  .product-page { grid-template-columns: 1fr; gap: 36px; }
  .gallery { position: static; }
}