/**
 * Kominy (SCHEIER) — theme integration overrides.
 * Auto-loaded after theme.css (priority 1000). Put PrestaShop-specific
 * glue here (adapting design markup to PS module output) so the imported
 * design stylesheets stay untouched and easy to re-sync from `szablon/`.
 */

/* Material Icons font (Hummingbird ships it) — used by PS module markup for
   quantity +/-, download, share, cart glyphs. Load it so they aren't □ boxes. */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular-2d8017489da689caedc1.woff2') format('woff2'),
       url('../fonts/MaterialIcons-Regular-08cefa1bc6566a650da7.woff') format('woff');
  font-display: swap;
}
.material-icons {
  font-family: 'Material Icons'; font-weight: normal; font-style: normal;
  font-size: /*24px;*/ line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}

/* Hummingbird a11y helpers that rely on Bootstrap CSS we don't load. */
.skip-link,
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Header language / currency switchers (ps_languageselector + ps_currencyselector) ---- */
.header-switchers { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .72rem; line-height: 1.25; }
.header-switchers .language-selector,
.header-switchers .currency-selector { margin: 0; }
.header-switchers .language-selector-wrapper,
.header-switchers .currency-selector-wrapper { padding: 0; }
.header-switchers .dropdown-toggle,
.header-switchers .expand-more,
.header-switchers select { border: 0; background: transparent; padding: 0; font-size: .72rem; color: var(--ink, #1a1a1a); cursor: pointer; letter-spacing: .02em; text-transform: uppercase; font-weight: 600; }
.header-switchers .material-icons { font-size: .8rem; }

/* ---- Header tool icons (account / cart) ---- */
.header-tools { display: flex; align-items: center; gap: 16px; }
.header-tools__link { position: relative; display: inline-flex; color: var(--ink, #1a1a1a); }
.header-tools__link .icon { width: 20px; height: 20px; }
.header-tools__cart-count { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--red, #c0392b); color: #fff; font-size: .62rem; line-height: 16px; text-align: center; font-weight: 700; }

/* ---- Header search: permanently visible in the topbar (between .logo and
   .nav-right — see header.tpl's .header-search), not a click-to-reveal
   overlay any more. .topbar (kominy4.css) is CSS Grid, not flex, so this
   is placed via explicit grid-column/-row rather than order/flex-basis. */
.header-search { position: relative; min-width: 0; }
.header-search__form { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #e5e5e5; padding: 4px 2px; }
.header-search__form:focus-within { border-bottom-color: var(--red, #c0392b); }
.header-search__input { flex: 1; min-width: 0; border: 0; padding: 6px 2px; font-size: .95rem; outline: none; background: transparent; }
.header-search__submit { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink, #1a1a1a); display: flex; align-items: center; }
.header-search__results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; }

.header-search__form .header-search__input{
  padding:10px;
}

/* Desktop: kominy4.css's own .topbar rule is `grid-template-columns:auto 1fr`
   with only .logo/.nav-right visible (.hamb hidden past this breakpoint) —
   add a 3rd, flexible column between them for the search bar. */
@media (min-width: 64em) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .logo { grid-column: 1; }
  .header-search { grid-column: 2; margin: 0 32px;
    grid-column: 2;
    margin: 0 32px;
    justify-self: center;
    min-width: 400px;
  }
  .nav-right { grid-column: 3; }
}

/* Mobile: kominy4.css's own .topbar rule here is a 3-column grid
   (hamb/logo/nav-right) with no spare column for search — keep those 3
   exactly where kominy4.css already puts them (don't touch column widths,
   which change again at max-width:520px) and give the search bar its own
   full-width row underneath instead of squeezing a 4th column in. */
@media (max-width: 64em) {
  .topbar { grid-template-rows: auto auto; row-gap: 10px; }
  .hamb, #closeMenu { grid-row: 1; }
  .logo { grid-row: 1; }
  .nav-right { grid-row: 1; }
  .header-search { grid-column: 1 / -1; grid-row: 2; }
}

/* Header search autocomplete dropdown (initSearchAutocomplete in theme.js) */
.cs-search-autocomplete { background: #fff; border: 1px solid #eee; box-shadow: 0 12px 30px rgba(0,0,0,.12); max-height: 70vh; overflow-y: auto; z-index: 60; }
.cs-search-autocomplete[hidden] { display: none; }
.cs-search-autocomplete__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f2f2f2; }
.cs-search-autocomplete__item:hover, .cs-search-autocomplete__item.is-active { background: #f7f7f7; }
.cs-search-autocomplete__thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid #eee; border-radius: 3px; flex-shrink: 0; background: #fff; }
.cs-search-autocomplete__thumb--empty { background: #f5f5f5; }
.cs-search-autocomplete__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-search-autocomplete__name { font-size: .9rem; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-search-autocomplete__price { font-size: .82rem; font-weight: 700; color: var(--red, #c0392b); }
.cs-search-autocomplete__seeall { display: block; padding: 12px 14px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--red, #c0392b); text-decoration: none; }
.cs-search-autocomplete__seeall:hover { text-decoration: underline; }
.cs-search-autocomplete__empty { padding: 16px 14px; color: #888; font-size: .9rem; }

/* ===== Dynamic homepage sections (kominyhomepage) ===== */

/* Reusable product grid (configurator results page, homepage tab-panel sections
   before they were replaced by plain category-link tabs) */
.kh-tab-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 992px) { .kh-tab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kh-tab-grid { grid-template-columns: 1fr; } }
.kh-tab-grid > li { margin: 0; }

/* Product tile min layout inside tab grids (design tile styles come from kominy4.css) */
.kh-tab-grid .cs-product-tile__img { width: 100%; height: auto; object-fit: contain; }

/* Dlaczego My (USP) icon grid */
.kh-why .cs-image-teaser__slides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
@media (max-width: 768px) { .kh-why .cs-image-teaser__slides { grid-template-columns: repeat(2, 1fr); } }
.kh-why__item { display: flex; }
.kh-why__item .cs-image-teaser__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kh-why__icon { width: 56px; height: 56px; }
.kh-why__icon img { width: 56px; height: 56px; object-fit: contain; }

/* SEO accordion */
.kh-seo .cs-seo-text__lead { margin-bottom: .5rem; }
.kh-seo .cs-seo-text__toggle { cursor: pointer; position: relative; padding-right: 28px; }
.kh-seo .cs-seo-text__toggle::after { content: "+"; position: absolute; right: 4px; top: 0; font-weight: 400; }
.kh-seo .cs-seo-text__item.is-open .cs-seo-text__toggle::after { content: "−"; }
.kh-seo .cs-seo-text__content { display: none; padding: 6px 0 14px; }
.kh-seo .cs-seo-text__item.is-open .cs-seo-text__content { display: block; }

/* Hero CTA rendered as <a> */
.hero-cta .view { display: inline-block; cursor: pointer; }

/* Configurator step wizard — markup + almost all styling ported straight from
   szablon (kominy4.css already has .step_slider/.the_box/.inputs_box/
   .dane-techniczne* etc.). Only the carousel's overflow is re-enabled here,
   scoped to this section so it doesn't affect the other .step_slider/
   .cs-products-carousel usages sharing the same base selector in kominy4.css. */
#section-configurator .step_slider .slider { overflow-x: auto; scroll-behavior: smooth; }

/* Product finder — show only the active step */
/*.cs-product-finder__step { display: none; }
.cs-product-finder__step.is-active,
.cs-product-finder__step.cs-product-finder__step--current { display: block; }
.cs-product-finder__step-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 992px) { .cs-product-finder__step-options { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .cs-product-finder__step-options { grid-template-columns: repeat(2, 1fr); } }
.cs-product-finder__step-option { cursor: pointer; text-align: center; border: 1px solid #eee; border-radius: 10px; padding: 18px 10px; transition: all .15s; background: #fff; }
.cs-product-finder__step-option:hover { border-color: var(--red, #c0392b); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cs-product-finder__option-image { width: 90px; height: 90px; object-fit: contain; margin: 0 auto 10px; display: block; }
.cs-product-finder__option-label { font-size: .82rem; margin: 0; color: #333; }
.cs-product-finder__back-button { margin-top: 20px; border: 0; background: none; cursor: pointer; color: var(--red, #c0392b); font-weight: 600; }*/

/* Configurator results page (product-list page the wizard's POKAŻ redirects to) */
.kh-config-results { padding: 40px 0; }
.kh-config-results__criteria { background: #f7f7f7; border-radius: 8px; padding: 20px 24px; margin-bottom: 30px; }
.kh-config-results__criteria h3 { margin: 0 0 10px; }
.kh-config-results__criteria ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.kh-config-results__criteria li { font-size: .85rem; }
.kh-config-results__criteria li span { font-weight: 700; margin-left: 4px; }
.kh-config-results__criteria .btn-config { display: inline-block; margin-top: 6px; padding: 11px 24px; background: var(--red, #c0392b); color: #fff; border-radius: 5px; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.kh-config-results__criteria .btn-config:hover { filter: brightness(.94); color: #fff; }
.kh-config-results__empty { color: #666; margin: 30px 0; }
.kh-config-results__back { display: inline-block; margin-top: 24px; color: var(--red, #c0392b); font-weight: 600; }

/* Promo banner slider (top) */
.kh-promo { padding: 0; }
.kh-promo__viewport { position: relative; }
/* Native-scroll track, matching kratki.com's .cs-image-teaser__slides: slides
   are laid out side by side and moved into view via scrollIntoView(), never
   display:none'd, so the outgoing/incoming slide stays visible mid-transition.
   Each slide is narrower than the track and snap-centered, so a sliver of the
   previous and next slide is always visible peeking in on both sides —
   the padding-inline below is exactly the peek width, giving the first/last
   slide the same room to center as any other slide. */
.kh-promo__slides {
  --kh-peek: 64px;
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 var(--kh-peek);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kh-promo__slides::-webkit-scrollbar { display: none; }
.kh-promo__slide { flex: 0 0 calc(100% - 2 * var(--kh-peek)); scroll-snap-align: center; margin: 0 4px; }
@media (max-width: 767px) {
  .kh-promo__slides { --kh-peek: 22px; }
  .kh-promo__slide { margin: 0 2px; }
}
.kh-promo__link { display: block; position: relative; }
.kh-promo__img { display: block; width: 100%; height: auto; }
.kh-promo__caption { position: absolute; left: 6%; bottom: 12%; color: #fff; max-width: 46%; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.kh-promo__slogan { font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 700; margin: 0 0 .3em; }
.kh-promo__desc { font-size: clamp(.85rem, 1.4vw, 1.05rem); margin: 0; }
.kh-promo__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.kh-promo__nav--prev { left: 16px; } .kh-promo__nav--next { right: 16px; }
.kh-promo__nav:hover { background: #fff; }
.kh-promo__nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.kh-promo__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.kh-promo__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.kh-promo__dot.is-active { background: #fff; }

/* ===== Product page (PDP) — style Hummingbird's structure to the design ===== */
/* .cs-page-product__gallery's own kominy4.css rule sets flex-shrink:1 at this
   same min-width:64em breakpoint — but on the live page (theme.css's @import
   chain) something upstream still resolves it to flex-shrink:0 at exactly
   this width, so the gallery claims its full flex-basis:100% and refuses to
   give ground, squeezing .cs-buybox to width:0 and pushing it off-screen
   (confirmed live: buybox width 0, right edge past the viewport, at 1024px).
   Restated here, !important, since it's the one property actually causing
   the collapse — everything else about the gallery's sizing is fine. */
@media (min-width: 64em) {
  .cs-page-product__gallery { flex-shrink: 1 !important; }
}
/* Gallery: vertical thumbs + fancyapps/ui Carousel main stage (see initProductGallery
   in theme.js). carousel.css (imported above) styles the .f-carousel__* internals
   the library builds itself; these rules only size the outer layout. */
.gallery-placeholder.cs-product-gallery { display: flex; gap: 12px; }
.cs-product-gallery__thumbs { display: flex; flex-direction: column; gap: 8px; flex: 0 0 64px; width: 64px; max-height: 500px; overflow-y: auto; }
.cs-product-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; overflow: hidden; line-height: 0; }
.cs-product-gallery__thumb img { display: block; width: 100%; height: auto; }
.cs-product-gallery__thumb.is-active { border-color: var(--red, #c0392b); }
/* max-width:100% is required, not cosmetic: flex:1 1 auto + aspect-ratio here
   lets the browser's flex-basis calc size this from its own (large) content
   instead of the actual available row space at some widths (seen at exactly
   768px, where it rendered ~800px inside a 730px-wide parent) — causing a
   page-wide horizontal scrollbar. max-width:100% hard-caps it to the parent
   regardless of that content-based sizing. */
.cs-product-gallery__carousel { flex: 1 1 auto; min-width: 0; max-width: 100%; aspect-ratio: 4 / 3; }
.cs-product-gallery__carousel img { width: 100%; height: 100%; object-fit: contain; }
/* model-viewer is a custom element with no intrinsic size — without an explicit
   width/height it collapses to 0 and the AR slide renders blank. */
.cs-product-gallery__ar-slide, .cs-product-gallery__ar-slide model-viewer { width: 100%; height: 100%; }
.cs-product-gallery__thumb--ar { position: relative; }
.cs-product-gallery__thumb-ar-badge {
  position: absolute; bottom: 2px; right: 2px; background: var(--red, #c0392b); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 3px; letter-spacing: .02em;
}
@media (max-width: 767px) {
  /* kominy4.css (the original Fotorama-based gallery this replaced) still sets
     a fixed height on bare .cs-product-gallery at this breakpoint
     (height: calc(100vw - 2rem)); the compound selector here outranks it
     (2 classes vs 1) so height:auto actually wins instead of squashing the
     carousel to fit inside that leftover budget. */
  .gallery-placeholder.cs-product-gallery { flex-direction: column; height: auto; max-height: none; }
  /* flex: 0 0 64px on .cs-product-gallery__thumbs (desktop rule, above) sets a
     64px WIDTH for the vertical thumb column — reused unchanged here it instead
     becomes a 64px HEIGHT budget for the row (flex-basis follows the main axis,
     which flips to vertical once the gallery switches to flex-direction:column),
     starving the row and pushing thumbs over the carousel. flex: 0 0 auto lets
     it take exactly the height its own content (the thumbs) needs. */
  .cs-product-gallery__thumbs { flex-direction: row; flex: 0 0 auto; width: auto; max-height: none; overflow-x: auto; order: 2; }
  /* Each thumb button previously relied on the 64px-wide desktop column to
     give its img[width:100%] something to resolve against; in the row layout
     there's no such implicit width, so give the button its own fixed box. */
  .cs-product-gallery__thumb { flex: 0 0 56px; width: 56px; height: 56px; }
  /* flex: 1 1 auto (desktop rule) fights aspect-ratio for the carousel's
     height once it's a vertical-axis flex item too — flex: 0 0 auto hands
     sizing entirely back to aspect-ratio + the 100% width below. */
  .cs-product-gallery__carousel { flex: 0 0 auto; width: 100%; }
}
/* Per-product fuel-type icons (Kominy — Product Fuel Icons module), shown in
   the buy-box between the price and the add-to-cart button. Icon size is
   fixed here (not left to the uploaded image's own dimensions) so a huge
   source image doesn't blow up the row — object-fit keeps it crisp either way. */
.cs-buybox__fuel-icons { margin: 14px 0; padding: 14px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.cs-fuel-icons__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #777; margin-bottom: 10px; }
.cs-fuel-icons__row { display: flex; flex-wrap: wrap; gap: 16px; }
.cs-fuel-icons__item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; }
.cs-fuel-icons__icon { width: 28px; height: 28px; object-fit: contain; }
.cs-fuel-icons__item-label { font-size: 11px; line-height: 1.2; text-align: center; color: #555; }
/*#product .columns-container, #product .container, .product-container { max-width: 1280px; margin: 0 auto; }
.product__container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; padding: 24px 16px; }
@media (max-width: 900px) { .product__container { grid-template-columns: 1fr; gap: 24px; } }
.product__left img { max-width: 100%; height: auto; }
.product__name { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; margin: 0 0 14px; line-height: 1.15; }
.product__prices { margin: 6px 0 18px; }
.product__price { font-size: 2rem; font-weight: 800; color: var(--red, #c0392b); }
.product__regular-price { text-decoration: line-through; color: #999; font-size: 1.1rem; margin-left: 10px; font-weight: 500; }
.product__description-short { color: #444; line-height: 1.6; margin-bottom: 20px; }*/
/* Combination selectors (Średnica / Wysokość / Wentylacja) as pills */
/*.product__variants { margin: 8px 0 22px; }
.product-variant { margin-bottom: 16px; }
.product-variant__legend { display: block; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; color: #222; }
.product-variant__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.product-variant__radio { position: relative; margin: 0; padding: 0; }
.product-variant__radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.product-variant__radio .product-variant__label,
.product-variant__radio label { display: inline-block; border: 1.5px solid #d8d8d8; border-radius: 3px; padding: 9px 16px; cursor: pointer; font-size: .88rem; transition: all .15s; margin: 0; }
.product-variant__radio input:checked + label,
.product-variant__radio input:checked ~ .product-variant__label { border-color: var(--red, #c0392b); background: var(--red, #c0392b); color: #fff; }
.product-variant select.form-control, .product-variant select { border: 1.5px solid #d8d8d8; border-radius: 3px; padding: 10px 14px; font-size: .9rem; }*/
/* Quantity + add to cart */
/*.product-quantity, .product__actions-qty-add { display: flex; align-items: stretch; gap: 12px; margin: 8px 0 4px; }
.product-quantity .qty, .product-quantity input.js-cart-line-product-quantity, .product__quantity input { width: 74px; border: 1.5px solid #ddd; border-radius: 3px; text-align: center; font-size: 1rem; padding: 12px 8px; }
.product__add-to-cart-button, .product-add-to-cart .btn-primary { background: var(--red, #c0392b); color: #fff; border: 0; border-radius: 3px; padding: 14px 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; font-size: .95rem; }
.product__add-to-cart-button:hover { filter: brightness(.94); color: #fff; }*/
/* Tabs / accordion */
/*.product__bottom { max-width: 1280px; margin: 30px auto 0; padding: 0 16px; }
.accordion-item { border-top: 1px solid #e6e6e6; }
.accordion-item:last-child { border-bottom: 1px solid #e6e6e6; }
.accordion-header { margin: 0; }
.accordion-button { width: 100%; text-align: left; background: none; border: 0; padding: 20px 40px 20px 4px; font-size: 1.15rem; font-weight: 700; cursor: pointer; position: relative; }
.accordion-button::after { content: "+"; position: absolute; right: 8px; top: 18px; font-size: 1.4rem; font-weight: 400; color: var(--red, #c0392b); }
.accordion-button[aria-expanded="true"]::after { content: "−"; }
.accordion-collapse:not(.show) { display: none; }
.accordion-body { padding: 0 4px 24px; line-height: 1.65; color: #333; }
.accordion-body img { max-width: 100%; height: auto; }*/

/* ===== Product page — 3-column design (title row + gallery | specs | buy-box) ===== */
.cs-product { max-width: 1280px; margin: 0 auto; padding: 16px; }
/* Title row */
.cs-product__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 8px 0 26px; }
.cs-product__rating { font-size: .8rem; color: #999; margin-bottom: 6px; }
.cs-product__title { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
.cs-product__flags { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.cs-product__flag { background: var(--red, #c0392b); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; letter-spacing: .03em; }
.cs-product__flag--pro, .cs-product__flag--online-only { background: #1a1a1a; }
.cs-product__header-actions { display: flex; gap: 14px; color: #888; flex-shrink: 0; }
/* 3-column grid */
.cs-product__cols { display: grid !important; grid-template-columns: 1.25fr .82fr .93fr; gap: 34px; align-items: start; }
.cs-product__cols > .cs-product__col { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; position: static !important; }
@media (max-width: 1024px) { .cs-product__cols { grid-template-columns: 1fr 1fr; } .cs-product__col--buy { grid-column: 1 / -1; } }
@media (max-width: 720px) { .cs-product__cols { grid-template-columns: 1fr; } }
/* Specs column */
.cs-spec { margin-bottom: 24px; }
.cs-spec__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.cs-spec__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: .88rem; }
.cs-spec__k { color: #777; }
.cs-spec__v { font-weight: 600; text-align: right; }
.cs-spec__v--stock { color: #1f9d55; }
/* Buy box (grey) */
/*.cs-buybox { background: #f5f6f8; border-radius: 12px; padding: 24px 22px; }
.cs-buybox .product-variant { margin-bottom: 18px; }
.cs-buybox .product-variant__legend { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 10px; color: #222; text-transform: none; letter-spacing: 0; }
.cs-buybox .product-variant__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-buybox .product-variant__radio label, .cs-buybox .product-variant__radio .product-variant__label { border: 1.5px solid #d5d5d5; border-radius: 3px; padding: 9px 15px; cursor: pointer; font-size: .85rem; background: #fff; }
.cs-buybox .product-variant__radio input:checked + label, .cs-buybox .product-variant__radio input:checked ~ .product-variant__label { border-color: var(--red, #c0392b); background: var(--red, #c0392b); color: #fff; }
.cs-buybox__price { margin: 20px 0 16px; }
.cs-buybox__price .current-price, .cs-buybox__price .price, .cs-buybox__price .product__price { font-size: 1.9rem; font-weight: 800; color: #1a1a1a; }
.cs-buybox__price .regular-price { text-decoration: line-through; color: #aaa; font-size: 1.05rem; margin-left: 8px; }
.cs-buybox__price .tax-shipping-delivery-label, .cs-buybox__price small { display: block; color: var(--red, #c0392b); font-size: .72rem; margin-top: 2px; }
.cs-buybox__addtocart { margin-top: 8px; }
.cs-buybox .product-quantity, .cs-buybox .product__actions-qty-add { display: flex; gap: 12px; align-items: stretch; }
.cs-buybox .product__add-to-cart-button, .cs-buybox .btn-primary { flex: 1; background: var(--red, #c0392b); color: #fff; border: 0; border-radius: 3px; padding: 15px 20px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.cs-buybox__reassurance { margin-top: 18px; }*/
/* Details — stacked sections + sticky anchor nav */
/*.cs-product__details { margin: 44px 0 0; }
.cs-product-details-nav { position: sticky; top: 0; z-index: 20; background: #fff; }
.cs-product-details-nav__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; border-bottom: 2px solid #eee; }
.cs-product-details-nav__link { display: inline-block; padding: 16px 22px; font-weight: 700; color: #666; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .15s, border-color .15s; }
.cs-product-details-nav__link:hover { color: #222; }
.cs-product-details-nav__link.active { color: var(--red, #c0392b); border-bottom-color: var(--red, #c0392b); }
.cs-product-details__item { display: block; padding: 34px 2px; border-bottom: 1px solid #eee; scroll-margin-top: 80px; }
.cs-product-details__headline-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 18px; }
.cs-product-details__content { line-height: 1.7; color: #333; }
.cs-product-details__content img { max-width: 100%; height: auto; }*/
/*.cs-product-features { width: 100%; border-collapse: collapse; max-width: 760px; }
.cs-product-features th, .cs-product-features td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #eee; font-size: .92rem; }
.cs-product-features th { width: 45%; font-weight: 700; background: #fafbfc; }*/
/* Dokumentacja cards */
.cs-product-docs { display: flex; flex-wrap: wrap; gap: 16px; }
.cs-product-doc { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 170px; padding: 20px 16px; border: 1px solid #ececec; border-radius: 10px; text-align: center; color: #333; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cs-product-doc:hover { border-color: var(--red, #c0392b); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.cs-product-doc .material-icons { font-size: 36px; color: var(--red, #c0392b); }
.cs-product-doc__name { font-weight: 600; font-size: .85rem; }
.cs-product-doc__meta { font-size: .74rem; color: #999; }
/* Related products area (Polecane produkty) */
.cs-product__related { margin-top: 44px; }
.cs-product__related .products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; list-style: none; padding: 0; }
@media (max-width: 1100px) { .cs-product__related .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cs-product__related .products { grid-template-columns: repeat(2, 1fr); } }
html { scroll-behavior: smooth; }

/* ===== Category listing — two-column layout + product-card grid ===== */
.columns-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.columns-container > .row { display: flex; flex-wrap: nowrap; gap: 32px; align-items: flex-start; }
#left-column { flex: 0 0 262px; max-width: 262px; }
#center-column { flex: 1 1 auto; min-width: 0; }
#right-column:empty { display: none; }
@media (max-width: 900px) { .columns-container > .row { flex-wrap: wrap; } #left-column { flex-basis: 100%; max-width: none; } }
/* Sidebar blocks (category tree + faceted filters) */
#left-column .block, #left-column .ps-categorytree, #left-column .left-block { background: #fafbfc; border: 1px solid #eceff3; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
#left-column .category-tree ul, #left-column .ps-categorytree ul { list-style: none; margin: 0; padding-left: 12px; }
#left-column .category-tree > ul { padding-left: 0; }
#left-column .category-tree a { display: block; padding: 6px 0; color: #333; font-size: .9rem; }
#left-column .category-tree a:hover { color: var(--red, #c0392b); }
/*#search_filters .facet { border-top: 1px solid #eee; padding: 12px 0; }
#search_filters .facet__title, #search_filters .h6 { font-weight: 700; margin-bottom: 8px; }
#search_filters .facet__label, #search_filters label { font-size: .88rem; display: flex; gap: 8px; align-items: center; padding: 3px 0; }*/
/* Products header: title, count, sort */
.products-selection, .product-list-header, .js-product-list-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 22px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.total-products, .total-products p { color: #777; font-size: .9rem; margin: 0; }
.products__sort, .products-sort-order { position: relative; }
.products__sort .select-title, .products-sort-order .select-title { border: 1.5px solid #ddd; border-radius: 3px; padding: 8px 14px; font-size: .85rem; cursor: pointer; display: inline-block; }
/*!* Product grid *!
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0 0 32px; padding: 0; }
@media (max-width: 1100px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .products { grid-template-columns: 1fr; } }
.product-miniature { margin: 0; }
.product-miniature__inner { display: flex; flex-direction: column; height: 100%; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s, border-color .15s; }
.product-miniature__inner:hover { box-shadow: 0 8px 26px rgba(0,0,0,.09); border-color: #e0e0e0; }
.product-miniature__image-container, .product-miniature__top { position: relative; }
.product-miniature__image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 12px; }
.product-miniature__bottom { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 18px; flex: 1; }
.product-miniature__title { font-size: .92rem; font-weight: 600; line-height: 1.35; color: #222; }
.product-miniature__title a { color: inherit; }
.product-miniature__title a:hover { color: var(--red, #c0392b); }
.product-miniature__prices { margin-top: 2px; }
.product-miniature__price { font-size: 1.2rem; font-weight: 800; color: var(--red, #c0392b); }
.product-miniature__discount-price { text-decoration: line-through; color: #aaa; font-size: .9rem; margin-left: 8px; }
.product-miniature__actions { margin-top: auto; }
.product-miniature__add, .product-miniature__add.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--red, #c0392b); color: #fff; border: 0; border-radius: 3px; padding: 10px 16px; font-weight: 600; text-transform: uppercase; font-size: .76rem; cursor: pointer; }
.product-miniature__add:hover { filter: brightness(.94); color: #fff; }
.product-miniature__details.btn { display: inline-block; margin-top: 6px; font-size: .76rem; color: #333; text-decoration: underline; }*/
/* Pagination */
.pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 20px 0; justify-content: center; }
.pagination .page-list { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pagination a, .pagination .current a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border: 1px solid #ddd; border-radius: 3px; color: #333; padding: 0 8px; }
.pagination .current a, .pagination .active a { background: var(--red, #c0392b); border-color: var(--red, #c0392b); color: #fff; }

/* ===== Sliding cart drawer ===== */
.kh-cart { position: fixed; inset: 0; z-index: 1100; }
.kh-cart[hidden] { display: none; }
.kh-cart__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: kh-fade .2s ease; }
.kh-cart__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; animation: kh-slide-in .28s ease; }
@keyframes kh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kh-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.kh-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #eee; }
.kh-cart__title { font-size: 1.1rem; font-weight: 700; }
.kh-cart__close { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #333; }
.kh-cart__items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.kh-cart__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; position: relative; }
.kh-cart__thumb img { width: 64px; height: 64px; object-fit: contain; border: 1px solid #eee; border-radius: 3px; }
.kh-cart__info { flex: 1; min-width: 0; }
.kh-cart__name { display: block; font-size: .88rem; font-weight: 600; color: #222; line-height: 1.35; }
.kh-cart__name:hover { color: var(--red, #c0392b); }
.kh-cart__attrs { font-size: .76rem; color: #888; margin: 3px 0; }
/* mobelkap_linked_variants' displayCartExtraProductInfo hook output — unstyled
   everywhere it renders (cart page, order confirmation, this drawer) before
   this rule, since nothing in the design's own CSS ever targeted it. */
.product-line__item--info { display: flex; gap: 4px; font-size: .8rem; color: #888; margin: 2px 0; }
.product-line__item--info .product-line__item-label { font-weight: 600; }
.kh-cart__linked-variants .product-line__item--info { font-size: .76rem; margin: 2px 0 0; }
.kh-cart__line { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.kh-cart__qty { color: #888; font-size: .82rem; }
.kh-cart__price { font-weight: 700; color: var(--red, #c0392b); }
.kh-cart__remove { position: absolute; top: 12px; right: 0; color: #bbb; font-size: 1.3rem; line-height: 1; text-decoration: none; }
.kh-cart__remove:hover { color: var(--red, #c0392b); }
.kh-cart__foot { border-top: 1px solid #eee; padding: 20px 22px; }
.kh-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; font-size: 1.05rem; }
.kh-cart__total strong { font-size: 1.35rem; color: var(--red, #c0392b); }
.kh-cart__checkout { display: block; text-align: center; background: var(--red, #c0392b); color: #fff; padding: 14px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kh-cart__checkout:hover { filter: brightness(.94); color: #fff; }
.kh-cart__view { display: block; text-align: center; margin-top: 10px; color: #333; text-decoration: underline; font-size: .88rem; }
.kh-cart__empty { padding: 50px 22px; text-align: center; color: #777; }
.kh-cart__empty .kh-cart__checkout { margin-top: 20px; }
body.kh-cart-open { overflow: hidden; }

/* Review-form star rating: kominy4.css only styles a :hover preview
   (.cs-star-rating__form-stars:hover + label:hover~label), so the gold fill
   disappears the moment the pointer leaves the widget and a real click never
   shows which rating got picked. Mirror the same trick off :checked so the
   selected star (and every star before it) stays gold once clicked. */
.cs-star-rating__form-stars:has(input:checked) .cs-star-rating__form-star {
  fill: #eec04c;
}
.cs-star-rating__form-stars input:checked + label ~ label .cs-star-rating__form-star {
  fill: #d0d0d0;
}

/* Shared success/error feedback box — review form + newsletter form. */
.cs-reviews__message,
.cs-newsletter__message {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: .85rem;
  line-height: 1.4;
}
.cs-reviews__message--success,
.cs-newsletter__message--success {
  background: #e8f6ea;
  color: #1e6b2e;
  border: 1px solid #bfe6c5;
}
.cs-reviews__message--error,
.cs-newsletter__message--error {
  background: #fdecea;
  color: #a32a1f;
  border: 1px solid #f4c6c0;
}

/* ps_featuredproducts "Polecane produkty" carousel (cart cross-sell / order
   confirmation upsell). Reuses .solution-card's own flex sizing — the track
   just needs to scroll instead of wrap. */
.cs-container--product-carousel { padding: 0 0 40px; }
/* kominy4.css only styles .cs-headline__title when nested under the (unrelated)
   .cs-minicart__carousel-wrapper — reproduce the same look for our own wrapper. */
.cs-container--headline-carousel .cs-headline { margin: 0 0 2rem; padding: 2rem 0 0; }
.cs-container--headline-carousel .cs-headline__title {
  color: #000;
  font-family: Montserrat, Verdana, system-ui;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 1rem 0 1.5rem;
  text-transform: none;
}
@media (max-width: 47.99em) {
  .cs-container--headline-carousel .cs-headline__title { font-size: 1.6rem; }
}

/* Flyout width: match <div class="navbar">'s own width, aligned directly
   under it — not kominy4.css's stock 75.3vw/translateX(-3rem) sizing (a
   scraped-from-reference value that has no relation to this site's navbar).
   .cs-navigation__flyout stays position:absolute (kominy4.css's own
   .nav-item:hover/.cs-navigation__item:hover show/hide rule targets it
   as-is, and `top:100%` correctly anchors it right below the nav row using
   the LOCAL containing block's height, which we want to keep) — it has to:
   its containing block is .nav-item (position:relative, kominy4.css), which
   .dropdown elsewhere also anchors to, so switching .nav-item to
   position:static to make .navbar the containing block instead would break
   that other dropdown. Since each .nav-item sits at a different horizontal
   position inside .navbar, matching the flyout to .navbar's width/position
   isn't expressible as a fixed CSS value either way — initMegaMenuNavbarWidth()
   in theme.js measures both elements' real pixel positions at runtime and
   sets width/margin-left from that; see that function for details. */
.cs-navigation__list--main { position: static; }
.cs-navigation__flyout {
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}

/* kominymegamenu flyout: kominy4.css only ships the outer .cs-navigation__flyout
   box (shown on .nav-item:hover) + a bare .cs-navigation__teaser; the nested
   link lists and the teaser's caption are this module's own markup. Level 1 =
   "columns" laid out in a row; level 2+ = each column's own (recursively
   nestable) vertical sub-list. */
.kh-menu__columns { display: flex; gap: 3rem; flex: 1 1 auto; }
.kh-menu__list { list-style: none; margin: 0; padding: 0; }
.kh-menu__list--level_1 { display: flex; gap: 3rem; flex: 1 1 auto; }
.kh-menu__item--level_1 { min-width: 15rem; }
.kh-menu__link--level_1 {
  display: block; font-weight: 700; font-size: .95rem; text-transform: uppercase;
  letter-spacing: .03em; color: #222; padding: 0 0 1.2em;
}
.kh-menu__item--level_1:not(.kh-menu__item--parent) .kh-menu__link--level_1 { text-transform: none; font-weight: 600; padding: .4em 0; }
.kh-menu__link--level_1:hover { color: var(--red, #c0392b); }
.kh-menu__list--level_2, .kh-menu__list--level_3, .kh-menu__list--level_4 { margin-left: 0; }
.kh-menu__link--level_2, .kh-menu__link--level_3, .kh-menu__link--level_4 {
  display: inline-block; color: #333; font-size: .92rem; padding: .4em 0;
}
.kh-menu__link--level_2:hover, .kh-menu__link--level_3:hover, .kh-menu__link--level_4:hover { color: var(--red, #c0392b); }
.kh-menu__item--level_2 .kh-menu__list, .kh-menu__item--level_3 .kh-menu__list { margin-left: 1rem; }
.kh-menu__teaser { flex: 0 0 22rem; position: relative; }
.kh-menu__teaser a { display: block; position: relative; height: 100%; min-height: 18rem; border-radius: 8px; overflow: hidden; }
.kh-menu__teaser img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-menu__teaser-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.2em 1.4em; background: linear-gradient(0deg, rgba(0,0,0,.62), transparent);
  color: #fff; font-weight: 600; font-size: .95rem;
}
.kh-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.kh-carousel__track.products {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  list-style: none;
  margin: 0;
  flex: 1 1 auto;
}
.kh-carousel__track.products .solution-card { scroll-snap-align: start; }
.kh-carousel__nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--ink, #1a1a1a);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.kh-carousel__nav:hover { border-color: var(--red, #c0392b); color: var(--red, #c0392b); }
.kh-carousel__nav[disabled] { opacity: .35; cursor: default; }
@media (max-width: 640px) { .kh-carousel__nav { display: none; } }

/* Mobile nav — inside the #hamb offcanvas drawer (kominy4.css supplies the
   drawer slide-in/overlay mechanics via .cs-offcanvas*; this is just the
   menu content). Desktop hides the whole .cs-offcanvas at 64em+ (kominy4.css),
   so this never competes with the hover flyout.

   Drill-down "screen stack" (matches kratki.com's own mobile menu) rather
   than a tap-to-expand accordion: only ONE .kh-mobile-nav__panel is ever
   visible, no matter how deep it's nested in the DOM. Every panel gets
   `position:fixed` — which always resolves to the SAME containing block
   (the nearest ancestor with a `transform`, here .kh-mobile-nav__viewport)
   regardless of how many panels-within-panels it's nested inside, unlike
   `position:absolute` which would nest through each intermediate positioned
   ancestor and break once one of them is display:none. theme.js's
   initMobileNav() toggles `.is-active` and drives the breadcrumb/back button. */
.kh-mobile-nav { display: flex; flex-direction: column; height: 100%; padding-top: 6.4rem; }

.kh-mobile-nav__crumbbar { display: none; align-items: center; gap: .8rem; padding: 0 1.6rem 1.2rem; border-bottom: 1px solid #eee; flex: 0 0 auto; }
.kh-mobile-nav__crumbbar:not([hidden]) { display: flex; }
.kh-mobile-nav__back { flex: 0 0 auto; display: flex; align-items: center; border: 0; background: none; padding: .4rem; margin: 0 0 0 -.4rem; cursor: pointer; color: var(--ink, #1a1a1a); }
.kh-mobile-nav__back svg { width: 10px; height: 16px; }
.kh-mobile-nav__crumbs { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kh-mobile-nav__crumb { font-size: .78rem; font-weight: 700; text-transform: uppercase; text-decoration: underline; color: var(--ink, #1a1a1a); }
.kh-mobile-nav__crumb--ancestor { font-size: .7rem; font-weight: 400; text-transform: none; color: #777; }

.kh-mobile-nav__viewport { position: relative; flex: 1 1 auto; overflow: hidden; transform: translateZ(0); }
/* visibility, NOT display: a drilled-into panel is nested INSIDE its now-
   inactive parent panel — display:none on that ancestor would remove the
   whole subtree from the render tree no matter what the descendant panel's
   own display is (confirmed live: panels came back with a real 0x0 rect
   despite position:fixed + display:block). visibility IS individually
   overridable per descendant, so a visibility:visible child inside a
   visibility:hidden ancestor still renders normally. position:fixed
   already removes every panel from normal flow, so an inactive one being
   visibility:hidden costs no layout space either way. */
.kh-mobile-nav__panel {
  visibility: hidden; pointer-events: none;
  position: fixed; inset: 0; z-index: 1;
  padding: 1.2rem 1.6rem 2rem; overflow-y: auto; background: #fff;
}
.kh-mobile-nav__panel.is-active { visibility: visible; pointer-events: auto; }

.kh-mobile-nav__item { border-bottom: 1px solid #eee; }
.kh-mobile-nav__list .kh-mobile-nav__item:last-child { border-bottom: 0; }
.kh-mobile-nav__link,
.kh-mobile-nav__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1.1em 0; border: 0; background: none;
  font-size: 1rem; font-weight: 600; color: var(--ink, #1a1a1a);
  text-align: left; cursor: pointer;
}
.kh-mobile-nav__toggle .caret { width: 10px; height: 10px; transform: rotate(-90deg); flex: 0 0 auto; }
.kh-mobile-nav__link--all { font-weight: 400; color: #777; }
.kh-mobile-nav__list { list-style: none; margin: 0; padding: 0; }

/* Global configurator (modules/kominyconfigurator) — step 1's rich spec cards.
   .step_slider/.item/.content-image/.main_pic/.btn-container are kominy4.css's
   own existing configurator-card rules (shared with the homepage's 4-step
   wizard); only the bullet list itself is new markup needing its own style. */
.kc-system-card__bullets { list-style: none; margin: 0 0 16px; padding: 0 10px; font-size: .82rem; line-height: 1.5; color: #444; }
.kc-system-card__bullets li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.kc-system-card__bullets li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--red, #c0392b); }
.kc-system-card .content-image { flex-direction: column; }
.kc-system-card .main_pic { height: auto; width: 100%; margin: 0 0 12px; }

/* "Rodzina produktów" step (real category cards, see step_family) — reuses
   .kc-system-card entirely; only the plain-text description is new. */
.kc-system-card__description { margin: 0 0 16px; padding: 0 10px; font-size: .85rem; line-height: 1.5; color: #444; }

/* Global configurator — step 0, "Wybierz producenta" (real manufacturer
   logo grid, mirrors systemowekominy.pl's own first configurator step). */
.kc-manufacturer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.kc-manufacturer-card { position: relative; border: none; border-radius: 3px; padding: 20px; display: flex; align-items: center; justify-content: center; height: 60px; cursor: pointer; transition: border-color .15s; }
.kc-manufacturer-card:hover { border-color: var(--red, #c0392b); }
.kc-manufacturer-card label { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kc-manufacturer-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kc-manufacturer-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.kc-manufacturer-card:has(input[type="radio"]:checked) { border-color: var(--red, #c0392b); box-shadow: 0 0 0 1px var(--red, #c0392b); }
.kc-system-back { display: inline-block; margin-bottom: 16px; }

.kc-manufacturer-card label {
  border:none !important;
}

/* PDP "Dane techniczne" table (kominy4.css's own .additional-attributes*
   rules) — szablon's default puts it in a 2-column CSS-columns layout
   (column-count:2 at >=64em) meant for shops with several feature groups
   side by side. This shop only ever renders one group ("Ogólne" — see
   product.tpl), so the table only ever fills one of the two columns,
   leaving the other half empty. Force a single, full-width column instead. */
.additional-attributes-wrapper { column-count: 1 !important; }
table.additional-attributes { width: 100%; }

/* Feature-value image (see kominyfeatureicons module) — REPLACES the text
   value in the "Dane techniczne" table when one is set in the admin. */
.kfi-feature-value-icon { /*max-width: 60px;*/ max-height: 20px; object-fit: contain; vertical-align: middle; }
/* Downloadable attachment link (e.g. an energy-label PDF) shown next to a
   feature value's icon/text when one is set in the admin. */
.kfi-feature-value-file { display: inline-flex; margin-left: 6px; color: inherit; vertical-align: middle; }
.kfi-feature-value-file:hover { color: var(--red, #c0392b); }

/* Attribute-value image (see kominyfeatureicons module) — REPLACES the text
   label inside a swatch-option pill (product-variants.tpl) when set. */
.swatch-option--image { padding: 4px !important; }
.kai-attribute-icon { align-items: center;
  background-color: #fff;
  bottom: 0;
  color: dimgray;
  display: flex;
  font-size: 0.8rem;
  justify-content: center;
  left: 0;
  line-height: .9rem !important;
  padding: .5rem !important;
  position: absolute !important;
  right: 0; }

.kai-icon-label{
  height: 42px;
  display: block;
}

/* ==========================================================================
   amazzingfilter skin — replaces ps_facetedsearch as the category/search
   sidebar filter block (hooked to displayLeftColumn, same as before — see
   themes/kominy/modules/amazzingfilter/views/templates/hook/amazzingfilter.tpl
   for the cs-page-category__sidebar class that positions it in the sidebar
   column). Module markup/JS (front.js, slider.js) is untouched — this is a
   CSS-only skin reusing the same tokens as the old .filter-sidebar/
   .filter-group/.filter-check-item/.facet-slider rules (kominy4.css) so the
   two modules look identical to a visitor.
   ========================================================================== */
#amazzing_filter.af {
  border-right: 1px solid #ebebeb;
  padding: 0 24px 40px 0;
}
#amazzing_filter .title_block {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#amazzing_filter .title_block .compact-toggle {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  background: none;
  border: 1px solid #ddd;
  padding: 3px 9px;
  color: #888;
  cursor: pointer;
}
#amazzing_filter .title_block .compact-toggle:hover { color: #000; border-color: #000; }

/* Selected filters / clear-all */
#amazzing_filter .selectedFilters { margin-bottom: 16px; }
#amazzing_filter .selected-filters-label { font-size: 11px; color: #888; margin-right: 8px; }
#amazzing_filter .clearAll .all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #888;
  background: none;
  border: 1px solid #ddd;
  padding: 4px 10px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: all .15s;
}
#amazzing_filter .clearAll .all:hover { color: #000; border-color: #000; }

/* Filter groups */
#amazzing_filter .af_filter { margin-bottom: 0; }
#amazzing_filter .af_subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
  padding: 14px 0;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
}
#amazzing_filter .af_filter_content { padding: 14px 0 10px; border-bottom: 1px solid #ebebeb; }

/* Checkbox / radio options */
#amazzing_filter .af-checkbox-label,
#amazzing_filter .af-radio-label,
#amazzing_filter .af-textbox-label,
#amazzing_filter .af-color-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: #444;
  padding: 4px 0;
  cursor: pointer;
  transition: color .15s;
}
#amazzing_filter .af-checkbox-label:hover,
#amazzing_filter .af-radio-label:hover,
#amazzing_filter .af-textbox-label:hover,
#amazzing_filter .af-color-label:hover { color: #000; }
#amazzing_filter .name { flex: 1; }
#amazzing_filter .count { font-size: 11px; color: #bbb; }

#amazzing_filter input.af.checkbox,
#amazzing_filter input.af.radio {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1.5px solid #bbb;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: .15s;
}
#amazzing_filter input.af.radio { border-radius: 50%; }
#amazzing_filter input.af.checkbox:checked,
#amazzing_filter input.af.radio:checked { border-color: #000; background: #000; }
#amazzing_filter input.af.checkbox:checked::after {
  content: '\2713';
  color: #fff;
  font-size: 9px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#amazzing_filter input.af.radio:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}

/* Color swatches */
#amazzing_filter .af-color-box {
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  flex-shrink: 0;
  display: inline-block;
}
#amazzing_filter .af-color-box.bright { border-color: #bbb; }

/* Select dropdown (manufacturer, etc.) */
#amazzing_filter .af-select {
  border: 1px solid #ddd;
  padding: 7px 28px 7px 10px;
  font-size: 12.5px;
  color: #1a1a1a;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 9px center;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

/* Price/weight range slider */
#amazzing_filter .af-slider { padding: 6px 4px 10px; }
#amazzing_filter .slider-bar {
  position: relative;
  height: 4px;
  background: #ebebeb;
  border-radius: 2px;
  margin: 14px 5px 22px;
}
#amazzing_filter .selected-bar { position: absolute; top: 0; height: 4px; background: #1a1a1a; border-radius: 2px; }
#amazzing_filter .slider-bar .pointer {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  background: #1a1a1a;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1a1a1a;
  cursor: pointer;
}
#amazzing_filter .slider-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #1a1a1a;
}
#amazzing_filter .slider_value .input-text {
  border: none;
  width: 56px;
  font-size: 13px;
  color: #1a1a1a;
  background: transparent;
  padding: 0;
}

/* Selected-filter chips (rendered by front.js renderSelectedOption -> .cf) */
#amazzing_filter .selectedFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#amazzing_filter .cf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #333;
  background: #f4f4f4;
  border: 1px solid #e0e0e0;
  padding: 4px 10px;
  transition: all .15s;
}
#amazzing_filter .cf:hover { background: #000; color: #fff; border-color: #000; }
#amazzing_filter .cf .close { font-size: 13px; line-height: 1; text-decoration: none; color: inherit; }

/* "View products" button */
#amazzing_filter .btn-holder .btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
}
#amazzing_filter .btn-holder .btn:hover { background: #000; }

/* amazzingfilter's own default mobile trigger (edge sticky tab) is replaced by the
   theme's original "Filtry" button in products-top.tpl (.filter-mobile-open), wired
   to the same .compact-toggle mechanism — see the comment there. */
#amazzing_filter > .compact-toggle.sticky { display: none; }

/* Trust strip (kominytrust module) — .trust-strip/.trust-track/@keyframes marquee
   already ship in style.css; these just extend it for pause-on-hover, linked items,
   and image-type items (kominy4.css's own dark .ticker is a separate, still-unused
   variant — not used here since kominytrust needs image support). */
.trust-strip:hover .trust-track { animation-play-state: paused; }
.trust-track a { color: inherit; text-decoration: none; }
.trust-track__item--image::before { display: none; }
.trust-track__item--image { gap: 0; }
.trust-track__item img { height: 20px; width: auto; display: block; }

/* Mega-menu flyout teaser image (kominymegamenu) — kominy4.css's cs-image-teaser
   component is a generic, scraped-from-reference block used all over the source
   design; the flyout's own copy carried an inline aspect-ratio (244/308, portrait)
   from that reference site's crop, sized for a much narrower flyout. Our flyout is
   now near full page width (see mega-menu width fix), so that portrait ratio blew
   the teaser up to 400-500px tall, pushing the "Zobacz więcej" CTA (and the rest of
   the flyout) below the fold. Capped to a fixed, compact height instead — object-fit
   is scoped to .cs-navigation__teaser only, the sitewide .cs-image-teaser__image rule
   still has it commented out for other uses of this component. */
.cs-navigation__teaser .cs-image-teaser__picture,
.cs-navigation__teaser .cs-image-teaser__image {
  height: 200px;
  object-fit: cover;
}

/* ==========================================================================
   Checkout — collapsed from 4 steps to 2 ("Dostawa" / "Zamówienie i płatność"),
   matching kratki.com's checkout structure. See checkout-navigation.tpl
   (nav now has 2 items), checkout-process.tpl (#checkout-dostawa-group wraps
   personal-info+addresses+shipping), and theme.js's showStep() (now reveals
   every reachable step inside the group together instead of one at a time).
   ========================================================================== */
/* De-emphasize the 3 inner step titles inside the group so they read as
   section dividers within one continuous form, not 3 separate page titles —
   the group has its own outer identity via the "Dostawa" nav label already. */
.checkout-dostawa-group .step__title {
  padding: 14px 0;
  margin-bottom: 16px;
}
.checkout-dostawa-group .step__title .page-title-section {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
}
.checkout-dostawa-group .step--current .step__title .page-title-section {
  color: #1a1a1a;
}
/* Last visible step in the group shouldn't carry a trailing divider into
   whatever comes after it (varies — could be another group step or nothing,
   since the payment step lives outside this wrapper entirely). */
.checkout-dostawa-group .step:last-child {
  border-bottom: none;
}

/* Payment method list — kominy4.css's default (~line 21469) is a horizontal
   card grid with the radio hidden entirely (display:none!important). Override
   into a vertical list: visible radio circle, label left, logo right, row
   dividers — matching kratki.com's payment-method rows. */
.payment-options__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  border-top: 1px solid #ede8e2;
}
.payment-option {
  width: 100%;
  height: auto;
  border: none;
  border-bottom: 1px solid #ede8e2;
  border-radius: 0;
  padding: 16px 4px;
}
.payment-option:hover,
.payment-option.chosen,
.payment-option:has(input:checked) {
  border-bottom-color: #ede8e2;
  background: #faf8f6;
}
.checkout-payment-buttons { justify-content: flex-start; }
.payment-option__form-check { width: 100%; gap: 14px; }
.payment-option__input {
  display: inline-block !important;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #bbb;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.payment-option__input:checked {
  border-color: #1a1a1a;
}
.payment-option__input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #1a1a1a;
  border-radius: 50%;
}
.payment-option__label {
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 500;
}
.payment-option__label img { max-height: 32px; }

/* "Zaznacz wszystkie" (select-all) toggle above the terms/consent checkboxes */
.checkout-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
  cursor: pointer;
}
.checkout-select-all input { margin: 0; }

/* Estimated shipping date line in the order summary */
.cart-summary__line--estimate {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed #ede8e2;
}

/* Address/delivery/order recap — moved into the sidebar (.checkout-page__summary,
   bottom of .checkout-summary-body — see checkout.tpl) so all order-review content
   lives in one place, matching kratki.com's summary panel. */
.checkout-summary-recap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ede8e2;
}
.checkout-recap { margin-bottom: 16px; }

.product-info-block.card{
  border:none;
  box-shadow:none;
}

.checkout-recap__block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #ede8e2;
  font-size: 13.5px;
  color: #444;
  line-height: 1.6;
}
.checkout-recap__block-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
  margin-bottom: 4px;
}
.checkout-recap__edit {
  flex-shrink: 0;
  font-size: 12.5px;
  color: #1a1a1a;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* order-final-summary.tpl (core PS template, kept structurally as-is) has no
   CSS of its own anywhere in the theme — style it to fit the narrow (36vw)
   sidebar column instead of the full main-column width it was designed for. */
.checkout-page__summary #order-summary-content {
  font-size: 13px;
}
.checkout-page__summary .final-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
  margin: 16px 0 8px;
}
.checkout-page__summary .final-summary__header .btn {
  font-size: 11px;
  padding: 0;
  color: #1a1a1a;
  text-decoration: underline;
  background: none;
  border: none;
}
.checkout-page__summary .final-summary > .h2 { display: none; } /* redundant — the sidebar already has its own "Podsumowanie zamówienia" heading */
.checkout-page__summary .address__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkout-page__summary .address-card__container { padding: 12px; cursor: default; }
.checkout-page__summary .address-card__content { font-size: 12.5px; }

/* Shipping-method table: 3 side-by-side columns don't fit a narrow sidebar —
   stack each cell as a label:value row instead, reusing the data-ps-label
   attributes the core template already renders for exactly this pattern. */
.checkout-page__summary .grid-table { width: 100%; font-size: 12.5px; }
.checkout-page__summary .grid-table__header { display: none; }
.checkout-page__summary .grid-table__row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #ede8e2; }
.checkout-page__summary .grid-table__cell { display: flex; justify-content: space-between; gap: 8px; }
.checkout-page__summary .grid-table__cell::before { content: attr(data-ps-label); font-weight: 600; color: #888; flex-shrink: 0; }
.checkout-page__summary .grid-table__cell:empty,
.checkout-page__summary .grid-table__cell:not([data-ps-label])::before { content: none; }

/* Order items — order-confirmation__* (kominy4.css ~21557) is already compact
   enough as-is; just tighten the outer table wrapper spacing. */
.checkout-page__summary .final-summary__order-table { margin-bottom: 0; border: none; }
.checkout-page__summary .final-summary__order-table .card-body { padding: 0; }


body#product model-viewer{
  height: 100% !important;
}

.kfi-feature-value-file-container {
  display: flex !important;
  flex-wrap: nowrap;
  flex-direction: row;
}