/* ============ B4: strona główna Vianek (tylko .home) ============
   Jeden rytm odstępów między sekcjami (--vgap), jedna skala nagłówków sekcji, zwarte kafle kategorii,
   pasek korzyści pod hero, wyrównane karty serii, stała skala zdjęć w kafelkach półek, pauza hero. */

.home { --vgap: clamp(48px, 5.6vw, 88px); }

/* --- rytm: każda sekcja zaczyna się --vgap pod poprzednią; bloki z tłem (potrzeby, historia, newsletter) stykają się z nim --- */
.home .vn-series { padding-top: var(--vgap); }
.home .shelf { padding-top: var(--vgap); }
.home .vn-needs { margin-top: var(--vgap); }
.home .vn-needs + .shelf { padding-top: var(--vgap); }
.home .shelf + .brands { margin-top: clamp(24px, 2.6vw, 40px); }
.home .cats { padding-top: var(--vgap); }
.home .story { margin-top: var(--vgap); }
.home .reviews { padding: var(--vgap) 0 var(--vgap); }
.home .insta { padding-top: var(--vgap); }
.home .story + .news, .home .reviews + .news { margin-top: 0; }

/* --- jedna skala nagłówków sekcji (jak tytuły półek), zwarte odstępy pod nimi --- */
.home .section-title h2, .home .shelf-title { font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; }
.home .section-title { align-items: flex-end; margin-bottom: clamp(20px, 2.2vw, 32px); }
.home .vn-series .section-title { margin-bottom: clamp(20px, 2.2vw, 32px); }
.home .story h2 { font-size: clamp(2.3rem, 3.8vw, 4rem); line-height: 1.04; }

/* --- pasek korzyści pod hero (prawdziwe dane: próg z Flexible Shipping, płatności, zwroty) --- */
.vn-perks { background: var(--soft, #efebe4); border-bottom: 1px solid var(--line); }
.vn-perks ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vn-perks li + li { border-left: 1px solid var(--line); }
.vn-perks a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px clamp(12px, 1.6vw, 28px); color: inherit; text-decoration: none; transition: background .2s; }
.vn-perks li:first-child a { padding-left: 0; }
.vn-perks a:hover { background: rgba(255, 255, 255, .5); }
.vn-perks svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.vn-perks span { display: grid; gap: 2px; min-width: 0; }
.vn-perks b { font-weight: 500; font-size: .9375rem; line-height: 1.25; }
.vn-perks small { font-size: .8125rem; line-height: 1.3; color: var(--muted); }

/* --- serie Vianek: równe karty, opis do 3 linii, liczba produktów zawsze na dole w jednej linii --- */
.home .vs-card { height: 100%; }
.home .vs-body { flex: 1; }
.home .vs-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.home .vs-body .link { margin-top: auto; padding-top: 6px; }
.home .vs-grid > li { display: flex; }
.home .vs-grid > li > .vs-card { flex: 1; }

/* --- kafelki półek i opinii: zdjęcie zawsze w tym samym kadrze (nieregularne źródła nie wydłużają kafelka) --- */
.home .shelf .tp-media img { position: absolute; inset: 0; }
.home .shelf .tp-media { min-height: 0; }
/* długi zapis pojemności (np. zestaw „2x290ml, 500ml, …”, nowrap) nie może poszerzać kafelka ponad 50vw / szerokość slajdu */
.home .shelf .slider > li, .home .shelf .ptile, .home .shelf .tp-body { min-width: 0; }
.home .shelf .tp-name small { white-space: normal; }

/* --- opinie: tekst zawsze od góry karty, autor i produkt na dole; nazwa produktu w 2 liniach zamiast ucięcia w połowie słowa --- */
.home .rv-body { justify-content: flex-start; }
.home .rv-by { margin-top: auto; padding-top: 4px; }
.home .rv-prod { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* --- kafle kategorii zwarte także na desktopie (było ~1650 px) --- */
.home .cat { height: clamp(420px, 60vh, 600px); }
.home .cat-grid-4 .cat { height: clamp(320px, 42vh, 460px); }

/* --- hero: pauza zmiany banerów (WCAG 2.2.2), w kolumnie pod numerami --- */
.vn-hero-pause { position: absolute; z-index: 5; right: var(--pad); top: calc(var(--hh) + 20px + 3 * 44px + 3 * 12px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(8, 8, 8, .18); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vn-hero-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vn-hero-pause .ic-play { display: none; fill: currentColor; stroke: none; }
.vn-hero-pause[aria-pressed="true"] .ic-pause { display: none; }
.vn-hero-pause[aria-pressed="true"] .ic-play { display: block; }
.vn-hero-pause:hover { background: rgba(8, 8, 8, .32); }
/* H01c: ten sam cienki pierścień co kółka 1-3 (style.css .hero-dots .bar), w obu stanach */
.vn-hero-pause::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .4); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1.8px), #000 calc(100% - .7px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1.8px), #000 calc(100% - .7px), transparent 100%); pointer-events: none; }
.vn-hero-pause svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
html:not(.js) .vn-hero-pause { display: none; }
.hero.vn-hold .hero-dots .is-on .bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .vn-hero-pause { display: none; } }

@media (max-width: 1020px) {
  .vn-perks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-perks li:nth-child(3) { border-left: 0; }
  .vn-perks li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vn-perks li:nth-child(3) a { padding-left: 0; }
  .vn-hero-pause { top: calc(var(--hh) + 14px + 3 * 40px + 3 * 10px); width: 40px; height: 40px; }
}

@media (max-width: 760px) {
  .home { --vgap: 44px; }
  .home .cats { padding-top: var(--vgap); }
  .home .cat, .home .cat-grid-4 .cat { height: auto; }
  .home .section-title { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .home .section-title h2, .home .shelf-title { font-size: 1.75rem; }
  .home .section-title .link { flex: none; }
  .vn-perks a { gap: 10px; padding: 12px 10px; }
  .vn-perks svg { width: 22px; height: 22px; }
  .vn-perks b { font-size: .8125rem; }
  .vn-perks small { font-size: .71875rem; }
  .home .vn-needs-col ul { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .home .vs-lead { display: none; }
  /* opinie na telefonie: przewijanie palcem z przyciąganiem do karty (pas w ruchu ucinał tekst w połowie słowa) */
  .home .rv-marquee { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .home .rv-marquee::-webkit-scrollbar { display: none; }
  .home .rv-track { animation: none; padding-left: var(--pad); }
  .home .rv-track ul[aria-hidden="true"] { display: none; }
  .home .rv-track li { scroll-snap-align: start; }
  /* historia marki: zdjęcie niższe, cała sekcja mieści się na jednym ekranie */
  .home .story-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .home .story-text { padding: 32px var(--pad) 36px; }
  .home .story-in { gap: 1rem; }
  .home .story h2 { font-size: 2.1rem; }
  .home .story-p { font-size: 1rem; }
  .home .news { padding: 56px var(--pad); }
}