/**
 * globals.css — Playa eBikes global base + shared classes (Brand design system).
 *
 * Loaded sitewide AFTER style.css so the new system wins the cascade. Per-page
 * sheets (home.css, shop.css, …) load AFTER this and still override on pages not
 * yet rebuilt to the new design — so nothing goes unstyled mid-transition. Tokens
 * come from tokens.css (:root).
 *
 * The shared-chrome selectors (.site-header, .site-footer, .announce, .mnav,
 * .mobile-cta …) target the Bricks header/footer/CTA templates rebuilt in
 * Phase 0-B. The bridge is the class name: Bricks assigns it, this file styles it
 * (DS §9.1). No business data lives here — only design rules.
 *
 * Spec: build-guide/00-DESIGN-SYSTEM.md §2–§8.
 *
 * @package bricks-child
 */

*,*::before,*::after{box-sizing:border-box}

/* Defensive: stop stray horizontal overflow (e.g. the legacy homepage product
   carousel) from creating a page-wide horizontal scrollbar / right-side whitespace.
   Clip the <main> content area (the sticky header/footer live outside it, so this
   doesn't affect stickiness). `clip` doesn't create a scroll container or force overflow-y. */
html{overflow-x:clip}
main,#brx-content{overflow-x:clip}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
body{
  font-family:var(--bfont); background:var(--bg); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--hfont); line-height:1.12; letter-spacing:-.01em; margin:0}
img{max-width:100%}

:focus-visible{outline:3px solid var(--accent-strong); outline-offset:2px; border-radius:4px}

/* Skip link (WCAG 2.4.1) — visible on focus */
.skip{position:absolute;left:8px;top:8px;background:var(--accent);color:var(--accent-ink);
  padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700;
  transform:translateY(-200%);transition:transform .12s ease;z-index:10001}
.skip:focus{transform:translateY(0);outline:3px solid var(--ink)}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.sec{padding:64px 0}

/* Tonal rhythm — apply to a FULL-WIDTH Bricks section; inner container = .wrap.
   Full-bleed comes from the section being full width (DS §5.6), not a 100vw hack. */
.s-tint{background:var(--surface-2)}
.s-band{background:var(--band-bg);color:var(--band-ink)}
.s-band .eyebrow{color:var(--accent)}
.s-band h2,.s-band h3,.s-band .sec-head h2{color:var(--band-ink)}
.s-band .sec-head p{color:var(--band-muted)}
.seam{border-top:1px solid var(--border)}

.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-strong)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
.sec-head h2{font-size:34px;margin:10px 0}
.sec-head p{color:var(--muted);font-size:17px}

/* ============================================================
   BUTTONS (DS §4)
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;font-size:15px;white-space:nowrap;
  padding:14px 26px;transition:transform .1s ease,filter .15s ease;font-family:var(--bfont)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:17px 34px;font-size:16.5px}
.btn-block{display:flex;width:100%}

/* ============================================================
   CARDS (DS §5.7)
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card-lg{border-radius:var(--radius-lg)}
.card.featured{border:2px solid var(--accent);box-shadow:var(--shadow)}
.card .pop{position:absolute;top:14px;right:14px;background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px}

/* ============================================================
   §0 ANNOUNCEMENT BAR
   ============================================================ */
.announce{background:var(--band-bg);color:var(--band-ink);font-size:13.5px;font-weight:600;
  text-align:center;padding:9px 20px;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.announce strong{color:var(--accent-strong);font-weight:800}
.announce .dot{opacity:.4}

/* ============================================================
   §1 HEADER & NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:900;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.site-nav{display:flex;align-items:center;gap:22px;padding:14px 28px;max-width:1320px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--hfont);
  font-weight:800;font-size:20px;color:var(--ink);white-space:nowrap}
.logo .mark{width:38px;height:38px;border-radius:10px;background:var(--hero-grad);display:grid;
  place-items:center;color:#fff;font-weight:900;font-size:19px;box-shadow:var(--shadow-sm)}
.logo img{height:34px;width:auto;display:block}
.primary-nav{display:flex;gap:6px;margin-left:8px}
.primary-nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;padding:8px 12px;
  border-radius:8px;opacity:.86}
.primary-nav a:hover{opacity:1;background:var(--surface-2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.cart{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;
  font-size:14px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--border)}
.cart .count{background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.cart .sub{color:var(--muted);font-weight:700}
.hamburger{display:none;background:transparent;border:1.5px solid var(--border);border-radius:10px;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hamburger .bar{flex:0 0 auto;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* Mobile nav drawer (toggled by peb-ui.js) */
.mnav{display:none;background:var(--surface);padding:6px 24px 24px}
.mnav.open{display:block}
.mnav a{display:block;padding:17px 2px;text-decoration:none;color:var(--ink);font-weight:700;
  font-size:16px;border-bottom:1px solid var(--border)}
.mnav a:last-child{border-bottom:0}
.mnav .mnav-eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:800;padding:22px 2px 6px}
.mnav .mnav-eyebrow:first-child{padding-top:8px}

/* ============================================================
   FINAL CTA BAND (DS §4 — button inverts on the orange band)
   ============================================================ */
.final{text-align:center;background:var(--hero-grad);color:#fff}
.final h2{font-size:38px;color:#fff;margin-bottom:14px}
.final p{font-size:17px;color:rgb(255 255 255 / 92%);max-width:34em;margin:0 auto 14px}
.final .btn-primary{background:#fff;color:var(--accent-strong)}
.final .urgency{margin-top:18px;font-size:13.5px;font-weight:700;color:rgb(255 255 255 /90%);
  display:inline-flex;gap:8px;align-items:center;background:rgb(0 0 0 /18%);padding:8px 16px;border-radius:999px}

/* ============================================================
   §16 FOOTER
   ============================================================ */
.site-footer{background:var(--band-bg);color:var(--band-muted);padding:54px 0 30px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
.site-footer h4{color:var(--band-ink);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 14px;font-family:var(--bfont);font-weight:800}
.site-footer a{color:var(--band-muted);text-decoration:none;display:block;padding:5px 0;font-size:14px}
.site-footer a:hover{color:var(--band-ink)}
.site-footer .flogo{display:flex;align-items:center;gap:10px;color:var(--band-ink);font-family:var(--hfont);
  font-weight:800;font-size:19px;margin-bottom:12px}
.site-footer .flogo .mark{width:34px;height:34px;border-radius:9px;background:var(--hero-grad);display:grid;
  place-items:center;color:#fff;font-weight:900}
.site-footer .blurb{font-size:13.5px;max-width:26em;margin-bottom:14px}
.site-footer .tribe{margin-top:30px;padding-top:20px;border-top:1px solid rgb(255 255 255 /10%);
  text-align:center;font-size:12.5px;letter-spacing:.04em}

/* ============================================================
   STICKY MOBILE CTA BAR (own template-part; shown only ≤720px)
   ============================================================ */
.mobile-cta{display:none;position:sticky;bottom:0;z-index:850;background:var(--surface);
  border-top:1px solid var(--border);padding:12px 16px;gap:12px;align-items:center;box-shadow:0 -8px 24px rgb(0 0 0 /12%)}
.mobile-cta .px{font-size:13px;color:var(--muted);font-weight:700;line-height:1.2}
.mobile-cta .px b{display:block;color:var(--ink);font-size:16px;font-family:var(--hfont)}
.mobile-cta .btn{flex:1;min-height:48px}

/* ============================================================
   RESPONSIVE — DS §7 (container queries → media queries)
   1000px = tablet · 720px = mobile
   ============================================================ */
@media (max-width:1000px){
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .sec{padding:44px 0}
  .sec-head h2{font-size:26px}
  .final h2{font-size:28px}
}
/* Header mobile overrides live AFTER the bridge section (below) so they win. */

/* ============================================================
   BRICKS DOM BRIDGES — live shared chrome (header template #113)
   These selectors target the real Bricks/Woo output (#brx-header,
   .bricks-nav-menu, the mini-cart) and override legacy dark-header
   rules still living in style.css until that file is pruned in B4.
   ============================================================ */
#brx-header{position:sticky;top:0;z-index:900;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}

/* the injected column wrapper + nav row. flex-wrap:nowrap because Bricks
   containers default to wrap, which stacks the row on narrow screens. */
#brx-header .site-header-inner{align-items:stretch}
#brx-header .site-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:22px;
  max-width:1320px;margin:0 auto;padding:14px 28px;width:100%}

/* primary nav links (override legacy white-on-dark). NOTE: do NOT set display on
   .bricks-nav-menu — Bricks toggles it to none at its mobile breakpoint to swap in
   the native mobile menu; an unconditional display:flex here breaks that collapse. */
#brx-header .primary-nav .bricks-nav-menu{flex-wrap:nowrap;gap:2px;padding:0;margin:0;list-style:none}
/* hide the caret toggle button on eBikes (matches mockup); the <a> link + hover dropdown stay */
#brx-header .bricks-nav-menu .brx-submenu-toggle > button{display:none}
#brx-header .primary-nav .bricks-nav-menu a{color:var(--ink);font-weight:600;font-size:15px;
  text-decoration:none;padding:8px 12px;border-radius:8px;opacity:.86;white-space:nowrap}
#brx-header .primary-nav .bricks-nav-menu a:hover{opacity:1;background:var(--surface-2);color:var(--ink)}
#brx-header .primary-nav .bricks-nav-menu .current-menu-item>a{color:var(--accent-strong);opacity:1}

/* logo — never let the flex row shrink/squish it (Bricks sets width:auto, equal specificity) */
#brx-header .logo{flex:0 0 auto}
#brx-header .logo img{height:34px;width:auto;max-width:none;flex:0 0 auto}

/* dropdown submenu (eBikes ▸ Eco/Elite/Extreme) */
#brx-header .primary-nav .bricks-nav-menu .sub-menu{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;min-width:240px}
#brx-header .primary-nav .bricks-nav-menu .sub-menu a{color:var(--ink);padding:8px 12px;border-radius:8px;opacity:1}
#brx-header .primary-nav .bricks-nav-menu .sub-menu a:hover{background:var(--surface-2)}

/* cart pill */
/* width:auto/flex:none overrides the global .brxe-container{width:100%} so nav-right
   shrinks to its content (cart) and groups tight with the hamburger on the right */
#brx-header .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;width:auto;flex:0 0 auto}
/* the Bricks cart wrapper carries the generic .cart pill too — neutralize it so the
   single visible pill is .mini-cart-link (was a double-border oval otherwise) */
#brx-header .cart{border:0;padding:0;background:transparent;border-radius:0}
#brx-header .cart .mini-cart-link{display:flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:14px;padding:8px 12px;border-radius:999px;
  border:1.5px solid var(--border)}
#brx-header .cart .cart-icon{display:flex;align-items:center;gap:7px}
/* use the mockup's 🛒 emoji instead of the themify line-cart icon */
#brx-header .cart .cart-icon i{display:none}
#brx-header .cart .cart-icon::before{content:"\1F6D2";font-size:18px;line-height:1}
#brx-header .cart .cart-count{position:static;top:auto;right:auto;transform:none;background:var(--accent);
  color:var(--accent-ink);font-size:12px;font-weight:800;min-width:20px;height:20px;
  border-radius:999px;display:grid;place-items:center;padding:0 5px}
#brx-header .cart .cart-subtotal{color:var(--muted);font-weight:700;font-size:14px}
/* keep the mini-cart dropdown from overflowing the viewport (right-aligned, capped) */
#brx-header .cart .cart-detail{right:0;left:auto;max-width:calc(100vw - 32px)}

/* reserve button — ensure the brand pill wins over bricks-button defaults */
#brx-header .nav-right .btn.btn-primary{background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:999px;padding:14px 26px;font-weight:800;font-size:15px}

/* Bricks' own mobile toggle + off-canvas are unused — we use a custom .hamburger + .mnav */
#brx-header .bricks-mobile-menu-toggle,
#brx-header .bricks-mobile-menu-wrapper,
#brx-header .bricks-mobile-menu{display:none !important}
/* custom mobile drawer: drops below the sticky header, full width (matches mockup) */
#brx-header .mnav{position:absolute;top:100%;left:0;right:0;z-index:80;
  background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow);
  max-height:calc(100dvh - 100%);overflow:auto}
#brx-header .mnav-from{color:var(--muted);font-weight:600}
/* the text-element wrapper holding the drawer must not add header height */
#brx-header #brxe-pebdrw{position:static;margin:0;padding:0;line-height:0}

/* ===== Header mobile — collapse to the hamburger at ≤1000 (the full nav + cart pill
   + Reserve button don't fit below ~1000). AFTER the bridges so these win the tie. ===== */
@media (max-width:1000px){
  .mobile-cta{display:flex}
  #brx-header .site-nav{padding:12px 16px;gap:8px}
  #brx-header .logo img{height:34px}                  /* match mockup; layout has room now */
  #brx-header .cart .sub,#brx-header .cart .cart-subtotal{display:none}
  #brx-header .nav-right .btn.btn-primary{display:none} /* Reserve moves to sticky bottom CTA */
  #brx-header .cart .mini-cart-link{padding:7px 10px}   /* compact pill */
  /* group cart + hamburger tight on the right: logo grows to fill (margin-left:auto
     gets overridden to 0 by Bricks, so use flex-grow on the logo instead) */
  #brx-header .logo{flex:1 1 auto}
  #brx-header .nav-right{order:2;flex:0 0 auto}
  #brx-header .primary-nav{display:none}                /* whole desktop-nav element off on mobile */
  #brx-header .hamburger{display:flex}                  /* show the custom hamburger */
}
/* Keep Bricks' mobile toggle in lockstep with our 720 nav-collapse. Bricks defaults
   it to ~767, which would otherwise show the toggle AND the desktop nav together. */
@media (min-width:721px){
  #brx-header .bricks-mobile-menu-toggle{display:none !important} /* beats Bricks' element-scoped 767 rule */
}

/* ============================================================
   BRICKS DOM BRIDGES — live footer (template #465)
   ============================================================ */
#brx-footer{background:var(--band-bg)}
.site-footer .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.site-footer .foot-col{min-width:0}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer .flogo-img img{height:34px;width:auto;display:block;margin-bottom:14px}
/* contact column: inline links, one row per line */
/* each contact row = fixed icon column + text (multi-line wraps align, even spacing) */
.site-footer .contact-list>*{display:flex;align-items:flex-start;gap:10px;padding:8px 0;margin:0;
  color:var(--band-muted);font-size:14px;line-height:1.5}
.site-footer .contact-list span[aria-hidden]{flex:0 0 18px;text-align:center;margin:0}
.site-footer .contact-list a{display:inline;color:var(--band-muted);padding:0}
.site-footer .contact-list a:hover{color:var(--band-ink)}
/* footer social icons (restored from the old footer; mockup omits them) */
.site-footer .footer-social{display:flex;gap:14px;margin-top:10px}
.site-footer .footer-social a{display:inline-flex;color:var(--band-muted);padding:0}
.site-footer .footer-social a:hover{color:var(--band-ink)}
.site-footer .footer-social svg{width:22px;height:22px}

/* TEMP (readiness pass 2026-05-28): hide the homepage "Man Burns In…" countdown — its target
   is a past date so it renders "The Man Has Burned!". Remove this rule once the countdown is
   fixed for Burn 2026 (Aug 30–Sep 7). Element is the homepage Bricks code block. */
#brxe-knrcmn{display:none !important}