/* ══════════════════════════════════════════════════════════
   NIEWIADÓW — globalne dopracowanie widoku mobilnego
   Ładowane na każdej podstronie (statycznej i generowanej).
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── 1. Zero poziomego przewijania ───────────────────── */
  html, body { overflow-x: hidden !important; max-width: 100%; }
  img, svg, video, iframe, canvas, table, pre { max-width: 100%; }
  img, video { height: auto; }

  /* długie nazwy modeli nie rozpychają layoutu */
  h1, h2, h3, h4, p, li, a, td, th, .mm-link, .hero-inner, [class*="title"], [class*="ttl"] {
    overflow-wrap: normal;
    word-break: normal;
  }
  h1, h2, h3, h4, [class*="title"], [class*="ttl"] { text-wrap: wrap; text-wrap: pretty; }
  p, li { text-wrap: wrap; text-wrap: pretty; }
  h1, h2, .mm-link { hyphens: none; -webkit-hyphens: none; }
  .nf-c-title, .nf-st-name, .nf-cc-title, .ser-name, .mdl-name {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-wrap: wrap; text-wrap: pretty;
  }

  /* ── 2. Menu mobilne ─────────────────────────────────── */
  .nav-links, .nav-menu, .nav-cta { display: none !important; }
  .burger { display: flex !important; }
  #nav { padding-left: 18px !important; padding-right: 18px !important; }
  .nav-logo img { max-height: 26px; width: auto; }

  #mobileMenu {
    padding: 84px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mm-link {
    font-size: clamp(20px, 6vw, 28px) !important;
    padding: 13px 0 !important;
    min-height: 48px;
    gap: 12px;
  }
  .mm-link svg { flex: 0 0 auto; }
  body.menu-open { overflow: hidden !important; }

  /* ── 3. Dolny pasek szybkich akcji ───────────────────── */
  #mobileBar { display: grid !important; }
  body { padding-bottom: 64px; }
  footer, .nv-ft-bot { padding-bottom: 84px !important; }

  /* ── 4. Sekcje hero — bez pustki i bez kolizji z menu ── */
  #hero { height: auto !important; min-height: 78svh !important; }
  .hero, .nvp-hero, .sp-hero, .hero-sec {
    min-height: 0 !important;
    padding-top: 92px !important;
  }
  .hero-inner, .nvp-hero-in, .sp-hero-in {
    max-width: 100% !important;
    width: 100% !important;
  }
  .nvp-hero-in { padding-top: 8px !important; }

  /* ── 5. Marginesy boczne — jednolite 20px ────────────── */
  .nvp-wrap, .wrap, .container, .sp-wrap, .inner, .section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  /* ── 6. Siatki → jedna/dwie kolumny ──────────────────── */
  .nvp-fgrid, .nvp-specs-in, .nvp-em-in, .nvp-about-in, .nvp-erow,
  .grid-2, .grid-3, .grid-4, .two-col, .split { grid-template-columns: 1fr !important; }
  .nvp-strip-in { grid-template-columns: repeat(2, 1fr) !important; gap: 2px !important; }
  .fs-grid, .gal-grid, .nvp-gal { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ── 7. Tabele — dopasowane do ekranu telefonu ───────── */
  .mdl-vartab, table.specs, .spec-table { min-width: 0 !important; width: 100% !important; }
  .mdl-vartab table { width: 100% !important; table-layout: fixed !important; }
  .mdl-vartab th, .mdl-vartab td,
  table.specs th, table.specs td,
  .spec-table th, .spec-table td {
    padding: 9px 8px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .mdl-vartab thead th { font-size: 9px !important; letter-spacing: .03em !important; }
  .mdl-vartab tbody td:first-child { white-space: normal !important; }
  .mdl-vartab .vt-hdr, .mdl-vartab .vt-note, .mdl-vartab .vt-cta { padding-left: 14px !important; padding-right: 14px !important; }
  .mdl-vartab .vt-note { font-size: 11px !important; }
  .mdl-vartab .vt-cta { flex-direction: column !important; align-items: stretch !important; }
  .mdl-vartab .vt-cta a { width: 100%; justify-content: center; }
  .table-wrap, .mdl-vartab-wrap, .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* ── 8. Wygodne dotykanie: min. 44px ─────────────────── */
  a.btn, button, .btn, .cta, .nvp-btn, .sp-btn, [role="button"] { min-height: 44px; }
  .btn, .cta, .nvp-btn, .sp-btn { padding-left: 20px; padding-right: 20px; }

  /* ── 9. Typografia — bez gigantycznych nagłówków ─────── */
  h1 { font-size: clamp(30px, 8.6vw, 44px) !important; line-height: 1.06 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 34px) !important; line-height: 1.12 !important; }
  p, li { font-size: 15.5px; line-height: 1.62; }

  /* ── 10. Mniej pustych odstępów między sekcjami ──────── */
  section { padding-top: clamp(44px, 9vw, 64px); padding-bottom: clamp(44px, 9vw, 64px); }
  section#hero, .nvp-hero, .hero { padding-bottom: 40px; }

  /* ── 11. Płynne, wygodne karuzele ────────────────────── */
  .carousel, .slider, .scroll-row, [class*="rail"], [class*="track"] {
    -webkit-overflow-scrolling: touch;
  }
  .scroll-row, .carousel { scroll-snap-type: x mandatory; }
  .scroll-row > *, .carousel > * { scroll-snap-align: center; }

  /* ── 12. Efekty, które na telefonie tylko przeszkadzają ─ */
  [style*="background-attachment:fixed"], .nvp-band::before { background-attachment: scroll !important; }
}

/* Bardzo małe telefony (≤380px) */
@media (max-width: 380px) {
  .nvp-strip-in { grid-template-columns: 1fr !important; }
  .fs-grid, .gal-grid, .nvp-gal { grid-template-columns: 1fr !important; }
  h1 { font-size: clamp(26px, 8vw, 34px) !important; }
}

/* Płynne przewijanie i respekt dla ustawień dostępności */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Przycisk zamknięcia (X) musi być nad otwartym menu */
body.menu-open #nav { z-index: 1003 !important; background: transparent !important; box-shadow: none !important; }
body.menu-open #nav .nav-logo img.logo-blue { display: none !important; }
body.menu-open #nav .nav-logo img.logo-white { display: block !important; }

/* ══════════════════════════════════════════════════════════
   Dodatkowe poprawki mobilne (nachodzenie / ucinanie treści)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Hero — treść poniżej paska nawigacji, bez pustki na dole */
  #hero .hero-content {
    padding-top: 116px !important;
    padding-bottom: 56px !important;
    min-height: 62svh;
    justify-content: center;
  }
  #hero .hero-kicker { margin-bottom: 18px; }

  /* Nawigacja — logo, motyw i hamburger bez kolizji */
  #nav { gap: 8px; }
  #nav .nav-logo { flex: 0 1 auto; min-width: 0; }
  #nav .nav-logo img { max-width: 46vw; }
  #nav .theme-toggle { flex: 0 0 auto; margin-left: auto; }

  /* Kafle serii — tekst nigdy nie może być ucinany */
  .nf-series-tile.has-photo .nf-st-band {
    top: auto !important;
    height: auto !important;
    min-height: 44% !important;
    padding: 16px 18px 52px !important;
    overflow: visible !important;
  }
  .nf-series-tile.has-photo .nf-st-name {
    font-size: 15.5px !important;
    line-height: 1.28 !important;
    max-width: calc(100% - 34px) !important;
  }
  .nf-series-tile.has-photo .nf-st-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    min-height: 0 !important;
    max-width: calc(100% - 34px) !important;
    overflow: visible !important;
    margin-top: 6px !important;
  }
  .nf-series-tile.has-photo .nf-st-arrow { right: 14px; bottom: 16px; width: 22px; height: 22px; }

  /* Kafle serii — jedna kolumna, wyśrodkowane, czytelne zdjęcia */
  .nf-series-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 18px !important;
  }
  .nf-series-grid > .nf-series-tile {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  .nf-series-tile .nf-st-band {
    min-height: 44% !important;
    padding: 16px 18px 52px !important;
  }
  .nf-series-tile .nf-st-name {
    font-size: 15.5px !important;
    line-height: 1.28 !important;
    max-width: calc(100% - 34px) !important;
  }
  .nf-series-tile .nf-st-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    max-width: calc(100% - 34px) !important;
    margin-top: 6px !important;
  }
  .nf-series-tile .nf-st-arrow { right: 14px; bottom: 16px; width: 22px; height: 22px; }

  /* Karty kategorii — zdjęcie przyczepy zawsze czytelne nad stałym paskiem */
  .nf-card { aspect-ratio: auto !important; min-height: 0 !important; }
  .nf-card .nf-c-visual {
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 150px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Duże kafle kategorii — czytelne tytuły i zachowane wewnętrzne marginesy */
  .nf-card.nf-feat .nf-c-bar {
    height: auto !important;
    min-height: 74px !important;
    max-height: none !important;
    padding: 12px 14px 13px !important;
    overflow: visible !important;
  }
  .nf-card.nf-feat .nf-c-title {
    font-size: 15.5px !important;
    line-height: 1.18 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .nf-card.nf-feat .nf-c-top { top: 12px; left: 14px; right: 14px; }
  .nf-card.nf-feat .nf-c-ic { width: 38px; height: 38px; border-radius: 11px; }
  .nf-card.nf-feat .nf-c-ic svg { width: 20px; height: 20px; }
  .nf-card.nf-feat .nf-c-arrow { width: 34px; height: 34px; }
  .nf-card.nf-feat .nf-c-arrow svg { width: 15px; height: 15px; }


  /* Sekcje siatkowe nie mogą być szersze niż ekran */
  .s-bridge, .s-grid, .s-cats, .k-grid, .nvp-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .s-bridge > *, .s-grid > *, .s-cats > *, .k-grid > * { min-width: 0 !important; }
  .s-bridge-btns, .s-bridge-stats { flex-wrap: wrap !important; }
  .s-bridge-btns > *, .s-bridge-stats > * { min-width: 0 !important; }

  /* Sklep — hero pod menu, kafle kategorii w jednej kolumnie */
  .s-bridge { padding-top: 108px !important; }
  .s-bridge-right { padding: 24px 18px !important; }
  .shop-cats { grid-template-columns: 1fr !important; }
  .shop-cat { padding: 14px 14px !important; min-width: 0 !important; }
  .shop-cat > div, .shop-cat span { min-width: 0; overflow-wrap: break-word; }
  .nf-card .nf-c-title, .shop-cat h4, .shop-cat p,
  .sh-cat-title, .sh-cat-desc { overflow: visible !important; -webkit-line-clamp: unset !important; }
  [class*="shop"] .grid, [class*="sh-"] .grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 430px) {
  #hero .hero-content { padding-top: 108px !important; padding-bottom: 48px !important; }
  [class*="shop"] .grid, [class*="sh-"] .grid { grid-template-columns: 1fr !important; }
  .nf-card.nf-feat .nf-c-title { font-size: 14px !important; }
  .nf-card.nf-feat .nf-c-bar { padding: 11px 12px 12px !important; min-height: 68px !important; }
  .nf-card.nf-feat .nf-c-top { top: 10px; left: 12px; right: 12px; }
}


/* ── Rozwijanie ukrytych kolumn w tabelach na mobile ──── */
@media (max-width: 900px) {
  .vt-more-wrap { display: flex; justify-content: center; padding: 10px 14px 0; }
  .vt-more-btn {
    appearance: none; border: 1px solid rgba(233,106,42,.55);
    background: rgba(233,106,42,.12); color: #E96A2A;
    font: 800 10.5px/1 'Archivo', sans-serif; letter-spacing: .12em;
    text-transform: uppercase; padding: 11px 16px; border-radius: 3px;
    width: 100%; max-width: 340px; cursor: pointer;
  }
  .vt-more-btn:active { transform: scale(.98); }
  .vt-showall .hide-sm { display: table-cell !important; }
  .vt-showall table { table-layout: auto !important; }
  .vt-showall .vt-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 901px) { .vt-more-wrap { display: none !important; } }

/* === Historia marki — ekran startowy na mobile === */
@media (max-width: 760px) {
  .jr-start {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .jr-start-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 96px 20px 40px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  /* Duże roczniki w tle nie mogą przykrywać treści */
  .jr-start-half-year { font-size: clamp(56px, 15vw, 96px) !important; bottom: 14px !important; opacity: .5; }
  .jr-start-split::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(253, 251, 247, .72);
  }
  .jr-start-eyebrow { margin-bottom: 16px !important; font-size: 11px !important; }
  .jr-start-title { font-size: clamp(26px, 8vw, 38px) !important; margin-bottom: 14px !important; }
  .jr-start-desc { font-size: 14px !important; margin-bottom: 24px !important; }
  .jr-start-timeline { margin-bottom: 26px !important; }
  /* CTA nie może wychodzić poza ekran */
  .jr-start-cta {
    max-width: 100% !important;
    width: auto !important;
    gap: 12px !important;
    padding: 10px 18px 10px 10px !important;
    box-sizing: border-box !important;
  }
  .jr-start-cta-arrow { width: 34px !important; height: 34px !important; }
  .jr-start-cta-lbl {
    white-space: normal !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-align: left !important;
    line-height: 1.3 !important;
  }
}

/* ══ Poprawki mobilne: hero, historia, filtry dealerów ══ */
@media (max-width: 900px) {
  /* hero nie chowa się pod stałym paskiem akcji */
  #hero { min-height: 70svh !important; }

  /* filtry województw — zwijane, żeby nie zajmowały pół ekranu */
  #dealers .d-cities { max-width: 100%; overflow: hidden; }
  .d-reg-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px; margin-bottom: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.85); cursor: pointer;
    font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    padding: 13px 14px; border-radius: 3px;
  }
  .d-reg-toggle span.chev { transition: transform .25s; }
  .d-reg-toggle[aria-expanded="true"] span.chev { transform: rotate(180deg); }
  #dRegions.d-collapsible { display: none; }
  #dRegions.d-collapsible.open { display: flex; }
}
@media (min-width: 901px) { .d-reg-toggle { display: none !important; } }

/* Historia marki — CTA nad dolnym paskiem akcji */
@media (max-width: 760px) {
  .jr-start-inner { padding-bottom: 110px !important; }
  .jr-start-title { font-size: clamp(24px, 7.4vw, 34px) !important; }
  .jr-start-timeline { margin-bottom: 20px !important; }
}

/* Dealerzy — nagłówek i tekst mieszczą się w ekranie */
@media (max-width: 900px) {
  #dealers .d-header { grid-template-columns: minmax(0,1fr) !important; }
  #dealers .d-header > *, #dealers .d-header-right { min-width: 0 !important; }
  #dealers .d-header h2 {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word;
  }
  #dealers .d-header p, #dealers .d-header-right p { overflow-wrap: break-word; }
  #dealers .d-searchbox { flex-wrap: wrap; }
  #dealers .d-searchbox input { min-width: 0; flex: 1 1 140px; }
}

/* Historia — całość mieści się nad dolnym paskiem akcji */
@media (max-width: 760px) {
  .jr-start-inner { padding-top: 78px !important; padding-bottom: 84px !important; }
  .jr-start-title { font-size: clamp(22px, 6.6vw, 30px) !important; margin-bottom: 10px !important; }
  .jr-start-desc { font-size: 13px !important; margin-bottom: 16px !important; }
  .jr-start-timeline { margin-bottom: 14px !important; gap: 10px !important; }
  .jr-start-timeline .jr-start-year, .jr-start-tl-year { font-size: 24px !important; }
  .jr-start-tl-label, .jr-start-timeline p { font-size: 9.5px !important; }
}