/* ============================================================
   INTEBO v2 — Responsive layer (mobile-first overrides)
   Loaded LAST. Targets <980px / <760px / <560px / <420px.
   ============================================================ */

/* === Container padding tightens on mobile === */
@media (max-width: 760px) {
  :root {
    --s-7: 2rem;
    --s-8: 2.5rem;
    --s-9: 3rem;
    --s-10: 4rem;
  }
  .container, .container--full { padding: 0 1rem; }
  .section { padding: 2.5rem 0; }
  .section--lg { padding: 3rem 0; }
  .section--sm { padding: 2rem 0; }
  body { font-size: 0.95rem; line-height: 1.55; }
}

/* === TOPBAR: collapse on mobile === */
@media (max-width: 760px) {
  .topbar { display: none; }
}

/* === HEADER: hamburger LEFT of logo on mobile (mobile standard) === */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink-900);
  font-size: 1.3rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
@media (max-width: 980px) {
  /* .header-actions has margin-left:auto, so the icons pin right on their own —
     the nav is display:none here, leaving just logo | icons. */
  .site-header__inner {
    gap: 0.5rem;
    padding-block: 0.6rem; /* never the shorthand — it would kill .container's side padding */
  }
  .site-logo img { height: 36px; width: auto; max-width: none; }
  .header-action { width: 38px; height: 38px; }
  .header-action--cart { width: auto; padding: 0 0.7rem; height: 38px; }
  /* Hamburger w prawym rogu — wystaje poza padding kontenera */
  .header-actions .nav-burger { margin-right: -0.5rem; margin-left: 0.15rem; }
}
@media (max-width: 480px) {
  .site-header__inner { gap: 0.35rem; padding-block: 0.55rem; }
  .site-logo img { height: 32px; width: auto; max-width: none; }
  .nav-burger { width: 40px; height: 40px; font-size: 1.2rem; }
  /* :not(--cart) — a bare .header-action rule here would re-apply a fixed
     width to the cart chip (same specificity, later in the file) and its
     icon + count badge would spill out of the dark background. */
  .header-action:not(.header-action--cart) { width: 36px; }
}

/* Desktop nav ⇄ drawer breakpoint.
   1180px, not 980: the inline nav carries 8 top-level items and needs ~830px
   next to the logo and the action icons. Below that it overlaps the icons,
   so the burger drawer takes over. */
@media (max-width: 1180px) {
  .nav-primary { display: none; }
  .nav-burger { display: inline-flex; }
}

/* === Realizacje category chips ===
   11 chips wrapped onto ~6 rows and pushed the gallery off screen. On mobile
   they become one horizontally scrollable strip, bleeding to the viewport
   edges so it reads as swipeable. Same pattern as .cat-subnav__list. */
@media (max-width: 760px) {
  .real-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0.5rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }
  .real-toolbar::-webkit-scrollbar { display: none; }
  .real-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* margin-left:auto would shove this to the far end of the scroll track. */
  .real-toolbar__count { margin-left: 0; }
}

/* === Search overlay on mobile === */
@media (max-width: 560px) {
  .search-overlay__panel { padding: 3.25rem 1rem 1.5rem; }
  .search-overlay__input { font-size: 1.05rem; padding: 0.75rem 0.6rem; }
  .search-overlay__submit { padding: 0.6rem 0.9rem; font-size: 0.75rem; }
  .search-overlay__icon { font-size: 0.95rem; }
  .search-overlay__close { top: 0.5rem; right: 0.5rem; }
  .search-overlay__hints { gap: 0.4rem; margin-top: 1.1rem; }
  .search-overlay__hints a { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
  /* Label gets its own line — inline it left a ragged first row. */
  .search-overlay__hints-label { flex: 0 0 100%; margin: 0 0 0.15rem; }
}

/* === MOBILE DRAWER === */
.mnav-overlay {
  position: fixed; inset: 0;
  background: rgba(28,28,27,0.5);
  z-index: 90;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur), visibility var(--dur);
}
.mnav-overlay.open { opacity: 1; visibility: visible; }

.mnav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 100vw;
  max-width: 100%;
  background: #fff;
  z-index: 95;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mnav.open { transform: translateX(0); }

.mnav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--line-100);
}
.mnav__head img { height: 36px; }
.mnav__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  color: var(--ink-900);
}
.mnav__list {
  display: flex; flex-direction: column;
  padding: 0.5rem 0;
}
.mnav__item {
  border-bottom: 1px solid var(--line-100);
}
.mnav__link {
  /* flex-start + gap keeps a leading icon next to its label; only the
     collapse chevron is pushed to the right edge (see rule below). */
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink-800);
  width: 100%;
  background: none; border: 0;
  text-align: left;
  cursor: pointer;
}
.mnav__link i { color: var(--text-muted); font-size: 0.75rem; transition: transform var(--dur); }
.mnav__link .fa-chevron-down { margin-left: auto; }
.mnav__item--accent .mnav__link i { color: var(--ember); font-size: 0.85rem; }
.mnav__item.open > .mnav__link i { transform: rotate(180deg); }
.mnav__item--accent .mnav__link { color: var(--ember); font-weight: 600; }
.mnav__sub {
  display: none;
  padding: 0 0 0.5rem 0;
  background: var(--bg-alt);
}
.mnav__item.open .mnav__sub { display: flex; flex-direction: column; }
.mnav__sub a {
  padding: 0.65rem 1rem 0.65rem 2rem;
  font-size: 0.88rem;
  color: var(--text);
}
.mnav__sub a:hover { color: var(--ember); }
.mnav__foot {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--line-100);
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.mnav__foot a { color: var(--ink-900); display: inline-flex; align-items: center; gap: 0.5rem; }
.mnav__foot a i { color: var(--ember); width: 16px; }

/* ============================================================
   DESKTOP OVERLAY CHROME (front page)
   The stacked topbar + logo row + nav ate 182px — 20% of a 900px
   viewport — before the hero photo even began. On the front page the whole
   stack is taken out of flow and floated over the photo, so the hero gets
   the full viewport; on scroll it condenses into one solid white bar.

   `fixed`, not `sticky`: a sticky bar occupies flow space, so shrinking it
   mid-scroll would yank the content below it upwards.
   ============================================================ */
@media (min-width: 981px) {
  body.home .topbar,
  body.home .site-header {
    position: fixed;
    left: 0; right: 0;
    transition:
      top var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      background var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }
  /* Topbar stays solid dark throughout — only the bar below it floats. */
  body.home .topbar {
    top: 0;
    z-index: 61;
  }
  body.home .site-header {
    top: var(--topbar-h, 35px);
    z-index: 60;
    background: transparent;
    border-bottom-color: transparent;
  }

  /* --- Over the photo: knock the bar's contents out to white --- */
  body.home:not(.is-scrolled) .site-logo img { filter: brightness(0) invert(1); }
  body.home:not(.is-scrolled) .nav-primary__link,
  body.home:not(.is-scrolled) .header-action { color: #fff; }
  /* The cart chip is dark-on-dark over the photo — outline keeps it readable. */
  body.home:not(.is-scrolled) .header-action--cart {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  }

  /* --- Condensed: topbar slides out, bar goes solid and slims down --- */
  body.home.is-scrolled .topbar { transform: translateY(-100%); }
  body.home.is-scrolled .site-header {
    top: 0;
    background: var(--white);
    border-bottom-color: var(--line-100);
    box-shadow: 0 1px 14px rgba(0,0,0,0.07);
  }
  body.home.is-scrolled .site-header__inner { padding-block: 0.45rem; }
  body.home.is-scrolled .site-logo img { height: 34px; }

  .site-logo img,
  .site-header__inner,
  .nav-primary__link {
    transition: height var(--dur) var(--ease), padding var(--dur) var(--ease);
  }

  /* Hero fills the viewport under the floating chrome. */
  body.home .hero { min-height: 100svh; }
  /* Stronger top scrim so the white chrome stays legible on the photo. */
  body.home .hero__photo::after {
    /* Stays ≥0.45 through the top ~16% — the band the floating chrome
       occupies — then opens up so the photo reads, then darkens for the copy. */
    background: linear-gradient(180deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.48) 16%,
      rgba(0,0,0,0.12) 36%,
      rgba(0,0,0,0.06) 46%,
      rgba(0,0,0,0.55) 80%,
      rgba(0,0,0,0.86) 100%);
  }
}

/* === HERO ===
   Mobile keeps the desktop model: one full-bleed photo with the copy overlaid
   on a darkening gradient. The header floats over it (see "overlay header"
   below), so the hero is pulled up under the sticky header and pads itself
   back down by the same amount. */
@media (max-width: 980px) {
  .hero {
    min-height: 88svh; /* svh, not vh — no jump when the iOS URL bar collapses */
    display: flex;
    align-items: flex-end;
    margin-top: calc(-1 * var(--header-h, 59px));
    padding-top: var(--header-h, 59px);
  }
  .hero__photo { position: absolute; inset: 0; }
  .hero__photo::before { width: 80%; height: 70%; left: 5%; }
  .hero__photo::after {
    /* Dark at the top (header sits there) and from ~40% down (copy sits there),
       with a clear window in between so the photo still reads. */
    background: linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.30) 18%,
      rgba(0,0,0,0.66) 40%,
      rgba(0,0,0,0.86) 68%,
      rgba(0,0,0,0.94) 100%);
  }
  .hero__content {
    position: relative;
    background: transparent;
    margin-top: 0;
    padding: 2rem 0 2.25rem;
  }
  .hero__inner { gap: 1.5rem; grid-template-columns: 1fr; }
  .hero__title {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
    line-height: 1.05;
    max-width: none;
  }
  .hero__sub { font-size: 0.98rem; margin-top: 0.85rem; line-height: 1.5; }
  .hero__actions { margin-top: 1.1rem; gap: 0.6rem; }
  .hero__actions .btn { flex: 1 1 100%; min-width: 0; justify-content: center; }
  /* Stats moved out of the hero into .stats-band — the photo now ends at
     the "Umów wizytę w showroomie" CTA. */
  .stats-band__grid { grid-template-columns: 1fr 1fr; }
  .stat-tile { padding: 1.1rem 1rem; }
  /* 2×2: right border only on the left column, bottom border on the top row. */
  .stat-tile:nth-child(2n) { border-right: 0; }
  .stat-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line-100); }
  .stat-tile__num { font-size: 1.6rem; }
  .stat-tile__label { font-size: 0.68rem; margin-top: 0.3rem; letter-spacing: 0.06em; }
  .hero__caption { display: none; } /* it overlapped on mobile */
  /* Full-width CTAs run underneath it, and "scroll" needs no hint on touch. */
  .hero__cue { display: none; }
}
@media (max-width: 480px) {
  .hero { min-height: 92svh; }
  .hero__photo-hint { display: none; } /* placeholder label, noise over a real photo */
  .hero__content { padding: 1.75rem 0 2rem; }
  .hero__actions .btn { padding: 0.85rem 1rem; font-size: 0.9rem; }
}

/* === Overlay header (front page, mobile) ===
   The header floats over the hero photo until the user scrolls, then fades
   into the normal white bar. `.is-scrolled` is toggled in mobile-v2.js. */
@media (max-width: 980px) {
  body.home .site-header {
    background: transparent;
    border-bottom-color: transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  body.home .site-header.is-scrolled {
    background: var(--white);
    border-bottom-color: var(--line-100);
  }
  /* Knock the dark logo out to white while it sits on the photo. */
  body.home .site-header:not(.is-scrolled) .site-logo img {
    filter: brightness(0) invert(1);
  }
  body.home .site-header:not(.is-scrolled) .header-action,
  body.home .site-header:not(.is-scrolled) .nav-burger {
    color: #fff;
  }
  /* The cart chip keeps its dark fill — it reads fine on the photo, and an
     inverted one would compete with the hero CTA. */
  body.home .site-header:not(.is-scrolled) .header-action--cart { color: #fff; }
}

/* === Service strip ===
   Four thin full-width rows read as filler and merged into the dark hero above.
   On mobile it becomes a 2×2 tile block (same joined-tile language as
   .hero__meta) on a lighter ink so the two dark bands separate. */
@media (max-width: 760px) {
  .service-strip { background: var(--ink-800); }
  .service-strip__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.10);
    padding: 0;
    border-block: 1px solid rgba(255,255,255,0.10);
  }
  .service-strip__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.95rem 0.85rem;
    border-right: 0;
    background: var(--ink-800);
  }
  .service-strip__item i { font-size: 1.15rem; }
  .service-strip__item .lbl { font-size: 0.82rem; line-height: 1.25; }
  .service-strip__item .sub { font-size: 0.7rem; line-height: 1.35; margin-top: 0.15rem; }
}

/* === BREADCRUMBS: never more than one line on mobile ===
   Collapses to  Strona główna … › Bieżąca  by hiding the middle crumbs
   (display:none, so they stay in the DOM for crawlers — the authoritative
   signal is the BreadcrumbList JSON-LD emitted by intebo_breadcrumb_schema()).
   Applied via CSS rather than in the 17 templates that hand-roll .breadcrumbs. */
@media (max-width: 760px) {
  .breadcrumbs__list {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  /* Keep: first crumb, the last separator, the current crumb. Drop the rest. */
  .breadcrumbs__list > li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
  /* Ellipsis stands in for the hidden crumbs — only when some were actually
     hidden, i.e. when the trail is longer than home › current (3 <li>). */
  .breadcrumbs__list > li:first-child:has(~ li:nth-child(5))::after {
    content: '…';
    margin-left: 0.4rem;
    color: var(--ink-300);
  }
  .breadcrumbs__list > li:first-child { flex: 0 0 auto; white-space: nowrap; }
  /* Long product names truncate instead of wrapping to a second line. */
  .breadcrumbs__current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === Section heads === */
@media (max-width: 760px) {
  .section-head { gap: 1.25rem; margin-bottom: 1.5rem; }
  .section-title { font-size: clamp(1.5rem, 5.5vw, 2rem); }
  .section-sub { font-size: 0.95rem; }
}

/* === Pillars / categories / promos === */
@media (max-width: 980px) {
  .pillar { padding: 1.5rem 1.25rem; }
  .pillar__title { font-size: 1.2rem; }
}
/* Square tiles on mobile; the feature card keeps its 2-row span, so it reads
   as a 1:2 portrait next to two stacked squares. min-height must go to 0 or it
   would fight the aspect-ratio. */
@media (max-width: 980px) {
  .categories__grid { gap: 0.5rem; }
  .cat-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .cat-card--feature {
    grid-row: span 2;
    grid-column: auto;
    aspect-ratio: 1 / 2;
  }
  .cat-card__name { font-size: 1.15rem; }
  .cat-card--feature .cat-card__name { font-size: 1.4rem; }
  .cat-card__content { padding: 1rem; }
}
/* Single column below 560px (home-v2.css): every card, feature included,
   becomes a full-width square — a 1:2 feature would be a screen-and-a-half tall. */
@media (max-width: 560px) {
  .cat-card--feature { grid-row: auto; aspect-ratio: 1 / 1; }
  .cat-card__name { font-size: 1.25rem; }
  .cat-card--feature .cat-card__name { font-size: 1.4rem; }
  .cat-card__content { padding: 1.1rem; }
}

@media (max-width: 980px) {
  .promo-card__body { padding: 1.1rem; }
  .promo-card__title { font-size: 1.05rem; }
  /* In a 78%-wide slide the three price parts no longer fit on one line and
     the amounts were breaking mid-number. Stack them, keep each unbroken. */
  .promo-card__price {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
  }
  .promo-card__price-old,
  .promo-card__price-new { white-space: nowrap; }
  .promo-card__price-new { font-size: 1.25rem; }
  .promo-card__save { margin-left: 0; white-space: nowrap; }
}

/* === Cases (realizacje) — same square bento as the category tiles === */
@media (max-width: 980px) {
  .cases__grid, .cases__grid--row2 { gap: 0.5rem; }
  /* .cases__grid--row2 .case-card carries a more specific min-height that would
     otherwise win over aspect-ratio — zero it at the same specificity. */
  .case-card,
  .cases__grid--row2 .case-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .case-card--feature {
    grid-row: span 2;
    grid-column: auto;
    aspect-ratio: 1 / 2;
  }
  .case-card__content { padding: 1rem; }
  /* Uppercase treatment itself lives in home-v2.css (all breakpoints);
     only the mobile sizing is tuned here. */
  .case-card__title {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
    hyphens: auto; /* "PIECE AKUMULACYJNE" is wider than a half-width tile */
  }
  .case-card--feature .case-card__title { font-size: 1.15rem; }
  .case-card__location {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    margin-top: 0.3rem;
    color: rgba(255,255,255,0.78);
  }
  .case-card__shade {
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 25%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.92) 100%);
  }
  /* Tag list can be longer than the tile is wide — clip it to one line. */
  .case-card__meta {
    font-size: 0.62rem;
    top: 0.75rem; left: 0.75rem; right: 0.75rem;
    gap: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
  }
  .case-card__photo-hint { display: none; } /* placeholder label — noise at this size */
}
/* Single column below 560px — same reasoning as .cat-card--feature above. */
@media (max-width: 560px) {
  .case-card--feature { grid-row: auto; aspect-ratio: 1 / 1; }
  .case-card__title { font-size: 1.1rem; }
  .case-card--feature .case-card__title { font-size: 1.25rem; }
  .case-card__content { padding: 1.1rem; }
  .case-card__location { font-size: 0.78rem; }
}

/* ============================================================
   CAROUSEL — [data-carousel] tracks become swipeable on mobile
   (promocje, poradnik). Nav dots/arrows are built by mobile-v2.js.
   ============================================================ */
.carousel-nav { display: none; }

@media (max-width: 980px) {
  [data-carousel] {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%; /* the 22% remainder lets the next card peek */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the viewport edges so cards scroll out of frame, then re-inset
       the content with matching padding + scroll-padding. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * { scroll-snap-align: start; }
  /* .pdp-related .product-grid pins its own column count in pdp-v2.css and
     outranks the bare attribute selector — restate the track here. */
  .pdp-related .product-grid[data-carousel] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
  }

  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.1rem;
  }
  .carousel-nav__arrow {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--line-100);
    background: #fff;
    color: var(--ink-900);
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur), opacity var(--dur);
  }
  .carousel-nav__arrow:disabled { opacity: 0.3; cursor: default; }
  .carousel-nav__arrow:not(:disabled):hover { border-color: var(--ink-900); }
  .carousel-nav__dots { display: flex; align-items: center; gap: 0.45rem; }
  .carousel-nav__dot {
    width: 7px; height: 7px;
    padding: 0;
    border: 0;
    background: var(--ink-300);
    cursor: pointer;
    transition: background var(--dur), width var(--dur);
  }
  .carousel-nav__dot--active { background: var(--ember); width: 20px; }
}

/* === Brands — the marquee itself lives in home-v2.css (all viewports).
   Here it only gets tighter tiles and a faster loop on small screens. */
@media (max-width: 760px) {
  .brands__marquee { margin-inline: -1rem; } /* bleed past the container padding */
  .brand-tile { padding: 1rem 1.35rem; }
  .brand-tile__name { font-size: 0.9rem; }
  .brands__grid[data-marquee-ready] { animation-duration: 45s; }
}

/* Respect reduced-motion: no loop, user scrolls the strip themselves. */
@media (prefers-reduced-motion: reduce) {
  .brands__grid[data-marquee-ready] {
    animation: none;
    overflow-x: auto;
  }
}

/* === Why dark === */
@media (max-width: 760px) {
  .why__map { aspect-ratio: 1/1; }
  .why__map-pin--main::after { display: none; }
  .why__feature { padding: 1.25rem; }
  .why__feature-num { font-size: 1.7rem; }
}

/* === Showroom CTA === */
@media (max-width: 980px) {
  .showroom-cta { min-height: 0; }
  .showroom-cta__photo { min-height: 220px; aspect-ratio: 16/9; }
  .showroom-cta__body { padding: 2rem 1.25rem 2.5rem; }
  .showroom-cta__actions .btn { flex: 1; justify-content: center; }
}

/* === Blog === */
@media (max-width: 760px) {
  .blog-card--feature .blog-card__title { font-size: 1.3rem; }
  .blog-card__title { font-size: 1.05rem; }
  /* Category · read time · date wrapped onto three ragged lines in a slide —
     keep it to one line, dropping items that don't fit rather than reflowing. */
  .blog-card__meta {
    flex-wrap: nowrap;
    gap: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
  }
  .blog-card__category { flex-shrink: 0; }
}

/* === Footer ===
   Desktop runs four columns; mobile keeps only what someone actually reaches
   for on a phone — call, write, find the showroom. The Produkty/Firma link
   columns are dropped: the same links already live in the burger drawer, and
   stacked they turned the footer into a screen and a half of scrolling. */
@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2.25rem var(--s-6); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta__inner { padding-block: var(--s-8); } /* padding-block: it's a .container */
}
@media (max-width: 760px) {
  .footer-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    padding-block: 2.25rem;
  }
  .footer-cta__title { font-size: clamp(1.5rem, 6.4vw, 2rem); max-width: none; margin-top: 0.6rem; }
  .footer-cta__action { width: 100%; justify-content: space-between; padding: 0.95rem 1.15rem; font-size: 0.78rem; }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem 0 1.5rem;
  }
  .footer-col--nav { display: none; }
  .footer-brand img { height: 40px; }
  /* Desktop type at phone width made this over a screen tall. */
  .footer-brand__desc { margin-top: 0.9rem; font-size: 0.88rem; line-height: 1.55; }
  .footer-contact { margin-top: 1.1rem; gap: 0.55rem; font-size: 0.9rem; }
  .footer-salon h4 { margin-bottom: 0.9rem; }
  .footer-salon__address { font-size: 0.9rem; }
  .footer-hours { margin-top: 1rem; gap: 0.45rem 1rem; font-size: 0.82rem; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    text-align: left;
  }
  .footer-bottom__legal { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  /* Wordmark is the one purely decorative element — not worth the height here. */
  .footer-wordmark { display: none; }
}

/* ============================================================
   Listing (PLP)
   ============================================================ */
@media (max-width: 980px) {
  /* Sidebar becomes drawer; collapse by default */
  .plp-layout { grid-template-columns: 1fr; gap: 0; }
  .filters {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(88vw, 360px);
    z-index: 95;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    background: #fff; /* the desktop column is transparent; the drawer can't be */
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .filters form { padding: 0 1rem 2rem; }
  .filters.open { transform: translateX(0); }
  /* The drawer injects its own dark head (with a close button), so the desktop
     one would stack a second black bar on top of it. */
  .filters__head { display: none; }
  .filters__head-mobile {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--line-100);
    background: var(--ink-900); color: #fff;
  }
  .filters__head-mobile h3 { font-size: 1rem; color: #fff; font-weight: 600; }
  .filters__head-mobile button { color: #fff; font-size: 1.1rem; width: 36px; height: 36px; }

  .plp-toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 0;
  }
  .plp-toolbar__left, .plp-toolbar__right { gap: 0.6rem; flex-wrap: wrap; }
  .plp-filter-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--ink-900); color: #fff;
    font-size: 0.85rem; font-weight: 600;
  }
}
@media (min-width: 981px) {
  .filters__head-mobile { display: none; }
  .plp-filter-trigger { display: none !important; }
}

@media (max-width: 760px) {
  .cat-header { padding: 1.5rem 0 1.25rem; }
  .cat-header h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .cat-header__sub { font-size: 0.94rem; }
  .cat-header__stats { gap: 1.5rem; }
  .cat-stat__num { font-size: 1.25rem; }
  .cat-subnav { padding: 0.85rem 0; }
  .cat-subnav__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .cat-chip { white-space: nowrap; flex-shrink: 0; }
  .plp-view { display: none; }
  .plp-sort label { display: none; }
}

/* ============================================================
   PDP
   ============================================================ */
@media (max-width: 980px) {
  .pdp { padding: 1rem 0 6rem; } /* extra bottom padding for sticky-bar */
  .pdp__layout { gap: 1.5rem; }
  .pdp-info { position: static; gap: 1rem; }
  .pdp-info__title { font-size: 1.5rem; line-height: 1.15; }
  .pdp-info__sku { flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 0.78rem; }
  .pdp-info__sku-divider { display: none; }
  .pdp-keyspecs { grid-template-columns: 1fr 1fr 1fr; }
  /* Tab bar pins under the sticky header so the user can jump between sections
     (and back up) while scrolling. --header-h is measured in mobile-v2.js;
     the fallback covers the no-JS case. z-index stays under .site-header (50). */
  .pdp-tabs {
    position: sticky;
    top: calc(var(--header-h, 59px) - 1px); /* -1px so the borders overlap, not double up */
    z-index: 30;
    margin-top: 0;
  }
  .pdp-tabs__list { padding: 0 1rem; -webkit-overflow-scrolling: touch; }
  .pdp-help { padding: 1.35rem; gap: 1rem; }
  .pdp-help i { font-size: 1.2rem; }
  .pdp-help h4 { font-size: 0.9rem; }
  .pdp-help p { font-size: 0.78rem; }
  .pdp-rating { flex-wrap: wrap; gap: 0.5rem 0.85rem; }
  .pdp-variant__btn { padding: 0.55rem 0.85rem; font-size: 0.84rem; }
}
@media (max-width: 560px) {
  .pdp-keyspecs { grid-template-columns: 1fr 1fr; }
  .pdp-keyspec { padding: 0.85rem 1rem; }
  .pdp-keyspec:nth-child(2) { border-right: 0; }
  .pdp-keyspec:nth-child(1), .pdp-keyspec:nth-child(2) { border-bottom: 1px solid var(--line-100); }
  .pdp-keyspec__value { font-size: 1.05rem; }
  .pdp-info__title { font-size: 1.35rem; }
  .pdp-price__current { font-size: 1.85rem; }
  .pdp-price__old { font-size: 0.95rem; }
  .pdp-price { padding: 1rem; gap: 0.65rem; }
  .pdp-price__row { gap: 0.5rem 0.7rem; }
  /* Stack qty under main button — full width add-to-cart on mobile */
  .pdp-buy__row { flex-wrap: wrap; gap: 0.6rem; --buy-h: 52px; }
  .pdp-buy__main { flex: 1 1 100%; padding: 0.95rem 1rem; order: 2; }
  .qty-stepper { order: 1; align-self: flex-start; }
  .pdp-buy__secondary { flex-direction: column; gap: 0.5rem; }
  .pdp-buy__secondary .btn { width: 100%; }
  .pdp-tabs__btn { padding: 0.85rem 1rem; font-size: 0.84rem; }
  .pdp-tabs__btn--active::after { left: 1rem; right: 1rem; }
  .pdp-section { padding: 1.75rem 0; }
  .pdp-section__head h2 { font-size: 1.25rem; }
  .pdp-specs__row { padding: 0.7rem 1rem; grid-template-columns: 1fr; gap: 0.15rem; }
  .pdp-specs__row dd { text-align: left; }
  .pdp-reviews__avg { font-size: 3rem; }
  .pdp-related .product-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}
@media (max-width: 380px) {
  .pdp-related .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pdp-sticky-bar { padding: 0.55rem 0.85rem; gap: 0.6rem; }
  .pdp-sticky-bar__photo { display: none; } /* save space on mobile */
  .pdp-sticky-bar__product { gap: 0.4rem; min-width: 0; flex: 1; }
  .pdp-sticky-bar__product > div { min-width: 0; flex: 1; }
  .pdp-sticky-bar__name {
    font-size: 0.78rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .pdp-sticky-bar__brand { font-size: 0.62rem; letter-spacing: 0.08em; }
  .pdp-sticky-bar__price { font-size: 0.95rem; flex-shrink: 0; }
  /* Hide secondary action, keep only the primary "Do koszyka" — and slim it */
  .pdp-sticky-bar__actions .btn:not(.btn--accent) { display: none; }
  .pdp-sticky-bar__actions .btn { padding: 0.65rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }
  .pdp-sticky-bar__actions .btn i { display: none; } /* icon-less label saves room */
}
@media (max-width: 380px) {
  .pdp-sticky-bar__price { display: none; } /* user sees price in main page; keep CTA */
}

/* ============================================================
   Cart / Checkout / Account / Auth
   ============================================================ */
@media (max-width: 980px) {
  .cart-summary, .checkout-summary { position: static; }
}
@media (max-width: 760px) {
  .cart-progress { overflow-x: auto; }
  .cart-progress__step { white-space: nowrap; padding: 0.7rem 0.5rem; font-size: 0.8rem; flex: 0 0 auto; min-width: 38%; }
  .cart-row { padding: 0.85rem; }
  .cart-row__photo { width: 80px; height: 80px; }
  .cart-row__name { font-size: 0.95rem; }
  .cart-row__qty { justify-self: start; margin-top: 0.5rem; }
  .cart-row__price { align-items: flex-start; min-width: 0; margin-top: 0.25rem; }
  .cart-row__remove { justify-self: end; margin-top: -1.5rem; }
}

@media (max-width: 760px) {
  .checkout-section__body { padding: 1rem; }
  .checkout-section__head { padding: 0.85rem 1rem; }
}

@media (max-width: 880px) {
  .auth__layout { gap: 0; }
  .auth-card { padding: 1.5rem 1.25rem; }
  .auth-card h2 { font-size: 1.4rem; }
  .auth-side { padding: 1.5rem 1.25rem; }
}

@media (max-width: 880px) {
  .account { gap: 1.25rem; padding: 1rem 0 2.5rem; }
  .account-side { position: static; }
  .account-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .account-nav__link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 0.8rem 1rem; }
  .account-nav__link--active { border-left: 0; border-bottom-color: var(--ember); background: transparent; }
  .account-nav__link--logout { border-top: 0; margin-top: 0; }
  .account-side__user { padding: 1rem; }
}
@media (max-width: 560px) {
  .account-greet h1 { font-size: 1.5rem; }
  .account-card__head { padding: 0.85rem 1rem; }
  .account-card__body { padding: 1rem; }
  .account-stat__num { font-size: 1.3rem; }
  .order-row { padding: 0.85rem 1rem; gap: 0.75rem; }
}

/* ============================================================
   Content pages (showroom, about, blog, services)
   ============================================================ */
@media (max-width: 760px) {
  .page-hero { padding: 2.5rem 0 2rem; }
  .page-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .page-hero__sub { font-size: 1rem; }

  .about-stat { padding: 1.25rem; }
  .about-stat__num { font-size: 2rem; }

  .info-list__row { grid-template-columns: 1fr; gap: 0.2rem; }

  .blog-feature__body { padding: 1.5rem 1.25rem; }
  .blog-feature__body h2 { font-size: 1.4rem; }

  .blog-post { padding: 2rem 0 3rem; }
  .blog-post h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .blog-post__lead { font-size: 1.05rem; }

  .service-hero__text { padding: 2.5rem 1.25rem; }
  .pricing-card { padding: 1.5rem 1.25rem; }
  .pricing-card__price { font-size: 2rem; }
  .process-step { padding: 1.25rem; }

  .proj-feature__body { padding: 1.75rem 1.25rem; }
  .proj-feature__body h2 { font-size: 1.35rem; }

  .brand-card { padding: 1.5rem 1.25rem; }
  .brand-card__logo { font-size: 1.3rem; height: 48px; }

  .brand-hero__text { padding: 2rem 1.25rem; }
  .brand-hero__logo { font-size: 1.8rem; }
  .brand-hero__meta { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

@media (max-width: 560px) {
  .status-page { padding: 3rem 0; }
  .status-page__num { font-size: 4rem; }
  .status-page h1 { font-size: 1.6rem; }
}

/* === Touch targets === */
@media (max-width: 980px) {
  .btn { padding: 0.85rem 1.25rem; }
  .btn--lg { padding: 1rem 1.5rem; }
  .btn--sm { padding: 0.6rem 0.9rem; }
}

/* Prevent horizontal overflow.
   `clip` — NOT `hidden`: overflow-x:hidden turns body into a scroll container,
   which silently kills position:sticky for everything inside it (the sticky
   header and .pdp-tabs both depend on this). `clip` clips without scrolling. */
html, body { overflow-x: clip; }

/* Force images / placeholders to not blow out */
img, svg, video { max-width: 100%; }

/* ===========================================================================
   Formularze na dotyku — zero auto-zoomu w Safari na iOS
   ---------------------------------------------------------------------------
   Safari na iPhonie/iPadzie przybliża całą stronę w momencie wejścia w pole,
   którego font-size jest mniejszy niż 16px, i po wyjściu z pola już jej nie
   oddala. Efekt jest wyłącznie Safari'owy i niczego nie wnosi, więc wymuszamy
   16px na każdej kontrolce tekstowej.

   Warunek to `pointer: coarse` (dowolne urządzenie dotykowe, także iPad
   w poziomie, gdzie viewport ma ponad 1000px) LUB wąski ekran. Desktop zostaje
   przy swojej typografii formularzy — tam zoom nie występuje.

   `!important`, bo praktycznie każdy formularz w motywie (contact-form,
   lock-modal, comment-form, blog-search, newsletter, WooCommerce) ustawia
   własny, mniejszy rozmiar bardziej szczegółowym selektorem.
   =========================================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Formularz komentarzy — jak .contact-form, jedno pole pod drugim na mobile.
   (Sam .contact-form ma swój breakpoint w content-v2.css.) */
@media (max-width: 660px) {
  .comment-form { grid-template-columns: 1fr; }
}