/* ps_pagecomposer – siatka stref (12 kolumn) */
.pc-row{display:flex;flex-wrap:wrap;margin-left:-10px;margin-right:-10px}
.pc-row.container{margin-left:auto;margin-right:auto}
.pc-block{box-sizing:border-box;padding-left:10px;padding-right:10px;flex:0 0 100%;max-width:100%;min-width:0}
.pc-xs-1{flex:0 0 8.333333%;max-width:8.333333%}
.pc-xs-2{flex:0 0 16.666667%;max-width:16.666667%}
.pc-xs-3{flex:0 0 25%;max-width:25%}
.pc-xs-4{flex:0 0 33.333333%;max-width:33.333333%}
.pc-xs-5{flex:0 0 41.666667%;max-width:41.666667%}
.pc-xs-6{flex:0 0 50%;max-width:50%}
.pc-xs-7{flex:0 0 58.333333%;max-width:58.333333%}
.pc-xs-8{flex:0 0 66.666667%;max-width:66.666667%}
.pc-xs-9{flex:0 0 75%;max-width:75%}
.pc-xs-10{flex:0 0 83.333333%;max-width:83.333333%}
.pc-xs-11{flex:0 0 91.666667%;max-width:91.666667%}
.pc-xs-12{flex:0 0 100%;max-width:100%}
@media (min-width:768px){
.pc-md-1{flex:0 0 8.333333%;max-width:8.333333%}
.pc-md-2{flex:0 0 16.666667%;max-width:16.666667%}
.pc-md-3{flex:0 0 25%;max-width:25%}
.pc-md-4{flex:0 0 33.333333%;max-width:33.333333%}
.pc-md-5{flex:0 0 41.666667%;max-width:41.666667%}
.pc-md-6{flex:0 0 50%;max-width:50%}
.pc-md-7{flex:0 0 58.333333%;max-width:58.333333%}
.pc-md-8{flex:0 0 66.666667%;max-width:66.666667%}
.pc-md-9{flex:0 0 75%;max-width:75%}
.pc-md-10{flex:0 0 83.333333%;max-width:83.333333%}
.pc-md-11{flex:0 0 91.666667%;max-width:91.666667%}
.pc-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:992px){
.pc-lg-1{flex:0 0 8.333333%;max-width:8.333333%}
.pc-lg-2{flex:0 0 16.666667%;max-width:16.666667%}
.pc-lg-3{flex:0 0 25%;max-width:25%}
.pc-lg-4{flex:0 0 33.333333%;max-width:33.333333%}
.pc-lg-5{flex:0 0 41.666667%;max-width:41.666667%}
.pc-lg-6{flex:0 0 50%;max-width:50%}
.pc-lg-7{flex:0 0 58.333333%;max-width:58.333333%}
.pc-lg-8{flex:0 0 66.666667%;max-width:66.666667%}
.pc-lg-9{flex:0 0 75%;max-width:75%}
.pc-lg-10{flex:0 0 83.333333%;max-width:83.333333%}
.pc-lg-11{flex:0 0 91.666667%;max-width:91.666667%}
.pc-lg-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:1200px){
.pc-xl-1{flex:0 0 8.333333%;max-width:8.333333%}
.pc-xl-2{flex:0 0 16.666667%;max-width:16.666667%}
.pc-xl-3{flex:0 0 25%;max-width:25%}
.pc-xl-4{flex:0 0 33.333333%;max-width:33.333333%}
.pc-xl-5{flex:0 0 41.666667%;max-width:41.666667%}
.pc-xl-6{flex:0 0 50%;max-width:50%}
.pc-xl-7{flex:0 0 58.333333%;max-width:58.333333%}
.pc-xl-8{flex:0 0 66.666667%;max-width:66.666667%}
.pc-xl-9{flex:0 0 75%;max-width:75%}
.pc-xl-10{flex:0 0 83.333333%;max-width:83.333333%}
.pc-xl-11{flex:0 0 91.666667%;max-width:91.666667%}
.pc-xl-12{flex:0 0 100%;max-width:100%}
}
/* podgląd z panelu */
.pc-preview-ribbon{position:sticky;top:0;z-index:10000;display:flex;gap:12px;align-items:center;justify-content:center;padding:8px 16px;background:linear-gradient(90deg,#7c3aed,#0ea5e9);color:#fff;font:500 14px/1.4 system-ui,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.pc-preview-ribbon a{color:#fff;text-decoration:underline;margin-left:8px}
.pc-preview-dot{width:9px;height:9px;border-radius:50%;background:#fde047;box-shadow:0 0 0 4px rgba(253,224,71,.3)}
.pc-block[data-pc-label]{position:relative;outline:1px dashed rgba(124,58,237,.45);outline-offset:-1px}
.pc-block[data-pc-label]::before{content:attr(data-pc-label);position:absolute;top:0;left:10px;z-index:5;padding:2px 8px;border-radius:0 0 6px 6px;background:#7c3aed;color:#fff;font:600 11px/1.5 system-ui,sans-serif;pointer-events:none}

/* ================================================================ układy stron (szkielety) */
.pc-skel-row { background: var(--pc-bg, transparent); padding-top: var(--pc-pt, 0); padding-bottom: var(--pc-pb, 0); margin-bottom: var(--pc-mb, 0); }
.pc-skel-grid { display: flex; flex-wrap: wrap; gap: var(--pc-gap, 30px); align-items: flex-start; }
.pc-skel-grid--stretch { align-items: stretch; }
.pc-skel-grid--center { align-items: center; }
.pc-skel-col { --w: var(--w-xs, 100); flex: 0 0 calc(var(--w) * 1% - var(--pc-gap, 30px) * (1 - var(--w) / 100)); max-width: 100%; min-width: 0; }
@media (min-width: 768px) { .pc-skel-col { --w: var(--w-md, 100); } }
@media (min-width: 992px) { .pc-skel-col { --w: var(--w-lg, 100); } }
@media (min-width: 1200px) { .pc-skel-col { --w: var(--w-xl, 100); } }
.pc-skel-grid::after { content: none; }

/* treść i kolumny boczne wewnątrz własnych kolumn – szerokość daje kolumna układu */
.pc-skel .pc-skel-col > #content-wrapper,
.pc-skel .pc-skel-col > #left-column,
.pc-skel .pc-skel-col > #right-column { float: none !important; width: 100% !important; max-width: none; padding-left: 0; padding-right: 0; }

/* ukrywanie na ekranach */
@media (max-width: 767px) { .pc-hide-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .pc-hide-md { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .pc-hide-lg { display: none !important; } }
@media (min-width: 1200px) { .pc-hide-xl { display: none !important; } }

/* pasy nagłówka i stopki motywu */
#header.pc-hide-nav .header-nav,
#header.pc-hide-top .header-top,
#header.pc-hide-menu .header-top-inner { display: none !important; }
#footer.pc-hide-before .footer-before,
#footer.pc-hide-main .footer-container,
#footer.pc-hide-after .footer-after { display: none !important; }

/* menu kategorii na stronie głównej zwinięte (jak na podstronach) */
@media (min-width: 992px) {
  body.pc-menu-closed#index #czverticalmenublock .block_content { top: 100%; transform: perspective(600px) scaleY(0); transition: .4s ease-in-out; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); }
  body.pc-menu-closed#index #czverticalmenublock.open .block_content,
  body.pc-menu-closed#index #czverticalmenublock:hover .block_content { transform: perspective(600px) scale(1); }
  body.pc-menu-closed#index #czverticalmenublock .block_title .dropdown-arrow::before { display: block; }
  /* slider „obok menu” zajmuje wtedy całą szerokość */
  body.pc-menu-closed#index .phs--w-beside { width: 100%; }
}

/* ================================================================ sekcje z kolumnami */
.pc-sec { --g: var(--g-xs, 0px); --pt: var(--pt-xs, 0px); --pb: var(--pb-xs, 0px); display: flex; flex-wrap: wrap; gap: var(--g); padding-top: var(--pt); padding-bottom: var(--pb); align-items: stretch; box-sizing: border-box; }
.pc-sec--start { align-items: flex-start; }
.pc-sec--center { align-items: center; }
.pc-sec--end { align-items: flex-end; }
.pc-sec--bg { background: var(--pc-sec-bg); }
.pc-sec::before, .pc-sec::after { content: none; }
.pc-sec-col { --f: var(--f-xs, 1 1 0%); --d: var(--d-xs, block); flex: var(--f); display: var(--d); min-width: var(--mn, 0); max-width: 100%; box-sizing: border-box; position: relative; }
/* kontenery (container queries): widgety w kolumnie dopasowują się do jej szerokości, a nie do szerokości ekranu */
.pc-sec-col--cq, .pc-sec-col .pc-block { container: pccol / inline-size; }
.pc-secw { clear: both; width: 100%; box-sizing: border-box; } /* motywy pływają bloki strony głównej (float) – sekcja nie może się wcisnąć obok */
.pc-secw--cq { container: pcsec / inline-size; }
@media (min-width: 768px) {
  .pc-sec { --g: var(--g-md, 0px); --pt: var(--pt-md, 0px); --pb: var(--pb-md, 0px); }
  .pc-sec-col { --f: var(--f-md, 1 1 0%); --d: var(--d-md, block); }
}
@media (min-width: 992px) {
  .pc-sec { --g: var(--g-lg, 0px); --pt: var(--pt-lg, 0px); --pb: var(--pb-lg, 0px); }
  .pc-sec-col { --f: var(--f-lg, 1 1 0%); --d: var(--d-lg, block); }
}
@media (min-width: 1200px) {
  .pc-sec { --g: var(--g-xl, 0px); --pt: var(--pt-xl, 0px); --pb: var(--pb-xl, 0px); }
  .pc-sec-col { --f: var(--f-xl, 1 1 0%); --d: var(--d-xl, block); }
}
/* slider „obok menu” w kolumnie sekcji wypełnia kolumnę – miejsce na menu daje sekcja */
.pc-sec .pc-sec-col .phs--w-beside { float: none !important; width: 100% !important; margin: 0 !important; }
.pc-sec-col[data-pc-label] { outline: 1px dashed rgba(14, 165, 233, .5); outline-offset: -1px; }

/* ================================================================ menu kategorii jako widget */
.pc-catmenu { position: relative; min-height: 1px; }
@media (min-width: 992px) {
  /* rozwinięte (jak na stronie głównej motywu), położone nad kolumną widgetu przez composer.js */
  body.pc-catmenu-on #czverticalmenublock .block_content { transform: none; transition: none; box-shadow: none; }
  body.pc-catmenu-on #czverticalmenublock .block_title .dropdown-arrow::before { display: none; }
  body.pc-catmenu-on:not(.pc-catmenu-docked) #czverticalmenublock .block_content { visibility: hidden !important; }
  /* strona główna przejęta bez widgetu menu: menu zwinięte do przycisku w nagłówku (jak na podstronach) */
  body.pc-catmenu-off#index #czverticalmenublock .block_content { top: 100%; transform: perspective(600px) scaleY(0); transition: .4s ease-in-out; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); }
  body.pc-catmenu-off#index #czverticalmenublock.open .block_content,
  body.pc-catmenu-off#index #czverticalmenublock:hover .block_content { transform: perspective(600px) scale(1); }
  body.pc-catmenu-off#index #czverticalmenublock .block_title .dropdown-arrow::before { display: block; }
  body.pc-catmenu-off#index .phs--w-beside { width: 100%; }
}

/* sekcja węższa niż próg (jej własna szerokość, np. w wąskiej kolumnie) – układ telefonu */
@container pcsec (max-width: 991px) {
  .pc-sec--stack-992 { --g: var(--g-xs, 0px); --pt: var(--pt-xs, 0px); --pb: var(--pb-xs, 0px); }
  .pc-sec--stack-992 > .pc-sec-col { --f: var(--f-xs, 1 1 0%); --d: var(--d-xs, block); }
}
@container pcsec (max-width: 767px) {
  .pc-sec--stack-768 { --g: var(--g-xs, 0px); --pt: var(--pt-xs, 0px); --pb: var(--pb-xs, 0px); }
  .pc-sec--stack-768 > .pc-sec-col { --f: var(--f-xs, 1 1 0%); --d: var(--d-xs, block); }
}
@container pcsec (max-width: 575px) {
  .pc-sec--stack-576 { --g: var(--g-xs, 0px); --pt: var(--pt-xs, 0px); --pb: var(--pb-xs, 0px); }
  .pc-sec--stack-576 > .pc-sec-col { --f: var(--f-xs, 1 1 0%); --d: var(--d-xs, block); }
}
@container pcsec (max-width: 479px) {
  .pc-sec--stack-480 { --g: var(--g-xs, 0px); --pt: var(--pt-xs, 0px); --pb: var(--pb-xs, 0px); }
  .pc-sec--stack-480 > .pc-sec-col { --f: var(--f-xs, 1 1 0%); --d: var(--d-xs, block); }
}
/* bloki obok siebie w wąskiej kolumnie – jeden pod drugim */
@container pccol (max-width: 479px) {
  .pc-row > .pc-block { flex: 0 0 100%; max-width: 100%; }
}

/* Sekcja w treści strony głównej: odstęp od poprzedniego bloku nigdy nie jest zerowy –
   co najmniej tyle, ile mają bloki motywu (telefon 20 px, od 992 px 30 px). „Nad sekcją” może dać więcej. */
.page-home .pc-secw:not(.pc-sec-col .pc-secw):not(.display-top-inner .pc-secw) > .pc-sec { padding-top: max(var(--pt), 20px); }
@media (min-width: 992px) {
  .page-home .pc-secw:not(.pc-sec-col .pc-secw):not(.display-top-inner .pc-secw) > .pc-sec { padding-top: max(var(--pt), 30px); }
}

/* Widget w kolumnie sekcji: szerokość wyznacza kolumna – „container” motywu (stała szerokość + 15 px wcięcia) nie może jej zwężać */
.pc-sec-col .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

/* ================================================================ sekcja w wierszach (podział poziomy)
 * Wiersze jeden pod drugim; w rzędzie z równą wysokością sekcja wypełnia wysokość kolumny,
 * a wiersze „reszta miejsca” dzielą między siebie wolne miejsce (np. baner wg treści + karuzela do dołu). */
.pc-sec.pc-sec--rows { flex-direction: column; flex-wrap: nowrap; }
.pc-sec--rows > .pc-sec-col { width: 100%; flex-direction: column; min-height: 0; }
.pc-sec--rows > .pc-sec-col > * { flex: 1 1 auto; min-height: 0; }
.pc-sec-col > .pc-secw--rows,
.pc-sec-col > .pc-block > .pc-secw--rows,
.pc-secw--rows > .pc-sec--rows { height: 100%; }
/* widget w wierszu „reszta miejsca” wypełnia wiersz (biały blok do dołu), treść zostaje u góry */
.pc-sec--rows > .pc-sec-col > * > section,
.pc-sec--rows > .pc-sec-col > section { height: 100%; margin-bottom: 0; box-sizing: border-box; }

/* Widgety w kolumnach i wierszach sekcji: zewnętrzny odstęp od góry, którym motyw rozsuwa bloki strony
   (np. .featured-products 30 px), nie przesuwa widgetu w dół względem sąsiedniej kolumny – górne krawędzie równe.
   Wewnętrzne odstępy (biała karta) zostają. Kilka widgetów w jednej kolumnie – odstęp sekcji między nimi. */
/* (szablony motywu z klocków – .fam-tpl – zachowują własne odstępy części szablonu) */
.pc-sec-col:not(.fam-tpl .pc-sec-col) > :not(.pc-draft-raw):not(.container),
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .container > *,
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .pc-draft-raw > :not(.container),
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .pc-draft-raw > .container > * { padding-top: 0 !important; }
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .container > *,
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .pc-draft-raw > *,
.pc-sec-col:not(.fam-tpl .pc-sec-col) > .pc-draft-raw > .container > * { margin-top: 0 !important; }
.pc-sec-col:not(.fam-tpl .pc-sec-col) > :first-child { margin-top: 0 !important; }
.pc-sec-col:not(.fam-tpl .pc-sec-col) > * + * { margin-top: var(--g, 20px) !important; }

/* ================================================================ dopasowanie wysokości w rzędzie
 * Kontrakt dla wszystkich widgetów: w rzędzie z równą wysokością (.pc-sec--stretch) blok w kolumnie dostaje
 * wysokość kolumny (łańcuch pojedynczych opakowań do 3 poziomów: obudowa → container → karta motywu).
 * Moduły rodziny dopasowują wnętrze: elastyczna część (zdjęcie, baner, slajd, tło) rośnie albo maleje.
 *  – „najwyższa kolumna” (domyślnie): niższe kolumny rosną do wysokości najwyższej,
 *  – kolumna-wzorzec (.pc-sec--anchored): ona wyznacza wysokość, pozostałe (.pc-sec-col--fit) się w niej mieszczą
 *    – skrypt włącza .is-fit tylko, gdy kolumny stoją obok siebie i treść się mieści (inaczej rząd rośnie jak dawniej). */
.pc-sec--stretch:not(.fam-tpl .pc-sec) > .pc-sec-col > :only-child,
.pc-sec--stretch:not(.fam-tpl .pc-sec) > .pc-sec-col > :only-child > :only-child,
.pc-sec--stretch:not(.fam-tpl .pc-sec) > .pc-sec-col > :only-child > :only-child > :only-child { height: 100%; box-sizing: border-box; }
.pc-sec--stretch:not(.fam-tpl .pc-sec) > .pc-sec-col > :only-child { margin-bottom: 0; }
.pc-sec--anchored > .pc-sec-col--fit.is-fit { contain: size; overflow: hidden; }
/* wiersz „wypełnij wysokość” w kolumnie dopasowanej do wzorca nie znika do paska – ma rozsądne minimum
   (ok. 22% wysokości wzorca); wtedy ściskają się sąsiednie widgety (np. karuzela oddaje kolejne poziomy) */
.pc-sec-col--fit.is-fit .pc-sec--rows > .pc-sec-col--grow { min-height: clamp(90px, calc(var(--pc-fit-h, 600px) * .22), 220px); }

/* ================================================================ wygląd bloku (BlockStyle) – obudowa .pc-st tylko, gdy coś ustawiono */
.pc-st { --st-mt: var(--st-mt-xs); --st-mb: var(--st-mb-xs); --st-pt: var(--st-pt-xs); --st-pr: var(--st-pr-xs); --st-pb: var(--st-pb-xs); --st-pl: var(--st-pl-xs); --st-ta: var(--st-ta-xs); box-sizing: border-box; min-width: 0; }
@media (min-width: 768px) { .pc-st { --st-mt: var(--st-mt-md); --st-mb: var(--st-mb-md); --st-pt: var(--st-pt-md); --st-pr: var(--st-pr-md); --st-pb: var(--st-pb-md); --st-pl: var(--st-pl-md); --st-ta: var(--st-ta-md); } }
@media (min-width: 992px) { .pc-st { --st-mt: var(--st-mt-lg); --st-mb: var(--st-mb-lg); --st-pt: var(--st-pt-lg); --st-pr: var(--st-pr-lg); --st-pb: var(--st-pb-lg); --st-pl: var(--st-pl-lg); --st-ta: var(--st-ta-lg); } }
@media (min-width: 1200px) { .pc-st { --st-mt: var(--st-mt-xl); --st-mb: var(--st-mb-xl); --st-pt: var(--st-pt-xl); --st-pr: var(--st-pr-xl); --st-pb: var(--st-pb-xl); --st-pl: var(--st-pl-xl); --st-ta: var(--st-ta-xl); } }
.pc-st--mt { margin-top: var(--st-mt); }
.pc-st--mb { margin-bottom: var(--st-mb); }
.pc-st--pt { padding-top: var(--st-pt); }
.pc-st--pr { padding-right: var(--st-pr); }
.pc-st--pb { padding-bottom: var(--st-pb); }
.pc-st--pl { padding-left: var(--st-pl); }
.pc-st--ta, .pc-st--ta :where(h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3) { text-align: var(--st-ta); }
.pc-st--bg { background: var(--st-bg); }
.pc-st--color, .pc-st--color :not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .btn, .btn *, .products-section-title, .products-section-title *) { color: var(--st-color) !important; }
.pc-st--hcolor :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .products-section-title, .products-section-title *) { color: var(--st-hcolor) !important; }
.pc-st--fs { zoom: var(--st-fs); }
.pc-st--radius { border-radius: var(--st-radius); overflow: hidden; }
.pc-st--bw { border: var(--st-bw) solid var(--st-bc, #e3e3e6); }
.pc-st--maxw { max-width: var(--st-maxw); margin-left: auto; margin-right: auto; }
.pc-st--sh-s { box-shadow: 0 1px 3px rgba(17, 17, 26, .08), 0 1px 2px rgba(17, 17, 26, .06); }
.pc-st--sh-m { box-shadow: 0 4px 14px rgba(17, 17, 26, .10); }
.pc-st--sh-l { box-shadow: 0 12px 34px rgba(17, 17, 26, .16); }
@media (max-width: 767.98px) { .pc-st--hide-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .pc-st--hide-md { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .pc-st--hide-lg { display: none !important; } }
@media (min-width: 1200px) { .pc-st--hide-xl { display: none !important; } }
/* w kolumnach sekcji strony głównej odstępy bloków ustawia sekcja (!important) – własne ustawienia bloku wygrywają */
.pc-sec-col > .pc-st--mt, .pc-sec-col > .pc-draft-raw > .pc-st--mt { margin-top: var(--st-mt) !important; }
.pc-sec-col > .pc-st--pt, .pc-sec-col > .pc-draft-raw > .pc-st--pt { padding-top: var(--st-pt) !important; }