/* ═══ The app look on the website (2026-10-14) ══════════════════════════════
   Shop, Rentals and Events share the rider app's style: black page, dark
   rounded cards, Bebas headings, skewed blue tags and blue buttons. Loaded
   after each page's own styles, so it only changes the look, never how
   anything works. */
html body { background:#000 !important; color:#e7e9ea; }
html body ::selection { background:#3d85e6; color:#fff; }

/* Hero card, like the top of each app screen */
html body .dl-hero { position:relative; overflow:hidden; max-width:1120px; margin:96px auto 0; border-radius:24px;
  border:1px solid #1f2842; min-height:250px; display:flex; align-items:flex-end;
  background:radial-gradient(120% 100% at 85% 0%,rgba(61,133,230,.45),transparent 60%),linear-gradient(160deg,#0b1a35,#050912 75%); }
html body .dl-hero.photo { background-color:#0b1220; background-position:center; background-size:cover; background-repeat:no-repeat; }
html body .dl-hero.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,8,14,.92) 0%,rgba(5,8,14,.6) 45%,rgba(5,8,14,.05) 80%); }
html body .dl-hero .in { position:relative; z-index:1; padding:30px 34px; max-width:620px; }
html body .dl-hero .ban { display:inline-block; transform:skewX(-12deg); background:#3d85e6; padding:3px 12px; }
html body .dl-hero .ban b { display:inline-block; transform:skewX(12deg); font:400 19px/1.2 'Bebas Neue',sans-serif; letter-spacing:2.5px; color:#fff; }
html body .dl-hero h1 { font:400 84px/.92 'Bebas Neue',sans-serif !important; letter-spacing:1.5px; color:#fff !important; margin:10px 0 0 !important; text-transform:none; }
html body .dl-hero p { color:#c5d3ea; font-size:16px; line-height:1.5; margin-top:8px; max-width:46ch; }
html body .dl-hero .ship { position:absolute; z-index:1; right:22px; top:22px; font-size:12px; font-weight:900; letter-spacing:1.2px; color:#cfe1ff; background:rgba(5,8,14,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(156,196,255,.45); border-radius:8px; padding:6px 10px; text-align:center; line-height:1.35; }
html body .dl-hero .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
html body .dl-hero .chips span { font-size:12px; font-weight:700; color:#dbe6f7; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 11px; }
html body .dl-hero .cnt { display:inline-flex; align-items:center; gap:8px; margin-top:16px; border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:6px 12px;
  font:400 18px/1 'Bebas Neue',sans-serif; letter-spacing:1.5px; color:#e7e9ea; background:rgba(5,8,14,.45); }
html body .dl-hero .cnt b { font-weight:400; font-size:22px; color:#fff; }
html body .dl-hero .cnt:empty { display:none; }

/* Blue button, the app's main action */
html body .dl-btn, html body .pkg-btn, html body .btn-add, html body .btn-checkout, html body.events-page .btn {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; cursor:pointer; color:#fff !important; text-decoration:none;
  background:linear-gradient(90deg,#2f6fd0,#3d85e6) !important; border-radius:26px !important; padding:14px 18px !important;
  font:800 15px Inter,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:0 8px 26px rgba(61,133,230,.3); transition:filter .15s, transform .15s; }
html body .dl-btn:hover, html body .pkg-btn:hover, html body .btn-add:hover, html body .btn-checkout:hover, html body.events-page .btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
html body .btn-checkout:disabled, html body.events-page .btn[disabled] { background:#2a2d33 !important; color:#8b9098 !important; box-shadow:none; transform:none; filter:none; }

/* Footer sits on black too */
html body footer { background:#000 !important; border-top:1px solid #1d1f23 !important; }

/* ── SHOP ─────────────────────────────────────────────────────────────── */
html body .shop-banner, html body .shop-head { display:none !important; }
html body .shop-wrap { max-width:1120px !important; margin:0 auto !important; padding:22px 0 80px !important; }
html body .cat-row { display:flex !important; justify-content:flex-start !important; gap:8px !important; padding:0 4px 8px !important; margin:0 0 6px !important;
  background:none !important; border:0 !important; position:sticky; top:72px; z-index:20; backdrop-filter:blur(10px); }
html body .cat-pill { position:relative; z-index:0; border-radius:0 !important; padding:9px 18px !important; background:none !important; border:0 !important;
  color:#9cc4ff !important; font:400 19px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.4px !important; text-transform:uppercase; box-shadow:none !important; }
html body .cat-pill::before { content:''; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); border-radius:6px; background:#0e121b; border:1px solid #243150; }
html body .cat-pill.active { color:#fff !important; }
html body .cat-pill.active::before { background:linear-gradient(#4f97f2,#2f6fd0); border-color:transparent; box-shadow:0 0 14px rgba(61,133,230,.45); }
html body .shop-section { padding:26px 0 0 !important; }
html body .section-label { display:flex; justify-content:space-between; align-items:baseline; margin:0 4px 12px !important; }
html body .section-label h2 { font:400 34px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.5px !important; color:#e7e9ea !important; }
html body .section-label p { color:#71767b !important; font-size:13px !important; margin:0 !important; }
html body .products-grid { grid-template-columns:repeat(4,1fr) !important; gap:14px !important; }
html body .product-card { background:#0e0f11 !important; border:1px solid #23262b !important; border-radius:18px !important; overflow:hidden; box-shadow:none !important; }
html body .product-card:hover { border-color:#34507f !important; box-shadow:0 10px 30px rgba(61,133,230,.12) !important; }
html body .product-img { background:#f1f1f1 !important; }
html body .product-info { padding:13px 14px 15px !important; }
html body .product-name { font:700 14.5px/1.3 Inter,sans-serif !important; color:#fff !important; letter-spacing:0 !important; text-transform:none !important; }
html body .product-meta { color:#8b939c !important; font-size:12px !important; }
html body .product-meta b { color:#e7e9ea !important; }
html body .product-price { font:800 16px Inter,sans-serif !important; color:#9cc4ff !important; }
html body .size-btn, html body .qty-btn, html body .img-btn, html body .style-select { background:#16181c !important; color:#cfd3d7 !important; border:1px solid #2a2e35 !important; border-radius:8px !important; }
html body .size-btn.on, html body .img-btn.on { background:#3d85e6 !important; border-color:#3d85e6 !important; color:#fff !important; }
html body .swatch { box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) !important; }
html body .swatch.on { border-color:#3d85e6 !important; box-shadow:0 0 0 2px #3d85e6, inset 0 0 0 1px rgba(255,255,255,.25) !important; }
html body .btn-add { margin-top:12px; padding:11px 14px !important; font-size:14px !important; box-shadow:0 6px 18px rgba(61,133,230,.25); }
html body .cart-drawer { background:#0b0c0f !important; color:#e7e9ea !important; border-left:1px solid #23262b; }
html body .cart-drawer-head h3 { font:400 30px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.2px; color:#fff !important; }
html body .cart-item-name, html body .cart-subtotal { color:#e7e9ea !important; }
html body .cart-item-price { color:#9cc4ff !important; }
html body .cart-footer { background:#0b0c0f !important; border-top:1px solid #23262b !important; }
html body .cart-item { border-bottom-color:#23262b !important; }
html body .cart-subtotal span { color:#e7e9ea !important; font-weight:700; }
html body #freeShipNote { background:#141b2b !important; color:#9cc4ff !important; border:1px solid #2b3a5c; }

/* ── RENTALS ──────────────────────────────────────────────────────────── */
html body .banner-head, html body #panelRent > .lead { display:none !important; }
html body #panelRent { max-width:1120px; margin:0 auto; padding:0 0 80px; background:none !important; }
html body .pkg-wrap { background:none !important; padding:26px 0 0 !important; }
html body .pkg-grid { gap:16px !important; max-width:none !important; }
html body .pkg-card { background:#0e0f11 !important; border:1px solid #23262b !important; border-radius:20px !important; padding:22px !important; box-shadow:none !important; position:relative; color:#e7e9ea; }
html body .pkg-card:has(.pkg-pop) { border-color:rgba(61,133,230,.6) !important; box-shadow:0 0 0 1px rgba(61,133,230,.25), 0 12px 34px rgba(61,133,230,.14) !important; }
html body .pkg-pop { background:#3d85e6 !important; color:#fff !important; font:900 11px Inter,sans-serif !important; letter-spacing:1px !important; border-radius:999px !important; padding:4px 11px !important; text-transform:uppercase; }
html body .pkg-name { font:400 32px/1 'Bebas Neue',sans-serif !important; letter-spacing:1px !important; color:#fff !important; text-transform:none !important; }
html body .pkg-sub { color:#8b939c !important; font-size:13.5px !important; }
html body .pkg-price { font:400 46px/1 'Bebas Neue',sans-serif !important; color:#fff !important; letter-spacing:.5px; }
html body .pkg-feats li { color:#cfd3d7 !important; font-size:14px !important; border:0 !important; }
html body .pkg-feats li::before { content:'' !important; width:11px; height:6px; border-left:2.5px solid #4ade80; border-bottom:2.5px solid #4ade80; transform:rotate(-45deg); background:none !important; color:transparent !important; }
html body .pkg-btn { margin-top:18px; }
html body .how-wrap { background:none !important; padding:34px 0 0 !important; max-width:none !important; }
html body .how-title { font:400 34px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.5px !important; color:#e7e9ea !important; text-align:left !important; margin:0 4px 12px !important; }
html body .how-step { background:#0e0f11 !important; border:1px solid #23262b !important; border-radius:16px !important; padding:16px 18px !important; box-shadow:none !important; display:flex; gap:14px; }
html body .how-num { flex:none; width:30px !important; height:30px !important; border-radius:50% !important; background:#3d85e6 !important; color:#fff !important; font:900 14px Inter,sans-serif !important; display:grid !important; place-items:center; }
html body .how-step strong { color:#fff !important; font-size:15px !important; }
html body .how-step span:not(.how-num) { color:#8b939c !important; font-size:13.5px !important; line-height:1.5; }

/* ── EVENTS ───────────────────────────────────────────────────────────── */
html body.events-page .page { max-width:1120px !important; padding:0 !important; }
html body #banner.dl-hero { margin-top:96px; line-height:normal; width:calc(100% - 64px); background-position:right center; }
html body #banner[hidden] { display:none !important; }
html body .mast.under-banner { display:none !important; }
html body .listing { margin:26px 0 80px !important; }
html body .grouphead { display:flex; justify-content:space-between; align-items:baseline; border:0 !important; padding:0 4px !important; margin:0 0 12px !important; }
html body .grouphead span:first-child { font:400 34px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.5px !important; color:#e7e9ea !important; text-transform:uppercase; }
html body .grouphead span:last-child { color:#71767b !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important; }
html body .row { display:grid !important; grid-template-columns:auto 1fr auto !important; align-items:center; gap:18px; background:#0e0f11 !important;
  border:1px solid #23262b !important; border-radius:18px !important; padding:16px 18px !important; margin-bottom:12px !important; color:#e7e9ea; transition:border-color .15s, box-shadow .15s; }
html body .row:hover { border-color:#34507f !important; box-shadow:0 10px 30px rgba(61,133,230,.12); }
html body .row .when { width:64px; text-align:center !important; transform:skewX(-8deg); border-radius:8px; padding:8px 0 7px;
  background:linear-gradient(160deg,#d8dee8,#7c8698); color:#0b0f17; }
html body .row .when > * { transform:skewX(8deg); }
html body .row .when .mo { font:800 11px Inter,sans-serif !important; letter-spacing:1.5px !important; color:#1c2533 !important; }
html body .row .when .dy { font:400 36px/1 'Bebas Neue',sans-serif !important; color:#0b0f17 !important; }
html body .row .when .wk { font-size:10px !important; font-weight:800; color:#2d3748 !important; }
html body .row .what { border:0 !important; padding:0 !important; }
html body .row::before { display:none !important; }
html body .row .what h2 { font:400 30px/1 'Bebas Neue',sans-serif !important; letter-spacing:1px !important; color:#fff !important; }
html body .row:hover .what h2 { color:#fff !important; }
html body .row .what .meta { color:#8b939c !important; font-size:13.5px !important; }
html body .row .what .meta b { color:#e7e9ea !important; }
html body .row .status { display:inline-block; position:relative; z-index:0; color:#e7e9ea !important; padding:6px 13px;
  font:400 17px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.4px !important; text-transform:uppercase; }
html body .row .status::before { content:''; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); background:#141b2b; border:1px solid #2b3a5c; border-radius:3px; }
html body .row .status.low { color:#ffd84a !important; }
html body .row .status.low::before { border-color:#a8781c; }
html body .row .status.full { color:#ff8a8a !important; }
html body .row .status.full::before { border-color:#7a2a2a; }
html body .row .arrow { color:#5b6270 !important; }
html body .row.past { opacity:.55 !important; }
html body .row.past .what h2 { font-size:26px !important; }
html body .row.past .when { background:linear-gradient(160deg,#3a404b,#22262e); }
html body .row.past .when .mo, html body .row.past .when .dy, html body .row.past .when .wk { color:#c6ccd6 !important; }
html body .empty { background:#0e0f11; border:1px solid #23262b; border-radius:18px; padding:22px !important; }
html body .empty p { color:#8b939c !important; }
html body .empty a { color:#9cc4ff !important; }
/* one event */
html body .back { color:#9cc4ff !important; margin-top:100px; padding-top:0 !important; display:inline-block; }
html body .kf dd a { display:table !important; margin-top:6px !important; }
html body .detail { background:#0e0f11; border:1px solid #23262b; border-radius:22px; padding:30px 32px; margin:14px 0 80px; }
html body .detail h1 { font:400 64px/.95 'Bebas Neue',sans-serif !important; letter-spacing:1px !important; color:#fff !important; }
html body .detail .standfirst { color:#c5d3ea !important; }
html body .keyfacts { border-top:0 !important; display:grid !important; grid-template-columns:repeat(4,1fr); gap:10px; }
html body .kf { background:#14161a !important; border:1px solid #23262b !important; border-radius:14px; padding:14px !important; display:block !important; }
html body .kf dt { color:#71767b !important; }
html body .kf dd { color:#fff !important; }
html body .kf dd a { color:#9cc4ff !important; }
html body .body p, html body .cols li { color:#cfd3d7 !important; border-color:#23262b !important; }
html body .cols h3 { font:400 26px/1 'Bebas Neue',sans-serif !important; color:#e7e9ea !important; letter-spacing:1px; }
html body .cta { background:#14161a; border:1px solid #23262b !important; border-radius:16px; padding:16px 18px !important; }
html body .cta .left .n { color:#fff !important; font-family:'Bebas Neue',sans-serif !important; font-size:28px !important; }
html body .cta .btn { width:auto; min-width:220px; }
html body .fineprint { color:#71767b !important; }
html body .sheet { background:#0b0c0f !important; color:#e7e9ea; border:1px solid #23262b; border-radius:22px !important; }
html body .sheet h2 { color:#fff; }
html body .fld input, html body .fld select, html body .fld textarea { background:#14161a !important; border:1px solid #2a2e35 !important; color:#fff !important; border-radius:10px !important; }
html body .fld label, html body .agree label { color:#8b939c !important; }

@media (max-width:900px) {
  html body .products-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  html body .keyfacts { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  html body .dl-hero { margin:84px 12px 0; min-height:200px; border-radius:20px; }
  html body .dl-hero .in { padding:18px 18px; }
  html body .dl-hero h1 { font-size:52px !important; }
  html body .dl-hero p { font-size:13.5px; }
  html body .dl-hero .ship { right:14px; top:14px; font-size:10px; }
  html body .dl-hero.photo::after { background:linear-gradient(180deg,rgba(5,8,14,.15),rgba(5,8,14,.92)); }
  html body .shop-wrap, html body #panelRent, html body.events-page .page { padding-left:12px !important; padding-right:12px !important; }
  html body .cat-row { overflow-x:auto; flex-wrap:nowrap !important; scrollbar-width:none; }
  html body .cat-pill { flex:none; font-size:17px !important; padding:7px 13px !important; }
  html body .section-label h2, html body .how-title, html body .grouphead span:first-child { font-size:26px !important; }
  html body .row { grid-template-columns:auto 1fr !important; }
  html body .row { padding:14px !important; gap:14px; }
  html body .row .go { grid-column:2; padding:0 !important; }
  html body #banner.dl-hero { width:auto; margin:84px 12px 0; }
  html body .back { margin-top:84px; padding-top:0 !important; }
  html body .dl-hero .ship { font-size:9.5px; padding:4px 7px; }
  html body .row .what h2 { font-size:24px !important; }
  html body .detail { padding:20px 18px; }
  html body .detail h1 { font-size:44px !important; }
}

/* ── ABOUT (2026-10-14) ───────────────────────────────────────────────── */
html body.about-page .page-hero { display:none !important; }
html body .dl-hero.about h1 { font-size:76px !important; }
html body.about-page .section { padding:26px 0 0 !important; background:none !important; border:0 !important; }
html body.about-page .section-inner { max-width:1120px; }
html body.about-page .mission-inner { background:#0e0f11; border:1px solid #23262b; border-radius:22px; padding:30px 34px; gap:40px !important;
  background:radial-gradient(90% 120% at 0% 0%,rgba(196,30,30,.16),transparent 55%),#0e0f11; }
html body.about-page .mission-inner > div:first-child { flex:0 0 220px !important; }
html body.about-page .mission-logo { width:200px !important; filter:drop-shadow(0 0 30px rgba(196,30,30,.35)); }
html body.about-page .section-body { color:#cfd3d7 !important; font-size:17px !important; line-height:1.8 !important; }
html body.about-page .riders-header { text-align:left !important; margin:0 4px 12px !important; }
html body.about-page .section-title { font:400 34px/1 'Bebas Neue',sans-serif !important; letter-spacing:1.5px !important; color:#e7e9ea !important; margin:0 !important; }
html body.about-page .riders-grid { gap:16px !important; }
html body.about-page .rider-card { background:#0e0f11 !important; border:1px solid #23262b !important; border-radius:20px !important; padding:0 0 22px !important; box-shadow:none !important; }
html body.about-page .rider-card::before { display:none !important; }
html body.about-page .rider-card.featured { border-color:rgba(61,133,230,.6) !important; box-shadow:0 0 0 1px rgba(61,133,230,.25), 0 12px 34px rgba(61,133,230,.14) !important; }
html body.about-page .rider-shot { margin:0 0 18px !important; border-radius:0 !important; }
html body.about-page .rider-shot::after { content:''; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(180deg,transparent,#0e0f11); }
html body.about-page .rider-generation { display:inline-block; position:relative; z-index:0; margin:0 22px 10px !important; padding:4px 11px; color:#fff !important;
  font:400 16px/1.1 'Bebas Neue',sans-serif !important; letter-spacing:2px !important; }
html body.about-page .rider-generation::before { content:''; position:absolute; inset:0; z-index:-1; transform:skewX(-12deg); background:#1b2537; border:1px solid #2f4266; border-radius:3px; }
html body.about-page .rider-card.featured .rider-generation::before { background:#3d85e6; border-color:transparent; }
html body.about-page .rider-name { font:400 36px/1 'Bebas Neue',sans-serif !important; letter-spacing:1px !important; color:#fff !important; margin:0 22px 12px !important; }
html body.about-page .rider-bio { color:#a9b0b8 !important; font-size:14.5px !important; line-height:1.7 !important; margin:0 22px 12px !important; }
html body.about-page .riders { padding-bottom:80px !important; }
@media (max-width:700px) {
  html body .dl-hero.about h1 { font-size:46px !important; }
  html body.about-page .section { padding:16px 12px 0 !important; }
  html body.about-page .mission-inner { padding:22px 18px; gap:18px !important; }
  html body.about-page .mission-inner > div:first-child { flex:0 0 auto !important; }
  html body.about-page .mission-logo { width:150px !important; }
  html body.about-page .section-body { font-size:15.5px !important; }
}