/* =====================================================================
   PROMATION – NOWY WYGLĄD: STRONA GŁÓWNA (makieta home-10-5). Szablon: templates/nowy/_n/strona-glowna.html.twig.
   Ładowana PO nowy.css i nowy-strony.css (stamtąd: .hs, .hs-head, .kicker, .search--big, .qlinks, .gc/.groups, .chip(s)).
   Źródło: makieta home.css – tylko reguły używane przez wersję 10.5 + oprawa treści z panelu (sekcje site.contentMs)
   i snippetu H1 (style w linii z edytora nadpisane – tekst bez zmian).
   ===================================================================== */
.hm{display:block}
.hm .crumbs{display:none}

/* ---------- 1. hero */
.hero{background:radial-gradient(900px 420px at 90% -10%,rgba(1,179,225,.16),transparent 60%),linear-gradient(180deg,var(--sky-50),#fff);padding:40px 0 36px;border-bottom:1px solid var(--line-2)}
.hero10v-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
/* snippet site.index.top.text: <h1 style="text-align:center"><span class="product_section_title">…</span></h1> + <p style="text-align:justify"> */
.hm-intro h1{font-size:42px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;max-width:820px;color:var(--navy);text-align:left!important}
.hm-intro h1 span{font:inherit;color:inherit}
.hm-intro p{font-size:17.5px;line-height:1.7;color:#34424F;max-width:780px;margin:0 0 18px;text-align:left!important}
.hm-intro strong{color:var(--navy)}

/* karta „Stojak na zamówienie” */
.cz{border-radius:20px}
.cz5{padding:6px 4px}
.cz5 h2{font-size:24px;line-height:1.2;margin-bottom:12px}
.cz5 h2 a{color:inherit;text-decoration:none}
.cz5 h2 a:hover{color:var(--blue-700);text-decoration:underline}
.cz5-steps{list-style:none;margin:0 0 14px;padding:0;position:relative}
.cz5-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--sky-200)}
.cz5-steps li{position:relative;display:flex;gap:12px;align-items:center;padding:6px 0}
.cz5-i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue-700);z-index:1;flex:none}
.cz5-steps b{display:block;color:var(--navy);font-size:15px}
.cz5-steps small{color:var(--muted);font-size:13px}
.cz-btn5{width:100%;min-height:50px;justify-content:space-between;border-color:var(--blue-600);color:var(--blue-700);white-space:normal;text-align:left}
.cz-btn5 svg{flex:none}
.cz-btn5:hover{background:var(--sky-50)}
.cz-hint{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.cz-more{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700}
.cz-sep{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:13.5px;font-weight:500;color:var(--muted)}
.cz-sep::before,.cz-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.rd-chips{display:flex;flex-wrap:wrap;gap:6px}
.rd-chips a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:3px 10px 3px 3px;border-radius:30px;background:var(--sky-50);border:1px solid var(--line-2);color:var(--navy);font-weight:600;font-size:13px;text-decoration:none!important}
.rd-chips a:hover{border-color:var(--blue);background:#fff}
.rd-chips img{width:32px;height:32px;border-radius:50%;object-fit:contain;background:#fff}
.rd-chips .n{margin:0}

/* przełącznik pm_home.kontrast_ciemniejszy (decyzja Krista; domyślnie wyłączony) */
.hm--kontrast .stats li:first-child{background:linear-gradient(135deg,var(--blue-800),var(--blue-700))}
.hm--kontrast .cz5 .kicker,.hm--kontrast .cz-more{color:#006AA8}

/* ---------- 2. pasek liczb */
.stats-band{margin-top:-22px;position:relative;z-index:2}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.stats li{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.stats li:first-child{background:linear-gradient(135deg,var(--blue-600),var(--blue));border:0;color:#fff}
.stats li:first-child b,.stats li:first-child span{color:#fff}
.stats b{display:block;font-size:26px;font-weight:800;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:13.5px;color:var(--muted)}

/* ---------- 3. formaty (rysunek stojaka w skali – home.js) */
.fx3{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.fx3-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-radius:14px;background:linear-gradient(180deg,var(--sky-50),#fff);padding:16px 14px 12px}
.fx3-scene{position:relative;width:100%;height:390px;border-bottom:2px solid var(--sky-200)}
.fx3-ruler{position:absolute;left:0;top:0;bottom:0;width:30px;border-right:1px dashed #B8C4CF}
.fx3-ruler span{position:absolute;right:0;width:6px;border-top:1px solid #8C9AA8}
.fx3-ruler i{position:absolute;right:9px;top:-7px;font-style:normal;font-size:10.5px;color:var(--muted)}
.fx3-ruler small{position:absolute;left:0;top:-16px;font-size:10px;color:var(--muted)}
.fx3-part{position:absolute;transition:left .35s,bottom .35s,width .35s,height .35s,opacity .25s}
.fx3-scene.no-anim .fx3-part{transition:none}
.fx3-base{background:linear-gradient(180deg,#5B6B7C,#0E2F4F);border-radius:2px}
.fx3-leg{background:linear-gradient(90deg,#9AA7B4,#DDE3E9 45%,#8C9AA8);border-radius:1px}
.fx3-bar{background:linear-gradient(180deg,#9AA7B4,#DDE3E9 45%,#8C9AA8);border-radius:1px}
.fx3-sign{display:grid;place-items:center;background:#fff;border:2px solid var(--navy);border-radius:2px;box-shadow:0 1px 3px rgba(14,47,79,.2);z-index:1}
.fx3-sign i{font-style:normal;font-size:9.5px;font-weight:700;line-height:1.1;color:var(--navy);text-align:center;padding:0 2px}
.fx3-k{display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(196,232,248,.9));border:1.5px solid var(--blue);border-radius:2px}
.fx3-k::after{content:"";position:absolute;left:14%;right:14%;top:18%;bottom:10%;background:var(--sky-200);border-radius:1px;opacity:.7}
.fx3-k i{position:relative;z-index:1;font-style:normal;font-size:10px;font-weight:800;color:var(--blue-700)}
.fx3-post{display:grid;place-items:center;background:linear-gradient(135deg,#E6F6FC,#fff 60%,#FFF1DE);border:3px solid #9AA7B4;outline:1px solid #6D7C8B;border-radius:1px;z-index:2;box-shadow:0 4px 12px rgba(14,47,79,.18)}
.fx3-post i{font-style:normal;font-size:15px;font-weight:800;color:var(--orange-700)}
.fx3-cap{margin:10px 0 0;text-align:center;color:var(--navy);font-size:14px;min-height:2.6em}
.fx3-cap small{color:var(--muted);font-size:11.5px}
.fx3-pick h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 8px;color:var(--navy)}
.fx3-pick h3:not(:first-child){margin-top:16px}
.fx3-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx3-b{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:52px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);color:var(--navy);text-decoration:none!important;transition:border-color .15s,background .15s}
.fx3-b b{grid-row:span 2;font-size:22px;font-weight:800;color:var(--blue-700)}
.fx3-b span{font-size:13px;font-weight:600;line-height:1.2}
.fx3-b em{font-style:normal;font-size:12px;color:var(--muted)}
.fx3-b:hover,.fx3-b.is-on{border-color:var(--blue);background:var(--sky-50)}
.fx-more{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.fx-more a{display:inline-flex;align-items:center;min-height:32px;font-weight:700}
/* podpowiedź „Najedź…” tylko tam, gdzie jest mysz; rysunek tylko na dużym ekranie z myszą (dotyk = przejście do kategorii) */
.fx3-hint{display:none;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media (hover:hover) and (pointer:fine) and (min-width:861px){.fx3-hint{display:block}}
@media (hover:none),(max-width:860px){
  .fx3{grid-template-columns:minmax(0,1fr)}
  .fx3-stage{display:none}
}

/* ---------- 4. cała oferta – style w nowy-strony.css (.groups--rows2, .gc--row, .chips) */

/* ---------- 5. branże */
.more-link--btn{padding:10px 16px;border-radius:12px;border:1.5px solid var(--sky-200);background:#fff;white-space:nowrap}
.more-link--btn:hover{border-color:var(--blue);text-decoration:none}
.br-filter{border-radius:18px;background:#fff;border:1px solid var(--line);padding:14px}
.brf-in{display:flex;align-items:center;gap:8px;padding:0 14px;height:48px;border-radius:12px;border:1.5px solid var(--line);color:var(--muted);margin-bottom:12px}
.brf-in input{flex:1;min-width:0;border:0;outline:0;font-size:16px;height:100%;background:none}
.brf-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(1,179,225,.15)}
.br-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.br-list li[hidden]{display:none}
.br-list:not(.is-open):not(.is-search) .br-more{display:none}
.br-list a,.br-bez{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;color:var(--navy);text-decoration:none!important;transition:box-shadow .15s,border-color .15s}
.br-list a:hover{border-color:var(--blue);box-shadow:var(--shadow-1)}
.br-bez{border-style:dashed}
.br-bez img{opacity:.75}
.br-list img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#fff;border-bottom:1px solid var(--line-2)}
.br-list a>span,.br-bez>span{padding:8px 10px 10px}
.br-list b{display:block;font-size:14.5px;line-height:1.2}
.br-list small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--muted);line-height:1.3}
.br-pusto{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.br-toggle{display:flex;margin:14px auto 0;min-height:46px;gap:8px}
.br-toggle svg{transform:rotate(90deg)}
.br-toggle[aria-expanded="true"] svg{transform:rotate(-90deg)}

/* ---------- 6. tematyczne */
.tmbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tmb{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;color:var(--navy);text-decoration:none!important;transition:box-shadow .2s,transform .2s}
.tmb:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.tmb-img{position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:radial-gradient(circle at 50% 55%,#fff 0,#fff 38%,var(--sky-100) 39%,var(--sky-50) 70%)}
.tmb-img img{width:82%;height:82%;object-fit:contain;transition:transform .35s}
.tmb:hover .tmb-img img{transform:scale(1.05)}
.tmb-t{padding:12px 14px 14px;border-top:1px solid var(--line-2)}
.tmb-t b{display:block;font-size:15px;line-height:1.25}
.tmb-t small{display:flex;align-items:center;gap:2px;margin-top:4px;color:var(--blue-700);font-weight:700;font-size:12.5px}

/* ---------- 7. Polecamy (1 rząd = 5 produktów, .prow--5; .prow--6 – dawny wariant 6 w rzędzie) */
.prow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.prow--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.prow--6 .pc-img,.prow--5 .pc-img{padding:8px}
.prow--6 .pc-body,.prow--5 .pc-body{padding:2px 12px 12px}
.prow--6 .pc-name,.prow--5 .pc-name{font-size:14px}
.prow--6 .pc-price b,.prow--5 .pc-price b{font-size:17px}
/* ceny na jednej wysokości: status (np. „Czas realizacji 48 godzin”) ma stałe miejsce na 2 wiersze pod ceną */
.prow .pc-st{align-items:flex-start;min-height:2.7em;line-height:1.35}
.prow .pc-st svg,.prow .pc-st .pc-ic{flex:0 0 auto;margin-top:1px}

/* ---------- 8. poradnik = site.contentMs (sekcje z panelu) */
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.guide>section{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.guide>section h2{font-size:20px;line-height:1.3;margin:0 0 10px}
.guide>section p{font-size:15.5px;line-height:1.7;color:#34424F;margin:0 0 12px}
.guide>section p:last-child{margin-bottom:0}
.guide>section strong{color:var(--navy)}
.where{margin-top:8px}
.where h2{font-size:26px;margin:0 0 10px}
.where p{font-size:16px;line-height:1.7;color:#34424F;max-width:900px}
.where .category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
.where .category-card{padding:18px;border-radius:16px;background:var(--sky-50);border:1px solid var(--line-2)}
.where .category-card h3{font-size:16px;margin:0 0 6px}
.where .category-card p{margin:0;font-size:14.5px;line-height:1.6}
.tip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:40px;padding:24px 28px;border-radius:var(--radius);background:linear-gradient(120deg,var(--sky-100),var(--sky-50));border:1px solid var(--sky-200);color:var(--blue-700)}
.tip h2{font-size:20px;margin:0 0 4px;color:var(--navy)}
.tip p{margin:0 0 8px;color:var(--ink);line-height:1.65}
.tip p:last-child{margin-bottom:0}
.hm-reszta{line-height:1.7}

/* ---------- 9. atuty – style .trust w nowy-strony.css (pas jest też na Kontakcie i „Stojakach na zamówienie”) */

/* ---------- szerokości */
@media (max-width:1200px){
  .prow{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Polecamy: zostaje 5 w rzędzie (bez sieroty 3 + 2) aż do 861 px; niżej przewijany pasek jak dotąd */
  .prow--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .prow--5 .pc-body{padding:2px 10px 10px}
}
@media (max-width:1100px){
  .where .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tmbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .br-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero10v-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .hero{padding:24px 0}
  .hm-intro h1{font-size:28px}
  .hm-intro p{font-size:16px;margin-bottom:12px}
  /* jedno pole wyszukiwania na pierwszym ekranie – na telefonie zostaje to z nagłówka */
  .hm-szukaj{display:none}
  .qlinks a{min-height:44px}
  .rd-chips a{min-height:44px}
  .stats-band{margin-top:14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats li:first-child{grid-column:span 2}
  .stats b{font-size:21px}
  .hs-head--row{flex-direction:column;align-items:flex-start}
  .fx3{padding:14px}
  .fx3-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tmbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;gap:10px}
  .prow .pc{flex:0 0 46%;scroll-snap-align:start}
  .guide,.where .category-grid{grid-template-columns:minmax(0,1fr)}
  .guide>section{padding:18px}
  .where h2{font-size:22px}
  .tip{grid-template-columns:minmax(0,1fr);padding:20px;gap:12px}
  .tip .btn{justify-self:start}
}
/* przełącznik pm_home.telefon_kafle_grup: 'nad' (wariant T7-B; domyślnie wyłączony) – kategorie grupy na całą szerokość w 2 kolumnach */
@media (max-width:860px){
  .hm--kafle-nad .gc--row,.hm--kafle-nad .groups--rows2 .gc--row{grid-template-columns:64px minmax(0,1fr);align-items:center;row-gap:6px}
  .hm--kafle-nad .gc--row .gc-b{display:contents}
  .hm--kafle-nad .gc--row .gc-alt,.hm--kafle-nad .gc--row .chips{grid-column:1/-1}
  .hm--kafle-nad .gc--row .gc-alt{margin:0}
  .hm--kafle-nad .gc--row .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .hm--kafle-nad .gc--row .chip{justify-content:space-between;font-size:13.5px;padding:8px 10px}
}
@media (max-width:420px){
  .prow .pc{flex-basis:62%}
}
@media (prefers-reduced-motion:reduce){
  .fx3-part,.tmb,.tmb-img img{transition:none}
}
@media print{
  .hm-szukaj,.fx3-stage,.br-filter .brf-in,.br-toggle,.cz-btn5{display:none}
  .br-list .br-more{display:block!important}
}

/* (06.10, UX nr 4) „Cała oferta” na telefonie (≤ 760 px): grupy zwinięte – zdjęcie, nazwa grupy (link) i przycisk „N kategorii”;
   kategorie (linki) i opis grupy po dotknięciu. Wszystko jest w HTML; zwija skrypt pod sekcją (klasa hm-zw) – bez JS jak dotąd. */
.gc-tog{display:none}
@media (max-width:760px){
  #oferta.hm-zw .gc--row{grid-template-columns:64px minmax(0,1fr);align-items:center;padding:10px 12px 10px 10px}
  #oferta.hm-zw .gc-tog{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:2px 0 0;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--sky-50);color:var(--navy);font:600 14px/1.2 var(--font);cursor:pointer}
  #oferta.hm-zw .gc-tog .i{transition:transform .15s}
  #oferta.hm-zw .gc.is-open .gc-tog .i{transform:rotate(180deg)}
  #oferta.hm-zw .gc:not(.is-open) .chips,#oferta.hm-zw .gc:not(.is-open) .gc-alt{display:none}
  #oferta.hm-zw .groups{gap:8px}
}

/* (06.10, drobiazg D1) główna na komputerze: jedno pole wyszukiwania – to w nagłówku (jak na każdej stronie). Duże pole w pierwszym
   ekranie schowane także na komputerze (na telefonie było już schowane wyżej); „Często szukane” zostają. Formularz zostaje w HTML. */
.hm .hm-szukaj{display:none}