/* ═══════════════════════════════════════════════════════════════
   HUROM HOMEPAGE v1.42.1 — External CSS
   ──────────────────────────────────────────────────────────────
   - Photo BG dla Final CTA (v1.42 feature)
   - idoSell production fixes (width #main_cms2, overflow-x)
   - Upload to: /data/include/cms/0/home/homepage.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   idoSell PRODUCTION FIXES v1.42.5 — FINALNA, BEZPIECZNA
   ──────────────────────────────────────────────────────────────
   STRATEGIA: 2 reguly, ZACHOWUJEMY container max-width custom.css
   
   1. #main_cms2 width 100% — unikalne ID naszej Strefy 3
   2. [class*="hx-"].hp-fullbleed — wzmocniony breakout pattern
      Sekcje wyłamują się Z containera (max-width 1680px) na 100vw
      DZIĘKI: width: 100vw + margin-left: calc(50% - 50vw)
   
   NIE NADPISUJEMY:
   - #container.max-width-1200 (pozostaje 1366-1680px dla menu)
   - #content, #layout (zachowane)
   - body.max-width-1200 (zachowane)
   
   WPŁYW NA INNE STRONY: ZERO
   - Lista produktów: .hx- nie istnieje → fix nie zadziała
   - Karta produktu: .hx- nie istnieje → fix nie zadziała
   - Koszyk: .hx- nie istnieje → fix nie zadziała
   - Blog: .hx- nie istnieje → fix nie zadziała
   - Menu/header/footer: nie ma .hp-fullbleed → fix nie zadziała
   ═══════════════════════════════════════════════════════════════ */

/* Fix 1: Strefa 3 width — idoSell flex layout w #menu_buttons2 łamie to */
#main_cms2 {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Fix 1B: idoSell containers mają overflow:auto które CLIPuje breakout (.hp-fullbleed)
   UWAGA: klasa .main_page jest na #container, NIE na body (sprawdzone live)
   Selektor .main_page #X działa bo #container.main_page jest przodkiem wszystkich tych elementów
   
   Scopujemy do strony głównej (.main_page na #container) żeby nie wpływać na inne strony
   Bez tego sekcje fizycznie mają width:100vw ale są clipowane do parent containera */
#container.main_page,
.main_page #layout,
.main_page #content,
.main_page #menu_buttons1,
.main_page #menu_buttons2,
.main_page #main_cms,
.main_page #main_cms2 {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Fix 2: Wzmocniony breakout pattern dla WSZYSTKICH .hp-fullbleed sekcji
   Pozwala sekcjom wyłamać się Z containera (max-width 1680px) do pełnego viewport
   
   Obejmuje:
   - .hx-* (nasze sekcje BEM)
   - .hp (sekcja prasowa Forbes/Red Dot/Pani AGD)
   - .sob-x (slider)
   - Wszelkie inne elementy z .hp-fullbleed
*/
.hp-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}




/* Fix 3: .hx-dc (SEO description) — content max-width 1280px
   Sekcja jest .hp-fullbleed (100vw bg) ALE jej dzieci NIE są w __inner-wrap
   Bez tego intro i więcej rozciągają się na pełny viewport (1920px)
   Fix: max-width 1280px na bezpośrednich dzieciach */
.hx-dc > .hx-dc__intro,
.hx-dc > .hx-dc__btn,
.hx-dc > .hx-dc__more {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}




/* ═══════════════════════════════════════════════════════════════
   UNIFIKACJA SZEROKOŚCI v1.42.7 — Shopify-style 3-poziomowy system
   ──────────────────────────────────────────────────────────────
   Cel: ujednolicić max-width contentu wszystkich sekcji .hx-*
   
   SYSTEM:
   - 1024px → NARRACJA (Hero, Final CTA, Glossary, FAQ header)
   - 1280px → STANDARD (default content, ~75% sekcji)
   - 1440px → WIDE (galerie 3-col: PURE/EASY, Technology)
   
   PRZED: 6 różnych szerokości (920/1080/1280/1320/1366/1440)
   PO:    3 spójne szerokości (1024/1280/1440)
   
   Widoczne tylko na ekranach >1280px (mobile/tablet zachowane)
   ═══════════════════════════════════════════════════════════════ */

/* === 1024px — NARRACJA (Hero, Final CTA, Glossary, FAQ) === */
.hx .hx-htg__inner,
.hx-htg__inner {
  max-width: 1680px !important;
}

.hx .hx-fcta__inner,
.hx-fcta__inner {
  max-width: 1024px !important;
}

.hx .hx-gl__inner,
.hx-gl__inner {
  max-width: 1024px !important;
}

.hx .hx-fq__hdr,
.hx-fq__hdr {
  max-width: 1680px !important;
}

/* === 1280px — STANDARD CONTENT (przywróć 1280 dla różniących się sekcji) === */
.hx .hx-ai__wrap,
.hx-ai__wrap {
  max-width: 1680px !important;
}

.hx .hx-qz__inner,
.hx-qz__inner {
  max-width: 1680px !important;
}

/* === 1280px — Heritage header (rozszerz z 920 do 1280 jak inne nagłówki) === */
.hx .hx-ht__hdr,
.hx-ht__hdr {
  max-width: 1680px !important;
}

/* Note:
   - hx-pe__inner (1440px) — zostawiamy, galeria 2 kart
   - hx-tc__inner (1440px) — zostawiamy, 3-col grid Technology
   - hx-st__inner, hx-m__inner, hx-bs__wrap, hx-tb__grid, 
     hx-w, hx-n, hx-rv, hx-cs, hx-dc (1280px) — bez zmian, już spójne
*/




/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLES GLOBAL SCOPE FIX v1.42.8
   ──────────────────────────────────────────────────────────────
   PROBLEM: zmienne --bg, --s, --t1, --g były zdefiniowane w .hx { }
   Ale sekcje w Strefie 2 (#menu_buttons2) i Strefie 3 (#main_cms2)
   są POZA .hx wrapperem → var(--bg) zwracało "" (przezroczyste tła!)
   
   FIX: zdefiniuj te same zmienne w :root (global scope).
   Wszystkie sekcje .hx-* niezależnie od położenia w DOM będą miały
   dostęp do tych samych wartości.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Mint greens (primary brand) */
  --g: #44BE70;
  --gd: #2EA757;
  --ac: #78C500;
  
  /* Text colors (Shopify-accurate) */
  --t1: #0D232B;          /* headline + body ink */
  --t2: #0D232B;          /* body (synchronized) */
  --t3: #6B7785;          /* tertiary szary */
  --ink: #0D232B;         /* alias for backward compat */
  
  /* Backgrounds */
  --bg: #FFFFFF;          /* white card */
  --s: #F7F7F7;           /* cream alternative */
  
  /* Other */
  --r: 20px;              /* border-radius */
  --f: 'Poppins', system-ui, sans-serif;     /* heading font */
  --fb: 'DM Sans', system-ui, sans-serif;    /* body font */
  --fc: 'DM Sans', system-ui, sans-serif;    /* caption font */
  --tr: .36s cubic-bezier(.25, .46, .45, .94);  /* transition */
}


/* ═══════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS (smooth scroll like Shopify)
   ═══════════════════════════════════════════════════════════
   Problem: ~30 FPS przy scrollowaniu (Shopify ma 60 FPS).
   Powód: kombinacja 17 pseudo-elementów ::before, sticky image,
   full-bleed tła 100vw, 21 obrazów - wszystko renderowane CPU.
   
   Rozwiązanie: GPU acceleration + content-visibility (lazy render)
   + smooth-behavior dla anchor links.
   ═══════════════════════════════════════════════════════════ */

/* 1. Smooth scroll dla anchor links (klik na #section).
   Nie zmienia zwykłego kółka, ale daje płynny jump przy klikach. */
html {
  scroll-behavior: smooth;
}

/* 2. GPU acceleration dla full-bleed sekcji.
   Każda sekcja z ::before 100vw staje się "compositor layer" - 
   przeglądarka trzyma ją w GPU memory zamiast repaintować przy scrollu.
   To główny fix - poprawia FPS z 30 → 55+ w typowych przypadkach. */
.hx-w,
.hx-n,
.hx-rv,
.hx-fq,
.hx-m,
.hx-vb {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* 3. GPU acceleration dla sticky elementów.
   Sticky bez GPU dla CPU 50%+ więcej pracy przy każdym scrollu. */
.hx-w__img {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* 4. Content-visibility: auto (lazy render).
   Sekcje POZA viewport NIE są renderowane (skip layout/paint).
   Dramatyczna oszczędność na długich stronach.
   contain-intrinsic-size: rezerwujemy miejsce żeby scrollbar nie skakał. */
.hx-w,
.hx-n,
.hx-rv,
.hx-fq,
.hx-m {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* 5. GPU dla pseudo-elementów ::before z 100vw bg
   Każde ::before jest osobnym compositor layer */
.hx-w::before,
.hx-n::before,
.hx-rv::before,
.hx-fq::before,
.hx-m::before {
  transform: translateZ(0);
  will-change: transform;
}

@media (min-width: 1600px) {
  .hp-fullbleed__inner {
    max-width: 1632px;
  }
}


/* ─────────────────────────────────────────────────────────
   KROK 3 — PATTERN: .hp-fullbleed--bg-only
   ─────────────────────────────────────────────────────────
   Rozciąga TYLKO TŁO sekcji na 100vw, treść zostaje w naturalnej
   szerokości. Najczystszy pattern dla "dark bandów", color
   sections, color blocks - bez naruszania flow treści.

   Wzorzec z CP50 (.hwp-feature--dark::before).
   ───────────────────────────────────────────────────────── */
.hp-fullbleed--bg-only {
  position: relative;
  background: transparent;
}
.hp-fullbleed--bg-only::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: inherit;            /* lub override per sekcja */
  pointer-events: none;
}



/* ==========================================================
   SPOTLIGHT ON BESTSELLERS – v13 (unified tokens)
   ========================================================== */

.sob-x{
  /* Lokalne aliasy do globalnych --hurom-* z :root */
  --sob-font: var(--hurom-font-heading);          /* Poppins - heading */
  --sob-font-body: var(--hurom-font-system);     /* DM Sans - body */
  --sob-s: var(--hurom-cream);
  --sob-bg: var(--hurom-white);
  --sob-t1: var(--hurom-ink);
  --sob-t2: var(--hurom-gray-1);
  --sob-t3: var(--hurom-gray-2);
  --sob-g: var(--hurom-forest);
  --sob-ac: var(--hurom-lime);
  --sob-r: 0;
  --sob-price-old: var(--hurom-gray-2);
  --sob-dot-inactive: var(--hurom-gray-3);
  --sob-slide-h: 580px;
  font-family: var(--sob-font-body);
  font-weight: 400;
  color: var(--sob-t1);
  -webkit-font-smoothing: antialiased;
  /* PATTERN 1:1 jak .hx-cs - padding rośnie z viewport, content max 1280 */
  position: relative;
  background: transparent;
  margin-bottom: 0;
  border-radius: 0;
  overflow: visible;
  padding: 70px 24px;
}
@media(min-width:750px){.sob-x{padding:90px 48px}}
@media(min-width:1200px){.sob-x{padding:110px 80px}}
.sob-x::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--sob-s);
  pointer-events: none;
}
/* Inner wrapper = .hx-cs__content pattern - max-width 1280, centrowane */
.sob-x__inner {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0;
}
.sob-x *{box-sizing:border-box}
.sob-x__viewport{position:relative;width:100%;overflow:hidden}
.sob-x__track{display:flex;width:100%;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.sob-x__slide{flex:0 0 100%;display:grid;grid-template-columns:48fr 52fr;height:var(--sob-slide-h);background:var(--sob-s)}
.sob-x__media{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:40px 40px 40px 60px;overflow:hidden}
.sob-x__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
.sob-x__content{display:flex;flex-direction:column;justify-content:center;padding:56px 72px;height:100%}

.sob-x__eye{
  font-family:var(--sob-font-body);
  font-weight:700;
  font-size:1.3rem !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--sob-t3);
  display:block;
  margin-bottom:12px;
}
@media(min-width:1068px){.sob-x__eye{font-size:1.4rem !important;}}

.sob-x__h{
  font-family:var(--hurom-font-heading);
  font-weight:700;
  font-size:2.8rem !important;
  line-height:1.2;
  letter-spacing:-0.03em;
  color:var(--sob-t1);
  margin-bottom:16px;
}
@media(min-width:750px){.sob-x__h{font-size:3.6rem !important;}}
@media(min-width:1200px){.sob-x__h{font-size:4rem !important;}}
@media(min-width:1536px){.sob-x__h{font-size:4.4rem !important;}}

.sob-x__p{
  font-family:var(--hurom-font-system);
  font-weight:500;
  font-size:1.6rem !important;
  line-height:1.4;
  color:var(--sob-t2);
  max-width:480px;
  margin-bottom:28px;
}
@media(min-width:1068px){.sob-x__p{font-size:1.7rem !important;}}

.sob-x__card{position:relative;display:grid;grid-template-columns:80px 1fr auto;gap:20px;padding:18px 22px;background:var(--sob-bg);border-radius:16px;align-items:center;width:100%;max-width:540px;text-decoration:none;color:inherit;transition:box-shadow .3s ease,transform .2s ease}
.sob-x__card:hover{box-shadow:0 4px 18px rgba(0,0,0,.06);transform:translateY(-1px)}
.sob-x__thumb{width:80px;height:80px;background:var(--sob-s);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:6px}
.sob-x__thumb img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.sob-x__cb{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left}
.sob-x__vendor{font-family:var(--sob-font-body);font-size:11px !important;letter-spacing:.14em;text-transform:uppercase;color:var(--sob-t3);font-weight:600}
.sob-x__name{font-family:var(--sob-font-body);font-size:14px !important;font-weight:600;line-height:1.35;color:var(--sob-t1)}
.sob-x__prices{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.sob-x__price{font-family:var(--hurom-font-heading);font-size:18px !important;font-weight:700;color:var(--sob-t1);line-height:1.2;letter-spacing:-.01em}
.sob-x__price-old{font-family:var(--sob-font-body);font-size:13px !important;color:var(--sob-price-old);text-decoration:line-through;line-height:1.2}
.sob-x__price-soon{font-family:var(--sob-font-body);font-size:12px !important;font-weight:600;color:var(--sob-t3);letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
/* Pagination + Navigation - Shopify-style poziomo na dole (jak Testimonials/Case Studies) */
.sob-x__dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:24px 0 32px;
  background:var(--sob-s);
}
@media(min-width:750px){.sob-x__dots{padding:32px 0 40px}}

.sob-x__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:0;
  background:var(--sob-t1);
  opacity:0.2;
  cursor:pointer;
  padding:0;
  transition:opacity 200ms ease;
}
.sob-x__dot:hover{opacity:0.4}
.sob-x__dot.is-active{opacity:1;transform:none}

/* NAVIGATION (strzałki) — COPY-PASTE z .hx-cs (działa poprawnie) */
.sob-x__nav {display: none}
@media(min-width:1200px){
  .sob-x__nav {
    display: flex;
    position: absolute;
    top: calc(50% - 22px);
    left: 0;
    right: 0;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
  }
}

.sob-x__arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sob-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);   /* subtelna ramka na białym tle */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease, border-color 200ms ease;
  color: var(--sob-t1);
}
.sob-x__arrow:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.15);
}
.sob-x__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sob-x__arrow--prev {transform: translateX(-22px)}
.sob-x__arrow--prev:hover {transform: translateX(-22px) scale(1.08)}
.sob-x__arrow--next {transform: translateX(22px)}
.sob-x__arrow--next:hover {transform: translateX(22px) scale(1.08)}
.sob-x__arrow svg {
  width: 22px;
  height: 22px;
}


@media(max-width:1024px){
  .sob-x{--sob-slide-h:auto}
  .sob-x__slide{grid-template-columns:1fr;height:auto}
  .sob-x__media{min-height:320px;padding:32px 24px;order:1}
  .sob-x__content{padding:40px 28px 52px;order:2}
  /* dots mobile - już zoptymalizowane w bazowych regułach */
}
@media(max-width:600px){
  .sob-x{margin-bottom:24px}
  .sob-x__content{padding:32px 20px 48px}
  .sob-x__card{grid-template-columns:60px 1fr auto;gap:14px;padding:14px 16px}
  .sob-x__thumb{width:60px;height:60px}
  .sob-x__name{font-size:12px !important}
  .sob-x__price{font-size:15px !important}
  .sob-x__price-old{font-size:11px !important}
  .sob-x__price-soon{font-size:10px !important}
}

/* ==========================================================
   VIDEO BANNER – v2 (unified tokens)
   ========================================================== */

.hx-vb{
  --vb-font: var(--hurom-font-heading); /* Poppins - heading font */
  overflow:hidden;
  /* width:100% USUNIĘTE - kolidowało z .hp-fullbleed { width: 100vw }
     Specificity było równe (1 klasa) ale .hx-vb było później w CSS -
     wygrywał cascade i wymuszał 100% rodzica (= 1680px) zamiast 100vw.
     border-radius i margin-bottom też usunięte - full-bleed nie ma rounded */
}
.hx-vb__wrap{position:relative;width:100%;background:#000;overflow:hidden}

/* Drabina aspect-ratio - 1:1 z Shopify
   Shopify hurom.net.pl: padding-bottom: 42.4383744170553%
   = aspect ratio 2.357:1 (cinematic 21:9-ish)
   ============================================================
   Strategia:
   - Mobile (≤749px): 1:1 kwadrat - lepsza czytelność tekstu
   - Tablet (750-1023px): 4:3 - balans plakatu i tekstu
   - Desktop+ (≥1024px): 2.357:1 = Shopify cinematic ratio
   - 5K+ (≥2560px): cap height 1100px żeby nie był za wysoki */

/* Mobile: kwadrat */
@media(max-width:749px){
  .hx-vb__wrap{aspect-ratio:1/1}
}
/* Tablet: 4:3 */
@media(min-width:750px) and (max-width:1023px){
  .hx-vb__wrap{aspect-ratio:4/3}
}
/* Desktop: Shopify 2.357:1 (= 42.44% padding-bottom) */
@media(min-width:1024px){
  .hx-vb__wrap{aspect-ratio:2.357/1}
}
/* 5K+: cap wysokości żeby nie był nieproporcjonalny */
@media(min-width:2560px){
  .hx-vb__wrap{
    aspect-ratio:auto;
    height:1080px;
    max-height:1200px;
  }
}

.hx-vb__poster{width:100%;height:100%;display:block;object-fit:cover;position:absolute;top:0;left:0;transition:opacity .5s ease}
.hx-vb__video{width:100%;height:100%;display:block;object-fit:cover;position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease}
.hx-vb__wrap.is-playing .hx-vb__poster{opacity:0;pointer-events:none}
.hx-vb__wrap.is-playing .hx-vb__video{opacity:1}
.hx-vb__wrap.is-playing .hx-vb__overlay{opacity:0;pointer-events:none}
.hx-vb__overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .5s ease}
.hx-vb__content{text-align:center;color:var(--hurom-white);padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}

.hx-vb__title{
  font-family:var(--vb-font) !important;
  font-weight:700 !important;
  color:var(--hurom-white) !important;
  font-size:3.2rem !important;
  line-height:1.1;
  letter-spacing:-0.03em;
  margin:0;
}
@media(min-width:734px){.hx-vb__title{font-size:4rem !important;}}
@media(min-width:1068px){.hx-vb__title{font-size:4.8rem !important;}}
@media(min-width:1440px){.hx-vb__title{font-size:6.4rem !important;}}
@media(min-width:1920px){.hx-vb__title{font-size:8rem !important;}}

.hx-vb__desc{
  font-family:var(--hurom-font-system);
  font-weight:500;
  color:rgba(255,255,255,.82) !important;
  font-size:1.6rem !important;
  line-height:1.4;
  max-width:560px;
  margin:0;
}
@media(min-width:1068px){.hx-vb__desc{font-size:1.8rem !important;}}

.hx-vb__play{
  display:inline-flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.5);
  color:var(--hurom-white);padding:14px 28px 14px 20px;border-radius:999px;cursor:pointer;
  font-family:var(--hurom-font-system);font-weight:700;
  font-size:1.3rem !important;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease,transform .2s ease;
  margin-top:.4rem;
}
.hx-vb__play:hover{background:rgba(255,255,255,.22);border-color:var(--hurom-white);transform:scale(1.04)}
.hx-vb__play:active{transform:scale(.97)}
.hx-vb__play-ico svg{width:clamp(36px,3.5vw,52px);height:clamp(36px,3.5vw,52px);display:block;transition:transform .3s ease}
.hx-vb__play:hover .hx-vb__play-ico svg{transform:scale(1.1)}
.hx-vb__play-lbl{font-size:1.3rem !important;}

/* ==========================================================
   ROOT / DESIGN SYSTEM .hx – v2 (unified tokens)
   Aliasy --g, --ac, --t1/t2/t3, --bg, --s wskazują na globalne
   ========================================================== */

.hx{
  /* ──────────────────────────────────────────────────────────
     PREMIUM HARMONY OVERRIDE (Shopify-inspired)
     Override globalnych --hurom-* tylko w wrapperze .hx (test page).
     Nie ruszamy globalnego CSS sklepu - łatwo cofnąć.
     
     Zmiany vs domyślne:
     v5.0 SYNCHRONIZACJA:
     - --t1: #0D1419 → #0D232B (Shopify rgb(13,35,43) jak global v5.0)
     - --t2: #3B4858 → #0D232B (jednolite body z ink - Shopify pattern)
     - --t3: #5C6B7D → #6B7785 (zsynchronizowane z idoSell "Okazja")
     - --g: #3FBE69 → #44BE70 (zsynchronizowane z idoSell "Wyróżnienie")
     - --gd: #2EA757 (Shopify mint hover) - zostaje
     
     Wszystkie sekcje (.hx-m, .hx-w, .hx-n, .hx-rv, .hx-fq) korzystają
     z tych zmiennych - jedna edycja wpływa na całą stronę testową.
     ────────────────────────────────────────────────────────── */
  --g: #44BE70;       /* mint zielony - primary accent (zsynchronizowane z idoSell) */
  --gd: #2EA757;      /* hover/pressed state (Shopify) */
  --ac: var(--hurom-lime);
  --t1: #0D232B;      /* headline + body warm black (Shopify rgb(13,35,43)) */
  --t2: #0D232B;      /* body - jednolite z ink (Shopify pattern) */
  --t3: #6B7785;      /* tertiary szary (zsynchronizowane z idoSell "Okazja") */
  --bg: var(--hurom-white);
  --s: var(--hurom-cream);
  --r: 20px;
  --f: var(--hurom-font-heading);    /* v5.1: Poppins dla headlinów (Shopify dual-font) */
  --fb: var(--hurom-font-system);    /* v5.1: DM Sans dla body */
  --fc: var(--hurom-font-system);    /* v5.1: DM Sans dla captions/eyebrows */
  --tr: .36s cubic-bezier(.25,.46,.45,.94);
  font-family:var(--f);font-weight:400;color:var(--t1);
  -webkit-font-smoothing:antialiased;font-size:16px !important;
}
.hx *{box-sizing:border-box;margin:0;padding:0}

/* ──────────────────────────────────────────────────────────
   STRONA GŁÓWNA - SPECIFIC OVERRIDES
   
   Globalna typografia (DM Sans, wagi h1/h2/h3, body 500,
   eyebrows szare) jest obsługiwana przez globalny custom CSS
   v5.0. Tu zostają TYLKO reguły specyficzne dla strony głównej.
   
   1. Override duży cytat Testimonials - size-specific
      (cytat w sekcji opinii ma być dramatycznie duży)
   ────────────────────────────────────────────────────────── */

/* OVERRIDE: cytat w testimonials - musi wygrać z .cm .hx p (specificity 0,3,1)
   v5.1 SHOPIFY-ACCURATE: Poppins, weight 700, line-height 1.2 */
.cm .hx-rv .hx-rv__card .hx-rv__txt,
.hx .hx-rv .hx-rv__card .hx-rv__txt,
.cm .hx-rv__card .hx-rv__txt,
.hx-rv__card .hx-rv__txt {
  font-family: var(--hurom-font-heading) !important;  /* Poppins */
  font-weight: 700 !important;
  font-size: 2.8rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}
@media(min-width:750px){
  .cm .hx-rv .hx-rv__card .hx-rv__txt,
  .hx .hx-rv .hx-rv__card .hx-rv__txt,
  .cm .hx-rv__card .hx-rv__txt,
  .hx-rv__card .hx-rv__txt {
    font-size: 3.6rem !important;
  }
}
@media(min-width:1200px){
  .cm .hx-rv .hx-rv__card .hx-rv__txt,
  .hx .hx-rv .hx-rv__card .hx-rv__txt,
  .cm .hx-rv__card .hx-rv__txt,
  .hx-rv__card .hx-rv__txt {
    font-size: 4.8rem !important;        /* Shopify 48.3px desktop */
  }
}
@media(min-width:1536px){
  .cm .hx-rv .hx-rv__card .hx-rv__txt,
  .hx .hx-rv .hx-rv__card .hx-rv__txt,
  .cm .hx-rv__card .hx-rv__txt,
  .hx-rv__card .hx-rv__txt {
    font-size: 5.2rem !important;        /* zsynchronizowane z niższą sekcją */
  }
}

.hx .ey{font-family:var(--fc);font-weight:600;font-size:11px !important;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:18px}

.hx .d1,
.hx .d2{
  font-family:var(--f);
  font-weight:600;
  font-size:3.2rem !important;
  line-height:1.0714285714;
  letter-spacing:-.005em;
}
@media(min-width:734px){.hx .d1,.hx .d2{font-size:4rem !important;}}
@media(min-width:1068px){.hx .d1,.hx .d2{font-size:4.8rem !important;}}
@media(min-width:1440px){.hx .d1,.hx .d2{font-size:5.6rem !important;}}

.hx .lead,
.hx .body{
  font-family:var(--fb);
  font-weight:400;
  font-size:1.7rem !important;
  line-height:1.2353641176;
  letter-spacing:-.022em;
}
@media(min-width:734px){.hx .lead,.hx .body{font-size:1.9rem !important;line-height:1.4211026316;letter-spacing:.012em;}}
@media(min-width:1068px){.hx .lead,.hx .body{font-size:2.1rem !important;line-height:1.381002381;letter-spacing:.011em;}}

.hx-s{margin-bottom:40px;border-radius:var(--r);overflow:hidden}

/* ============================================================
   MISJA (.hx-m) – v2 Shopify Steps-style
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-steps.css
   Wariant: --columns-with-mobile-slider --col-3 + titles--center
   
   Architektura:
   - Sekcja: full-bleed bg-only białe (jak Warranty/Testimonials/FAQ)
   - Header centered: subtitle + h2 + lead description
   - 3 karty w gridzie (desktop ≥990px)
   - Mobile (<575px): horizontal scroll-snap (native, zero JS)
   - Numerki w białych kółkach z subtle shadow (jak Warranty USP icons)
   - Premium hierarchy: header dominuje, karty oddychają
   ============================================================ */
.hx-m {
  position: relative;
  background: transparent;
  padding: 60px 24px;
  overflow: visible;
  margin-bottom: 0 !important;
  border-radius: 0;
  display: block;
  height: auto;
}
.hx-m::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
@media(min-width:750px){.hx-m{padding:80px 48px}}
@media(min-width:1200px){.hx-m{padding:96px 80px}}

.hx-m__inner {
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

/* Header centered (titles--center) */
.hx-m__hdr {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
@media(min-width:990px){.hx-m__hdr{margin-bottom:72px}}
@media(min-width:1360px){.hx-m__hdr{margin-bottom:96px}}

/* Subtitle (eyebrow) - Shopify-accurate: szary muted (NIE mint)
   SPECIFICITY: .hx .hx-m__eye (0,2,0) wygrywa z global */
.hx .hx-m__eye,
.cm .hx .hx-m__eye,
.hx-m__eye {
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--t3) !important;           /* szary muted - NIE mint */
  margin: 0 0 12px 0;
  display: block;
  text-align: center !important;
}
@media(min-width:1068px){
  .hx .hx-m__eye, .cm .hx .hx-m__eye, .hx-m__eye {font-size:1.4rem !important;}
}

/* H2 - Shopify-accurate: Poppins 700, line-height 1.1
   SPECIFICITY: .hx .hx-m__title (0,2,0) wygrywa z global */
.hx .hx-m__title,
.cm .hx .hx-m__title,
.hx-m__title {
  font-family: var(--f) !important;        /* Poppins */
  font-weight: 700 !important;              /* Shopify (było 600) */
  letter-spacing: -0.03em !important;       /* Shopify */
  color: var(--t1) !important;
  margin: 0 0 16px 0 !important;
  font-size: 2.8rem !important;
  line-height: 1.1 !important;              /* Shopify (było 1.15) */
  text-align: center !important;
}
@media(min-width:750px){
  .hx .hx-m__title, .cm .hx .hx-m__title, .hx-m__title {font-size:3.6rem !important;}
}
@media(min-width:1200px){
  .hx .hx-m__title, .cm .hx .hx-m__title, .hx-m__title {font-size:4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-m__title, .cm .hx .hx-m__title, .hx-m__title {font-size:4.8rem !important;}
}
.hx-m__title em {
  font-style: normal;
  font-weight: 700;                          /* zsynchronizowane z parent */
}

/* Lead (description) - Shopify-accurate: DM Sans 500
   SPECIFICITY: .hx .hx-m__desc (0,2,0) wygrywa z global */
.hx .hx-m__desc,
.cm .hx .hx-m__desc,
.hx-m__desc {
  font-family: var(--fb) !important;
  font-weight: 500 !important;              /* Shopify (było 400) */
  font-size: 1.6rem !important;
  line-height: 1.4 !important;              /* Shopify (było 1.5) */
  letter-spacing: -0.005em;
  color: var(--t2) !important;
  text-align: center !important;
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
@media(min-width:1068px){
  .hx .hx-m__desc, .cm .hx .hx-m__desc, .hx-m__desc {font-size:1.7rem !important;}
}

/* USUŃ stary separator */
.hx-m__sep {
  display: none !important;
}

/* ───── KARTY (3 kolumny) ───── */
.hx-m__wrapper {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media(min-width:750px){.hx-m__wrapper{gap:48px 24px}}
@media(min-width:990px){.hx-m__wrapper{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1360px){.hx-m__wrapper{gap:48px 32px}}

/* Pojedyncza karta */
.hx-m__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  box-sizing: border-box;
}
@media(min-width:1360px){.hx-m__step{padding:0 28px}}

/* Numer w białym kółku z subtle shadow (Shopify --shadow style)
   Struktura: <div class="hx-m__num"><span>1</span></div>
   Div = białe kółko z shadow, Span = gradient text */
.hx-m__num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 56px;
  min-height: 56px;
  padding: 4px 12px;
  border-radius: 12px;
  background-color: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* Tekst numerka - gradient mint (jak Shopify .text-gradient) */
.hx-m__num span {
  font-family: var(--f);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--g); /* fallback */
  /* Gradient text effect */
  background: linear-gradient(180deg, #56D17B 0%, #2EA757 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media(min-width:750px){
  .hx-m__num {
    min-width: 64px;
    min-height: 64px;
    margin-bottom: 24px;
  }
  .hx-m__num span {
    font-size: 2.8rem;
  }
}
@media(min-width:1200px){
  .hx-m__num {
    min-width: 72px;
    min-height: 72px;
  }
  .hx-m__num span {
    font-size: 3.2rem;
  }
}

/* Tytuł karty - Shopify-accurate: Poppins 600 (NIE 700)
   SPECIFICITY: .hx .hx-m__step-title (0,2,0) wygrywa z global .hx h3 (0,1,1) */
.hx .hx-m__step-title,
.cm .hx .hx-m__step-title,
.hx-m__step-title {
  font-family: var(--f) !important;        /* Poppins */
  font-weight: 600 !important;              /* Shopify (RÓŻNE od globalnego 700) */
  font-size: 2rem !important;
  letter-spacing: -0.03em !important;       /* Shopify */
  color: var(--t1) !important;
  margin: 0 0 12px 0;
  line-height: 1.2 !important;              /* Shopify */
}
@media(min-width:750px){
  .hx .hx-m__step-title, .cm .hx .hx-m__step-title, .hx-m__step-title {font-size:2.2rem !important;}
}
@media(min-width:1200px){
  .hx .hx-m__step-title, .cm .hx .hx-m__step-title, .hx-m__step-title {font-size:2.4rem !important;}
}

/* Opis karty - Shopify-accurate: DM Sans 500, line-height 1.4
   SPECIFICITY: .hx .hx-m__step-text (0,2,0) wygrywa z global .hx p (0,1,1) */
.hx .hx-m__step-text,
.cm .hx .hx-m__step-text,
.hx-m__step-text {
  font-family: var(--fb) !important;
  font-weight: 500 !important;              /* Shopify (było 400) */
  font-size: 1.5rem !important;
  line-height: 1.4 !important;              /* Shopify (było 1.5) */
  color: var(--t2) !important;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
@media(min-width:750px){
  .hx .hx-m__step-text, .cm .hx .hx-m__step-text, .hx-m__step-text {font-size:1.6rem !important;}
}
@media(min-width:1068px){
  .hx .hx-m__step-text, .cm .hx .hx-m__step-text, .hx-m__step-text {font-size:1.7rem !important;}
}
@media(min-width:1536px){
  .hx .hx-m__step-text, .cm .hx .hx-m__step-text, .hx-m__step-text {font-size:1.8rem !important;}
}

/* Link "Dowiedz się więcej →" - subtelny, premium.
   margin-top: auto - przyciska link do dna karty, więc niezależnie od długości
   opisu wszystkie 3 linki są na tej samej wysokości (wyrównane visual baseline). */
.hx-m__step-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--g);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hx-m__step-link:hover,
.hx-m__step-link:focus {
  color: var(--g);
  opacity: 0.7;
  text-decoration: none;
}
.hx-m__step-link:visited {
  color: var(--g);
}
.hx-m__step-link svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.2s ease;
}
.hx-m__step-link:hover svg {
  transform: translate(2px, -2px);
}
@media(min-width:750px){
  .hx-m__step-link {
    padding-top: 24px;
    font-size: 1.5rem;
  }
}

/* ───── MOBILE: horizontal scroll-snap (zero JS) ───── */
@media(max-width:749px){
  .hx-m__wrapper {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    /* Padding po bokach żeby pierwsza/ostatnia karta nie była przyklejona */
    padding: 4px 0 16px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    /* Ukrywa scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hx-m__wrapper::-webkit-scrollbar {
    display: none;
  }
  .hx-m__step {
    flex: 0 0 calc(88% - 16px);
    scroll-snap-align: start;
    min-height: 320px;
    padding: 0 8px;
  }
}

/* ============================================================
   WARRANTY (.hx-w) – v2 (Shopify image-with-text + 4 USP)
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-image-with-text.css
   Wariant: --image_last --top --square (content left, image right square)
   
   Architektura:
   - Sekcja: full-bleed bg-only białe (jak Testimonials/FAQ)
   - Layout 2 kolumny od ≥990px (mobile: column stack)
   - Lewa kolumna: subtitle + h2 + lead + 4 USP w 2×2 grid
   - Prawa kolumna: kwadratowe zdjęcie z badge "Od 1974"
   - Sticky image od ≥990px (zdjęcie podąża gdy scrollujesz USPs)
   - Image z padding-bottom: 100% (square)
   - Każda USP karta: ikona w białym kółku z cieniem + tytuł H5 + opis szary
   - SVG ikony inline (lekkie, bez font-icon dependency)
   ============================================================ */
.hx-w {
  position: relative;
  background: transparent;
  padding: 48px 20px;
  overflow: visible;
  /* Reset starego grid/height */
  display: block;
  height: auto;
}
.hx-w::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
/* Tablet: większy pionowy padding ale 0 boczny (rodzic idoSell ma constraint) */
@media(min-width:750px){.hx-w{padding:64px 0}}
@media(min-width:1200px){.hx-w{padding:80px 0}}

/* Grid 2 kolumny */
.hx-w__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1680px;
  margin: 0 auto;
  align-items: flex-start;
}
@media(min-width:990px){
  .hx-w__grid {
    flex-direction: row-reverse;     /* obraz po prawej */
    justify-content: space-between;
    gap: 40px;
  }
}
@media(min-width:1360px){.hx-w__grid{gap:64px}}

/* LEFT (content) */
.hx-w__txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Reset starego padding */
  padding: 0;
  justify-content: flex-start;
  order: 2;
}
@media(min-width:990px){
  .hx-w__txt {
    max-width: calc(50% - 20px);
    padding: 0;
    order: 1;
  }
}
@media(min-width:1200px){
  .hx-w__txt {
    padding: 0 16px 0 0;
  }
}

/* Subtitle/eyebrow - Shopify-accurate: szary muted, NIE mint
   SPECIFICITY: .hx .hx-w__sub (0,2,0) wygrywa z global .hx-w__sub (0,1,0) */
.hx .hx-w__sub,
.cm .hx .hx-w__sub,
.hx-w__sub {
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;     /* Shopify */
  text-transform: uppercase;
  color: var(--t3) !important;           /* szary muted (NIE mint) */
  margin: 0 0 12px 0;
  display: block;
}
@media(min-width:1068px){
  .hx .hx-w__sub, .cm .hx .hx-w__sub, .hx-w__sub {font-size:1.4rem !important;}
}

/* H2 - Shopify-accurate: Poppins 700, line-height 1.1, większe rozmiary
   SPECIFICITY: .hx .hx-w__h (0,2,0) wygrywa z global .hx h2 (0,1,1) */
.hx .hx-w__h,
.cm .hx .hx-w__h,
.hx-w__h {
  font-family: var(--f) !important;            /* Poppins */
  font-weight: 700 !important;                  /* Shopify-accurate */
  letter-spacing: -0.03em !important;           /* Shopify */
  color: var(--t1) !important;
  margin: 0 0 16px 0 !important;
  font-size: 2.8rem !important;                  /* mobile 28px */
  line-height: 1.1 !important;                   /* Shopify (rożne od globalnego 1.2) */
  text-align: left;
}
@media(min-width:750px){
  .hx .hx-w__h, .cm .hx .hx-w__h, .hx-w__h {font-size:3.4rem !important;}
}
@media(min-width:1200px){
  .hx .hx-w__h, .cm .hx .hx-w__h, .hx-w__h {font-size:4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-w__h, .cm .hx .hx-w__h, .hx-w__h {font-size:4.8rem !important;}
}

/* Lead - SPECIFICITY: .hx .hx-w__lead (0,2,0) wygrywa z global .hx p (0,1,1) */
.hx .hx-w__lead,
.cm .hx .hx-w__lead,
.hx-w__lead {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;       /* Shopify-accurate */
  color: var(--t2) !important;
  margin: 0;
  max-width: 720px;
}
@media(min-width:1068px){
  .hx .hx-w__lead, .cm .hx .hx-w__lead, .hx-w__lead {font-size:1.7rem !important; max-width:760px;}
}

/* 4 USP grid 2×2 (mobile: 1 kolumna, ≥576px: 2 kolumny) */
.hx-w__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
}
@media(min-width:576px){.hx-w__cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:750px){.hx-w__cols{margin-top:32px; gap:32px}}
@media(min-width:1360px){.hx-w__cols{margin-top:40px}}

/* Pojedyncza karta USP */
.hx-w__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ikona w białym kółku z cieniem (Shopify --shadow style)
   Wymiary delikatnie mniejsze niż Shopify - lepiej proporcjonalnie do tekstu */
.hx-w__col-ico {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: var(--bg);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: 14px;
  width: auto;
  height: auto;
  color: var(--t1);
}
@media(min-width:1200px){
  .hx-w__col-ico {
    padding: 12px;
    margin-bottom: 18px;
  }
}

/* SVG icon size - 20/22/24 (delikatnie mniejsze niż Shopify) */
.hx-w__col-ico svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media(min-width:750px){.hx-w__col-ico svg{width:22px;height:22px}}
@media(min-width:1200px){.hx-w__col-ico svg{width:24px;height:24px}}

/* Tytuł USP - Shopify-accurate: Poppins 600, 24px, line-height 1.2
   SPECIFICITY: .hx .hx-w__col-title (0,2,0) wygrywa z global .hx h3 (0,1,1) */
.hx .hx-w__col-title,
.cm .hx .hx-w__col-title,
.hx-w__col-title {
  font-family: var(--f) !important;     /* Poppins */
  font-weight: 600 !important;           /* Shopify-accurate (RÓŻNE od globalnego 700!) */
  font-size: 1.8rem !important;          /* mobile 18px */
  letter-spacing: -0.03em !important;    /* Shopify */
  color: var(--t1) !important;
  margin: 0 0 8px 0;
  line-height: 1.2 !important;           /* Shopify */
}
@media(min-width:750px){
  .hx .hx-w__col-title, .cm .hx .hx-w__col-title, .hx-w__col-title {font-size:2rem !important;}
}
@media(min-width:1200px){
  .hx .hx-w__col-title, .cm .hx .hx-w__col-title, .hx-w__col-title {font-size:2.2rem !important;}
}
@media(min-width:1536px){
  .hx .hx-w__col-title, .cm .hx .hx-w__col-title, .hx-w__col-title {font-size:2.4rem !important;}
}

/* Opis USP - Shopify-accurate: DM Sans 500, 20px desktop, line-height 1.4
   SPECIFICITY: .hx .hx-w__col-text (0,2,0) wygrywa z global .hx p (0,1,1) */
.hx .hx-w__col-text,
.cm .hx .hx-w__col-text,
.hx-w__col-text {
  font-family: var(--fb) !important;     /* DM Sans */
  font-weight: 500 !important;
  font-size: 1.5rem !important;          /* mobile 15px */
  line-height: 1.4 !important;           /* Shopify */
  color: var(--t2) !important;
  margin: 0;
  max-width: none;
}
@media(min-width:750px){
  .hx .hx-w__col-text, .cm .hx .hx-w__col-text, .hx-w__col-text {font-size:1.6rem !important;}
}
@media(min-width:1068px){
  .hx .hx-w__col-text, .cm .hx .hx-w__col-text, .hx-w__col-text {font-size:1.8rem !important;}
}
@media(min-width:1536px){
  .hx .hx-w__col-text, .cm .hx .hx-w__col-text, .hx-w__col-text {font-size:2rem !important;}
}

/* RIGHT (image) */
.hx-w__img {
  flex: 1;
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Square aspect 1:1 (Shopify padding-bottom: 100%) */
  padding-bottom: 100%;
  height: 0;
  /* Reset starego min-height/background */
  min-height: 0;
  background: var(--s);
  order: 1;
}
@media(min-width:990px){
  .hx-w__img {
    max-width: calc(50% - 20px);
    /* Sticky scroll - zdjęcie podąża gdy scrollujesz USPs */
    position: sticky;
    top: 24px;
    align-self: flex-start;
    order: 2;
    padding-bottom: 0;
    height: auto;
    aspect-ratio: 1/1;
  }
}

.hx-w__img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media(min-width:990px){
  .hx-w__img img {
    position: absolute;
  }
}

/* Badge "Od 1974" top-left na zdjęciu (Shopify __top) */
.hx-w__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background-color: transparent;
}
@media(min-width:750px){.hx-w__badge{top:32px; left:32px; gap:16px}}
@media(min-width:1200px){.hx-w__badge{top:40px; left:40px}}

.hx-w__badge-logo {
  display: block;
  max-width: 60px;
  height: auto;
}
@media(min-width:750px){.hx-w__badge-logo{max-width:70px}}
@media(min-width:1200px){.hx-w__badge-logo{max-width:85px}}

.hx-w__badge-txt {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.2rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hurom-white);
  line-height: 1;
  position: relative;
}
@media(min-width:1068px){.hx-w__badge-txt{font-size:1.3rem !important;}}

/* Separator pionowy między logo a tekstem (Shopify pattern) */
.hx-w__badge-txt:not(:first-child)::before {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 60%;
  top: 20%;
  left: -8px;
  background-color: rgba(255, 255, 255, 0.3);
}
@media(min-width:750px){
  .hx-w__badge-txt:not(:first-child)::before {
    left: -10px;
  }
}

/* ============================================================
   QUIZ BANNER (.hx-qz) – cienki full-bleed CTA z mint gradient
   ============================================================
   Cel: subtelny CTA banner promujący quiz wyboru wyciskarki.
   Wzorzec: Shopify "rich text" + Apple "section-cta" minimalist.
   Struktura: tekst po lewej + button po prawej, w jednej linii
              na desktopie / stacked column na mobile.
   ============================================================ */

/* Wrapper - full-bleed mint gradient, anchor (klikalny cały banner) */
.hx-qz {
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg, var(--mint-light, #56D17B) 0%, var(--gd) 100%);
  padding: 48px 24px;
  margin-block: 80px;
  transition: transform var(--tr), box-shadow var(--tr);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hx-qz:hover {
  text-decoration: none;
}
.hx-qz:hover .hx-qz__btn {
  background: var(--bg);
  color: var(--gd);
  transform: translateX(4px);
}
.hx-qz:hover .hx-qz__btn-arrow {
  transform: translateX(4px);
}

@media(min-width:750px){.hx-qz{padding:56px 40px; margin-block:96px;}}
@media(min-width:1200px){.hx-qz{padding:64px 64px; margin-block:120px;}}
@media(min-width:1536px){.hx-qz{padding:72px 80px;}}

/* Inner container - max-width + flex */
.hx-qz__inner {
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media(min-width:990px){
  .hx-qz__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
}

/* Text block (eyebrow + h2 + lead) */
.hx-qz__txt {
  flex: 1;
}

/* Eyebrow - uppercase, subtle ramka biała na minty tle */
.hx-qz .hx-qz__eye,
.cm .hx .hx-qz__eye,
.hx-qz__eye {
  display: block;
  font-family: var(--fb) !important;     /* DM Sans */
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;   /* biały subtle (NIE pełny) */
  margin: 0 0 12px 0;
}
@media(min-width:1068px){
  .hx-qz .hx-qz__eye, .cm .hx .hx-qz__eye, .hx-qz__eye {font-size:1.4rem !important;}
}

/* Headline - Poppins 700 biały, Shopify-accurate */
.hx-qz .hx-qz__h,
.cm .hx .hx-qz__h,
.hx-qz__h {
  font-family: var(--f) !important;       /* Poppins */
  font-weight: 700 !important;             /* Shopify */
  font-size: 2.4rem !important;            /* mobile */
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--bg) !important;             /* biały */
  margin: 0 0 12px 0;
}
@media(min-width:750px){
  .hx-qz .hx-qz__h, .cm .hx .hx-qz__h, .hx-qz__h {font-size:3rem !important;}
}
@media(min-width:1200px){
  .hx-qz .hx-qz__h, .cm .hx .hx-qz__h, .hx-qz__h {font-size:3.6rem !important;}
}
@media(min-width:1536px){
  .hx-qz .hx-qz__h, .cm .hx .hx-qz__h, .hx-qz__h {font-size:4rem !important;}
}

/* Lead - DM Sans 500 biały półprzezroczysty */
.hx-qz .hx-qz__lead,
.cm .hx .hx-qz__lead,
.hx-qz__lead {
  font-family: var(--fb) !important;      /* DM Sans */
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.92) !important;   /* biały półprzezroczysty */
  margin: 0;
  max-width: 600px;
}
@media(min-width:1068px){
  .hx-qz .hx-qz__lead, .cm .hx .hx-qz__lead, .hx-qz__lead {font-size:1.7rem !important;}
}

/* CTA block - button po prawej */
.hx-qz__cta {
  flex-shrink: 0;
}

/* Button - white ghost premium */
.hx-qz__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  border: 2px solid var(--bg);
  border-radius: 999px;          /* pill rounded */
  color: var(--bg);
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  transition: all var(--tr);
  white-space: nowrap;
}
@media(min-width:750px){.hx-qz__btn{padding:16px 32px; font-size:1.6rem;}}
@media(min-width:1200px){.hx-qz__btn{padding:18px 36px; font-size:1.7rem;}}

/* Arrow - subtle motion on hover */
.hx-qz__btn-arrow {
  transition: transform var(--tr);
  flex-shrink: 0;
}

/* Subtle decorative element - shimmer line w tle */
.hx-qz::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.hx-qz__inner {
  position: relative;
  z-index: 2;
}

/* ============================================================
   NUMBERS (.hx-n) – v3 (Shopify-style)
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-numbers.css
   Klasa .numbers__wrapper--columns--3 --plain --number-size-normal

   Cechy Shopify:
   - 1 / 2 / 3 kolumny (mobile / sm / lg) — 5 kart wraps do 3+2
   - Subtitle "left-aligned" (NIE centered), eyebrow-style
   - Karta: flex column, align-items: flex-start
   - Liczba: font 34px → 58px → 64px → 72px (mobile → xl)
   - Liczba: kolor zielony Hurom (--g)
   - Tytuł H5 (długi, narracyjny, NIE krótka etykieta)
   - Description: max-width 380px, color 50% transparent
   - Plain — brak borders/ramek między kartami
   - Tło sekcji: cream (boxed, NIE full-bleed)

   Animacja count-up via IntersectionObserver
   (skrypt na końcu pliku, klasy `.hx-nb__num[data-count]`)
   ============================================================ */
.hx-n {
  /* Full-bleed bg-only pattern (z CP50):
     Sekcja zachowuje normalny flow, ale tło rozciąga się
     na 100vw przez pseudo-element ::before.
     Treść (header + grid) zostaje w naturalnej szerokości
     z paddingami, ale szarość tła idzie od krawędzi do krawędzi.
     - border-radius usunięty - full-bleed nie ma rounded
     - margin-bottom usunięty - full-bleed łączy się z następną sekcją */
  position: relative;
  background: transparent;          /* tło przesunięte do ::before */
  padding: 70px 24px;
  overflow: visible !important;     /* WAŻNE: !important żeby wygrać z .hx-s {overflow:hidden} */
  border-radius: 0 !important;      /* WAŻNE: full-bleed nie ma rounded (.hx-s ma var(--r)) */
  margin-bottom: 0 !important;      /* WAŻNE: full-bleed łączy się z sąsiadami (.hx-s ma 40px) */
}
.hx-n::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--s);             /* szare tło rozciągnięte na 100vw */
  pointer-events: none;
}
@media(min-width:750px){.hx-n{padding:90px 48px}}
@media(min-width:1200px){.hx-n{padding:110px 80px}}

/* Header — left-aligned subtitle (Shopify-style) */
.hx-n__hdr {
  margin-bottom: 40px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
@media(min-width:750px){.hx-n__hdr{margin-bottom:60px}}
@media(min-width:1200px){.hx-n__hdr{margin-bottom:80px}}

/* Subtitle — eyebrow style, mała, weight 700, NIE centered */
.hx-n__sub {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.3rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g);
  margin: 0;
  display: block;
}
@media(min-width:1068px){.hx-n__sub{font-size:1.4rem !important;}}

/* Grid — 1/2/3 kolumny */
.hx-n__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1680px;
  margin: 0 auto;
}
@media(min-width:576px){
  .hx-n__grid{grid-template-columns:repeat(2,1fr); gap: 40px}
}
@media(min-width:990px){
  .hx-n__grid{grid-template-columns:repeat(3,1fr); gap: 56px}
}

/* Karta — flex column, lewa, plain (brak ramki/tła) */
.hx-nb {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0;
}

/* Liczba — Shopify scale: 34 → 58 → 64 → 72 */
.hx-nb__num {
  font-family: var(--f);
  font-weight: 700;
  font-size: 3.4rem !important;
  letter-spacing: -0.02em;
  color: var(--g);
  line-height: 1;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: baseline;
}
@media(min-width:750px){.hx-nb__num{font-size:5.8rem !important;}}
@media(min-width:1200px){.hx-nb__num{font-size:6.4rem !important;}}
@media(min-width:1536px){.hx-nb__num{font-size:7.2rem !important;}}

/* Suffix np "+", "M+" - mniejszy niż liczba */
.hx-nb__num-suffix {
  font-size: 0.7em;
  margin-left: 2px;
  font-weight: 700;
}

/* Tytuł karty H5 (długi narracyjny, NIE etykieta uppercase) */
.hx-nb__title {
  font-family: var(--f);
  font-weight: 600;
  font-size: 1.8rem !important;
  letter-spacing: -0.005em;
  color: var(--t1);
  line-height: 1.3;
  margin: 0 0 12px 0;
  max-width: 380px;
  text-transform: none;
}
@media(min-width:750px){.hx-nb__title{font-size:2rem !important;}}
@media(min-width:1200px){.hx-nb__title{font-size:2.2rem !important;}}

/* Description - 50% transparent szare, max 380px */
.hx-nb__dsc {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 1.5rem !important;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.55);
  margin: 0;
  max-width: 380px;
}
@media(min-width:1068px){.hx-nb__dsc{font-size:1.6rem !important;}}

/* Backwards compatibility: gdyby HTML miał stary .hx-nb__lbl - styluj jak title */
.hx-nb__lbl {
  font-family: var(--f);
  font-weight: 600;
  font-size: 1.8rem !important;
  letter-spacing: -0.005em;
  color: var(--t1);
  line-height: 1.3;
  margin: 0 0 12px 0;
  max-width: 380px;
  text-transform: none;
}
@media(min-width:750px){.hx-nb__lbl{font-size:2rem !important;}}
@media(min-width:1200px){.hx-nb__lbl{font-size:2.2rem !important;}}

/* ============================================================
   TESTIMONIALS (.hx-rv) – v2 (Shopify-style slider)
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-testimonials.css
   Wariant: testimonials__slider--full_slider, columns-1, slide--center
   
   Architektura:
   - Sekcja: full-bleed bg-only BIAŁE (jak Shopify oryginał - tło białe)
   - Header: subtitle + h2 + description, LEFT-aligned
   - Karty: TRANSPARENT (tło sekcji = tło karty w Shopify, więc efektywnie
     brak visible card - treść pływa swobodnie na białym)
   - Rating: PILL pigułka szara (kontrast na białym = brand move)
   - Cytat: H3 duży, center-aligned
   - Autor: imię body-large + position (rola + produkt) szary
   - Pagination kropki + strzałki ← →
   - Strzałki: tylko od 1200px, z subtelnym obramowaniem (na białym tle)
   - Auto-rotate 5s + pauza na hover
   - Vanilla JS slider (bez Swiper dependency)
   ============================================================ */
.hx-rv {
  position: relative;
  background: transparent;          /* tło w ::before */
  padding: 70px 24px;
  overflow: visible;
}
.hx-rv::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);            /* białe tło 100vw (jak Shopify) */
  pointer-events: none;
}
@media(min-width:750px){.hx-rv{padding:90px 48px}}
@media(min-width:1200px){.hx-rv{padding:110px 80px}}

/* Header - left-aligned (Shopify-style) */
.hx-rv__hdr {
  margin-bottom: 40px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
  padding: 0;
}
@media(min-width:750px){.hx-rv__hdr{margin-bottom:48px}}
@media(min-width:1200px){.hx-rv__hdr{margin-bottom:64px}}

/* Eyebrow - Shopify-accurate: szary muted (NIE mint), letter-spacing 0.08em
   SPECIFICITY: .hx .hx-rv__sub (0,2,0) wygrywa z global */
.hx .hx-rv__sub,
.cm .hx .hx-rv__sub,
.hx-rv__sub {
  font-family: var(--fb) !important;        /* DM Sans */
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;         /* Shopify */
  text-transform: uppercase;
  color: var(--t3) !important;                /* szary muted (NIE mint) */
  margin: 0 0 12px 0;
  display: block;
  text-align: left !important;
}
@media(min-width:1068px){
  .hx .hx-rv__sub, .cm .hx .hx-rv__sub, .hx-rv__sub {font-size:1.4rem !important;}
}

/* Headline - Shopify case-studies__title: Poppins 700, line-height 1.2, 48px desktop
   SPECIFICITY: .hx .hx-rv__h (0,2,0) wygrywa z global .hx h2 (0,1,1) */
.hx .hx-rv__h,
.cm .hx .hx-rv__h,
.hx-rv__h {
  font-family: var(--f) !important;         /* Poppins */
  font-weight: 700 !important;               /* Shopify-accurate (było 600) */
  letter-spacing: -0.03em !important;        /* Shopify */
  color: var(--t1) !important;
  margin: 0 0 16px 0 !important;
  text-align: left !important;
  font-size: 2.8rem !important;
  line-height: 1.2 !important;               /* Shopify 1.2 (57.96/48.3) */
}
@media(min-width:750px){
  .hx .hx-rv__h, .cm .hx .hx-rv__h, .hx-rv__h {font-size:3.6rem !important;}
}
@media(min-width:1200px){
  .hx .hx-rv__h, .cm .hx .hx-rv__h, .hx-rv__h {font-size:4.4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-rv__h, .cm .hx .hx-rv__h, .hx-rv__h {font-size:4.8rem !important;}  /* Shopify 48.3px */
}

/* Lead - Shopify case-studies__description body-large: DM Sans 500, 18-20px
   SPECIFICITY: .hx .hx-rv__lead (0,2,0) wygrywa z global */
.hx .hx-rv__lead,
.cm .hx .hx-rv__lead,
.hx-rv__lead {
  font-family: var(--fb) !important;
  font-weight: 500 !important;               /* Shopify (było 400) */
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  color: var(--t2) !important;
  margin: 0;
  max-width: 720px;
  text-align: left !important;
}
@media(min-width:1068px){
  .hx .hx-rv__lead, .cm .hx .hx-rv__lead, .hx-rv__lead {font-size:1.8rem !important;}
}

/* Content wrapper + max-width */
.hx-rv__content {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
}

/* Slider window (clips slides outside) */
.hx-rv__wrap {
  position: relative;
  overflow: hidden;
  /* RESET old mask-image gradient (infinite scroll) */
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Track - flex line of slides */
.hx-rv__track {
  display: flex;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  /* RESET old infinite-scroll animation */
  animation: none !important;
}
.hx-rv__track:hover { animation-play-state: initial; }

/* Single slide - flex item 100% width */
.hx-rv__slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

/* Slide inner = transparent (treść pływa na białym tle sekcji)
   W Shopify karta ma to samo tło co sekcja - czyli efektywnie brak ramki.
   Tylko padding daje rytm wewnątrz slajdu. */
.hx-rv__card {
  background: transparent;
  border-radius: 0;
  padding: 24px;
  width: auto;
  flex-shrink: initial;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 320px;
  box-sizing: border-box;
}
@media(min-width:750px){.hx-rv__card{padding:32px}}
@media(min-width:1200px){.hx-rv__card{padding:64px; min-height:400px}}

/* Rating PILL (kluczowy Shopify-style) - pigułka gwiazdki + count */
.hx-rv__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px 10px;
  border-radius: 50px;
  background-color: var(--s);       /* szare tło pigułki (background-secondary) */
}
@media(min-width:750px){.hx-rv__rating{margin-bottom:20px}}
@media(min-width:1200px){.hx-rv__rating{margin-bottom:24px; padding:6px 14px}}

.hx-rv__stars {
  display: inline-flex;
  align-items: center;
  color: var(--g);                  /* zielone gwiazdki Hurom (Shopify --color-accent) */
  font-size: 14px !important;
  letter-spacing: 1px;
  line-height: 1;
  /* Reset starych marginów */
  margin-bottom: 0;
}
.hx .hx-rv__rcount,
.cm .hx .hx-rv__rcount,
.hx-rv__rcount {
  font-family: var(--fb) !important;       /* DM Sans (Shopify body, NIE Poppins) */
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  color: var(--t1) !important;
  line-height: 1 !important;
}

/* Quote text - Shopify case-studies__quote: Poppins 700, line-height 1.2
   SPECIFICITY: .hx .hx-rv__txt (0,2,0) wygrywa z global + override z linii 506 */
.hx .hx-rv__txt,
.cm .hx .hx-rv__txt,
.hx-rv__txt {
  margin: 0 0 24px 0;
  max-width: 1035px;                          /* Shopify: 103.5rem */
  font-family: var(--f) !important;           /* Poppins */
  font-weight: 700 !important;                 /* Shopify-accurate (było 800) */
  font-style: normal;
  letter-spacing: -0.03em !important;          /* Shopify */
  color: var(--t1) !important;
  line-height: 1.2 !important;                 /* Shopify */
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 2.8rem !important;
  text-align: center;
}
@media(min-width:750px){
  .hx .hx-rv__txt, .cm .hx .hx-rv__txt, .hx-rv__txt {
    font-size: 3.6rem !important;
    margin-bottom: 32px;
  }
}
@media(min-width:1200px){
  .hx .hx-rv__txt, .cm .hx .hx-rv__txt, .hx-rv__txt {
    font-size: 4.8rem !important;              /* Shopify 48.3px */
    margin-bottom: 56px;
  }
}
@media(min-width:1536px){
  .hx .hx-rv__txt, .cm .hx .hx-rv__txt, .hx-rv__txt {
    font-size: 5.2rem !important;              /* większe na full desktop */
  }
}

/* Author block */
.hx-rv__author {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-top: auto;
}
.hx-rv__author-info {
  text-align: left;
}

/* Author name - Shopify body-large: DM Sans 500 (NIE 600), 16-18px */
.hx .hx-rv__author-name,
.cm .hx .hx-rv__author-name,
.hx-rv__author-name {
  font-family: var(--fb) !important;          /* DM Sans (Shopify body-large, NIE Poppins) */
  font-weight: 500 !important;                 /* Shopify-accurate (było 600) */
  font-size: 1.6rem !important;
  color: var(--t1) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
}
@media(min-width:1068px){
  .hx .hx-rv__author-name, .cm .hx .hx-rv__author-name, .hx-rv__author-name {font-size:1.8rem !important;}
}

/* Author position - DM Sans 500 muted (Shopify: subtle pod nazwą) */
.hx .hx-rv__author-position,
.cm .hx .hx-rv__author-position,
.hx-rv__author-position {
  font-family: var(--fb) !important;
  font-weight: 500 !important;                 /* Shopify-accurate (było 400) */
  font-size: 1.3rem !important;
  color: var(--t3) !important;                 /* szary muted */
  line-height: 1.4 !important;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
@media(min-width:1068px){.hx-rv__author-position{font-size:1.4rem !important;}}

/* Backwards compat: gdyby HTML miał .hx-rv__auth */
.hx-rv__auth {
  font-family: var(--f);
  font-weight: 600;
  font-size: 1.5rem !important;
  color: var(--t1);
  letter-spacing: 0;
  text-transform: none;
}

/* PAGINATION (kropki) */
.hx-rv__pag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
@media(min-width:750px){.hx-rv__pag{margin-top:32px}}

.hx-rv__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t1);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 200ms ease;
}
.hx-rv__dot:hover {
  opacity: 0.3;
}
.hx-rv__dot.is-active {
  opacity: 1;
}

/* NAVIGATION (strzałki) — tylko od 1200px */
.hx-rv__nav {
  display: none;
}
@media(min-width:1200px){
  .hx-rv__nav {
    display: flex;
    position: absolute;
    top: calc(50% - 22px);
    left: 0;
    right: 0;
    justify-content: space-between;
    pointer-events: none;            /* żeby przycisk pozwalał klikać slide */
    z-index: 2;
  }
}

.hx-rv__arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.08);   /* subtelna ramka na białym tle */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease, border-color 200ms ease;
  color: var(--t1);
}
.hx-rv__arrow:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.15);
}
.hx-rv__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.hx-rv__arrow--prev {
  margin-left: -22px;                /* wystaje poza container */
}
.hx-rv__arrow--next {
  margin-right: -22px;
}
.hx-rv__arrow svg {
  width: 22px;
  height: 22px;
}

/* RESET old keyframes (infinite scroll usunięte) */
@keyframes hx-slide{0%{transform:translateX(0)}100%{transform:translateX(0)}}

/* ============================================================
   CASE STUDIES (.hx-cs) – Shopify case-studies overlay slider
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-case-studies.css
   Klasa: .case-studies__content--overlay + .case-studies__slide--landscape

   Cechy Shopify:
   - Slider 4 slajdy z autoplay opcjonalnym
   - Slajd 1: hero z obrazem tła + avatar autora (--landscape)
   - Slajdy 2-4: solid ciemny granat #0D232B
   - Layout slajdu: 2-column (quote 60% + stat 40%)
   - Quote: Poppins 700 biały, do 48px desktop
   - Stat pill: półprzezroczysty (rgba white 0.1) z liczbą + opisem
   - Author bottom: imię biały, position muted szary, avatar 60x60 round
   - CTA "Czytaj historię" + arrow w prawym dolnym rogu
   - Nawigacja: arrows prev/next + dots pagination
   - Sekcja: białe tło + ciemne slajdy = dramatyczny kontrast
   ============================================================ */

/* Wrapper sekcji - białe tło full-bleed (jak Testimonials) */
.hx-cs {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
}
.hx-cs::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
@media(min-width:750px){.hx-cs{padding:90px 48px}}
@media(min-width:1200px){.hx-cs{padding:110px 80px}}

/* Header - left-aligned (Shopify) */
.hx-cs__hdr {
  margin-bottom: 40px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
}
@media(min-width:750px){.hx-cs__hdr{margin-bottom:48px}}
@media(min-width:1200px){.hx-cs__hdr{margin-bottom:64px}}

/* Eyebrow - Shopify-accurate: szary #67737C (foreground-secondary na białym tle) */
.hx .hx-cs__sub,
.cm .hx .hx-cs__sub,
.hx-cs__sub {
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #67737C !important;                       /* Shopify rgb(103,115,124) */
  margin: 0 0 12px 0;
  display: block;
  text-align: left !important;
}
@media(min-width:1068px){
  .hx .hx-cs__sub, .cm .hx .hx-cs__sub, .hx-cs__sub {font-size:1.4rem !important;}
}

/* Headline - Shopify case-studies__title: Poppins 700, 48px desktop */
.hx .hx-cs__h,
.cm .hx .hx-cs__h,
.hx-cs__h {
  font-family: var(--f) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--t1) !important;
  margin: 0 0 16px 0 !important;
  text-align: left !important;
  font-size: 2.8rem !important;
  line-height: 1.2 !important;
}
@media(min-width:750px){
  .hx .hx-cs__h, .cm .hx .hx-cs__h, .hx-cs__h {font-size:3.6rem !important;}
}
@media(min-width:1200px){
  .hx .hx-cs__h, .cm .hx .hx-cs__h, .hx-cs__h {font-size:4.4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-cs__h, .cm .hx .hx-cs__h, .hx-cs__h {font-size:4.8rem !important;}
}

/* Lead - Shopify body-large */
.hx .hx-cs__lead,
.cm .hx .hx-cs__lead,
.hx-cs__lead {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  color: var(--t2) !important;
  margin: 0;
  max-width: 720px;
  text-align: left !important;
}
@media(min-width:1068px){
  .hx .hx-cs__lead, .cm .hx .hx-cs__lead, .hx-cs__lead {font-size:1.8rem !important;}
}

/* Content wrapper + max-width */
.hx-cs__content {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
}

/* Slider window */
.hx-cs__wrap {
  position: relative;
  overflow: hidden;
  border-radius: 16px;          /* zaokrąglone rogi (Shopify) */
}

/* Track - flex line of slides */
.hx-cs__track {
  display: flex;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Single slide - ciemne granat tło, 2-column layout
   WYSOKOŚĆ: Shopify używa AUTO (content + padding 64×2=128px).
   Naturalna wysokość ~571px desktop (443px content + 128px padding).
   Zostawiamy min-height jako "floor" żeby slajd nie był za niski przy krótkim cytacie */
.hx-cs__slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  background: var(--t1);          /* #0D232B granat (Shopify color-background-3) */
  border-radius: 16px;
  overflow: hidden;
  min-height: 360px;              /* mobile floor */
}
@media(min-width:750px){.hx-cs__slide{min-height:440px}}        /* tablet floor */
@media(min-width:1200px){.hx-cs__slide{min-height:500px}}        /* desktop floor (Shopify ~571px natural) */

/* Modifier: hero slide z obrazem tła */
.hx-cs__slide--landscape {
  /* Obraz tła obsłużony przez .hx-cs__bg-image dziecko */
}

/* Background image (TYLKO slajd z modifier --landscape) */
.hx-cs__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hx-cs__bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark overlay nad obrazem */
.hx-cs__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 35, 43, 0.55);    /* granat 55% (Shopify --overlay-opacity) */
  z-index: 1;
}

/* Slide content - 2-column layout
   Shopify używa min-height: auto + height: 100% - content rośnie naturalnie,
   ale wypełnia 100% wysokości slajdu jeśli slajd ma min-height */
.hx-cs__slide-content {
  position: relative;
  z-index: 2;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  min-height: auto;            /* Shopify auto - NIE inherit */
  box-sizing: border-box;
}
@media(min-width:750px){
  .hx-cs__slide-content {
    padding: 48px 40px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 48px;
  }
}
@media(min-width:1200px){
  .hx-cs__slide-content {
    padding: 64px;        /* Shopify 6.4rem */
    gap: 64px;            /* Shopify 6.4rem */
  }
}
@media(min-width:1536px){.hx-cs__slide-content{padding:80px 80px}}

/* LEWO: Main content (quote + autor + cta) */
.hx-cs__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

/* Quote - Poppins 700 biały, big */
.hx .hx-cs__quote,
.cm .hx .hx-cs__quote,
.hx-cs__quote {
  font-family: var(--f) !important;
  font-weight: 700 !important;
  font-size: 2.4rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--bg) !important;          /* biały */
  margin: 0;
  max-width: 720px;
}
@media(min-width:750px){
  .hx .hx-cs__quote, .cm .hx .hx-cs__quote, .hx-cs__quote {font-size:3rem !important;}
}
@media(min-width:1200px){
  .hx .hx-cs__quote, .cm .hx .hx-cs__quote, .hx-cs__quote {font-size:3.6rem !important;}
}
@media(min-width:1536px){
  .hx .hx-cs__quote, .cm .hx .hx-cs__quote, .hx-cs__quote {font-size:4rem !important;}
}

/* Bottom: autor + CTA flex row */
.hx-cs__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Autor */
.hx-cs__author {
  display: flex;
  align-items: center;
  gap: 12px;                /* Shopify 1.2rem */
  padding-bottom: 0;
  border: none;
}

/* Avatar icon (tylko slajd 1) */
.hx-cs__author-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}
.hx-cs__author-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media(min-width:750px){.hx-cs__author-icon{width:64px;height:64px}}

/* Author info */
.hx-cs__author-info {
  text-align: left;
}

/* Author name - DM Sans 600 biały */
.hx .hx-cs__author-name,
.cm .hx .hx-cs__author-name,
.hx-cs__author-name {
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  color: var(--bg) !important;          /* biały */
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
}
@media(min-width:1068px){
  .hx .hx-cs__author-name, .cm .hx .hx-cs__author-name, .hx-cs__author-name {font-size:1.8rem !important;}
}

/* Author position - DM Sans 500 jasny szary (Shopify --color-foreground-secondary) */
.hx .hx-cs__author-position,
.cm .hx .hx-cs__author-position,
.hx-cs__author-position {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  color: #A9A9A9 !important;                       /* Shopify rgb(169,169,169) - jasny szary */
  line-height: 1.4 !important;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
@media(min-width:1068px){
  .hx .hx-cs__author-position, .cm .hx .hx-cs__author-position, .hx-cs__author-position {font-size:1.4rem !important;}
}

/* CTA link "Czytaj historię" - DM Sans 500 szary Shopify, hover biały */
.hx-cs__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-weight: 500;
  font-size: 1.4rem;
  color: #A9A9A9;                              /* Shopify rgb(169,169,169) */
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color var(--tr), transform var(--tr);
  white-space: nowrap;
}
.hx-cs__cta:hover {
  color: var(--bg);                            /* hover biały */
}
.hx-cs__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--tr);
}
.hx-cs__cta:hover svg {
  transform: translate(2px, -2px);
}
@media(min-width:1068px){.hx-cs__cta{font-size:1.5rem}}

/* PRAWO: Stat pill - frosted glass effect (Shopify backdrop-filter blur)
   align-self: flex-start = stat wyrównany do TOP slajdu */
.hx-cs__stat {
  align-self: flex-start;                              /* Shopify - top alignment */
  background-color: rgba(255, 255, 255, 0.08);          /* Shopify foreground 8% */
  backdrop-filter: blur(20px);                          /* Shopify frosted glass ✨ */
  -webkit-backdrop-filter: blur(20px);                  /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;                                  /* Shopify 1.2rem */
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
  margin-bottom: 32px;                                  /* Shopify 3.2rem */
}
@media(min-width:750px){
  .hx-cs__stat {
    width: auto;
    min-width: 240px;
    padding: 32px;
    margin-bottom: 0;
  }
}
@media(min-width:1200px){
  .hx-cs__stat {
    min-width: 280px;
    padding: 40px;                                      /* Shopify 4rem */
  }
}

/* Stat number - duża liczba Poppins biały */
.hx .hx-cs__stat-num,
.cm .hx .hx-cs__stat-num,
.hx-cs__stat-num {
  font-family: var(--f) !important;
  font-weight: 700 !important;
  font-size: 3.6rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--bg) !important;
}
@media(min-width:750px){
  .hx .hx-cs__stat-num, .cm .hx .hx-cs__stat-num, .hx-cs__stat-num {font-size:4.4rem !important;}
}
@media(min-width:1200px){
  .hx .hx-cs__stat-num, .cm .hx .hx-cs__stat-num, .hx-cs__stat-num {font-size:5.2rem !important;}
}

/* Stat label - DM Sans 500 jasny szary (Shopify --color-foreground-secondary) */
.hx .hx-cs__stat-label,
.cm .hx .hx-cs__stat-label,
.hx-cs__stat-label {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  color: #A9A9A9 !important;                       /* Shopify rgb(169,169,169) */
  line-height: 1.4 !important;
  margin: 0;
  max-width: 220px;
}
@media(min-width:1068px){
  .hx .hx-cs__stat-label, .cm .hx .hx-cs__stat-label, .hx-cs__stat-label {font-size:1.4rem !important;}
}

/* PAGINATION (kropki) */
.hx-cs__pag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
@media(min-width:750px){.hx-cs__pag{margin-top:32px}}

.hx-cs__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t1);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 200ms ease;
}
.hx-cs__dot:hover {opacity: 0.4}
.hx-cs__dot.is-active {opacity: 1}

/* NAVIGATION (strzałki) — tylko od 1200px */
.hx-cs__nav {display: none}
@media(min-width:1200px){
  .hx-cs__nav {
    display: flex;
    position: absolute;
    top: calc(50% - 22px);
    left: 0;
    right: 0;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
  }
}

.hx-cs__arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
  color: var(--t1);
}
.hx-cs__arrow:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.hx-cs__arrow svg {width: 20px; height: 20px}
.hx-cs__arrow--prev {transform: translateX(-22px)}
.hx-cs__arrow--prev:hover {transform: translateX(-22px) scale(1.08)}
.hx-cs__arrow--next {transform: translateX(22px)}
.hx-cs__arrow--next:hover {transform: translateX(22px) scale(1.08)}

/* ============================================================
   FAQ (.hx-fq) – v2 (Shopify collapsible-content--background)
   ============================================================
   Wzorzec: hurom.net.pl /cdn/shop/t/16/assets/section-collapsible-content.css
   Wariant: .collapsible-content__content--background
   
   Cechy Shopify:
   - Container: max-width 1080px (węższe niż Numbers/Testimonials 1280px)
   - Sekcja: full-bleed bg-only białe (jak Testimonials)
   - Header: CENTERED (titles--center) - subtitle + h2 + description
   - Items: każde pytanie osobna karta z szarym tłem + radius 12px
   - Gap między kartami: 8px (flex column z gap)
   - Padding togglera: 12/24px mobile, 12/40px desktop
   - Ikona: okrągłe szare koło 32×32 mobile, 40×40 desktop
   - W kole SVG strzałka → 16x16 mobile, 20x20 desktop
   - Strzałka start: rotate(90deg) = wskazuje w dół
   - Strzałka active: rotate(-90deg) = wraca do poziomu (0)
   - Hover na nieaktywne pytanie: opacity 0.5
   - Animacja max-height (slide-down), bez display:none (lepsza animacja)
   ============================================================ */
.hx-fq {
  position: relative;
  background: transparent;          /* tło w ::before */
  padding: 70px 24px;
  overflow: visible;
}
.hx-fq::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);            /* białe tło 100vw (jak Testimonials) */
  pointer-events: none;
}
@media(min-width:750px){.hx-fq{padding:90px 48px}}
@media(min-width:1200px){.hx-fq{padding:110px 80px}}

/* Header - centered (Shopify titles--center) */
.hx-fq__hdr {
  margin-bottom: 40px;
  max-width: 1680px;                /* Shopify 108rem */
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}
@media(min-width:750px){.hx-fq__hdr{margin-bottom:48px}}
@media(min-width:1200px){.hx-fq__hdr{margin-bottom:64px}}

/* Force center na WSZYSTKICH dzieciach - override globalnych
   reguł hurom.pl które mogą mieć p { text-align: left } albo
   reguł dziedziczonych z idoSell template */
.hx-fq__hdr,
.hx-fq__hdr > *,
.hx-fq__hdr p,
.hx-fq__hdr h2,
.hx-fq__hdr h3,
.hx-fq__hdr span {
  text-align: center !important;
}

.hx-fq__sub {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.3rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g);
  margin: 0 0 12px 0 !important;
  display: block;
  text-align: center !important;
  /* Reset starych max-width */
  max-width: none;
  line-height: 1.2;
}
@media(min-width:1068px){.hx-fq__sub{font-size:1.4rem !important;}}

.hx-fq__h {
  font-family: var(--f);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
  margin: 0 0 16px 0 !important;
  text-align: center !important;
  font-size: 2.8rem !important;
  line-height: 1.15;
}
@media(min-width:750px){.hx-fq__h{font-size:3.6rem !important;}}
@media(min-width:1200px){.hx-fq__h{font-size:4.4rem !important;}}
@media(min-width:1536px){.hx-fq__h{font-size:5.2rem !important;}}

.hx-fq__lead {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 1.7rem !important;
  line-height: 1.4;
  color: var(--t2);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 720px;
  text-align: center !important;
  display: block;
  /* Reset wszelkich dziedziczonych margines/padding */
  padding: 0;
}
@media(min-width:1068px){.hx-fq__lead{font-size:1.9rem !important;}}

/* List - flex column z gap 8px (Shopify pattern) */
.hx-fq__list {
  max-width: 1080px;                /* Shopify 108rem */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pojedyncze pytanie - karta z szarym tłem i radius 12px */
.hx-qi {
  background-color: var(--s);       /* szare tło karty (background-secondary) */
  border-radius: 12px;
  /* Reset starych borders top/bottom */
  border-top: none;
  border-bottom: none;
}
.hx-qi:last-child {
  border-bottom: none;              /* reset starej reguły */
}

/* Button toggle */
.hx-qi__btn {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  gap: 16px;
  transition: opacity 200ms ease;
}
@media(min-width:750px){.hx-qi__btn{padding:12px 40px}}

/* Hover state - nieaktywne pytania ściemniają się (Shopify subtelny efekt) */
.hx-qi:not(.open):hover .hx-qi__btn {
  opacity: 0.5;
}

/* Pytanie (.h6 w Shopify - lekko mniejsze) */
.hx-qi__q {
  margin: 0;
  text-align: left;
  font-family: var(--f);
  font-weight: 600;
  font-size: 1.5rem !important;
  letter-spacing: -0.005em;
  color: var(--t1);
  line-height: 1.4;
  flex: 1;
}
@media(min-width:750px){.hx-qi__q{font-size:1.7rem !important;}}
@media(min-width:1200px){.hx-qi__q{font-size:1.9rem !important;}}

/* Ikona w okrągłym kole (kluczowy Shopify look) */
.hx-qi__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg);      /* w Shopify: --color-background (białe tło na szarej karcie) */
  color: var(--t1);
  /* Reset starych border/font */
  border: none;
  font-size: 0 !important;
}
@media(min-width:750px){.hx-qi__ico{width:40px;height:40px}}

.hx-qi__ico svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(90deg);         /* start: strzałka w dół */
  display: block;
}
@media(min-width:750px){.hx-qi__ico svg{width:20px;height:20px}}

/* Open state: strzałka wraca do poziomej (Shopify rotate(-90deg) liczone od rotate(90deg)) */
.hx-qi.open .hx-qi__ico svg {
  transform: rotate(-90deg);
}

/* Answer - max-height animation (lepsza niż display:none) */
.hx-qi__ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Answer inner - padding zgodny z Shopify */
.hx-qi__inner {
  padding: 0 24px 24px 24px;
  max-width: 800px;                 /* Shopify 80rem */
  font-family: var(--fb);
  font-weight: 400;
  font-size: 1.5rem !important;
  line-height: 1.55;
  color: var(--t3);                 /* --color-foreground-secondary (szary) */
  letter-spacing: 0;
}
@media(min-width:750px){.hx-qi__inner{padding:0 40px 24px 40px; font-size:1.6rem !important;}}
@media(min-width:1068px){.hx-qi__inner{font-size:1.7rem !important;}}

.hx-qi__inner p {
  margin: 0;
}
.hx-qi__inner p + p {
  margin-top: 12px;
}

.hx-qi__inner a,
.hx-qi__inner a:link,
.hx-qi__inner a:visited,
.hx-qi__inner a:active {
  color: var(--g) !important;
  text-underline-offset: 3px;
  text-decoration: underline !important;
  font-weight: 500;
  transition: color 200ms ease;
  /* Reset wszelkich globalnych a stylów (background, padding, border) */
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline !important;
  /* Reset bookmark icons z idoSell jeśli są */
  box-shadow: none !important;
}
.hx-qi__inner a:hover,
.hx-qi__inner a:focus {
  color: var(--hurom-forest-dark, #0F3D25) !important;
  text-decoration: underline !important;
}
.hx-qi__inner strong {
  color: var(--t1);
  font-weight: 600;
}

/* SEO DESC - Shopify-accurate typography, hp-fullbleed compatible (full-width)
   Sekcja na samym dole strony - długi tekst SEO z modelami */
.hx-dc {
  padding: 80px 24px;
  background: var(--s);                    /* szare tło Shopify (było bg białe) */
  border-radius: 0;                        /* hp-fullbleed = brak rounded */
  margin-bottom: 0 !important;             /* hp-fullbleed łączy się z footerem */
}
@media(min-width:750px){.hx-dc{padding:90px 48px}}
@media(min-width:1200px){.hx-dc{padding:110px 80px}}

.hx-dc__inner-wrap {
  max-width: 1680px;                       /* Shopify content max-width */
  margin: 0 auto;
}

.hx-dc__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  margin-bottom: 48px;
  align-items: start;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
@media(min-width:750px){
  .hx-dc__intro {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* H1 - Shopify-accurate: Poppins 700, letter-spacing -0.03em */
.hx .hx-dc h1,
.cm .hx .hx-dc h1,
.hx-dc h1 {
  font-family: var(--f) !important;        /* Poppins */
  font-weight: 700 !important;              /* Shopify-accurate (było 600) */
  font-size: 2.8rem !important;
  letter-spacing: -0.03em !important;       /* Shopify (było -0.005em) */
  line-height: 1.2 !important;              /* Shopify (było 1.0714) */
  color: var(--t1) !important;
  margin-bottom: 0;
}
@media(min-width:734px){
  .hx .hx-dc h1, .cm .hx .hx-dc h1, .hx-dc h1 {font-size:3.6rem !important;}
}
@media(min-width:1068px){
  .hx .hx-dc h1, .cm .hx .hx-dc h1, .hx-dc h1 {font-size:4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-dc h1, .cm .hx .hx-dc h1, .hx-dc h1 {font-size:4.4rem !important;}
}

/* Lead - DM Sans 500 Shopify */
.hx .hx-dc__lead,
.cm .hx .hx-dc__lead,
.hx-dc__lead {
  font-family: var(--fb) !important;       /* DM Sans */
  font-weight: 500 !important;              /* Shopify (było 400) */
  font-size: 1.6rem !important;
  line-height: 1.4 !important;              /* Shopify (było 1.23) */
  letter-spacing: -0.005em !important;
  color: var(--t2) !important;
}
@media(min-width:734px){
  .hx .hx-dc__lead, .cm .hx .hx-dc__lead, .hx-dc__lead {font-size:1.7rem !important;}
}
@media(min-width:1068px){
  .hx .hx-dc__lead, .cm .hx .hx-dc__lead, .hx-dc__lead {font-size:1.8rem !important;}
}

/* "Dowiedz się więcej" toggle */
.hx-dc__more{display:none}
.hx-dc__more.on{display:block}

/* Grid kart h2/h3 */
.hx-dc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
@media(min-width:750px){
  .hx-dc__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
  }
}

/* Article H2 (sub-tytuły artykułów) - Shopify Poppins 600 */
.hx .hx-dc__art h2,
.hx .hx-dc__full h2,
.cm .hx .hx-dc__art h2,
.cm .hx .hx-dc__full h2,
.hx-dc__art h2,
.hx-dc__full h2 {
  font-family: var(--f) !important;
  font-weight: 600 !important;              /* Shopify h3-level weight */
  font-size: 1.8rem !important;
  letter-spacing: -0.03em !important;
  color: var(--t1) !important;
  margin: 0 0 12px;
  line-height: 1.2 !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--g);       /* mint accent (zostaje) */
  display: inline-block;
}
@media(min-width:1068px){
  .hx .hx-dc__art h2, .hx .hx-dc__full h2,
  .cm .hx .hx-dc__art h2, .cm .hx .hx-dc__full h2,
  .hx-dc__art h2, .hx-dc__full h2 {font-size:2.2rem !important;}
}

/* Article paragraphs - DM Sans 500 Shopify */
.hx .hx-dc__art p,
.hx .hx-dc__full p,
.cm .hx .hx-dc__art p,
.cm .hx .hx-dc__full p,
.hx-dc__art p,
.hx-dc__full p {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  color: var(--t2) !important;
  margin-bottom: 10px;
}
@media(min-width:1068px){
  .hx .hx-dc__art p, .hx .hx-dc__full p,
  .cm .hx .hx-dc__art p, .cm .hx .hx-dc__full p,
  .hx-dc__art p, .hx-dc__full p {font-size:1.6rem !important;}
}

/* Links w artykułach - mint */
.hx-dc__art a,
.hx-dc__full a {
  color: var(--g);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color var(--tr);
}
.hx-dc__art a:hover,
.hx-dc__full a:hover {color: var(--gd)}

/* Modele - karty modeli */
.hx-dc__models {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px auto 40px;
  max-width: 1680px;
}
@media(min-width:576px){
  .hx-dc__models {grid-template-columns: repeat(2, 1fr)}
}
@media(min-width:1068px){
  .hx-dc__models {grid-template-columns: repeat(3, 1fr)}
}

.hx-dc__model {
  background: var(--bg);                    /* białe karty na szarym tle */
  border-radius: 12px;
  padding: 24px 24px 20px;
  transition: transform var(--tr), box-shadow var(--tr);
}
.hx-dc__model:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* Model link - Poppins 600 mint */
.hx-dc__model a {
  font-family: var(--f);
  font-weight: 600;
  font-size: 1.6rem !important;
  color: var(--g);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  transition: color var(--tr);
}
.hx-dc__model a:hover {color: var(--gd)}

.hx-dc__model p {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 1.4rem !important;
  line-height: 1.5;
  color: var(--t3);
  margin: 0;
}

/* hx-dc images — USUNIETE w v1.42.6
   Powod: usunięto <img h70_lifestyle.webp> z HTML
   Jeśli kiedyś dodasz inny img, odkomentuj poniższe:
.hx-dc img {
  width: 100%;
  border-radius: 12px;
  margin: 28px 0;
  display: block;
}
*/

/* CTA button "Dowiedz się więcej" */
.hx-dc__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--g);
  color: var(--g);
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--fb);                   /* Shopify DM Sans (było var(--fc)) */
  font-size: 1.4rem !important;
  font-weight: 700;                          /* Shopify button weight */
  letter-spacing: -0.01em;                  /* Shopify (było 0.07em) */
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  margin: 0 auto;
}
.hx-dc__btn:hover {
  background: var(--g);
  color: var(--bg);
}
.hx-dc__btn::after {
  content: '↓';
  font-size: .9em !important;
  transition: transform var(--tr);
}
.hx-dc__btn.open::after {transform: rotate(180deg)}

/* Wrapper button do center */
.hx-dc > .hx-dc__btn {
  display: flex;
  margin: 0 auto;
  max-width: 1680px;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .hx-s{margin-bottom:40px}
  /* .hx-rv, .hx-fq margin już w bazie */
  /* .hx-m padding już w bazie (Shopify Steps-style) */
  /* .hx-w mobile padding już w bazie CSS Warranty */
  .hx-dc{padding:56px 20px}
  .hx-dc__intro{grid-template-columns:1fr}
  .hx-dc__grid{grid-template-columns:1fr}
  .hx-dc__models{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hx-s{margin-bottom:24px}
  .hx-dc__models{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* .hx-m mobile - scroll-snap w bazie, nie potrzeba override */
  .hx-dc{padding:36px 20px}
}

.hp {
  background: var(--hurom-cream);
  padding: 48px 40px 44px;
  border-radius: 0;                       /* HP-fullbleed = brak zaokrąglonych rogów */
  font-family: var(--hurom-font-system);
  -webkit-font-smoothing: antialiased;
}
@media(min-width:750px){.hp{padding:64px 48px}}
@media(min-width:1200px){.hp{padding:80px 80px}}

.hp__inner {
  max-width: 1680px;                       /* Shopify max-width content */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.hp__item {
  padding: 0 48px;
  border-right: 1px solid rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hp__item:first-child { padding-left: 0; }
.hp__item:last-child  { padding-right: 0; border-right: none; }

@media (max-width: 680px) {
  .hp__item:first-child { padding-left: 24px; }
  .hp__item:last-child  { padding-right: 24px; }
}

.hp__quote {
  font-family: var(--hurom-font-system);
  font-weight: 500;                        /* Shopify-accurate (było 400) */
  font-size: 15px;
  line-height: 1.55;                       /* Shopify-accurate (było 1.75) */
  color: var(--hurom-ink);                 /* granat (było gray-1) */
  flex: 1;
}
@media(min-width:1068px){.hp__quote{font-size:16px}}

.hp__logo { display: block; line-height: 1; }

.hp__logo--forbes {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  color: var(--hurom-ink);
}

.hp__logo--reddot {
  font-family: var(--hurom-font-system);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #E30613;  /* Red Dot brand color - intentional */
  line-height: 1.4;
}

.hp__logo--paniagd {
  font-family: var(--hurom-font-system);
  font-weight: 800;
  font-size: 18px;
  color: var(--hurom-ink);
}

.hp__dots { display: none; }

@media (max-width: 680px) {
  .hp {
    padding: 40px 0 36px;
    border-radius: 16px;
  }

  .hp__inner {
    display: flex;
    overflow: hidden;
    position: relative;
  }

  .hp__item {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 24px;
    border-right: none;
    gap: 20px;
    transition: transform .35s ease;
    text-align: left;
    box-sizing: border-box;
  }

  .hp__quote {
    font-family: var(--hurom-font-system);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: var(--hurom-gray-1);
  }

  .hp__logo--forbes { font-size: 32px; }
  .hp__logo--reddot { font-size: 14px; }
  .hp__logo--paniagd { font-size: 20px; }

  .hp__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    padding: 0 32px;
  }

  .hp__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,.18);
    cursor: pointer;
    transition: background .2s;
    border: none;
    padding: 0;
  }

  .hp__dot.active { background: var(--hurom-ink); }
}

.pd {
  --pd-font: var(--hurom-font-system);          /* DM Sans - body */
  --pd-font-heading: var(--hurom-font-heading); /* Poppins - heading */
  font-family: var(--pd-font);
  -webkit-font-smoothing: antialiased;
  background: var(--hurom-white);
  padding: 60px 20px 80px;
  margin: 0 -20px;
}

.pd__container {
  max-width: 1680px;
  margin: 0 auto;
}

.pd__header {
  text-align: left;
  margin-bottom: 48px;
  padding-left: 0;
}

.pd__header-eye {
  font-family: var(--pd-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hurom-gray-2);
  display: block;
  margin-bottom: 12px;
}

.pd__header-title {
  font-family: var(--pd-font-heading) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--hurom-ink) !important;
  margin: 0 0 10px !important;
}

.pd__header-sub {
  font-family: var(--pd-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--hurom-gray-1);
  margin: 0;
  max-width: 720px;
}

@media (min-width: 680px) {
  .pd__header { padding-left: 40px; }
  .pd__header-title { font-size: 44px !important; }
  .pd__header-sub { font-size: 16px; }
}

@media (min-width: 1068px) {
  .pd__header-title { font-size: 48px !important; }
}

.pd__layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: transparent;
  position: relative;
}

@media (min-width: 900px) {
  .pd__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
}

.pd__gallery {
  position: relative;
  width: 100%;
}

@media (min-width: 900px) {
  .pd__gallery { flex: 1; max-width: 50%; }
}

.pd__img-wrap {
  position: relative;
  width: 100%;
  background: var(--hurom-white);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 40px;
  transition: opacity .3s ease;
}

.pd__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: var(--hurom-white);
  border: 1px solid var(--hurom-gray-4);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s ease, border-color .15s ease;
}

.pd__arrow:hover {
  background: var(--hurom-cream);
  border-color: var(--hurom-ink);
}

.pd__arrow svg { color: var(--hurom-ink); }

@media (min-width: 900px) {
  .pd__arrow { display: flex; }
}

.pd__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}

.pd__thumb {
  width: 80px;
  height: 80px;
  background: var(--hurom-white);
  overflow: hidden;
  cursor: pointer;
  transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
  opacity: .85;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  display: block;
}

.pd__thumb.active,
.pd__thumb:hover { opacity: 1; }

@media (min-width: 680px) {
  .pd__thumb { width: 110px; height: 110px; }
}

.pd__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

@media (min-width: 900px) {
  .pd__body { flex: 1; padding-top: 8px; max-width: 625px; margin: 0 auto; }
}

.pd__name {
  font-family: var(--pd-font-heading) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: var(--hurom-ink) !important;
  margin: 0 0 16px !important;
}

@media (min-width: 680px) {
  .pd__name { font-size: 32px !important; }
}

.pd__price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pd__price {
  font-family: var(--pd-font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--hurom-ink);
  letter-spacing: -0.01em;
}

.pd__price-old {
  font-family: var(--pd-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--hurom-gray-2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pd__price-badge {
  background: var(--hurom-ink);
  color: var(--hurom-white);
  font-family: var(--pd-font);
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
  display: none;
}

.pd__tax-info {
  font-family: var(--pd-font);
  font-weight: 500;
  font-size: 13px;
  color: var(--hurom-gray-2);
  margin: 0 0 28px;
  line-height: 1.4;
}

.pd__tax-info a {
  color: var(--hurom-lime);
  text-decoration: none;
}

.pd__tax-info a:hover { text-decoration: underline; }

.pd__tagline {
  font-family: var(--pd-font-heading) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: var(--hurom-ink) !important;
  margin: 0 0 18px !important;
}

@media (min-width: 680px) {
  .pd__tagline { font-size: 32px !important; }
}

.pd__desc {
  font-family: var(--pd-font) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--hurom-ink) !important;
  margin: 0 0 28px !important;
}

.pd__desc strong {
  font-weight: 600 !important;
  color: var(--hurom-ink) !important;
}

.pd__sep {
  width: 100%;
  height: 1px;
  background: var(--hurom-gray-4);
  margin: 0 0 24px;
  border: 0;
}

.pd__color-label {
  font-family: var(--pd-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--hurom-ink);
  display: block;
  margin-bottom: 12px;
}

.pd__color-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.pd__color-opt {
  font-family: var(--pd-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--hurom-gray-4);
  background: var(--hurom-white);
  color: var(--hurom-ink);
  cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.pd__color-opt:hover {
  border-color: var(--hurom-ink);
}

.pd__color-opt.active {
  background: var(--hurom-ink);
  color: var(--hurom-white);
  border-color: var(--hurom-ink);
}

.pd__series {
  font-family: var(--pd-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hurom-gray-2);
  display: block;
  margin-bottom: 20px;
}

.pd__cta-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pd__qty {
  display: flex;
  align-items: center;
  background: var(--hurom-cream);
  border-radius: 6px;
  padding: 0 4px;
  flex-shrink: 0;
  height: 48px;
}

.pd__qty-btn {
  width: 32px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--hurom-ink);
  font-family: var(--pd-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}

.pd__qty-btn:hover { background: var(--hurom-gray-4); }

.pd__qty-val {
  min-width: 32px;
  text-align: center;
  font-family: var(--pd-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--hurom-ink);
}

.pd__btn-atc {
  flex: 1;
  min-width: 200px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--hurom-cream) !important;
  color: var(--hurom-ink) !important;
  font-family: var(--pd-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 0 24px !important;
  height: 48px !important;
  border-radius: 8px !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.pd__btn-atc:hover { background: var(--hurom-gray-4) !important; }

.pd__btn-atc:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.pd__btn-buy {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hurom-ink) !important;
  color: var(--hurom-white) !important;
  font-family: var(--pd-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 0 28px !important;
  height: 52px !important;
  border-radius: 8px !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
  margin-bottom: 20px !important;
  -webkit-tap-highlight-color: transparent;
}

.pd__btn-buy:hover { background: var(--hurom-lime-hover) !important; }

.pd__btn-buy:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.pd__details-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--pd-font) !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.01em !important;
  color: #44BE70 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  line-height: 1.3 !important;
}
.pd__details-link:hover,
.pd__details-link:focus {
  color: #44BE70 !important;
  opacity: 0.7 !important;
  text-decoration: none !important;
}
.pd__details-link:visited {
  color: #44BE70 !important;
}
.pd__details-link svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.2s ease;
}
.pd__details-link:hover svg {
  transform: translate(2px, -2px);
}
@media(min-width:750px){
  .pd__details-link {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 679px) {
  .pd { padding: 32px 16px 48px; margin: 0 -16px; }
  .pd__img-wrap { aspect-ratio: 1 / 1; }
  .pd__thumbs { gap: 8px; margin-top: 12px; }
  .pd__thumb { width: 72px; height: 72px; }
  .pd__btn-atc { min-width: 0; font-size: 14px !important; }
}

/* ============================================================
   BESTSELLERY (.hx-bs) - Shopify-style 4-col product grid
   ============================================================
   - Sekcja: full-bleed bg-only białe
   - Header: left-aligned subtitle + h2 + lead
   - Grid 4 kolumny desktop, 2x2 tablet, 1-col mobile
   - Karta: image-top + body-content + cta-row
   - Cart fix: button "Dodaj do koszyka" w karcie
   ============================================================ */

.hx-bs {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
}
.hx-bs::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
@media(min-width:750px){.hx-bs{padding:90px 48px}}
@media(min-width:1200px){.hx-bs{padding:110px 80px}}

.hx-bs__wrap {
  max-width: 1680px;
  margin: 0 auto;
}

/* Header */
.hx-bs__hdr {
  margin-bottom: 40px;
  text-align: left;
}
@media(min-width:750px){.hx-bs__hdr{margin-bottom:48px}}
@media(min-width:1200px){.hx-bs__hdr{margin-bottom:64px}}

.hx .hx-bs__sub,
.cm .hx .hx-bs__sub,
.hx-bs__sub {
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--t3) !important;
  margin: 0 0 12px 0;
  display: block;
}
@media(min-width:1068px){
  .hx .hx-bs__sub, .cm .hx .hx-bs__sub, .hx-bs__sub {font-size:1.4rem !important;}
}

.hx .hx-bs__h,
.cm .hx .hx-bs__h,
.hx-bs__h {
  font-family: var(--hurom-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--hurom-ink) !important;
  margin: 0 0 16px 0 !important;
  font-size: 2.8rem !important;
  line-height: 1.2 !important;
}
@media(min-width:750px){
  .hx .hx-bs__h, .cm .hx .hx-bs__h, .hx-bs__h {font-size:3.6rem !important;}
}
@media(min-width:1200px){
  .hx .hx-bs__h, .cm .hx .hx-bs__h, .hx-bs__h {font-size:4rem !important;}
}
@media(min-width:1536px){
  .hx .hx-bs__h, .cm .hx .hx-bs__h, .hx-bs__h {font-size:4.4rem !important;}
}

.hx .hx-bs__lead,
.cm .hx .hx-bs__lead,
.hx-bs__lead {
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  color: var(--t2) !important;
  margin: 0;
  max-width: 720px;
}
@media(min-width:1068px){
  .hx .hx-bs__lead, .cm .hx .hx-bs__lead, .hx-bs__lead {font-size:1.7rem !important;}
}

/* Grid responsive: horizontal carousel mobile, grid tablet+ */
.hx-bs__grid {
  /* Mobile: horizontal scroll carousel (Apple-style) */
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  gap: 12px;
  padding: 4px 24px 16px;
  margin: 0 -24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hx-bs__grid::-webkit-scrollbar { display: none; }
.hx-bs__grid > .hx-bs__card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Tablet+: standard grid */
@media(min-width:576px){
  .hx-bs__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }
  .hx-bs__grid > .hx-bs__card {
    flex: initial;
    scroll-snap-align: none;
  }
}
@media(min-width:990px){.hx-bs__grid{grid-template-columns:repeat(4,1fr); gap:24px}}
@media(min-width:1200px){.hx-bs__grid{gap:32px}}

/* Scroll hint - peek następnej karty + subtelny gradient */
@media(max-width:575px){
  .hx-bs__wrap {
    position: relative;
  }
  /* Gradient po prawej żeby pokazać że można scrollować */
  .hx-bs__wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 32px;
    width: 24px;
    background: linear-gradient(to left, var(--bg, white), transparent);
    pointer-events: none;
    z-index: 1;
  }
}


/* Single karta produktu */
.hx-bs__card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hx-bs__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Image wrap z aspectem 1:1 */
.hx-bs__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--s);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hx-bs__img-wrap a {
  display: block;
  width: 100%;
  height: 100%;
}
.hx-bs__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  mix-blend-mode: multiply;
  display: block;
}

/* Badge rabatu - top-left */
.hx-bs__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hurom-lime);
  color: var(--bg);
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  z-index: 2;
}

/* Body - content + cta */
.hx-bs__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
@media(min-width:1200px){.hx-bs__body{padding:20px}}

/* Vendor (mała etykieta) */
.hx-bs__vendor {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}

/* Nazwa produktu */
.hx .hx-bs__name,
.cm .hx .hx-bs__name,
.hx-bs__name {
  font-family: var(--hurom-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--hurom-ink) !important;
  margin: 0;
  text-decoration: none;
  display: block;
}
.hx-bs__name:hover {
  color: var(--g);
}
@media(min-width:1200px){
  .hx .hx-bs__name, .cm .hx .hx-bs__name, .hx-bs__name {font-size:1.6rem !important;}
}

/* Prices row */
.hx-bs__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.hx-bs__price {
  font-family: var(--hurom-font-heading);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--hurom-ink);
  letter-spacing: -0.01em;
}
@media(min-width:1200px){.hx-bs__price{font-size:2rem}}

.hx-bs__price-old {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--t3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* CTA button - cart */
.hx-bs__cart {
  margin-top: auto;
  padding-top: 12px;
}

.hx-bs__btn {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--t1) !important;
  color: var(--bg) !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 150ms ease !important;
  -webkit-tap-highlight-color: transparent;
}
.hx-bs__btn:hover {
  background: var(--gd) !important;
}
.hx-bs__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hx-bs__btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* === UKRYJ STARE CENY (ceny przed rabatem) === */
/* Marcin prosił: ukryj stare ceny w Bestsellery i Spotlight */
.hx-bs__price-old,
.sob-x__price-old,
.pd__price-old {
  display: none !important;
}

/* === BADGE RABATU - CZERWONY (zamiast mint) === */
/* Dla czytelności - badge to "-XX%" więc lepszy czerwony */
.hx-bs__badge {
  background: #E30613 !important;
  color: #fff !important;
}


/* ============================================================
   TRUST BADGES (.hx-tb) - Premium 4 ikony zaufania
   ============================================================
   - Pozycja: między Spotlight a Quiz (#6)
   - Layout: 4 kolumny desktop, 2x2 tablet, 1-col mobile
   - Tło: białe full-bleed (separator wizualny)
   - Każda karta: ikona w mint kółku + tytuł + opis
   - Używa globalnych --hurom-* (działa POZA .hx)
   ============================================================ */

.hx-tb {
  position: relative;
  background: transparent;
  padding: 48px 20px;
  overflow: visible;
}
.hx-tb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-white);
  pointer-events: none;
}
@media(min-width:750px){.hx-tb{padding:64px 48px}}
@media(min-width:1200px){.hx-tb{padding:72px 80px}}

.hx-tb__grid {
  max-width: 1680px;
  margin: 0 auto;
  display: grid;
  /* Mobile 2×2 grid - wszystkie 4 ikony widoczne na jednym ekranie */
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media(min-width:576px){.hx-tb__grid{gap:40px 24px}}
@media(min-width:990px){.hx-tb__grid{grid-template-columns:repeat(4,1fr); gap:32px}}

/* Pojedyncza karta */
.hx-tb__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
@media(min-width:576px){.hx-tb__item{gap:16px}}
@media(min-width:990px){.hx-tb__item{gap:20px}}

/* Ikona w mint kółku */
.hx-tb__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(68, 190, 112, 0.1);
  color: #44BE70;
  flex-shrink: 0;
}
@media(min-width:576px){
  .hx-tb__ico {
    width: 56px;
    height: 56px;
  }
}
@media(min-width:990px){
  .hx-tb__ico {
    width: 64px;
    height: 64px;
  }
}

.hx-tb__ico svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media(min-width:576px){
  .hx-tb__ico svg {
    width: 26px;
    height: 26px;
  }
}
@media(min-width:990px){
  .hx-tb__ico svg {
    width: 30px;
    height: 30px;
  }
}

/* Text wrapper */
.hx-tb__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Tytuł karty */
.hx-tb__title {
  font-family: var(--hurom-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--hurom-ink);
  margin: 0;
  line-height: 1.25;
}
@media(min-width:576px){.hx-tb__title{font-size:1.5rem}}
@media(min-width:1200px){.hx-tb__title{font-size:1.6rem}}

/* Opis karty */
.hx-tb__sub {
  font-family: var(--hurom-font-system);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--hurom-gray-2);
  margin: 0;
  line-height: 1.4;
}
@media(min-width:576px){.hx-tb__sub{font-size:1.3rem}}
@media(min-width:1200px){.hx-tb__sub{font-size:1.4rem}}

/* === SPOTLIGHT HEADER (analogiczny do .hx-bs__hdr) === */
.sob-x__hdr {
  max-width: 1680px;
  margin: 0 auto 40px;
  text-align: left;
  padding: 0;
}
@media(min-width:750px){.sob-x__hdr{margin-bottom:48px}}
@media(min-width:1200px){.sob-x__hdr{margin-bottom:64px}}

.sob-x__hdr-sub {
  font-family: var(--sob-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--sob-t3) !important;
  margin: 0 0 12px 0;
  display: block;
}
@media(min-width:1068px){.sob-x__hdr-sub{font-size:1.4rem !important;}}

.sob-x__hdr-h {
  font-family: var(--hurom-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--sob-t1) !important;
  margin: 0 0 16px 0 !important;
  font-size: 2.8rem !important;
  line-height: 1.2 !important;
}
@media(min-width:750px){.sob-x__hdr-h{font-size:3.6rem !important;}}
@media(min-width:1200px){.sob-x__hdr-h{font-size:4rem !important;}}
@media(min-width:1536px){.sob-x__hdr-h{font-size:4.4rem !important;}}

.sob-x__hdr-lead {
  font-family: var(--hurom-font-system) !important;
  font-weight: 500 !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  color: var(--sob-t2) !important;
  margin: 0;
  max-width: 720px;
}
@media(min-width:1068px){.sob-x__hdr-lead{font-size:1.7rem !important;}}

/* .sob-x ma już padding - inner bez dodatkowego */

/* === KONIEC SPOTLIGHT HEADER === */

/* ═══════════════════════════════════════════════
   SESJA A (v1.33) - 3 NOWE SEKCJE PREMIUM
   1. .hx-htg Hero Tagline (#0)
   2. .hx-mq Marquee kremowy (#00)
   3. .hx-st Stats Counter (#1)
   ═══════════════════════════════════════════════ */

/* ─── HERO TAGLINE ─── */
.hx-htg {
  position: relative;
  background: transparent;
  padding: 70px 24px 50px;
  overflow: visible;
  text-align: center;
}
.hx-htg::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-white, #FFF);
  pointer-events: none;
}
@media(min-width:750px){.hx-htg{padding:90px 48px 70px}}
@media(min-width:1200px){.hx-htg{padding:110px 80px 90px}}

.hx-htg__inner { max-width: 920px; margin: 0 auto; position: relative; }

.hx-htg__eyebrow {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hurom-gray-2, #6B7785);
  margin: 0 0 24px 0;
}

.hx-htg__headline {
  font-family: var(--hurom-font-heading, sans-serif);
  font-weight: 700;
  font-size: 3.6rem !important;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 24px 0;
}
@media(min-width:750px){.hx-htg__headline{font-size:5.6rem !important;}}
@media(min-width:1200px){.hx-htg__headline{font-size:7.2rem !important;}}
@media(min-width:1536px){.hx-htg__headline{font-size:8rem !important;}}

.hx-htg__lead {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 500; font-size: 1.6rem;
  line-height: 1.5; color: var(--hurom-gray-1, #44525E);
  margin-left: auto !important; margin-right: auto !important;
  margin-top: 0; margin-bottom: 40px;
  max-width: 580px;
}
@media(min-width:750px){.hx-htg__lead{font-size:1.8rem; margin-bottom:48px}}

.hx-htg__cta {
  display: flex; flex-direction: column;
  gap: 12px; justify-content: center; align-items: center;
}
@media(min-width:576px){.hx-htg__cta{flex-direction:row; gap:16px}}

.hx-htg__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 600; font-size: 1.5rem;
  text-decoration: none; border-radius: 8px;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  white-space: nowrap;
}
.hx-htg__btn--primary {
  background: var(--hurom-ink, #0D232B);
  color: var(--hurom-white, #FFF);
}
.hx-htg__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.hx-htg__btn--ghost {
  background: transparent;
  color: var(--hurom-ink, #0D232B);
  border: 1.5px solid var(--hurom-ink, #0D232B);
}
.hx-htg__btn--ghost:hover {
  background: var(--hurom-ink, #0D232B);
  color: var(--hurom-white, #FFF);
}

/* ─── MARQUEE (kremowy) ─── */
.hx-mq {
  position: relative;
  background: var(--hurom-cream, #F7F7F7);
  color: var(--hurom-ink, #0D232B);
  overflow: hidden;
  padding: 18px 0;
  font-family: var(--hurom-font-system, sans-serif);
  border-top: 1px solid rgba(13, 35, 43, 0.06);
  border-bottom: 1px solid rgba(13, 35, 43, 0.06);
}
.hx-mq__track {
  display: flex; width: max-content;
  animation: hxMqScroll 40s linear infinite;
  will-change: transform;
}
.hx-mq__group {
  display: flex; gap: 56px;
  padding-right: 56px; flex-shrink: 0;
}
.hx-mq__item {
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--hurom-ink, #0D232B);
}
@media(min-width:750px){.hx-mq__item{font-size:1.4rem}}

@keyframes hxMqScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hx-mq:hover .hx-mq__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hx-mq__track { animation: none; width: 100%; overflow-x: auto; }
}

/* ─── STATS COUNTER ─── */
.hx-st {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
}
.hx-st::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-white, #FFF);
  pointer-events: none;
}
@media(min-width:750px){.hx-st{padding:90px 48px}}
@media(min-width:1200px){.hx-st{padding:110px 80px}}

.hx-st__inner { max-width: 1680px; margin: 0 auto; position: relative; }

.hx-st__hdr { text-align: center; margin-bottom: 48px; }
@media(min-width:750px){.hx-st__hdr{margin-bottom:64px}}

.hx-st__sub {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hurom-gray-2, #6B7785);
  margin: 0 0 12px 0;
}

.hx-st__h {
  font-family: var(--hurom-font-heading, sans-serif);
  font-weight: 700;
  font-size: 2.8rem !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hurom-ink, #0D232B);
  margin: 0;
}
@media(min-width:750px){.hx-st__h{font-size:3.6rem !important;}}
@media(min-width:1200px){.hx-st__h{font-size:4.4rem !important;}}
@media(min-width:1536px){.hx-st__h{font-size:5.2rem !important;}}

.hx-st__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media(min-width:750px){.hx-st__grid{grid-template-columns:repeat(4,1fr); gap:32px}}

.hx-st__item { text-align: center; padding: 16px; }

.hx-st__num {
  font-family: var(--hurom-font-heading, sans-serif);
  font-weight: 700; font-size: 4.8rem;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--hurom-forest, #1A7A45);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
@media(min-width:750px){.hx-st__num{font-size:6.4rem}}
@media(min-width:1200px){.hx-st__num{font-size:8rem}}

.hx-st__label {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 500; font-size: 1.4rem;
  color: var(--hurom-gray-1, #44525E);
  line-height: 1.4;
}
@media(min-width:750px){.hx-st__label{font-size:1.5rem}}

/* Sub-label - drobny entity anchor pod liczbą (AEO + visual hierarchy) */
.hx-st__sublabel {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 500; font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--hurom-gray-2, #6B7785);
  line-height: 1.3;
  margin-top: 6px;
  opacity: 0.85;
}
@media(min-width:750px){.hx-st__sublabel{font-size:1.3rem; margin-top:8px}}

/* AEO factual prose pod kratownicą - cytowalny content dla LLM */
.hx-st__prose {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  padding: 32px 24px 0;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
}
@media(min-width:750px){.hx-st__prose{margin-top:64px; padding-top:40px}}
@media(min-width:1200px){.hx-st__prose{margin-top:80px; padding-top:48px}}

.hx-st__prose p {
  font-family: var(--hurom-font-system, sans-serif);
  font-weight: 400; font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-st__prose p{font-size:1.6rem; line-height:1.7}}
@media(min-width:1200px){.hx-st__prose p{font-size:1.7rem}}

.hx-st__prose strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-st__prose em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

/* ═══════════════════════════════════════════════
   KONIEC SESJA A
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SESJA C (v1.35) - PURE vs EASY (.hx-pe)
   Hero-hero compare premium - inspiracja Apple/SMEG
   Pozycja: po Spotlight (.sob-x), przed Trust Badges (.hx-tb)
   ═══════════════════════════════════════════════ */
.hx-pe {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-pe::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-cream, #F7F7F7);
  pointer-events: none;
}
@media(min-width:750px){.hx-pe{padding:90px 48px}}
@media(min-width:1200px){.hx-pe{padding:110px 80px}}

.hx-pe__inner {
  max-width: 1680px;
  margin: 0 auto;
  position: relative;
}

/* ─── Header ─── */
.hx-pe__hdr {
  text-align: center;
  margin-bottom: 48px;
}
@media(min-width:750px){.hx-pe__hdr{margin-bottom:64px}}

.hx-pe__eye {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hurom-gray-2, #6B7785);
  margin: 0 0 12px 0;
}

.hx-pe__h {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 16px 0;
}
@media(min-width:750px){.hx-pe__h{font-size:3.6rem}}
@media(min-width:1200px){.hx-pe__h{font-size:4rem}}

.hx-pe__lead {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--hurom-gray-1, #44525E);
  max-width: 720px;
  margin: 0 auto;
}
@media(min-width:750px){.hx-pe__lead{font-size:1.7rem}}

/* ─── Grid 2 kart ─── */
.hx-pe__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media(min-width:900px){
  .hx-pe__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media(min-width:1200px){
  .hx-pe__grid { gap: 40px; }
}

/* ─── Karta ─── */
.hx-pe__card {
  background: var(--hurom-white, #FFFFFF);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 320ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 320ms cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 1px 3px rgba(13, 35, 43, 0.04);
}
.hx-pe__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 35, 43, 0.08);
}

/* Media wrapper ze zdjęciem */
.hx-pe__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--hurom-cream, #F7F7F7);
  overflow: hidden;
}
@media(min-width:900px){
  .hx-pe__media { aspect-ratio: 1 / 1; }
}

.hx-pe__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 32px;
  transition: transform 600ms cubic-bezier(.25,.46,.45,.94);
}
.hx-pe__card:hover .hx-pe__img {
  transform: scale(1.04);
}
@media(min-width:900px){.hx-pe__img{padding:48px}}

/* Tag flagship - "Bestseller / Nowość" */
.hx-pe__pill {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--hurom-ink, #0D232B);
  color: var(--hurom-white, #FFFFFF);
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.1rem;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}
.hx-pe__pill--new {
  background: var(--hurom-forest, #1A7A45);
}

/* Body kart */
.hx-pe__body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media(min-width:750px){.hx-pe__body{padding:36px 32px 40px}}
@media(min-width:1200px){.hx-pe__body{padding:44px 40px 48px}}

.hx-pe__series {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hurom-forest, #1A7A45);
  margin: 0 0 10px 0;
}

.hx-pe__name {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 8px 0;
}
@media(min-width:750px){.hx-pe__name{font-size:2.8rem}}
@media(min-width:1200px){.hx-pe__name{font-size:3.2rem}}

.hx-pe__tagline {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--hurom-gray-1, #44525E);
  margin: 0 0 24px 0;
}
@media(min-width:750px){.hx-pe__tagline{font-size:1.6rem; margin-bottom:28px}}

/* Lista benefitów */
.hx-pe__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media(min-width:750px){.hx-pe__list{margin-bottom:32px; gap:14px}}

.hx-pe__li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--hurom-ink, #0D232B);
}
@media(min-width:750px){.hx-pe__li{font-size:1.5rem}}

.hx-pe__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--hurom-forest, #1A7A45);
}

/* Cena */
.hx-pe__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px 0;
  padding-top: 4px;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
  padding-top: 20px;
}
@media(min-width:750px){.hx-pe__price-row{margin-bottom:24px; padding-top:24px}}

.hx-pe__price-lbl {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--hurom-gray-2, #6B7785);
}

.hx-pe__price {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--hurom-ink, #0D232B);
}
@media(min-width:750px){.hx-pe__price{font-size:2.2rem}}

/* CTA */
.hx-pe__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
@media(min-width:576px){
  .hx-pe__cta{flex-direction:row; gap:12px}
}

.hx-pe__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
  flex: 1;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
@media(min-width:750px){.hx-pe__btn{font-size:1.5rem; padding:16px 28px}}

.hx-pe__btn--primary {
  background: var(--hurom-ink, #0D232B);
  color: var(--hurom-white, #FFFFFF);
}
.hx-pe__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 35, 43, 0.18);
  color: var(--hurom-white, #FFFFFF);
}

.hx-pe__btn--ghost {
  background: transparent;
  color: var(--hurom-ink, #0D232B);
  border: 1.5px solid var(--hurom-gray-3, #E5E7EB);
}
.hx-pe__btn--ghost:hover {
  border-color: var(--hurom-ink, #0D232B);
  background: var(--hurom-cream, #F7F7F7);
}

.hx-pe__btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 180ms ease;
}
.hx-pe__btn:hover .hx-pe__btn-arrow {
  transform: translateX(3px);
}

/* ─── AEO paragraf prozą ─── */
.hx-pe__aeo {
  max-width: 820px;
  margin: 48px auto 0;
  text-align: center;
  padding: 32px 24px 0;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
}
@media(min-width:750px){.hx-pe__aeo{margin-top:64px; padding-top:40px}}
@media(min-width:1200px){.hx-pe__aeo{margin-top:80px; padding-top:48px}}

.hx-pe__aeo p {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0 0 16px 0;
}
.hx-pe__aeo p:last-child { margin-bottom: 0; }
@media(min-width:750px){.hx-pe__aeo p{font-size:1.6rem; line-height:1.7}}

.hx-pe__aeo strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-pe__aeo em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

/* Fallback CTA pod AEO - link do quizu */
.hx-pe__quiz {
  margin-top: 20px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--hurom-gray-1, #44525E);
}
.hx-pe__quiz a {
  color: var(--hurom-forest, #1A7A45);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
  transition: opacity 180ms ease;
}
.hx-pe__quiz a:hover { opacity: 0.7; }

/* ═══════════════════════════════════════════════
   KONIEC SESJA C
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SESJA D (v1.36) - HERITAGE TIMELINE (.hx-ht)
   50 lat historii Hurom — horizontal scroll snap
   Pozycja: po PURE vs EASY (#10), przed Trust Badges (#11)
   AEO-first: każdy milestone = cytowalne entity dla LLM
   ═══════════════════════════════════════════════ */
.hx-ht {
  position: relative;
  background: transparent;
  padding: 70px 0;
  overflow: visible;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-ht::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-white, #FFFFFF);
  pointer-events: none;
}
@media(min-width:750px){.hx-ht{padding:90px 0}}
@media(min-width:1200px){.hx-ht{padding:110px 0}}

/* ─── Header (centered, max-width container) ─── */
.hx-ht__hdr {
  max-width: 920px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
  position: relative;
}
@media(min-width:750px){
  .hx-ht__hdr { padding: 0 48px; margin-bottom: 64px; }
}
@media(min-width:1200px){
  .hx-ht__hdr { padding: 0 80px; margin-bottom: 80px; }
}

.hx-ht__eye {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hurom-gray-2, #6B7785);
  margin: 0 0 12px 0;
}

.hx-ht__h {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 16px 0;
}
@media(min-width:750px){.hx-ht__h{font-size:3.6rem}}
@media(min-width:1200px){.hx-ht__h{font-size:4rem}}

.hx-ht__lead {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--hurom-gray-1, #44525E);
  max-width: 720px;
  margin: 0 auto;
}
@media(min-width:750px){.hx-ht__lead{font-size:1.7rem}}

/* ─── Track horizontal scroll (full-bleed) ─── */
.hx-ht__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--hurom-gray-3, #E5E7EB) transparent;
}
@media(min-width:750px){
  .hx-ht__track { gap: 24px; padding: 8px 48px 40px; }
}
@media(min-width:1200px){
  .hx-ht__track { gap: 32px; padding: 8px 80px 48px; }
}
@media(min-width:1536px){
  /* Na bardzo dużych ekranach center + max-width żeby track nie był infinity-wide */
  .hx-ht__track {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* Custom scrollbar styling */
.hx-ht__track::-webkit-scrollbar { height: 8px; }
.hx-ht__track::-webkit-scrollbar-track { background: transparent; }
.hx-ht__track::-webkit-scrollbar-thumb {
  background: var(--hurom-gray-3, #E5E7EB);
  border-radius: 4px;
}
.hx-ht__track::-webkit-scrollbar-thumb:hover {
  background: var(--hurom-gray-2, #6B7785);
}

/* ─── Card (milestone) ─── */
.hx-ht__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--hurom-cream, #F7F7F7);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 320ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 320ms cubic-bezier(.25,.46,.45,.94),
              background 320ms cubic-bezier(.25,.46,.45,.94);
  border: 1px solid transparent;
}
@media(min-width:750px){
  .hx-ht__card { flex: 0 0 340px; padding: 40px 32px; }
}
@media(min-width:1200px){
  .hx-ht__card { flex: 0 0 380px; padding: 48px 36px; }
}

.hx-ht__card:hover {
  background: var(--hurom-white, #FFFFFF);
  border-color: rgba(13, 35, 43, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(13, 35, 43, 0.08);
}

/* Index dot + year row */
.hx-ht__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.hx-ht__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hurom-forest, #1A7A45);
  position: relative;
}
.hx-ht__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--hurom-forest, #1A7A45);
  opacity: 0.3;
}

.hx-ht__year {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hurom-forest, #1A7A45);
  font-variant-numeric: tabular-nums;
}
@media(min-width:750px){.hx-ht__year{font-size:4.4rem}}
@media(min-width:1200px){.hx-ht__year{font-size:5.2rem}}

/* Title + description */
.hx-ht__title {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 16px 0;
}
@media(min-width:750px){.hx-ht__title{font-size:2.1rem; margin-bottom:18px}}
@media(min-width:1200px){.hx-ht__title{font-size:2.3rem; margin-bottom:20px}}

.hx-ht__desc {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-ht__desc{font-size:1.45rem}}
@media(min-width:1200px){.hx-ht__desc{font-size:1.5rem}}

/* Aktywna karta — wyróżniona przez forest gradient */
.hx-ht__card--active {
  background: var(--hurom-white, #FFFFFF);
  border-color: rgba(26, 122, 69, 0.18);
  box-shadow: 0 8px 24px rgba(13, 35, 43, 0.06);
}

/* Optional: badge "Latest" / "Coming soon" */
.hx-ht__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--hurom-forest, #1A7A45);
  color: var(--hurom-white, #FFFFFF);
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1rem;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Scroll hint (mobile cue) ─── */
.hx-ht__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px 0;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--hurom-gray-2, #6B7785);
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.hx-ht__hint svg {
  width: 14px;
  height: 14px;
  animation: hx-ht-arrow 1.6s ease-in-out infinite;
}
@keyframes hx-ht-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media(min-width:1200px){
  /* Na desktop user pewnie nie potrzebuje hint */
  .hx-ht__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-ht__hint svg { animation: none; }
}

/* ─── AEO long-form paragraph (under track) ─── */
.hx-ht__aeo {
  max-width: 820px;
  margin: 32px auto 0;
  padding: 32px 24px 0;
  text-align: center;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
}
@media(min-width:750px){.hx-ht__aeo{margin-top:48px; padding-top:40px}}
@media(min-width:1200px){.hx-ht__aeo{margin-top:64px; padding-top:48px}}

.hx-ht__aeo p {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-ht__aeo p{font-size:1.6rem; line-height:1.7}}

.hx-ht__aeo strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-ht__aeo em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

/* CTA link "Poznaj pełną historię" pod AEO paragrafem */
.hx-ht__cta-row {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  text-align: center;
}
@media(min-width:750px){.hx-ht__cta-row{margin-top:28px !important}}

.hx-ht__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--hurom-forest, #1A7A45);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: gap 200ms ease, color 200ms ease;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.hx-ht__cta-link:hover {
  gap: 14px;
  color: var(--hurom-ink, #0D232B);
}
.hx-ht__cta-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   KONIEC SESJA D
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SESJA E (v1.37) - TECHNOLOGY SHOWCASE (.hx-tc)
   3-col grid z custom SVG illustrations + hover reveal
   Pozycja: po Heritage Timeline (#10.5), przed Trust Badges (#11)
   Cel: AEO killer — definicje SST/BLDC/Easy Clean dla LLM
   ═══════════════════════════════════════════════ */
.hx-tc {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-tc::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-cream, #F7F7F7);
  pointer-events: none;
}
@media(min-width:750px){.hx-tc{padding:90px 48px}}
@media(min-width:1200px){.hx-tc{padding:110px 80px}}

.hx-tc__inner {
  max-width: 1680px;
  margin: 0 auto;
  position: relative;
}

/* ─── Header ─── */
.hx-tc__hdr {
  text-align: center;
  margin-bottom: 48px;
}
@media(min-width:750px){.hx-tc__hdr{margin-bottom:64px}}
@media(min-width:1200px){.hx-tc__hdr{margin-bottom:80px}}

.hx-tc__eye {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hurom-gray-2, #6B7785);
  margin: 0 0 12px 0;
}

.hx-tc__h {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 16px 0;
}
@media(min-width:750px){.hx-tc__h{font-size:3.6rem}}
@media(min-width:1200px){.hx-tc__h{font-size:4rem}}

.hx-tc__lead {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--hurom-gray-1, #44525E);
  max-width: 720px;
  margin: 0 auto;
}
@media(min-width:750px){.hx-tc__lead{font-size:1.7rem}}

/* ─── Grid 3-col ─── */
.hx-tc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media(min-width:750px){
  .hx-tc__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media(min-width:1200px){
  .hx-tc__grid { gap: 32px; }
}

/* ─── Card ─── */
.hx-tc__card {
  background: var(--hurom-white, #FFFFFF);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 360ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 360ms cubic-bezier(.25,.46,.45,.94),
              border-color 360ms cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 1px 3px rgba(13, 35, 43, 0.04);
}
@media(min-width:750px){.hx-tc__card{padding:40px 32px}}
@media(min-width:1200px){.hx-tc__card{padding:48px 36px}}

.hx-tc__card:hover {
  transform: translateY(-6px);
  border-color: rgba(26, 122, 69, 0.18);
  box-shadow: 0 20px 48px rgba(13, 35, 43, 0.10);
}

/* Hover glow gradient w tle */
.hx-tc__card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hurom-forest, #1A7A45), var(--hurom-lime, #78C500));
  opacity: 0;
  transition: opacity 360ms cubic-bezier(.25,.46,.45,.94);
}
.hx-tc__card:hover::before { opacity: 1; }

/* ─── SVG illustration container ─── */
.hx-tc__art {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media(min-width:750px){.hx-tc__art{max-width:180px; margin-bottom:32px}}
@media(min-width:1200px){.hx-tc__art{max-width:220px; margin-bottom:36px}}

.hx-tc__art svg {
  width: 100%;
  height: 100%;
  transition: transform 540ms cubic-bezier(.25,.46,.45,.94);
}
.hx-tc__card:hover .hx-tc__art svg {
  transform: scale(1.05) rotate(-2deg);
}

/* Subtle background circle behind SVG (premium accent) */
.hx-tc__art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--hurom-cream, #F7F7F7);
  z-index: -1;
  opacity: 0.6;
  transition: opacity 360ms ease;
}
.hx-tc__card:hover .hx-tc__art::before {
  opacity: 1;
  background: rgba(26, 122, 69, 0.06);
}

/* ─── Card content ─── */
.hx-tc__label {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hurom-forest, #1A7A45);
  margin: 0 0 10px 0;
  text-align: center;
}

.hx-tc__name {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--hurom-ink, #0D232B);
  margin: 0 0 16px 0;
  text-align: center;
}
@media(min-width:750px){.hx-tc__name{font-size:2.4rem; margin-bottom:18px}}
@media(min-width:1200px){.hx-tc__name{font-size:2.6rem; margin-bottom:20px}}

.hx-tc__desc {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--hurom-gray-1, #44525E);
  margin: 0 0 24px 0;
}
@media(min-width:750px){.hx-tc__desc{font-size:1.45rem; line-height:1.65}}
@media(min-width:1200px){.hx-tc__desc{font-size:1.5rem; margin-bottom:28px}}

.hx-tc__desc strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-tc__desc em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

/* ─── Meta (year + patent info) ─── */
.hx-tc__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
  margin-top: auto;
}

.hx-tc__year {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--hurom-forest, #1A7A45);
  letter-spacing: -0.005em;
}

.hx-tc__meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hurom-gray-3, #E5E7EB);
}

.hx-tc__meta-text {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--hurom-gray-2, #6B7785);
}

/* ─── AEO footer + CTA ─── */
.hx-tc__aeo {
  max-width: 820px;
  margin: 48px auto 0;
  padding: 32px 24px 0;
  text-align: center;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
}
@media(min-width:750px){.hx-tc__aeo{margin-top:64px; padding-top:40px}}
@media(min-width:1200px){.hx-tc__aeo{margin-top:80px; padding-top:48px}}

.hx-tc__aeo p {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-tc__aeo p{font-size:1.6rem; line-height:1.7}}

.hx-tc__aeo strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-tc__aeo em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

.hx-tc__cta-row {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  text-align: center;
}
@media(min-width:750px){.hx-tc__cta-row{margin-top:28px !important}}

.hx-tc__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--hurom-forest, #1A7A45);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: gap 200ms ease, color 200ms ease;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.hx-tc__cta-link:hover {
  gap: 14px;
  color: var(--hurom-ink, #0D232B);
}
.hx-tc__cta-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   KONIEC SESJA E
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SESJA F (v1.38) - GLOSSARY (.hx-gl)
   AEO killer — definicje terminów dla LLM citations
   Pozycja: po FAQ, przed SEO description
   Layout: accordion expandable + mini comparison table
   Schema.org: DefinedTermSet via JSON-LD (w <script> bloku)
   ═══════════════════════════════════════════════ */
.hx-gl {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: visible;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-gl::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: var(--hurom-white, #FFFFFF);
  pointer-events: none;
}
@media(min-width:750px){.hx-gl{padding:90px 48px}}
@media(min-width:1200px){.hx-gl{padding:110px 80px}}

.hx-gl__inner {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

/* ─── Header ─── */
.hx-gl__hdr {
  text-align: center;
  margin-bottom: 40px;
}
@media(min-width:750px){.hx-gl__hdr{margin-bottom:56px}}

.hx-gl__eye {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 1.3rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g);
  margin: 0 0 12px 0 !important;
  display: block;
  text-align: center !important;
  max-width: none;
  line-height: 1.2;
}
@media(min-width:1068px){.hx-gl__eye{font-size:1.4rem !important;}}

.hx-gl__h {
  font-family: var(--f);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
  margin: 0 0 16px 0 !important;
  text-align: center !important;
  font-size: 2.8rem !important;
  line-height: 1.15;
}
@media(min-width:750px){.hx-gl__h{font-size:3.6rem !important;}}
@media(min-width:1200px){.hx-gl__h{font-size:4.4rem !important;}}
@media(min-width:1536px){.hx-gl__h{font-size:5.2rem !important;}}

.hx-gl__lead {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 1.7rem !important;
  line-height: 1.4;
  color: var(--t2);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 720px;
  text-align: center !important;
  display: block;
  padding: 0;
}
@media(min-width:1068px){.hx-gl__lead{font-size:1.9rem !important;}}

/* ─── Accordion list ─── */
.hx-gl__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.hx-gl__item {
  background: var(--hurom-cream, #F7F7F7);
  border-radius: 12px;
  overflow: hidden;
  transition: background 280ms ease;
}
.hx-gl__item[open] {
  background: var(--hurom-white, #FFFFFF);
  box-shadow: 0 4px 18px rgba(13, 35, 43, 0.06);
  border: 1px solid rgba(13, 35, 43, 0.06);
}

.hx-gl__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
@media(min-width:750px){.hx-gl__summary{padding:24px 32px}}

/* Remove default <details> marker — bullet-proof (Safari, Firefox, Chrome, iOS) */
.hx-gl__summary::-webkit-details-marker {
  display: none !important;
  -webkit-appearance: none;
}
.hx-gl__summary::marker {
  display: none !important;
  content: "";
}
/* Override list-item display dla edge cases (iOS Safari quirk) */
.hx-gl__item summary {
  list-style: none !important;
  list-style-type: none !important;
}
.hx-gl__item summary::-webkit-details-marker {
  display: none !important;
}
/* Reset potencjalnych pseudo-elements od idoSell global styles */
.hx-gl__summary::after,
.hx-gl__summary::before {
  content: none !important;
  display: none !important;
}

.hx-gl__term {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--hurom-ink, #0D232B);
  margin: 0;
}
@media(min-width:750px){.hx-gl__term{font-size:1.9rem}}
@media(min-width:1200px){.hx-gl__term{font-size:2.1rem}}

.hx-gl__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hurom-ink, #0D232B);
  color: var(--hurom-white, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 280ms cubic-bezier(.25,.46,.45,.94),
              background 280ms ease;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.hx-gl__item[open] .hx-gl__icon {
  background: var(--hurom-forest, #1A7A45);
  transform: rotate(45deg);
}

.hx-gl__icon svg {
  width: 14px;
  height: 14px;
}

.hx-gl__body {
  padding: 0 24px 24px;
  animation: hx-gl-fade 320ms cubic-bezier(.25,.46,.45,.94);
}
@media(min-width:750px){.hx-gl__body{padding:0 32px 32px}}

@keyframes hx-gl-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hx-gl__def {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-gl__def{font-size:1.55rem; line-height:1.7}}

.hx-gl__def strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-gl__def em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

.hx-gl__def a {
  color: var(--hurom-forest, #1A7A45);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.hx-gl__def a:hover { opacity: 0.7; }

/* ─── Mini comparison table (inside accordion item) ─── */
.hx-gl__compare {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(13, 35, 43, 0.08);
}

.hx-gl__compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid rgba(13, 35, 43, 0.08);
}
.hx-gl__compare-row:last-child { border-bottom: 0; }

.hx-gl__compare-row--head {
  background: var(--hurom-ink, #0D232B);
}
.hx-gl__compare-row--head .hx-gl__compare-cell {
  color: var(--hurom-white, #FFFFFF);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hx-gl__compare-cell {
  padding: 12px 14px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--hurom-ink, #0D232B);
  border-right: 1px solid rgba(13, 35, 43, 0.06);
}
.hx-gl__compare-cell:last-child { border-right: 0; }
.hx-gl__compare-cell:first-child {
  font-weight: 600;
  color: var(--hurom-gray-1, #44525E);
  font-size: 1.3rem;
}
@media(min-width:750px){
  .hx-gl__compare-cell{padding:14px 18px; font-size:1.4rem}
  .hx-gl__compare-cell:first-child{font-size:1.35rem}
}

.hx-gl__compare-cell--good {
  color: var(--hurom-forest, #1A7A45);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   SESJA G (v1.38) - FINAL CTA (.hx-fcta)
   Pre-FAQ closing — premium dark dramatic
   Pozycja: po Prasa (.hp), przed FAQ (.hx-fq)
   Layout: hybrid - 1 primary CTA + 3 secondary CTAs
   Background: ink dark (#0D232B) z white text
   ═══════════════════════════════════════════════ */
.hx-fcta {
  position: relative;
  background: transparent;
  padding: 80px 24px;
  overflow: visible;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-fcta::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  /* MOBILE DEFAULT: lifestyle hero (vertical-friendly crop) + dark overlay */
  background:
    /* Layer 1: dark overlay — top lżej, dół ciemniej (czytelność CTA) */
    linear-gradient(180deg,
      rgba(13, 35, 43, 0.62) 0%,
      rgba(13, 35, 43, 0.78) 55%,
      rgba(5, 20, 24, 0.92) 100%
    ),
    /* Layer 2: subtle brand glow (premium depth) */
    radial-gradient(circle at 70% 30%, rgba(26, 122, 69, 0.20), transparent 55%),
    radial-gradient(circle at 25% 75%, rgba(120, 197, 0, 0.10), transparent 50%),
    /* Layer 3: hero image (Marcin's mobile photo) */
    url('https://hurom.pl/data/include/cms/0/slider/hero-slider-main.webp') center/cover no-repeat,
    /* Fallback solid color jeśli image fail */
    #0D232B;
  background-color: #0D232B; /* explicit fallback */
  pointer-events: none;
}
/* DESKTOP: szersze zdjęcie z poziomym crop */
@media(min-width:750px){
  .hx-fcta{padding:110px 48px}
  .hx-fcta::before {
    background:
      linear-gradient(180deg,
        rgba(13, 35, 43, 0.58) 0%,
        rgba(13, 35, 43, 0.75) 55%,
        rgba(5, 20, 24, 0.92) 100%
      ),
      radial-gradient(circle at 70% 30%, rgba(26, 122, 69, 0.20), transparent 55%),
      radial-gradient(circle at 25% 75%, rgba(120, 197, 0, 0.10), transparent 50%),
      url('https://hurom.pl/data/include/cms/0/slider/h400-desk.webp') center/cover no-repeat,
      #0D232B;
    background-color: #0D232B;
  }
}
@media(min-width:1200px){.hx-fcta{padding:140px 80px}}

.hx-fcta__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  /* Glass blur backdrop dla content - dodaje subtle depth na photo BG */
  z-index: 1;
}

.hx-fcta__eye {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hurom-lime, #78C500) !important;
  margin: 0 0 20px 0;
  /* Subtle glow dla pop on photo BG */
  text-shadow: 0 2px 12px rgba(120, 197, 0, 0.4),
               0 0 24px rgba(0, 0, 0, 0.6);
}

.hx-fcta__h {
  font-family: var(--hurom-font-heading, Poppins);
  font-weight: 700;
  font-size: 3.2rem !important;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--hurom-white, #FFFFFF) !important;
  margin: 0 0 16px 0;
  /* Strong shadow dla maksymalnej czytelności na photo BG */
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7),
               0 2px 10px rgba(0, 0, 0, 0.5);
}
@media(min-width:750px){.hx-fcta__h{font-size:4.8rem !important;}}
@media(min-width:1200px){.hx-fcta__h{font-size:6rem !important;}}
@media(min-width:1536px){.hx-fcta__h{font-size:7rem !important;}}

.hx-fcta__lead {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 640px;
  margin: 0 auto 36px;
}
@media(min-width:750px){.hx-fcta__lead{font-size:1.8rem; margin-bottom:44px}}
@media(min-width:1200px){.hx-fcta__lead{font-size:1.9rem; margin-bottom:52px}}

/* ─── Primary CTA (big lime/forest button) ─── */
.hx-fcta__primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 36px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--hurom-lime, #78C500);
  color: var(--hurom-ink, #0D232B);
  box-shadow: 0 8px 24px rgba(120, 197, 0, 0.25);
  transition: transform 240ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 240ms cubic-bezier(.25,.46,.45,.94),
              background 240ms ease;
}
@media(min-width:750px){
  .hx-fcta__primary{padding:22px 44px; font-size:1.7rem; gap:14px}
}
@media(min-width:1200px){
  .hx-fcta__primary{padding:24px 52px; font-size:1.8rem}
}

.hx-fcta__primary:hover {
  transform: translateY(-3px);
  background: #6AAD00;
  box-shadow: 0 14px 36px rgba(120, 197, 0, 0.4);
  color: var(--hurom-ink, #0D232B);
}

.hx-fcta__primary svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 240ms ease;
}
.hx-fcta__primary:hover svg {
  transform: translateX(4px);
}

/* ─── Divider "Wolisz przeglądać?" ─── */
.hx-fcta__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px auto 24px;
  max-width: 640px;
}
@media(min-width:750px){.hx-fcta__divider{margin:52px auto 28px}}

.hx-fcta__divider::before,
.hx-fcta__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.hx-fcta__divider-text {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 500;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ─── Secondary CTAs (3 ghost buttons) ─── */
.hx-fcta__secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media(min-width:576px){.hx-fcta__secondary{gap:12px}}
@media(min-width:750px){.hx-fcta__secondary{gap:14px}}

.hx-fcta__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 600;
  font-size: 1.35rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(13, 35, 43, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hurom-white, #FFFFFF) !important;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@media(min-width:750px){.hx-fcta__ghost{padding:14px 26px; font-size:1.4rem}}

.hx-fcta__ghost:hover {
  border-color: var(--hurom-lime, #78C500);
  background: rgba(120, 197, 0, 0.18);
  color: var(--hurom-white, #FFFFFF) !important;
  transform: translateY(-1px);
}

.hx-fcta__ghost svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 200ms ease;
  opacity: 0.7;
}
.hx-fcta__ghost:hover svg {
  transform: translateX(2px);
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   KONIEC SESJA F + G
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SESJA H (v1.40) - AI WELLNESS (.hx-ai)
   Hurom AI Chef showcase — premium banner z mockupem
   Pozycja: po Technology Showcase (#10.7), przed Trust Badges (#11)
   Cel: ecosystem brand differentiation + AEO entity (AI Chef)
   Brand: forest #1A7A45 + lime #78C500 + ink + cream neutralny
   Inspiracja: mockup Marcina (Hurom AI Wellness premium banner)
   ═══════════════════════════════════════════════ */
.hx-ai {
  position: relative;
  background: transparent;
  padding: 70px 24px;
  overflow: hidden;
  font-family: var(--hurom-font-system, "DM Sans");
}
.hx-ai::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background:
    radial-gradient(circle at 84% 24%, rgba(26, 122, 69, 0.10), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(120, 197, 0, 0.06), transparent 32%),
    linear-gradient(135deg, var(--hurom-white, #FFFFFF) 0%, var(--hurom-cream, #F7F7F7) 100%);
  pointer-events: none;
}
@media(min-width:750px){.hx-ai{padding:90px 48px}}
@media(min-width:1200px){.hx-ai{padding:110px 80px}}

.hx-ai__wrap {
  max-width: 1680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}
@media(min-width:980px){
  .hx-ai__wrap {
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 58px;
  }
}

/* ─── LEFT: copy column ─── */
.hx-ai__copy {
  padding: 8px 0;
}

.hx-ai__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 9px 14px;
  border: 1px solid rgba(26, 122, 69, 0.16);
  border-radius: 999px;
  color: var(--hurom-forest, #1A7A45);
  background: rgba(255, 255, 255, 0.58);
  font-family: var(--hurom-font-system, "DM Sans");
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hx-ai__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hurom-forest, #1A7A45);
  box-shadow: 0 0 0 5px rgba(26, 122, 69, 0.12);
  flex-shrink: 0;
}

.hx-ai__title {
  font-family: var(--hurom-font-heading, Poppins);
  margin: 0 0 22px;
  max-width: 650px;
  color: var(--hurom-ink, #0D232B);
  font-size: 3.8rem;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
}
@media(min-width:750px){.hx-ai__title{font-size:5.6rem}}
@media(min-width:1200px){.hx-ai__title{font-size:6.8rem; line-height:0.96}}
@media(min-width:1536px){.hx-ai__title{font-size:7.6rem}}

.hx-ai__lead {
  font-family: var(--hurom-font-system, "DM Sans");
  max-width: 590px;
  margin: 0 0 34px;
  color: var(--hurom-gray-1, #44525E);
  font-size: 1.6rem;
  line-height: 1.55;
  letter-spacing: -0.015em;
  font-weight: 400;
}
@media(min-width:750px){.hx-ai__lead{font-size:1.8rem}}
@media(min-width:1200px){.hx-ai__lead{font-size:2rem; line-height:1.6}}

/* ─── CTAs ─── */
.hx-ai__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}

.hx-ai__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  font-family: var(--hurom-font-system, "DM Sans");
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 220ms ease,
              background 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media(min-width:750px){.hx-ai__btn{font-size:1.55rem; padding:0 28px}}

.hx-ai__btn--primary {
  color: var(--hurom-white, #FFFFFF);
  background: var(--hurom-ink, #0D232B);
  box-shadow: 0 16px 34px rgba(13, 35, 43, 0.18);
}
.hx-ai__btn--primary:hover {
  background: var(--hurom-forest, #1A7A45);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(26, 122, 69, 0.28);
  color: var(--hurom-white, #FFFFFF);
}

.hx-ai__btn--ghost {
  color: var(--hurom-ink, #0D232B);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(13, 35, 43, 0.14);
}
.hx-ai__btn--ghost:hover {
  background: var(--hurom-white, #FFFFFF);
  border-color: var(--hurom-ink, #0D232B);
  transform: translateY(-2px);
}

.hx-ai__btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.hx-ai__btn:hover .hx-ai__btn-arrow {
  transform: translateX(3px);
}

/* ─── 4 Benefits ─── */
.hx-ai__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 620px;
}
@media(min-width:576px){
  .hx-ai__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hx-ai__benefit {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 122, 69, 0.10);
  /* backdrop-filter with fallback for unsupported browsers */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 240ms ease, border-color 240ms ease;
}
.hx-ai__benefit:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 122, 69, 0.22);
}

.hx-ai__benefit strong {
  font-family: var(--hurom-font-system, "DM Sans");
  display: block;
  margin-bottom: 5px;
  color: var(--hurom-forest, #1A7A45);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hx-ai__benefit span {
  font-family: var(--hurom-font-system, "DM Sans");
  display: block;
  color: var(--hurom-gray-1, #44525E);
  font-size: 1.3rem;
  line-height: 1.4;
}

/* ─── RIGHT: visual column ─── */
.hx-ai__visual {
  position: relative;
  min-height: 480px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)),
    radial-gradient(circle at 50% 0%, rgba(26, 122, 69, 0.10), transparent 40%);
  box-shadow: 0 28px 70px rgba(13, 35, 43, 0.08);
  overflow: hidden;
  border: 1px solid rgba(26, 122, 69, 0.10);
}
@media(min-width:980px){.hx-ai__visual{min-height:580px; border-radius:32px}}
@media(min-width:1200px){.hx-ai__visual{min-height:620px}}

.hx-ai__visual::before {
  content: "";
  position: absolute;
  inset: auto -90px -130px auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(26, 122, 69, 0.08);
  pointer-events: none;
}

.hx-ai__visual-inner {
  position: relative;
  height: 100%;
  min-height: 480px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
@media(min-width:980px){
  .hx-ai__visual-inner {
    grid-template-columns: 0.88fr 1fr;
    padding: 36px;
    gap: 24px;
    min-height: 580px;
  }
}
@media(min-width:1200px){
  .hx-ai__visual-inner { padding: 42px; min-height: 620px; }
}

/* Fruit card (left, ingredient input demo) */
.hx-ai__fruit-card {
  padding: 22px;
  border-radius: 26px;
  background: var(--hurom-white, #FFFFFF);
  border: 1px solid rgba(26, 122, 69, 0.10);
  box-shadow: 0 18px 44px rgba(13, 35, 43, 0.08);
  order: 2;
}
@media(min-width:980px){
  .hx-ai__fruit-card {
    align-self: end;
    margin-bottom: 28px;
    padding: 24px;
    border-radius: 28px;
    order: 1;
  }
}

.hx-ai__fruit-title {
  font-family: var(--hurom-font-system, "DM Sans");
  margin: 0 0 14px;
  color: var(--hurom-forest, #1A7A45);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.hx-ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hx-ai__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--hurom-cream, #F7F7F7);
  color: var(--hurom-ink, #0D232B);
  font-family: var(--hurom-font-system, "DM Sans");
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
}

.hx-ai__chip-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--hurom-forest, #1A7A45);
}

.hx-ai__output {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(120, 197, 0, 0.08);
  border: 1px solid rgba(26, 122, 69, 0.16);
}

.hx-ai__output small {
  font-family: var(--hurom-font-system, "DM Sans");
  display: block;
  margin-bottom: 5px;
  color: var(--hurom-gray-2, #6B7785);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}

.hx-ai__output b {
  font-family: var(--hurom-font-heading, Poppins);
  color: var(--hurom-forest, #1A7A45);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Phone mockup (right side) */
.hx-ai__phone {
  position: relative;
  justify-self: center;
  width: min(300px, 100%);
  min-height: 480px;
  padding: 12px;
  border-radius: 38px;
  background: var(--hurom-ink, #0D232B);
  box-shadow: 0 30px 80px rgba(13, 35, 43, 0.28);
  order: 1;
}
@media(min-width:980px){
  .hx-ai__phone {
    width: min(310px, 100%);
    min-height: 540px;
    border-radius: 42px;
    transform: rotate(2deg);
    order: 2;
  }
}

.hx-ai__screen {
  min-height: 456px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
  overflow: hidden;
}
@media(min-width:980px){.hx-ai__screen{min-height:516px; border-radius:32px}}

.hx-ai__phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-family: var(--hurom-font-system, "DM Sans");
  color: var(--hurom-forest, #1A7A45);
  font-size: 1.3rem;
  font-weight: 700;
}

.hx-ai__pill {
  width: 70px;
  height: 22px;
  border-radius: 999px;
  background: var(--hurom-ink, #0D232B);
  opacity: 0.9;
}

.hx-ai__app-title {
  font-family: var(--hurom-font-heading, Poppins);
  margin: 0 0 8px;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--hurom-ink, #0D232B);
  font-weight: 700;
}

.hx-ai__app-sub {
  font-family: var(--hurom-font-system, "DM Sans");
  margin: 0 0 18px;
  color: var(--hurom-gray-2, #6B7785);
  font-size: 1.3rem;
  line-height: 1.4;
}

.hx-ai__input {
  font-family: var(--hurom-font-system, "DM Sans");
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--hurom-white, #FFFFFF);
  border: 1px solid rgba(26, 122, 69, 0.14);
  color: var(--hurom-gray-2, #6B7785);
  font-size: 1.3rem;
}

.hx-ai__recipe {
  padding: 17px;
  border-radius: 22px;
  background: var(--hurom-forest, #1A7A45);
  color: var(--hurom-white, #FFFFFF);
}

.hx-ai__recipe small {
  font-family: var(--hurom-font-system, "DM Sans");
  display: block;
  margin-bottom: 8px;
  opacity: 0.78;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.hx-ai__recipe h3 {
  font-family: var(--hurom-font-heading, Poppins);
  margin: 0 0 10px;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--hurom-white, #FFFFFF);
}

.hx-ai__recipe p {
  font-family: var(--hurom-font-system, "DM Sans");
  margin: 0;
  opacity: 0.82;
  font-size: 1.25rem;
  line-height: 1.42;
}

.hx-ai__mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media(max-width:620px){
  .hx-ai__mini-row { grid-template-columns: 1fr; }
}

.hx-ai__mini {
  padding: 13px;
  border-radius: 16px;
  background: var(--hurom-white, #FFFFFF);
  border: 1px solid rgba(26, 122, 69, 0.10);
  font-family: var(--hurom-font-system, "DM Sans");
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--hurom-gray-1, #44525E);
}

.hx-ai__mini b {
  font-family: var(--hurom-font-system, "DM Sans");
  display: block;
  margin-bottom: 4px;
  color: var(--hurom-forest, #1A7A45);
  font-weight: 700;
}

/* Device silhouette (decoration behind phone) */
.hx-ai__device {
  position: absolute;
  left: 38px;
  top: 44px;
  width: 130px;
  height: 168px;
  border-radius: 38px 38px 28px 28px;
  background: linear-gradient(145deg, #2a3f48, #0D232B);
  box-shadow: 0 20px 40px rgba(13, 35, 43, 0.20);
  opacity: 0.88;
  display: none;
}
@media(min-width:980px){.hx-ai__device{display:block}}

.hx-ai__device::before {
  content: "";
  position: absolute;
  left: 32px;
  top: -22px;
  width: 66px;
  height: 44px;
  border-radius: 18px;
  background: #1a2832;
}

.hx-ai__device::after {
  content: "";
  position: absolute;
  right: -50px;
  top: 88px;
  width: 64px;
  height: 38px;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, #2a3f48, #0D232B);
}

/* ─── AEO footer paragraf ─── */
.hx-ai__aeo {
  max-width: 820px;
  margin: 56px auto 0;
  padding: 32px 24px 0;
  text-align: center;
  border-top: 1px solid rgba(13, 35, 43, 0.08);
}
@media(min-width:750px){.hx-ai__aeo{margin-top:72px; padding-top:40px}}
@media(min-width:1200px){.hx-ai__aeo{margin-top:88px; padding-top:48px}}

.hx-ai__aeo p {
  font-family: var(--hurom-font-system, "DM Sans");
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hurom-gray-1, #44525E);
  margin: 0;
}
@media(min-width:750px){.hx-ai__aeo p{font-size:1.6rem; line-height:1.7}}

.hx-ai__aeo strong {
  font-weight: 600;
  color: var(--hurom-ink, #0D232B);
}

.hx-ai__aeo em {
  font-style: italic;
  font-weight: 500;
  color: var(--hurom-ink, #0D232B);
}

/* ═══════════════════════════════════════════════
   KONIEC SESJA H
   ═══════════════════════════════════════════════ */


/* ─── v1.42.23: hx-fcta__cta-row - 2 outline buttons ─── */
.hx-fcta__cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 8px;
}

.hx-fcta__primary--outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--hurom-white, #FFFFFF) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 999px !important;
  padding: 22px 44px !important;
  font-family: var(--hurom-font-system, 'DM Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1.7rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  letter-spacing: -0.005em;
  text-align: center !important;
  min-width: 260px;
  box-shadow: none !important;
}

.hx-fcta__primary--outline:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  color: var(--hurom-white, #FFFFFF) !important;
}

@media (min-width: 1200px) {
  .hx-fcta__primary--outline {
    padding: 24px 52px !important;
    font-size: 1.8rem !important;
  }
}

/* Lead - force center (override .hx * margin reset) */
.hx-fcta__lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px !important;
}