/* pp-mobile.css — Packard Performance site-wide responsive layout.
   Loaded LAST on every page so it wins the cascade against inline page styles and the
   runtime CSS injected by pp-cards.js / pp-shop.js / pp-bot.js. Desktop is untouched. */

/* Sand Sports modal must sit above the bot button + cart (all sizes) */
.ssmodal { z-index: 10001 !important; }
/* hero Sand Sports logo is a phone-only element */
.ss-hero-logo { display: none; }

/* Hero photography starts at the viewport edge; only its text clears the floating pill. */
body:has(> .pnav + header),body:has(> .pnav + .shero-wrap){padding-top:0!important}
body > .pnav + header{padding-top:max(124px,9vw)}
/* Do not create an intermediate scrolling ancestor: that breaks the pinned hero. */
html:has(.shero-wrap),body:has(> .shero-wrap){overflow-x:clip!important;overflow-y:visible}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  /* NO overflow-x rule on html/body: iOS Safari disables position:sticky when either has one. */

  /* ============================================================
     1. BOTTOM CONTROLS — one compact row: Ask Packard (left), Cart (right),
        Sand Sports badge parked above the cart. Nothing overlaps.
     ============================================================ */
  .ppb-btn {
    left: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    padding: 11px 14px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }
  .ppb-btn > span svg, .ppb-btn > span img { width: 15px !important; height: 15px !important; }
  .ppb-panel {
    left: 12px !important; right: 12px !important; width: auto !important;
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    max-height: min(64vh, 540px) !important;
  }
  .ppc-pill {
    right: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    padding: 11px 14px !important;
    font-size: 12px !important;
  }
  .ppc-pill > span:not(.n) { display: none; }          /* icon + count only */
  .ppc-pill svg, .ppc-pill img { width: 20px !important; height: 20px !important; }
  .ppc-pill .n { font-size: 14px !important; }
  .ppc-dr { width: 100vw !important; }

  /* Sand Sports badge on phones: the full red logo sits in the hero sky; once you scroll it
     converts into the S4 circle top-right (under the nav), then drops to the bottom corner
     after the pinned hero releases. Bare image, no box — nothing for Safari to clip. */
  .ssfab {
    top: 90px !important; bottom: auto !important; right: 14px !important;
    width: 56px !important; height: 56px !important; padding: 0 !important; gap: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important;
    opacity: 0; transform: scale(.35) !important; transform-origin: top right;
    transition: transform .55s cubic-bezier(.2,.9,.2,1.05), opacity .35s !important;
    pointer-events: none;
  }
  .ssfab.in { opacity: 1; transform: none !important; pointer-events: auto; }
  .ssfab.in.drop { transform: translateY(calc(100dvh - 160px - env(safe-area-inset-bottom))) !important; }
  .ssfab.hide { opacity: 0 !important; pointer-events: none; }
  .ssfab .ssfab-t, .ssfab:hover .ssfab-t { display: none !important; }
  .ssfab .s4c, .ssfab.mini .s4c { width: 56px !important; height: 56px !important; display: block; border-radius: 50%; }
  .ss-hero-logo {
    display: block; position: absolute; z-index: 3; top: 84px; right: 14px; width: min(50vw, 210px);
    transform-origin: top right; transition: transform .55s cubic-bezier(.4,0,.6,1), opacity .4s;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
  }
  .ss-hero-logo img { width: 100%; height: auto; display: block; }
  body.ss-scrolled .ss-hero-logo { opacity: 0; transform: scale(.28) translate(10%, -10%); pointer-events: none; }

  .ssmodal-x { width: 44px !important; height: 44px !important; right: 10px !important; top: 10px !important; }
  .ssmodal-card { width: 100vw !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .ssmodal .facts div { min-width: calc(50% - 1px) !important; flex: 1 1 calc(50% - 1px); }

  /* ============================================================
     2. NAV + docked fit rail
     ============================================================ */
  .pnav-brand { min-height: 40px; display: flex; align-items: center; }
  .pnav-links a { min-height: 44px; display: flex; align-items: center; }
  .pnav .fit-rails { margin: 0 6px !important; }

  /* Any horizontal chip row: scroll, hide bar, fade the right edge so it reads as scrollable */
  .fit-row, .fam-filters .wrap, .jtrack, .chips.scroll, .map .chips {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .fit-row::-webkit-scrollbar, .fam-filters .wrap::-webkit-scrollbar { display: none; }
  .fit-row > *, .fam-filters .ff, .fam-filters .ff > * { flex: none !important; }
  .fit-lab { font-size: 10px !important; letter-spacing: .12em !important; padding-left: 2px !important; }
  .fit-tab { padding: 9px 12px !important; font-size: 11px !important; min-height: 36px; }
  .fam-filters { top: 78px !important; }
  body:has(.pnav.is-docked-host) .fam-filters { top: 132px !important; }
  .fam-filters .wrap { gap: 12px !important; padding: 10px 0 10px 14px !important; }
  .fam-filters .ff button, .fam-filters .ff-reset { padding: 9px 12px !important; min-height: 36px; font-size: 11.5px !important; }
  .ff-count { padding-right: 28px; }

  /* ============================================================
     3. HOME — story hero, journey, brands, Sand Sports, dyno, altitude
     ============================================================ */
  /* pinned, scroll-driven hero on phones too (FASTER → BETTER → FIRST as you scroll) */
  body:has(.shero-wrap) { padding-top: 0 !important; }   /* hero starts at the very top; the pill floats over it */
  .shero-wrap { height: 400vh !important; height: 400svh !important; }
  .shero { position: -webkit-sticky !important; position: sticky !important; top: 0 !important;
    height: 100vh !important; height: 100dvh !important; min-height: 0 !important;
    padding-top: 84px !important; padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important; }
  .shero .wrap { padding-bottom: 0 !important; }
  .shero .lede, .shero p { font-size: 15px !important; line-height: 1.45 !important; margin: 8px 0 10px !important; }
  .swords { margin: 8px 0 12px !important; }
  .swords button { display: block !important; width: 100%; text-align: left !important; -webkit-box-pack: start; justify-content: flex-start; font-size: clamp(48px, 14.5vw, 64px) !important; line-height: .92 !important; }
  .swords button small { display: block !important; text-align: left; position: static !important; transform: none !important; font-size: 10px !important; letter-spacing: .18em !important; margin: 5px 0 8px 2px; }
  .swords button:not(.on) small { display: none; }
  .sacts { gap: 8px !important; }
  .sacts .hb { padding: 13px 18px !important; font-size: 12.5px !important; }
  .sacts .hb.g { flex: 1 1 auto; text-align: center; }

  .journey.dark { display: block !important; min-height: 0 !important; padding: 56px 0 44px !important; }
  .journey .wrap { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box; }
  .journey.dark .jhead { max-width: 100% !important; }
  .journey.dark .jhead h2 { font-size: 27px !important; max-width: none !important; }
  .journey.dark .jlede { max-width: 100% !important; font-size: 14.5px !important; }
  .journey.dark .jtrack { max-width: 100% !important; gap: 12px !important; }
  .jtabs button { padding: 10px 14px !important; font-size: 12px !important; }
  .chap { flex: 0 0 100% !important; }
  .journey.dark .chap .body { max-width: 100% !important; padding: 18px 16px 16px !important; box-sizing: border-box; }
  .journey.dark .chap .tagline { font-size: 22px !important; }
  .journey.dark .chap h3 { font-size: 21px !important; }
  .journey.dark .chap .lede { max-width: 100% !important; font-size: 14.5px !important; }
  .chap li { font-size: 13.5px !important; }
  .chap li b { font-size: 13.5px !important; }
  .chap .chips a { padding: 10px 12px !important; font-size: 11px !important; }


  .ss-facts, .ssbig .facts { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .ssbig .facts div, .ssmodal .facts div { min-width: 0 !important; }
  .ss-facts div { padding: 14px 14px !important; }

  .stage-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 26px 0 8px !important; }
  .stage { padding: 10px 10px !important; min-width: 0 !important; }
  .stage .s-hp { font-size: 22px !important; }
  .stage:nth-child(4) { grid-column: 1 / 2; }
  .stage:nth-child(5) { grid-column: 2 / 4; }
  .chart-shell { padding: 12px 4px 4px !important; }
  .readout { font-size: 10.5px !important; right: 8px !important; top: 8px !important; }

  .altemblem-wrap { height: auto !important; margin-bottom: 14px !important; }
  .altemblem { width: 150px !important; }
  input[type="range"] { height: 32px !important; padding: 0 !important; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  .alt h2 { font-size: 27px !important; }

  .stats { grid-template-columns: 1fr 1fr !important; }
  .stats div { padding: 14px 12px 14px 68px !important; min-height: 74px !important; }
  .stats div img { left: 10px !important; width: 46px !important; height: 46px !important; }
  .stats b { font-size: 24px !important; }
  .stats span { font-size: 10px !important; }

  /* ============================================================
     4. PRODUCT CARDS — two across on listing grids, buttons stacked
     ============================================================ */
  .grid, .mgrid, .fam-grid, .pp-rowgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lt .grid, .lt .mgrid, .fam-grid, .band.paper .grid, .band.paper .pp-rowgrid, .lt2 .grid, .theme-light .grid { gap: 10px !important; background: transparent !important; border: 0 !important; }
  .feat .grid { display: flex !important; grid-template-columns: none !important; }          /* home rails stay rails */
  .feat .grid .card { flex: 0 0 236px !important; }
  .card { padding: 12px !important; min-width: 0; }
  .card .card-img { margin-bottom: 10px !important; }
  .card .card-v { font-size: 10px !important; letter-spacing: .1em !important; }
  .card .card-t { font-size: 13px !important; line-height: 1.3 !important; min-height: 0 !important; margin: 5px 0 auto !important; }
  .card .card-p { font-size: 14px !important; margin-top: 8px !important; }
  .card .card-p small { display: block; font-size: 10px !important; }
  .card .card-buy { padding-top: 8px !important; gap: 6px !important; }
  .card select.pp-var { font-size: 12px !important; padding: 9px 26px 9px 9px !important; background-position: right 8px center !important; }
  .card .card-act { flex-direction: column !important; gap: 6px !important; margin-top: 8px !important; }
  .card .cbtn { padding: 10px 6px !important; font-size: 10.5px !important; letter-spacing: .06em !important; line-height: 1.25; min-height: 38px; display: flex; align-items: center; justify-content: center; }

  /* ============================================================
     5. BOOST — tier table scrolls sideways instead of clipping
     ============================================================ */
  .wrap [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .wrap [style*="overflow-x:auto"] table { font-size: 13px !important; }
  .wrap [style*="overflow-x:auto"] th, .wrap [style*="overflow-x:auto"] td { padding-right: 12px !important; }

  /* ============================================================
     6. VEHICLE PAGES — machine band and facts
     ============================================================ */
  .mstats > div { flex: 1 1 50% !important; min-width: 0; box-sizing: border-box; }
  .mstage .mhero { padding: 22px 0 12px !important; }
  .mlink, a.mlink { min-height: 40px; display: inline-flex !important; align-items: center; }

  /* ============================================================
     7. GARAGE — empty-state picker was white-on-white
     ============================================================ */
  .g-empty { padding: 44px 0 !important; }
  .g-empty h2 { color: #141210 !important; font-size: 26px !important; }
  .g-empty p { color: #3A362C !important; font-size: 15px !important; }
  .g-pick { gap: 8px !important; }
  .g-pick button {
    font-family: "Rajdhani", sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
    color: #141210 !important; background: #fff !important; border: 1px solid #C9C4B9 !important; border-radius: 999px !important;
    padding: 12px 16px !important; min-height: 44px; cursor: pointer; flex: 1 1 calc(50% - 8px);
  }
  .mrail { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mrail b { font-size: 11px !important; letter-spacing: .1em !important; }
  .mrail span { font-size: 9.5px !important; }

  /* ============================================================
     8. MAP — controls clear the brand + each other
     ============================================================ */
  canvas#c ~ .top .brand img { height: 22px !important; }
  canvas#c ~ .top .search input { font-size: 15px !important; padding: 10px 38px 10px 10px !important; }
  canvas#c ~ .hint { left: 10px !important; right: 66px !important; transform: none !important; text-align: left !important; top: 62px !important; }
  canvas#c ~ .side { top: 60px !important; }

  /* ============================================================
     9. TYPE + TAP TARGETS — floor for the smallest text, 40px+ targets
     ============================================================ */
  .eyebrow { font-size: 10.5px !important; }
  .card-v, .fit-lab, .ff-l, .ff-count, .stock, .dyno-note, .fam-m, .s-name, .s-price, .ssbig .facts span, .ss-facts span, .btile .cap span, .chap .utah { font-size: 10.5px !important; }
  .card.pp-live .card-v { font-size: 10px !important; }
  .pfoot a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 !important; }
  .pfoot .addr a, .pfoot .fbar a, .pfoot .trust a, .pfoot .paycards a, .pfoot .flogo a { display: inline !important; min-height: 0; }
  .pfoot .flogo { display: block; }
  input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px !important; min-width: 22px; accent-color: #FF020A; }
  select, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea { font-size: 16px !important; }  /* stops iOS zoom-on-focus */
  button, .btn, .hb, .cbtn, .chips a, .stage, .jtabs button, .fit-tab, .ff button { touch-action: manipulation; }

  /* generic overflow safety for any wide inline table/pre */
  img, video, svg, iframe { max-width: 100%; }
  .vhero iframe, .vhero video, .shero .bgs, .hero iframe, .hero video, .fam-hero iframe, .journey .vhero iframe, .altbg { max-width: none; }
}

/* very small phones */
@media (max-width: 360px) {
  .fam-grid, .pp-rowgrid { grid-template-columns: 1fr !important; }
  .swords button { font-size: 44px !important; }
}

/* Three scroll chapters, then release. Native scrolling remains available to keyboard and touch. */
.shero-wrap#top{height:400vh!important;height:400svh!important}
.shero-wrap>.shero{position:sticky!important;top:0!important;height:100vh!important;height:100dvh!important;min-height:0!important}
.shero #swords button:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-height:600px){
 .shero-wrap>.shero{padding-top:92px!important;padding-bottom:16px!important}
 .shero .swords{margin:4px 0 8px!important}
 .shero .swords button{font-size:clamp(28px,8vh,48px)!important}
 .shero .swords button small{font-size:9px!important;margin:2px 0!important}
 .shero .sline{font-size:13px!important;min-height:0;line-height:1.25}
 .shero .sprog{margin:8px 0!important}
 .shero .sacts .hb{padding:8px 10px!important;font-size:10px!important}
 .shero .ss-hero-logo,.shero .shint,.shero .sbuilt{display:none!important}
}