/* =========================================================================
   ZTE G5 Ultra 5G — LP kampanii B2S/B2U
   Mobile first (393 px, 1:1 z Figmą) + pełne RWD do 1180 px
   ========================================================================= */

/* --- fonty ------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- tokeny (Figma: variables) ----------------------------------------- */
:root {
  --color-text: #111111;
  --color-blue: #00bffe;
  --color-white: #ffffff;
  --color-neutral: #f5f5f5;
  --color-dark: #000000;
  --color-paper: #f2f2f2;
  --color-grid: rgba(0, 155, 251, 0.15);

  --radius: 10px;
  --radius-btn: 16px;
  --radius-card: 16px;

  --space-none: 0px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --maxw: 1180px;

  --font-main: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-kv: "Inter", system-ui, -apple-system, sans-serif;

  --fs-headline: 28px;
  --lh-headline: 34px;
  --fs-body: 14px;
  --lh-body: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-neutral);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--color-white);
  overflow: hidden;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   HERO / KV — skalowany jednostkami kontenera (1 cqw = 1 % szerokości hero)
   Proporcje 1:1 z Figmą: ramka 393 × 664
   ========================================================================= */
.hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 393 / 664;
  background: var(--color-paper);
  overflow: hidden;
  isolation: isolate;
}

/* kratka zeszytu (Figma: grupa „kratka”, #009bfb @ 15 %, linia 2.023 px,
   pion co 30.905 px od x = 12.59, poziom co 31.065 px od y = -0.35) */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right,  var(--color-grid) 0 0.5148cqw, transparent 0.5148cqw),
    linear-gradient(to bottom, var(--color-grid) 0 0.5148cqw, transparent 0.5148cqw);
  background-size: 7.8639cqw 100%, 100% 7.9046cqw;
  background-position: 3.2036cqw 0, 0 -0.369cqw;
  background-repeat: repeat, repeat;
}
/* spirala grzbietu — kafelek 3 oczek, powtarzany w poziomie */
.hero__spiral {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8.14cqw;           /* 32 / 393 */
  z-index: 1;
  background: url("images/hero-spiral.webp") repeat-x left top;
  background-size: auto 100%;
}
/* miękka poświata pod routerem (Figma: Ellipse 2, blur 250) */
.hero__glow {
  position: absolute;
  left: -30cqw;
  top: 35.4%;
  width: 100cqw;
  height: 45%;
  z-index: 0;
  background: radial-gradient(closest-side ellipse, rgba(75, 77, 84, 0.20), rgba(75, 77, 84, 0) 100%);
}

.hero__logo {
  position: absolute;
  left: 7.478cqw;            /* 29.39 / 393 */
  top: 9.241%;               /* 61.36 / 664 */
  width: 21.357cqw;          /* 83.93 / 393 */
  height: auto;
  z-index: 3;
}

.hero__badges {
  position: absolute;
  left: 7.379cqw;            /* 29 / 393 */
  top: 22.892%;              /* 152 / 664 */
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 6.6cqw;
}
.hero__badges img { width: auto; }
.hero__badge--5g    { height: 9.16cqw; }   /* 36 / 393 */
.hero__badge--sim   { height: 9.16cqw; }
.hero__badge--wifi7 {                      /* 73.566 × 33.647, dosunięty niżej i bliżej */
  height: 8.56cqw;
  margin-left: -2.995cqw;
  margin-bottom: -0.756cqw;
}

.hero__eyebrow {
  position: absolute;
  left: 7.478cqw;
  top: 31.531%;              /* 209.37 / 664 */
  z-index: 3;
  font-family: var(--font-kv);
  font-weight: 600;
  font-size: 5.985cqw;       /* 23.521 / 393 */
  line-height: 1.15;
  white-space: nowrap;
}
.hero__title {
  position: absolute;
  left: 7.478cqw;
  top: 35.819%;              /* 237.84 / 664 */
  z-index: 3;
  font-family: var(--font-kv);
  font-weight: 700;
  font-size: 9.289cqw;       /* 36.504 / 393 */
  line-height: 1.15;
  white-space: nowrap;
}
.hero__mark {
  position: absolute;
  left: 65.891cqw;           /* 258.95 / 393 */
  top: 31.983%;              /* 212.37 / 664 */
  width: 27.163cqw;          /* 106.75 / 393 */
  height: auto;
  z-index: 4;
}
.hero__arrow {
  position: absolute;
  left: 39.440cqw;           /* 155 / 393 */
  top: 44.116%;              /* 292.93 / 664 */
  width: 24.173cqw;          /* 94.998 / 393 */
  height: auto;
  z-index: 3;
}
/* wariant desktopowy strzałki (w prawo, do routera) — patrz breakpoint 768 px */
.hero__arrow-d { display: none; }
.hero__router {
  position: absolute;
  left: -3.481cqw;           /* -13.68 / 393 */
  top: 46.087%;              /* 306.02 / 664 */
  width: 48.337cqw;          /* 189.966 / 393 */
  height: auto;
  z-index: 2;
  filter: drop-shadow(7px -1px 3px rgba(0, 0, 0, 0.25));
}
/* Group40 — odręczna pieczątka „OFERTA specjalna* U PARTNERÓW HANDLOWYCH” */
.kv-offer > * {
  position: absolute;
  z-index: 3;
  font-family: var(--font-kv);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) rotate(2deg);
}
.kv-offer__top {
  left: 63.832cqw;           /* 250.86 / 393 */
  top: 51.657%;              /* 343 / 664 */
  font-size: 4.580cqw;       /* 18 / 393 */
  line-height: 6.269cqw;     /* 24.639 / 393 */
}
.kv-offer__hand {
  left: 47.519cqw;           /* 186.75 / 393 */
  top: 54.857%;              /* 364.25 / 664 */
  width: 35.050cqw;          /* 137.75 / 393 */
  height: auto;
  transform: none;
}
.kv-offer__l1,
.kv-offer__l2 {
  font-size: 2.545cqw;       /* 10 / 393 */
  line-height: 3.753cqw;     /* 14.75 / 393 */
}
.kv-offer__l1 { left: 62.957cqw; top: 59.834%; }  /* 247.42 / 397.3 */
.kv-offer__l2 { left: 62.507cqw; top: 61.881%; }  /* 245.65 / 410.89 */

.hero__claim {
  position: absolute;
  left: 67.524cqw;           /* 265.37 / 393 */
  top: 70.592%;              /* 468.73 / 664 */
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-kv);
  font-weight: 500;
  font-size: 4.580cqw;       /* 18 / 393 */
  line-height: 1.21;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
.hero__underline {
  position: absolute;
  left: 39.305cqw;           /* 154.47 / 393 */
  top: 81.146%;              /* 538.81 / 664 */
  width: 56.439cqw;          /* 221.805 / 393 */
  height: auto;
  z-index: 3;
}
.hero__note {
  position: absolute;
  left: 8.046cqw;            /* 31.62 / 393 */
  top: 91.717%;              /* 609 / 664 */
  width: 89.328cqw;          /* 351.061 / 393 */
  z-index: 3;
  font-size: 2.290cqw;       /* 9 / 393 */
  line-height: 1.32;
  letter-spacing: 0.04em;
}

/* =========================================================================
   SEKCJE
   ========================================================================= */
.section { width: 100%; }
.section--white   { background: var(--color-white);   color: var(--color-text); }
.section--blue    { background: var(--color-blue);    color: var(--color-text); }
.section--neutral { background: var(--color-neutral); color: var(--color-text); }
.section--dark    { background: var(--color-dark);    color: var(--color-white); }

.wrap {
  display: flex;
  flex-direction: column;
}

.col--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  text-align: center;
}
.col--text--start {
  align-items: flex-start;
  text-align: left;
}

.headline {
  font-weight: 600;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: 0;
  width: 100%;
}
.body {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  width: 100%;
}
.body p + p { margin-top: var(--lh-body); }

.bullets {
  list-style: none;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  width: 100%;
}
.bullets li { padding-left: 12px; position: relative; }
.bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* --- blok wizualny ------------------------------------------------------ */
.col--visual {
  display: flex;
  flex-direction: column;
  height: 500px;
  padding: var(--space-none) var(--space-md) var(--space-md);
}
.media {
  flex: 1 0 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.media img,
.media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* render produktu nigdy nie jest kadrowany; padding odwzorowuje skalę z Figmy
   i dosuwa router do listy cech (cały luz zostaje pod spodem) */
.media--contain img { object-fit: contain; padding: 0 0 6%; }
.section--product .col--text { padding-bottom: var(--space-lg); }

/* kadrowanie zdjęć zgodne z Figmą (przesunięcie ramki w oryginale) */
.media--pokoj img { object-position: 23% center; }
.media--siec  img { object-position: 13% center; }

/* wariant bez zaokrągleń i o stałych proporcjach (sekcja „Karta SIM”) */
.col--visual--flat {
  height: auto;
  aspect-ratio: 393 / 240;
}
.col--visual--flat .media { border-radius: 0; }

.media video { background: #000; }

/* --- logotypy sklepów: kafle-guziki (konwencja z LP 5g) ---------------- */
.shops-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-none) var(--space-md) var(--space-md);
}
.shops {
  --ls: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 8px 5px 30px;
}
/* w sekcjach z logotypami nagłówek stoi bliżej siatki logotypów */
.section--shops .col--text { padding-bottom: var(--space-lg); }

.shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 60px;
  min-width: 104px;
  padding: 0 20px;
  background: var(--color-white);
  border: 1px solid #e8eaee;
  border-radius: var(--radius-btn);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    box-shadow .5s cubic-bezier(.16, 1, .3, 1),
    border-color .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.shop:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 18px 40px -12px rgba(17, 17, 17, 0.18), 0 6px 14px -8px rgba(17, 17, 17, 0.10);
  border-color: #dfe2e8;
}
.shop:active {
  transform: translateY(-2px) scale(1.01);
  transition-duration: .18s;
}
.shop:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 4px; }

.shop img {
  display: block;
  width: auto;
  height: calc(var(--lh, 26px) * var(--ls));
  max-width: 100%;
  object-fit: contain;
}

.shop--mediaexpert { --lh: 22px; }
.shop--komputronik { --lh: 34px; }
.shop--xkom        { --lh: 22px; }
.shop--zteshop     { --lh: 28px; }
.shop--sferis      { --lh: 30px; }
.shop--morele      { --lh: 18px; }
.shop--duxo        { --lh: 26px; }

/* --- tabela specyfikacji ------------------------------------------------ */
.spec {
  padding: 21px;
  background: var(--color-neutral);
}
.spec__card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: 20px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 18px 44px -30px rgba(17, 17, 17, 0.35);
}
.spec__head {
  background: var(--color-blue);
  color: var(--color-text);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.023em;
  text-transform: uppercase;
  padding: 14px 16px;
}
.spec__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e8;
  background: var(--color-white);
}
.spec__row:nth-child(even) { background: #f9f9fb; }
.spec__row dt {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
}
.spec__row dd {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.spec__note {
  padding: 16px 16px 0;
  color: #6b6b70;
  font-size: 11px;
  line-height: 16px;
}

/* --- stopka prawna ------------------------------------------------------ */
.legal .body p + p { margin-top: var(--lh-body); }
.legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
  padding-top: 16px;
  padding-bottom: 44px;   /* miejsce na pływający przycisk cookie */
}
.legal__links a { text-decoration: underline; text-underline-offset: 3px; }
.legal__links a:hover { color: #0079a8; }

/* =========================================================================
   RWD — tablet
   ========================================================================= */
@media (min-width: 601px) {
  :root {
    --fs-headline: 32px;
    --lh-headline: 39px;
    --fs-body: 16px;
    --lh-body: 22px;
  }
  .col--text { padding: 56px var(--space-2xl); max-width: 720px; margin: 0 auto; width: 100%; }
  .col--visual { height: 560px; padding: 0 var(--space-lg) var(--space-lg); }

  .shops {
    --ls: 1.55;
    gap: 18px;
    max-width: 780px;
    margin: 0 auto;
  }
  .shop {
    height: 94px;
    min-width: 0;
    flex: 0 0 calc((100% - 2 * 18px) / 3);
    border-radius: 20px;
  }
}

/* =========================================================================
   RWD — hero poziomy wg KV v5b z Figmy (ramka 1920 × 1080, node 3003:1021)
   Wszystkie wartości przeliczone 1:1 z projektu; minimalne rozmiary pisma
   chronią czytelność przy 768 px
   ========================================================================= */
@media (min-width: 768px) {
  .hero {
    aspect-ratio: 1920 / 1080;
    background: #f1f1f1;
  }

  /* grzbiet spirali przy lewej krawędzi, dokładny wycinek zdjęcia z Figmy */
  .hero__spiral {
    left: 0; top: 0; bottom: 0;
    right: auto;
    width: 3.75cqw;                    /* 72 / 1920 */
    height: auto;
    background: url("images/hero-spiral-v.webp") no-repeat left top;
    background-size: 100% 100%;
  }

  /* kratka: pion co 46.83 px od x = 153.92, poziom co 47.07 px od y = -1.53,
     linia 3.065 px; poziome linie zaczynają się dopiero za spiralą (x = 65.9) */
  .hero__grid {
    left: 3.432cqw; right: 0; top: 0; bottom: 0;
    background-image:
      linear-gradient(to right,  var(--color-grid) 0 0.1596cqw, transparent 0.1596cqw),
      linear-gradient(to bottom, var(--color-grid) 0 0.1596cqw, transparent 0.1596cqw);
    background-size: 2.4391cqw 100%, 100% 2.4516cqw;
    background-position: 4.584cqw 0, 0 -0.0797cqw;
  }

  /* poświata pod routerem (Figma: Ellipse 1, blur 450) */
  .hero__glow {
    left: 50cqw; top: -8%;
    width: 62cqw; height: 116%;
  }

  .hero__logo { left: 10.978cqw; top: 7.000%; width: 9.094cqw; }

  .hero__badges { left: 11.5625cqw; top: 43.056%; gap: 3.75cqw; }
  .hero__badge--5g    { height: 5.469cqw; }
  .hero__badge--sim   { height: 5.417cqw; }
  .hero__badge--wifi7 { height: 5.044cqw; margin-left: -1.5625cqw; margin-bottom: -0.4375cqw; }

  .hero__eyebrow { left: 11.538cqw; top: 57.585%; font-size: max(21px, 2.7917cqw); }
  .hero__title   { left: 11.538cqw; top: 65.212%; font-size: max(44px, 5.7292cqw); }
  .hero__mark    { left: 47.568cqw; top: 57.648%; width: 16.745cqw; }
  .hero__router  { left: 65.188cqw; top: 10.033%; width: 32.448cqw;
                   filter: drop-shadow(23px -2px 10px rgba(0, 0, 0, 0.25)); }

  /* strzałka: na mobile w lewo (webp), tutaj w prawo do routera (inline SVG) */
  .hero__arrow { display: none; }
  .hero__arrow-d {
    display: block;
    position: absolute;
    left: 58.127cqw;                   /* 1116.04 / 1920 */
    top: 7.938%;                       /* 85.73 / 1080 */
    width: 13.696cqw;                  /* 262.97 / 1920 */
    height: 19.817%;                   /* 214.026 / 1080 */
    z-index: 3;
  }

  /* pieczątka „OFERTA specjalna* U PARTNERÓW HANDLOWYCH” */
  .kv-offer__top  { left: 51.351cqw; top: 19.263%; font-size: max(22px, 2.9167cqw); line-height: 3.9648cqw; }
  .kv-offer__hand { left: 41.898cqw; top: 25.710%; width: 20.552cqw; }
  .kv-offer__l1,
  .kv-offer__l2   { font-size: max(10px, 1.3542cqw); line-height: 2.0154cqw; transform: translateX(-50%) rotate(2.15deg); }
  .kv-offer__l1   { left: 50.974cqw; top: 34.470%; }
  .kv-offer__l2   { left: 50.841cqw; top: 37.619%; }

  /* claim w jednej linii, wyrównany do lewej */
  .hero__claim {
    left: 11.5625cqw; top: 84.281%;
    transform: none;
    text-align: left;
    font-size: max(16px, 2.0833cqw);
    letter-spacing: 0.07em;
    line-height: 1.1;
  }
  .hero__claim br { display: none; }

  .hero__underline { left: 42.963cqw; top: 89.181%; width: 25.154cqw; }

  /* przypis w prawym górnym rogu */
  .hero__note {
    left: auto; right: 1.424cqw;
    top: 3.325%;
    width: 30cqw;
    text-align: right;
    font-family: var(--font-kv);
    font-weight: 500;
    font-size: max(9px, 0.9375cqw);
    line-height: 1.28;
    letter-spacing: 0;
  }
}

/* =========================================================================
   RWD — desktop: sekcje 50/50
   ========================================================================= */
@media (min-width: 821px) {
  :root {
    --fs-headline: 40px;
    --lh-headline: 48px;
    --fs-body: 17px;
    --lh-body: 26px;
  }

  /* --- sekcje 50/50 ---------------------------------------------------- */
  .section--split .wrap {
    flex-direction: row;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .section--split.section--reverse .wrap { flex-direction: row-reverse; }

  .section--split .col--text {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    align-items: flex-start;
    text-align: left;
    padding: 64px;
    margin: 0;
  }
  .section--split .col--visual {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    padding: 40px 64px 40px 0;
  }
  .section--split.section--reverse .col--visual { padding: 40px 0 40px 64px; }

  .section--split .col--visual--flat {
    aspect-ratio: auto;
    align-self: center;
  }
  .section--split .col--visual--flat .media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 361 / 224;
    border-radius: var(--radius);
  }

  /* sekcja produktowa: render routera bez kadrowania */
  .section--product .col--visual { aspect-ratio: 1 / 1; padding: 48px 64px 48px 0; }
  .section--product .media { background: transparent; }
  /* w układzie 50/50 kolumny są wyśrodkowane, więc render wraca na środek ramki */
  .section--product .media img { object-fit: contain; padding: 5% 0; }

  /* sekcje wyśrodkowane */
  .section--center .col--text { max-width: 860px; padding: 72px var(--space-2xl) var(--space-2xl); }
  .col--visual { height: auto; aspect-ratio: 16 / 9; padding: 0 var(--space-xl) var(--space-xl); max-width: var(--maxw); margin: 0 auto; width: 100%; }

  .shops-wrap { padding: 0 var(--space-xl) var(--space-xl); }
  .shops { padding: 10px 0 30px; }

  .spec { padding: 0 var(--space-xl) 64px; }
  .spec__card { padding-bottom: 24px; }
  .spec__head { font-size: 15px; line-height: 22px; padding: 18px 28px; }
  .spec__row {
    flex-direction: row;
    align-items: baseline;
    gap: 24px;
    padding: 16px 28px;
  }
  .spec__row dt { flex: 0 0 34%; font-size: 14px; line-height: 22px; }
  .spec__row dd { flex: 1 1 0; font-size: 15px; line-height: 23px; }
  .spec__note { padding: 20px 28px 0; font-size: 12px; line-height: 18px; }

  .legal .col--text { max-width: 1000px; padding: 64px 48px; }

  /* na desktopie zdanie o dostępności idzie do nowej linii */
  .line-desktop { display: block; }
}

/* =========================================================================
   RWD — wąskie telefony
   ========================================================================= */
/* poniżej szerokości projektowej (393 px) skalujemy logotypy, żeby para
   RTV EURO AGD + Senetic nadal mieściła się w jednym wierszu */
@media (max-width: 392px) {
  .shops { gap: 10px; }
  .shop { padding: 0 16px; }
}
@media (max-width: 344px) {
  .shops { gap: 8px; }
  .shop { padding: 0 12px; min-width: 92px; }
  .col--text { padding: 36px var(--space-lg); }
  .col--visual { height: 420px; }
}

/* =========================================================================
   Dostępność
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shop { transition: none; }
  .shop:hover { transform: none; }
}