/* =====================================================================
 * KS-CLS-ZERO — Reserve space for late-loading elements that shift layout.
 * Target: push CLS to ~0 across all pages.
 *
 * Loaded site-wide via head.tpl. Pure spec-compliant (no !important unless
 * required to beat existing rules).
 * 2026-05-14
 * ===================================================================== */

/* ----- Breadcrumb (every catalog/CMS page) -----
 * Shifts when text renders after font swap. */
nav.breadcrumb,
.breadcrumb,
.ks-breadcrumb {
  min-height: 28px;
  contain: layout;
}
@media (max-width: 575px) {
  nav.breadcrumb,
  .breadcrumb,
  .ks-breadcrumb { min-height: 24px; }
}

/* ----- PDP "Najważniejsze informacje" feature box -----
 * 6-row table renders late on mobile and shifts the whole right column. */
body#product .ks-pdp-features,
body#product .ks-buybox-features,
body#product .ks-features-grid,
body#product [class*="ks-product-trust"] {
  min-height: 220px;
  contain: layout style;
}
@media (max-width: 767px) {
  body#product .ks-pdp-features,
  body#product .ks-buybox-features {
    min-height: 280px;
  }
}

/* ----- Trust strip items -----
 * Items render after Font Awesome icons load → ~1-2px shift each. */
#header .ks-trust-strip-item,
#header .ks-trust-strip-item span,
.ks-trust-strip-item svg,
.ks-trust-strip-item .ks-trust-strip-check {
  min-height: 14px;
  display: inline-flex;
  align-items: center;
}
#header .ks-trust-strip-item svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ----- Header logo -----
 * Slight shift on first paint when img dims load. */
#header .logo,
#header img.logo,
#header a[href="/"] img,
#header #_mobile_logo img,
#_desktop_logo img {
  aspect-ratio: attr(width) / attr(height);
}
/* Concrete heights: */
#header img.logo,
#header a[href="/"] img,
#_desktop_logo img { height: 36px; width: auto; }
#header #_mobile_logo,
#header #_mobile_logo a,
#header #_mobile_logo img { height: 28px; width: auto; }

/* ----- "Konto" / cart label in header -----
 * 0.0018 shift when first name swaps in after JS. */
#_desktop_user_info,
#_desktop_cart,
.ks-icons > div {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
#_desktop_user_info span,
#_desktop_cart span {
  min-width: 36px;
  display: inline-block;
  text-align: left;
}

/* ----- Body text containers (description blocks) -----
 * 0.0031 shift when long descriptions reflow. */
body#product .product-description,
body#product #description,
body#product .ks-buybox-description {
  contain-intrinsic-size: auto 500px;
  content-visibility: auto;
}
body#category .category-description,
body#category #category-description,
body#category .block-category {
  contain-intrinsic-size: auto 220px;
}

/* ----- Cart sticky bottom CTA -----
 * The CTA mounts late and shifts content above it. Reserve its space. */
body#cart .ks-cart-sticky,
body#cart .ks-cart-sticky-bar,
body#order .ks-checkout-sticky {
  min-height: 76px;
}

/* ----- Cookie banner / Trusted Shops widget -----
 * They mount late and shift footer content if not absolute-positioned. */
[id^="trustbadge-container-"],
.ks-cookie-banner,
.cookie-banner {
  position: fixed;
}

/* ----- Generic font-loading shift mitigation -----
 * Use font-display:optional or font-display:swap consistently. */
:root {
  font-display: swap;
}

/* ----- Late-loaded carousels / sliders -----
 * Reserve their height so subsequent content doesn't jump. */
.homeslider,
.ets_homeslider,
#homeslider,
.ks-hero-slider {
  min-height: 320px;
  contain: layout;
}
@media (max-width: 767px) {
  .homeslider,
  .ets_homeslider,
  #homeslider,
  .ks-hero-slider { min-height: 200px; }
}

/* ----- Featured products / category grid empty state -----
 * Avoid grid collapsing before data binds. */
#products .products,
.featured-products .products {
  min-height: 360px;
}

/* CWV 2026-05-14 — Blog page: reserve content height to prevent 
   the 0.68 CLS from #content-wrapper reflowing as ybc_blog list binds. */
/* CWV 2026-05-14 — Blog grid critical layout to prevent column reflow
   when theme.css arrives late under throttled networks. */
body#ybc_blog_page .row { display: flex !important; flex-wrap: wrap !important; margin-right: -15px !important; margin-left: -15px !important; box-sizing: border-box; }
body#ybc_blog_page .row > [class*="col-"] { position: relative !important; padding-right: 15px !important; padding-left: 15px !important; box-sizing: border-box; }
@media (min-width: 768px) {
  body#ybc_blog_page .col-sm-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
  body#ybc_blog_page .col-sm-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
}
@media (min-width: 992px) {
  body#ybc_blog_page .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  body#ybc_blog_page .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; }
}
@media (max-width: 767px) {
  body#ybc_blog_page .col-xs-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}
/* Reserve content-wrapper height to prevent FOUC reflow */
body#ybc_blog_page #content-wrapper { min-height: 3700px; }
@media (max-width: 991px) { body#ybc_blog_page #content-wrapper { min-height: 4500px; } }

/* CWV 2026-05-14 — PDP/category content-wrapper height reservation
   to eliminate cache-cold layout shift races. Final PDP content is
   typically 2500-4500px tall; reserving 2200px covers above-fold safely. */
body#product #content-wrapper { min-height: 2200px; }
@media (max-width: 991px) { body#product #content-wrapper { min-height: 3200px; } }
body#category #content-wrapper { min-height: 1800px; }
@media (max-width: 991px) { body#category #content-wrapper { min-height: 2800px; } }

/* CWV 2026-05-14 — Hide desktop megamenu on mobile to prevent CLS 0.33+
   on blog/CMS/PDP/cat where deferred theme.css' hidden-sm-down rule
   arrives after first paint. */
@media (max-width: 991px) {
  #_desktop_top_menu,
  #header .ks-row3,
  #header .menu.ks-mm-v7,
  #header .ks-mm-bar { display: none !important; }
}

/* CWV 2026-05-14 — Home page CLS race fixes. Hero + trust sections
   can shift 0.16-0.66 when CSS arrives after first paint. Reserve
   final sizes upfront. */
body#index .ks-hero, body#index .ks-hero-inner { min-height: 480px; }
@media (max-width: 991px) { body#index .ks-hero, body#index .ks-hero-inner { min-height: 280px; } }
body#index .ks-trust { min-height: 600px; }
body#index .ks-trust-grid { min-height: 480px; }
@media (max-width: 991px) { body#index .ks-trust { min-height: 700px; } body#index .ks-trust-grid { min-height: 500px; } }
body#index .ks-cats { min-height: 500px; }

/* CWV 2026-05-14 — v0 home flex order moved from body inline to head critical
   to prevent ks-hero/ks-cats reorder CLS shift when body style parses late. */
body#index #content.page-home { display: flex !important; flex-direction: column; }
body#index #content.page-home .ks-hero { order: 1; }
body#index #content.page-home .ks-cats { order: 2; }
body#index #content.page-home section.featured-products:not(.mt-3) { order: 3; }
body#index #content.page-home .ks-process-home { order: 4; }
body#index #content.page-home .ks-b2b { order: 5; }
body#index #content.page-home .ks-trust { order: 6; }
body#index #content.page-home > div:nth-of-type(1) { order: 7; }
body#index #content.page-home > div:nth-of-type(2) { order: 8; }
body#index #content.page-home .ks-nl { order: 9; }
body#index #content.page-home > section.featured-products.mt-3 { display: none !important; }