/* ============================================================
   FitFourby — shared responsive layer
   ------------------------------------------------------------
   Loaded on every page AFTER styles.css and any page-specific
   <style> block, so these rules win without needing !important
   in most cases.

   Breakpoints, and what each is for:
     1600px+  large monitors and TVs — widen the container
     1100px   laptop / tablet landscape — sidebar layouts collapse
      900px   tablet portrait — three columns become two
      640px   phone portrait — everything becomes one column
      short   phone landscape — trim vertical padding

   When adding a new page, link this file and use the existing
   class names where you can; the collapses below are keyed to
   them. Anything genuinely new needs its own rule added here,
   not a one-off media query on the page.
   ============================================================ */

/* ── Large screens and TVs ─────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --max-w: 1400px; }
  .bp-wrap { grid-template-columns: 440px 1fr; }
}
@media (min-width: 2000px) {
  :root { --max-w: 1600px; }
  /* TVs are viewed from a distance — nudge body copy up a step */
  body { font-size: 17px; }
  .article { max-width: 860px; }
}

/* ── Laptop / tablet landscape ─────────────────────────────── */
@media (max-width: 1100px) {
  /* sidebar-and-content layouts stack */
  .bp-wrap,
  .p-layout,
  .search-layout,
  .ah-inner,
  .fh-inner { grid-template-columns: 1fr; }

  /* four across is too tight below this */
  .feature-grid,
  .del-grid,
  .criteria-grid,
  .looking-for-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet portrait ───────────────────────────────────────── */
@media (max-width: 900px) {
  .how-grid,
  .packages-grid,
  .g-grid,
  .gallery-grid,
  .benefits-grid,
  .results-grid,
  .rel-grid,
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  .ws-grid,
  .ind-grid,
  .pay,
  .parties,
  .base-load-grid,
  .spec-grid { grid-template-columns: 1fr; gap: 24px; }

  /* hero type stops being oversized */
  .hero h1 { font-size: clamp(30px, 7vw, 48px); }
  .ah-title, .fh-title { font-size: clamp(28px, 6vw, 40px); }
  .section-title { font-size: clamp(24px, 5vw, 32px); }

  /* the invoice sheet is a document, not a layout */
  .sheet { padding: 30px 26px 34px; }
}

/* ── Phone portrait ────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --nav-h: 108px; }
  html { font-size: 16px; }

  /* Two compact navigation rows keep the logo and account control visible
     while every section remains reachable by a thumb-scrollable link row. */
  .nav {
    height: var(--nav-h);
    min-height: var(--nav-h);
    padding: 8px 12px 6px;
    gap: 4px 10px;
    align-content: center;
    flex-wrap: wrap;
  }
  .nav-logo { order: 1; font-size: 19px; }
  .nav-account, .nav > .nav-profile-wrap { order: 2; margin-left: auto; }
  .nav-links { order: 3; flex: 0 0 100%; width: 100%; gap: 3px; }
  .nav-link { min-height: 38px; padding: 7px 11px; font-size: 14px; }
  .nav-profile { width: 40px; height: 40px; }
  .profile-menu { position: fixed; top: 58px; right: 12px; min-width: 190px; }
  .profile-menu a { min-height: 44px; display:flex; align-items:center; font-size:14px; }
  .launch-strip { padding: 8px 12px; line-height: 1.35; }

  /* everything becomes a single column */
  .how-grid,
  .packages-grid,
  .g-grid,
  .gallery-grid,
  .benefits-grid,
  .results-grid,
  .rel-grid,
  .product-grid,
  .feature-grid,
  .del-grid,
  .criteria-grid,
  .looking-for-grid,
  .bp-row,
  .bf-row,
  .form-row,
  .nw-sub-form { grid-template-columns: 1fr; }

  .nw-sub-form { display: block; }
  .nw-sub-form input { width: 100%; margin-bottom: 10px; }
  .nw-sub-form button { width: 100%; }

  /* section padding */
  .section, .section-sm { padding-left: 16px; padding-right: 16px; }
  .bp-wrap, .nw-wrap { padding-left: 16px; padding-right: 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .bp-hero, .nw-hero, .adv-hero, .fitter-hero, .g-hero { padding-left: 20px; padding-right: 20px; }

  /* stacked CTA rows shouldn't leave orphan buttons */
  .ah-ctas, .bc-btns, .hero-ctas { flex-direction: column; align-items: stretch; }
  .ah-ctas .btn, .bc-btns .btn { width: 100%; text-align: center; }

  /* the vehicle cascade on compare/index is a row of selects */
  .hf-row, .vs-row { flex-direction: column; align-items: stretch; }
  .hf-sel, .hf-go { width: 100%; }

  /* wide content scrolls inside itself rather than pushing the page */
  .article table,
  .ind-label-table,
  table.lines {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .article td, .article th { white-space: normal; min-width: 130px; }

  /* results panels */
  .bp-check-head { flex-direction: column; gap: 4px; }
  .bp-check-num { white-space: normal; }

  /* comparison cards */
  .pc-actions { flex-direction: column; }
  .pc-actions > * { width: 100%; }

  /* Common content surfaces */
  h1, h2, h3, .p-title, .section-title { overflow-wrap:anywhere; }
  .article { padding-left:16px; padding-right:16px; }
  .account-hero { padding:42px 18px; }
  .account-hero h1 { font-size:clamp(32px,11vw,46px); line-height:1.02; }
  .account-main { margin:28px auto 56px; padding:0 16px; }
  .account-card { padding:21px 18px; }
  .account-actions > * { width:100%; text-align:center; min-height:44px; }
  .auth-story { display:none; }
  .auth-panel { min-height:calc(100vh - var(--nav-h)); padding:30px 16px 50px; align-items:flex-start; }
  .auth-box h2 { font-size:32px; }
  .auth-tabs button, .auth-submit { min-height:46px; }
  .auth-links { gap:18px; flex-wrap:wrap; }
  .membership-modal { padding:10px; align-items:end; }
  .membership-modal-card { width:100%; max-height:92dvh; padding:27px 16px 18px; border-radius:14px 14px 8px 8px; }
  .membership-option { padding:18px 16px; }
  .membership-option > a { min-height:44px; display:flex; align-items:center; justify-content:center; }
  .home-membership h2 { font-size:29px; line-height:1.08; }
  .home-membership-offer { padding:22px 18px; }
  .home-membership-offer > a { min-height:46px; display:flex; align-items:center; justify-content:center; }
  .search-box { flex-direction:column; max-width:none; }
  .search-box button, .search-box input { width:100%; min-height:46px; }
  .filters { flex-direction:column; gap:18px; }
  .filter-group { min-width:0; width:100%; }
  .page-header, .submit-strip, .hiw-section, .independence-section { padding-left:18px; padding-right:18px; }
  .garage-layout { padding:22px 16px; grid-template-columns:1fr; gap:20px; }
  .summary-panel { position:static; }
  .p-card, .buy-card { padding:19px 16px; }
  .fit-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .community-grid, .hiw-steps, .pricing-cards, .mods-grid, .pax-cargo-grid, .vc-row { grid-template-columns:1fr; }
  .spotlight-card { grid-template-columns:1fr; min-height:0; }
  .spotlight-image { min-height:210px; }
  .section-wrap { padding-left:16px; padding-right:16px; }
  .filter-bar, .filter-bar-section { padding-left:14px; padding-right:14px; overflow-x:auto; }
  .filter-bar-inner { flex-wrap:nowrap; width:max-content; min-width:100%; }
  .results-count { margin-left:auto; }
  .product-grid { padding:22px 16px 52px; grid-template-columns:1fr; }
  .pc-specs { grid-template-columns:1fr 1fr; }
  .submit-strip { padding-top:42px; padding-bottom:42px; }
  .footer-brand-actions { flex-wrap:wrap; align-items:flex-start; }
}

/* ── Small phones ──────────────────────────────────────────── */
@media (max-width: 400px) {
  .nav-cta { display: none; }
  .hero h1 { font-size: 30px; }
  .bp-hero h1, .nw-hero h1 { font-size: 25px; }
}

/* ── Phone landscape and other short viewports ─────────────── */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 28px; padding-bottom: 28px; }
  .bp-hero, .nw-hero, .adv-hero, .fitter-hero, .g-hero { padding-top: 26px; padding-bottom: 24px; }
  .nav { position: static; }
  .bp-acc { max-height: 200px; }
}

/* ── Navigation: the same header everywhere, at every size ─── */
/* The link row scrolls at ANY width rather than only below 1024px. With five
   links plus the CTA and the account control, a mid-width window used to clip
   the last item with no way to reach it — News simply vanished. */
.nav-links {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { white-space: nowrap; }

@media (max-width: 1024px) {
  /* Let the link row scroll instead of wrapping or squashing. The logo
     stays left and the account control stays right on every page, so the
     header never moves between pages. */
  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; }
}
@media (max-width: 768px) {
  .nav-cta { padding: 8px 14px; font-size: 13px; }
}

/* ── Touch targets and inputs ──────────────────────────────── */
@media (pointer: coarse) {
  .nav-link, .btn, .bp-filter, .nw-filter, .g-card, .hero-quick-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .g-card { display: flex; flex-direction: column; align-items: stretch; }
  .nw-item { display: block; }
  /* iOS zooms the page when a focused input is under 16px */
  input, select, textarea { font-size: 16px !important; }
  .bp-acc-item, .bf-check, .nw-consent { padding-top: 12px; padding-bottom: 12px; }
}

/* ── Never let anything push the page sideways ─────────────── */
/* overflow-x: hidden here would silently break every position:sticky on the
   site — an ancestor with a scroll container clips sticky children, which is
   what stopped the garage step bar and the compare vehicle bar from pinning.
   overflow-x: clip prevents the sideways scroll without creating a scroll
   container, so sticky keeps working. */
/* No overflow-x here at all. Both `hidden` and `clip` on html/body have been
   observed to break position:sticky in Chrome, and sticky headers matter more
   than a defensive rule — the individual wide elements (tables, code, images)
   are already handled above. */
html, body { max-width: 100%; }
img, svg, video, iframe { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; }

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .nav, .footer, .nw-sub, .a-cta, .bp-hero, .toolbar { display: none !important; }
  body { background: #fff; }
  .article, .bp-wrap { max-width: none; padding: 0; }
}

/* ── Build planner: keep the vehicle picker visible and obvious ─ */
@media (max-width: 640px) {
  .bp-vbar-inner { padding: 12px 16px; gap: 10px; }
  .bp-vbar-label { font-size: 14px; width: 100%; }
  .bp-vbar-select { max-width: none; min-width: 0; width: 100%; }
  .bp-vbar-status { width: 100%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .bp-vbar { position: static; }
}

/* ============================================================
   Pointer stability
   ------------------------------------------------------------
   Cards used to lift 2px on hover (transform: translateY(-2px)).
   That moves the element out from under the cursor: when the
   pointer sits near the bottom edge, the card lifts away, hover
   is lost, the card drops back, hover is regained — several
   times a second. The visible symptom is a flickering cursor and
   a card that appears to vibrate.

   The lift is kept as a shadow and a border change, which read
   the same way and never move the hit area. Loaded last, so this
   wins over the page-level rules without editing every file.
   ============================================================ */
.card:hover,
.pc:hover,
.g-card:hover,
.nf-link:hover,
.nw-item:hover,
.feature-card:hover,
.how-card:hover,
.bp-acc-item:hover {
  transform: none !important;
}
.pc:hover  { box-shadow: 0 8px 26px rgba(0,0,0,0.10); }
.g-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); }

/* One cursor per interactive element. Without this the pointer
   flips to a text I-beam every time it crosses a word inside a
   clickable card, which reads as flicker even when nothing moves. */
a, button, label, select, summary,
.pc, .g-card, .card, .nw-filter, .bp-filter, .nf-link, .bp-acc-item {
  cursor: pointer;
}
/* Labels, badges and headings inside a clickable card are chrome,
   not content — don't offer to select them. Body copy, specs and
   SKUs stay selectable because people copy those. */
.pc-cat, .pc-style, .pc-style-note, .pcs-label, .pc-tag,
.g-tag, .g-meta, .nw-cat, .nf-link b, .nf-link span,
.bp-check-name, .nav-link, .nav-cta {
  -webkit-user-select: none;
  user-select: none;
}
/* But never trap a selection people actually want. */
.pc-name, .pcs-val, .r-name, .r-spec, .article, .article * {
  -webkit-user-select: text;
  user-select: text;
}
input, textarea, select { cursor: auto; }
input[type="checkbox"], input[type="radio"] { cursor: pointer; }

/* Shared mobile navigation. The normal link row remains usable without JS. */
.nav-menu-toggle { display:none; }
.nav-menu-backdrop[hidden] { display:none; }
.nav-menu-backdrop { position:fixed; inset:0; z-index:199; background:rgba(15,15,14,.5); }
body.mobile-nav-open { overflow-y:hidden; }
@media (max-width:760px) {
  :root { --nav-h:64px; }
  .nav.nav-mobile-managed { height:var(--nav-h); min-height:var(--nav-h); padding:8px 16px; gap:12px; flex-wrap:nowrap; }
  .nav-mobile-managed .nav-logo { order:0; }
  .nav-mobile-managed .nav-menu-toggle { display:inline-flex; order:2; align-items:center; justify-content:center; min-width:64px; min-height:44px; margin-left:auto; border:1px solid var(--dark-border); border-radius:6px; background:var(--dark-3); color:var(--dark-text-1); font-size:15px; font-weight:600; }
  .nav-mobile-managed .nav-account, .nav-mobile-managed > .nav-profile-wrap { order:3; margin-left:0; }
  .nav-mobile-managed .nav-profile { width:44px; height:44px; }
  .nav-mobile-managed .nav-links { position:absolute; top:100%; left:0; right:0; width:100%; margin:0; padding:12px 16px 20px; flex-direction:column; gap:4px; background:var(--dark); max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; border-bottom:1px solid var(--dark-border); }
  .nav-mobile-managed .nav-links[hidden] { display:none; }
  .nav-mobile-managed .nav-link { display:flex; align-items:center; min-height:48px; width:100%; white-space:normal; }
  .nav-mobile-managed .profile-menu { position:fixed; top:58px; right:16px; }
}
@media print { .nav-menu-backdrop { display:none !important; } }

/* Keep the regular navigation row until its labels need the mobile menu. */
@media (min-width:761px) and (max-width:1000px) {
  .nav { padding-inline:24px; gap:24px; }
  .nav-link { padding-inline:12px; }
}