/* KluczeSoft iter CSS — extracted, full rules preserved (KS-ITER-EXTERNAL-V2) */

/* KS-PDP-COMPACT-V9: tighten PDP buybox so add-to-cart fits above 900px fold */
  body.product .pdp-col-buybox{
    /* tighter overall vertical rhythm */
  }
  body.product .ks-product-title{
    font-size:1.5rem!important;
    line-height:1.2!important;
    margin:.5rem 0 .75rem!important;
    color:#0f172a!important;
  }
  body.product .ks-availability-row{
    margin:.5rem 0!important;
    gap:.5rem!important;
  }
  body.product .ks-stock-badge,
  body.product .ks-delivery-badge{
    padding:.25rem .5rem!important;
    font-size:.75rem!important;
  }
  /* Compact features list — show max 3 most critical, smaller text */
  body.product .ks-buybox-features{
    margin:.5rem 0!important;
    padding:.5rem 0!important;
    font-size:.8125rem!important;
    line-height:1.5!important;
    list-style:none!important;
    max-height:5.5em;
    overflow:hidden;
    position:relative;
  }
  body.product .ks-buybox-features li{
    margin-bottom:.125rem!important;
    padding-left:0!important;
  }
  body.product .ks-buybox-features li:nth-child(n+4){display:none!important}
  body.product .ks-bf-label{font-weight:600;color:#475569!important}
  body.product .ks-bf-value{color:#0f172a!important}
  body.product .ks-buybox-divider{margin:.5rem 0!important;border-top:1px solid #e2e8f0;padding:0!important;height:1px}

  /* Price block — compact, prominent */
  body.product .product-prices{
    margin:.75rem 0!important;
    padding:.75rem 1rem!important;
    background:#f8fafc;
    border-radius:.5rem;
    border:1px solid #e2e8f0;
  }
  body.product .product-prices .current-price .price{
    font-size:1.875rem!important;
    font-weight:800!important;
    color:#0078D4!important;
    line-height:1!important;
  }
  body.product .product-prices .regular-price{
    font-size:.9375rem!important;
    color:#94a3b8!important;
    text-decoration:line-through;
  }
  body.product .product-prices .product-discount{
    background:linear-gradient(135deg,#ef4444,#f97316)!important;
    color:#fff!important;
    padding:.25rem .5rem!important;
    border-radius:.25rem!important;
    font-size:.8125rem!important;
    font-weight:700;
    display:inline-block;
    margin-bottom:.25rem;
  }

  /* Add-to-cart button HERO */
  body.product .product-add-to-cart .btn-primary,
  body.product .add .btn-primary,
  body.product form#add-to-cart-or-refresh button[type=submit].btn-primary{
    width:100%!important;
    padding:.875rem 1.25rem!important;
    font-size:1rem!important;
    font-weight:700!important;
    background:linear-gradient(135deg,#0078D4,#005a9c)!important;
    color:#fff!important;
    border:none!important;
    border-radius:.5rem!important;
    box-shadow:0 4px 12px rgba(0,120,212,.25)!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
    transition:transform .15s ease,box-shadow .2s ease!important;
    margin:.5rem 0!important;
  }
  body.product .product-add-to-cart .btn-primary:hover,
  body.product form#add-to-cart-or-refresh button[type=submit].btn-primary:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 6px 16px rgba(0,120,212,.35)!important;
  }

  /* Compact trust grid below CTA */
  body.product .ks-trust-grid{
    grid-template-columns:repeat(4,1fr)!important;
    gap:.375rem .5rem!important;
    padding:.625rem!important;
    margin-top:.75rem!important;
  }
  body.product .ks-tg-item{font-size:.6875rem!important}
  @media (max-width:991px){
    body.product .ks-trust-grid{grid-template-columns:1fr 1fr!important}
  }

  /* Push description (now below add-to-cart) below the visible fold gracefully */
  body.product #product-description-short-,
  body.product .product-description{
    margin-top:1rem!important;
    padding:.75rem 0!important;
    border-top:1px solid #e2e8f0;
    color:#0f172a!important;
    line-height:1.6;
  }

  /* KS-PDP-COMPACT-V9 marker */

/* KS-FUNNEL-V8: cart mobile + PDP above-fold + login POKAŻ inline */

  /* === A) CART MOBILE — collapse trust banner stack so total + checkout button visible above fold === */
  @media (max-width:768px){
    /* Hide trust signal blocks below cart line items on mobile (keep them in checkout instead) */
    body#cart .reassurance-block,
    body#cart .cart-extra-info,
    body#cart .ets-cart-trust,
    body#cart .cart-loyalty-banner,
    body#cart .block-promo:not(.has-promo-code),
    body#cart .cart-summary-extra,
    body#cart .static-info-block,
    body#cart .delivery-info-block{
      display:none!important;
    }
    /* Cart mobile layout: line items at top, sticky checkout summary at bottom */
    body#cart .cart-summary,
    body#cart .cart-detailed-totals{
      position:sticky;
      bottom:0;
      background:#fff;
      box-shadow:0 -4px 12px rgba(0,0,0,.08);
      border-top:2px solid #0078D4;
      padding:1rem;
      z-index:50;
      margin:1rem -.75rem -.75rem!important;
      border-radius:.5rem .5rem 0 0;
    }
    body#cart .cart-summary .cart-summary-totals,
    body#cart .cart-summary .cart-total{
      font-size:1.125rem!important;
      font-weight:700!important;
      color:#0f172a!important;
      margin-bottom:.625rem!important;
    }
    /* Make cart summary checkout button big */
    body#cart .cart-summary a.btn,
    body#cart .cart-summary .btn-primary{
      width:100%!important;
      padding:.875rem 1rem!important;
      font-size:1rem!important;
    }
  }

  /* === B) PDP — gentle nudge only, mobile fixed bar only === */
  @media (max-width:991px){
    body.product .product-actions form.cart-form{
      background:#fff;
      padding:.75rem;
      border-radius:.375rem;
      box-shadow:0 -2px 8px rgba(0,0,0,.06);
    }
    body.product main,body.product #main,body.product #content-wrapper{
      padding-bottom:90px!important;
    }
  }
  /* Description text contrast fix (Gemini found grey-on-white) */
  body.product .product-description,
  body.product #description,
  body.product .tab-pane{
    color:#0f172a!important;
  }
  body.product .product-description p,
  body.product #description p,
  body.product .tab-pane p{
    color:#0f172a!important;
    line-height:1.6;
  }

  /* === C) LOGIN — POKAŻ as inline eye-icon inside password input === */

  .login-form .input-group:has(input[type=password]),
  body[id*="auth"] .input-group:has(input[type=password]){
    position:relative;
    display:block!important;
  }
  .login-form .input-group input[type=password],
  body[id*="auth"] .input-group input[type=password]{
    width:100%!important;
    padding-right:48px!important;
    height:42px!important;
    border-radius:.375rem!important;
    border:1px solid #cbd5e1!important;
    background:#fff!important;
    color:#0f172a!important;
  }
  .login-form .input-group .input-group-btn,
  .login-form .input-group .input-group-append,
  .login-form button.show-password,
  body[id*="auth"] .input-group .input-group-btn,
  body[id*="auth"] .input-group .input-group-append,
  body[id*="auth"] button.show-password{
    position:absolute!important;
    right:1px!important;
    top:1px!important;
    bottom:1px!important;
    background:transparent!important;
    border:none!important;
    border-left:1px solid #e2e8f0!important;
    color:#64748b!important;
    cursor:pointer;
    z-index:2;
    width:42px!important;
    max-width:42px!important;
    padding:0!important;
    font-size:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:0 .375rem .375rem 0!important;
    transition:color .15s ease;
  }
  .login-form .input-group .input-group-btn:hover,
  body[id*="auth"] .input-group .input-group-btn:hover,
  .login-form button.show-password:hover{color:#0078D4!important}

  /* Replace POKAŻ text with eye SVG */
  .login-form .input-group-btn::before,
  body[id*="auth"] .input-group-btn::before,
  .login-form button.show-password::before,
  body[id*="auth"] button.show-password::before{
    content:"";
    width:18px;
    height:18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    display:inline-block;
  }
  .login-form .input-group-btn:hover::before,
  body[id*="auth"] .input-group-btn:hover::before,
  .login-form button.show-password:hover::before,
  body[id*="auth"] button.show-password:hover::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230078D4' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  }

  /* Hide the original POKAŻ text inside the button (we replaced with icon) */
  .login-form .input-group-btn span,
  .login-form .input-group-append span,
  .login-form button.show-password span,
  body[id*="auth"] .input-group-btn span{display:none!important}

  /* === D) PROMOCJE empty state — gentle "no offers right now" presentation === */
  body[id*="category"] .product-list:empty::after,
  body#category-promotions #js-product-list::empty::after,
  .no-products{
    content:"";
    display:block;
    padding:2rem;
    text-align:center;
    color:#64748b;
  }

/* KS-RESP-MICRO-V7: 320px overflow fixes + micro-interactions */

  /* === A) GLOBAL OVERFLOW GUARDS === */
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  *,*::before,*::after{max-width:100%!important}
  img,video,iframe,svg{max-width:100%!important;height:auto!important}
  table{table-layout:auto!important;width:100%!important}
  pre,code{white-space:pre-wrap!important;word-break:break-word!important}

  /* === B) SMALL MOBILE (≤480px) — KILL HORIZONTAL OVERFLOW === */
  @media (max-width:480px){
    .container,.container-fluid,#wrapper > .container{
      padding-left:.75rem!important;
      padding-right:.75rem!important;
      max-width:100%!important;
    }
    h1,h2,h3,h4{
      font-size:clamp(1rem,5vw,1.5rem)!important;
      line-height:1.25!important;
      word-break:break-word!important;
      hyphens:auto;
    }
    /* Hero: stack everything, smaller text */
    .ks-hero,.ks-hero .row{
      flex-direction:column!important;
      gap:.75rem;
      padding:.5rem 0!important;
    }
    .ks-hero h1{font-size:1.375rem!important}
    .ks-hero img{max-width:100%!important;height:auto}
    /* Product cards stack */
    .product-miniature,.product-card{width:100%!important;max-width:100%!important}
    /* Header logo size */
    #_desktop_logo img,#_mobile_logo img{max-height:24px!important}
    /* Search bar full width */
    .ets_search_block_top,.ets_search_block_top .ybc_searchbox{width:100%!important;max-width:100%!important}
    /* Cart badge position */
    .blockcart .cart-products-count{font-size:9px!important;min-width:14px!important;height:14px!important}
    /* Footer columns single col */
    .footer-container .row > [class*="col-"]{flex:0 0 100%!important;max-width:100%!important;margin-bottom:1rem}
    /* Table-of-contents in blog post — collapse */
    .blog-detail .table-of-contents,.blog-detail .toc{font-size:.8125rem!important}
    /* Breadcrumb — wrap */
    .breadcrumb{flex-wrap:wrap!important;font-size:.75rem!important}
  }

  /* === C) 320px DEDICATED FIX === */
  @media (max-width:359px){
    .ks-trust-strip-item{font-size:.5625rem!important;gap:.25rem!important}
    .ks-trust-strip-item svg{width:9px!important;height:9px!important}
    h1,.h1{font-size:1.125rem!important}
    .price,.product-price,.current-price{font-size:1.125rem!important}
    .btn{padding:.5rem .75rem!important;font-size:.8125rem!important}
  }

  /* === D) MICRO-INTERACTIONS — universal === */

  /* 1) Smooth scrolling site-wide */
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }

  /* 2) Button hover transform + shadow */
  .btn,button,a.btn,
  .product-actions .add-to-cart,
  .checkout a,
  .cart-detailed-actions .btn-primary{
    transition:transform .15s ease,box-shadow .2s ease,background .2s ease!important;
  }
  .btn:hover:not(:disabled),
  button:hover:not(:disabled),
  a.btn:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 4px 12px rgba(0,120,212,.15)!important;
  }
  .btn:active,button:active,a.btn:active{transform:translateY(0)!important}

  /* 3) Product card lift on hover */
  .product-miniature,.product-card,
  .ybc-blog-list .blog-post,
  .blog-list-grid .blog-post{
    transition:transform .2s ease,box-shadow .2s ease!important;
    will-change:transform;
  }
  .product-miniature:hover,.product-card:hover,
  .ybc-blog-list .blog-post:hover,
  .blog-list-grid .blog-post:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 8px 20px rgba(15,23,42,.08)!important;
  }

  /* 4) Image zoom on card hover */
  .product-miniature .product-thumbnail img,
  .product-miniature img.replace-2x,
  .ybc-blog-list .blog-post img,
  .blog-list-grid .blog-post img{
    transition:transform .35s ease!important;
  }
  .product-miniature:hover img,
  .ybc-blog-list .blog-post:hover img,
  .blog-list-grid .blog-post:hover img{
    transform:scale(1.04)!important;
  }

  /* 5) Link underline animation */
  .blog-detail a:not(.btn):not(.no-account a),
  .post-content a:not(.btn),
  article a:not(.btn){
    background-image:linear-gradient(currentColor,currentColor);
    background-position:0 100%;
    background-repeat:no-repeat;
    background-size:0 1px;
    transition:background-size .25s ease;
  }
  .blog-detail a:not(.btn):hover,
  article a:not(.btn):hover{background-size:100% 1px}

  /* 6) Smooth accordion expand/collapse — FAQ */
  .hifaq-block .hifaq-answer,
  .hifaq-content,
  .faq-answer{
    overflow:hidden;
    transition:max-height .35s ease,opacity .25s ease;
  }
  .hifaq-block:not(.active) .hifaq-answer,
  .hifaq-block .hifaq-answer:not(.active){
    max-height:0;
    opacity:0;
  }
  .hifaq-block.active .hifaq-answer,
  .hifaq-answer.active{
    max-height:1500px;
    opacity:1;
  }

  /* 7) Cart icon bounce on add — set up animation */
  @keyframes ks-cart-bounce{
    0%,100%{transform:scale(1)}
    25%{transform:scale(1.2) rotate(-10deg)}
    50%{transform:scale(1.05) rotate(8deg)}
    75%{transform:scale(1.15) rotate(-3deg)}
  }
  .blockcart.bounce .cart-products-count,
  .blockcart .cart-products-count.bounce{
    animation:ks-cart-bounce .6s ease;
    transform-origin:center;
  }

  /* 8) Trust strip badge hover */
  .ks-trust-strip-item{transition:opacity .2s ease}
  .ks-trust-strip-item:hover{opacity:.85}

  /* 9) Form input focus glow */
  input:focus-visible,textarea:focus-visible,select:focus-visible{
    outline:2px solid #0078D4!important;
    outline-offset:2px!important;
    box-shadow:0 0 0 4px rgba(0,120,212,.12)!important;
    transition:box-shadow .15s ease!important;
  }

  /* 10) Sticky header on scroll */
  @media (min-width:769px){
    #header{transition:box-shadow .2s ease,background .2s ease}
    body.is-scrolled #header{
      box-shadow:0 2px 12px rgba(15,23,42,.08)!important;
    }
  }

  /* 11) Back-to-top button */
  .ks-back-to-top{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:998;
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,#0078D4,#005a9c);
    color:#fff;
    border:none;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,120,212,.25);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;font-weight:700;
  }
  body.is-scrolled .ks-back-to-top{opacity:1;visibility:visible;transform:translateY(0)}
  .ks-back-to-top:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px rgba(0,120,212,.35)}

  /* 12) Skeleton loading (for images that haven't loaded yet) */
  .ybc-blog-list .blog-image::before,
  .product-miniature .product-thumbnail::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);
    background-size:200% 100%;
    animation:ks-shimmer 1.4s infinite linear;
    opacity:0;
    transition:opacity .15s;
    pointer-events:none;
    z-index:0;
  }
  @keyframes ks-shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
  }

  /* 13) page-fade REMOVED (CLS culprit) */
  /* keyframes ks-page-fade REMOVED */

  /* === E) UX FIX: returns page — better typography === */
  body[id*="content"] #main p,
  .cms-content p{
    line-height:1.7!important;
    font-size:1rem!important;
    max-width:65ch!important;
    margin-bottom:1rem;
  }
  body[id*="content"] #main h2,
  .cms-content h2{
    margin-top:2rem!important;
    padding-top:1rem;
    border-top:1px solid #e2e8f0;
    color:#0f172a!important;
    font-weight:700!important;
  }
  body[id*="content"] #main ul,
  body[id*="content"] #main ol,
  .cms-content ul,.cms-content ol{
    line-height:1.7;
    margin-bottom:1.25rem;
  }
  body[id*="content"] #main ul li,
  .cms-content ul li{margin-bottom:.5rem}

  /* === F) UX FIX: bundles category — value prop, sidebar density === */
  .product-list .product-flag.bestseller,
  .product-list .product-flag.online-only,
  .product-list .product-flag.new{
    transition:background .2s ease,transform .15s ease;
  }
  
  .product-list .product-miniature:hover .add-to-cart,
  .product-list .product-miniature:hover .product-actions,
  .product-list .product-miniature:hover .quick-view{
    opacity:1;
    transform:translateY(0);
  }
  </style>
  <script>
  (function(){
    // On scroll, toggle body.is-scrolled (for header shadow + back-to-top)
    let scrolled = false;
    function onScroll(){
      const isScroll = window.scrollY > 200;
      if(isScroll !== scrolled){
        scrolled = isScroll;
        document.body.classList.toggle('is-scrolled', isScroll);
      }
    }
    window.addEventListener('scroll', onScroll, {passive:true});

    // Back-to-top button
    document.addEventListener('DOMContentLoaded', function(){
      if(document.querySelector('.ks-back-to-top')) return;
      const btn = document.createElement('button');
      btn.className = 'ks-back-to-top';
      btn.setAttribute('aria-label', 'Wróć na górę');
      btn.textContent = '↑';
      btn.onclick = function(){window.scrollTo({top:0,behavior:'smooth'})};
      document.body.appendChild(btn);
    });

    // Cart bounce when count updates
    document.addEventListener('DOMContentLoaded', function(){
      const cartTarget = document.querySelector('.blockcart');
      if(!cartTarget) return;
      const observer = new MutationObserver(function(){
        cartTarget.classList.add('bounce');
        setTimeout(()=>cartTarget.classList.remove('bounce'), 700);
      });
      observer.observe(cartTarget, {childList:true,subtree:true,characterData:true});
    });
  })();
  </script>{/literal}

  {literal}<style>
  /* KS-FUNNEL-V6: cart + checkout + my-account funnel CRO fixes */

  /* === CART page === */

  /* 1) Demote "REJESTRACJA" button on cart page — it's not the primary CTA */
  #cart .no-account a,
  #cart-page .no-account a,
  body#cart a[href*="registration"]:not(.btn-primary){
    background:transparent!important;
    color:#0078D4!important;
    font-size:.875rem!important;
    padding:.5rem 0!important;
    text-decoration:underline!important;
    box-shadow:none!important;
    border:none!important;
  }
  /* Hide gigantic standalone register button on cart sidebar */
  body#cart .block-promo + .no-account-register,
  body#cart .cart-detailed-actions + .register-link,
  body#cart .cart-summary .no-account-register{display:none!important}

  /* 2) Promote standard checkout button — primary blue, large */
  body#cart .cart-detailed-actions .btn-primary,
  body#cart .checkout a.btn,
  body#cart a.proceed-to-checkout,
  body#cart .cart-summary a[href*="zamowienie"],
  body#cart .cart-summary a[href*="checkout"]{
    background:linear-gradient(135deg,#0078D4,#005a9c)!important;
    color:#fff!important;
    font-weight:700!important;
    font-size:1rem!important;
    padding:.875rem 1.5rem!important;
    border-radius:.5rem!important;
    box-shadow:0 2px 8px rgba(0,120,212,.25)!important;
    border:none!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
  }
  body#cart .cart-detailed-actions .btn-primary:hover{
    background:linear-gradient(135deg,#005a9c,#003d6b)!important;
    box-shadow:0 4px 12px rgba(0,120,212,.35)!important;
  }

  /* 3) Demote G Pay until the standard checkout button is acted on */
  body#cart .gpay-button,
  body#cart [aria-label*="Google Pay"]{
    margin-top:.75rem!important;
    opacity:.85!important;
  }

  /* 4) Promo code input visibility — make sure input is not hidden */
  body#cart .promo-code .promo-input,
  body#cart .promo-code input[type=text],
  body#cart input[name="discount_name"]{
    display:block!important;
    visibility:visible!important;
    background:#fff!important;
    color:#0f172a!important;
    border:1px solid #cbd5e1!important;
    padding:.625rem!important;
    border-radius:.375rem!important;
    width:100%!important;
  }

  /* 5) Cart MOBILE — show product info, hide trust banner stack */
  @media (max-width:768px){
    body#cart .cart-item .product-line-info,
    body#cart .cart-item .product-image,
    body#cart .cart-item .product-name,
    body#cart .cart-item img{
      display:block!important;
      visibility:visible!important;
    }
    body#cart .cart-item{
      display:grid!important;
      grid-template-columns:80px 1fr;
      gap:.75rem;
      align-items:center;
      padding:.75rem;
      border-bottom:1px solid #e2e8f0;
    }
    /* Reduce trust signal banner stack on mobile cart */
    body#cart .cart-extra-info,
    body#cart .cart-loyalty-banner,
    body#cart .reassurance-block{
      max-height:120px!important;
      overflow:hidden!important;
    }
  }

  /* === CHECKOUT page (/zamowienie) === */

  /* 6) Distraction-free checkout — hide main nav + breadcrumb */
  body#checkout .ks-row3,
  body#checkout .ks-mega,
  body#checkout #_desktop_top_menu,
  body#checkout #_mobile_top_menu,
  body#checkout .breadcrumb,
  body#checkout #wrapper > .breadcrumb{
    display:none!important;
  }
  /* Keep trust strip + logo + cart visible (security signals) */

  /* 7) Make "Order as guest" prominent + visually equal to "Create account" */
  body#checkout .checkout-guest,
  body#checkout #checkout-guest,
  body#checkout .js-customer-form-guest,
  body#checkout label[for*="guest"]{
    background:#f8fafc!important;
    border:2px solid #0078D4!important;
    border-radius:.5rem!important;
    padding:.875rem 1rem!important;
    margin:1rem 0!important;
    font-weight:600!important;
    color:#0f172a!important;
    font-size:1rem!important;
    cursor:pointer;
    display:block;
  }

  /* 8) Tab navigation styling for "Utwórz konto" / "Zaloguj się" */
  body#checkout .nav-tabs .nav-link,
  body#checkout .checkout-tabs button{
    background:transparent;
    color:#475569!important;
    font-weight:600!important;
    padding:.625rem 1rem!important;
    border:none!important;
    border-bottom:2px solid transparent!important;
    border-radius:0!important;
  }
  body#checkout .nav-tabs .nav-link.active,
  body#checkout .checkout-tabs button.active,
  body#checkout .checkout-tabs button[aria-selected="true"]{
    color:#0078D4!important;
    border-bottom-color:#0078D4!important;
    background:transparent!important;
  }

  /* 9) Checkout MOBILE — prevent text overflow */
  @media (max-width:768px){
    body#checkout *{max-width:100%!important;box-sizing:border-box}
    body#checkout .nav-tabs,
    body#checkout .checkout-tabs{
      display:flex!important;
      gap:.5rem;
      overflow-x:auto;
      flex-wrap:nowrap;
      padding-bottom:.25rem;
    }
    body#checkout .checkout-tabs button,
    body#checkout .nav-tabs .nav-link{
      flex:1;
      white-space:nowrap;
      font-size:.875rem!important;
      min-width:fit-content;
    }
    body#checkout .login-existing-customer,
    body#checkout .checkout-existing-customer{
      font-size:.875rem!important;
      text-align:left!important;
    }
    /* Step header truncation prevention */
    body#checkout .step-title,
    body#checkout h1,body#checkout h2{
      font-size:1.125rem!important;
      line-height:1.3!important;
      white-space:normal!important;
      word-break:break-word!important;
    }
  }

  /* === MY-ACCOUNT / LOGIN page password field parity === */

  /* 10) Password input width parity with email input */
  .login-form .form-group .input-group,
  body[id*="auth"] .input-group{
    display:flex!important;
    width:100%!important;
    align-items:stretch;
  }
  .login-form .form-group .input-group > .form-control,
  body[id*="auth"] .input-group > .form-control,
  body[id*="auth"] .input-group input[type=password]{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
  }
  .login-form .input-group-btn,
  .login-form .input-group-append,
  body[id*="auth"] .input-group-btn,
  body[id*="auth"] .input-group-append{
    flex:0 0 auto;
    display:flex;
    align-items:center;
  }
  /* Make password field same height as email */
  body[id*="auth"] input[type=email],
  body[id*="auth"] input[type=password]{
    height:42px!important;
    padding:.5rem .75rem!important;
    font-size:.9375rem!important;
  }

  /* 11) Login mobile - bigger register CTA */
  @media (max-width:768px){
    body[id*="auth"] .no-account a{
      display:inline-block;
      padding:.625rem 1rem;
      background:#fff;
      border:2px solid #0078D4;
      border-radius:.5rem;
      font-weight:700!important;
      margin-top:.75rem;
    }
  }

/* KS-POLISH-V5: final polish round */

  /* 1) FAQ — accordion +/− icons + smoother transitions */
  .hifaq-block .hifaq-title,
  .hifaq-block .hifaq-question,
  .faq-question{
    position:relative;
    padding-right:2.5rem!important;
    cursor:pointer;
    transition:color .15s ease;
  }
  .hifaq-block .hifaq-title::after,
  .hifaq-block .hifaq-question::after,
  .faq-question::after{
    content:"+";
    position:absolute;
    right:.875rem;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5rem;
    line-height:1;
    color:#94a3b8;
    font-weight:300;
    transition:transform .2s ease,color .15s ease;
  }
  .hifaq-block.active .hifaq-title::after,
  .hifaq-block.active .hifaq-question::after,
  .faq-question.active::after,
  .faq-question[aria-expanded="true"]::after{
    content:"−";
    color:#0078D4;
  }
  .hifaq-block .hifaq-title:hover{color:#0078D4!important}

  /* 2) FAQ — balance right column whitespace via grid */
  .faq-content,
  .hifaq-categories-wrapper,
  .page-faq .container > .row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:1.5rem;
    align-items:start;
  }
  @media (max-width:768px){
    .faq-content,
    .hifaq-categories-wrapper{grid-template-columns:1fr}
  }

  /* 3) Category — deduplicate sidebar block-categories vs Podkategorie buttons.
     Sidebar wins; hide visible "Podkategorie" tiles if they replicate sidebar. */
  .product-list-page .subcategories,
  .category-cover .subcategories{margin-top:1rem}
  /* Reduce visual weight of category cover banner since sidebar exists */
  .product-list-page #js-product-list-top + .subcategories{
    border-top:1px solid #e2e8f0;
    padding-top:1rem;
  }

  /* 4) Home hero — vertical centering of text + product card */
  .ks-hero,
  section.ks-hero,
  #index .ks-hero,
  .index-hero{
    display:flex;
    align-items:center;
    min-height:auto;
  }
  .ks-hero-row,
  .ks-hero .row{
    display:flex;
    align-items:center!important;
    min-height:380px;
  }
  @media (max-width:768px){
    .ks-hero-row,.ks-hero .row{flex-direction:column;min-height:auto}
  }

  /* 5) PDP — "Oszczędzasz X zł" — visible discount delta callout
     The product-discount class is enhanced; combine with regular-price strikethrough */
  .product-prices .product-discount{
    background:#fee2e2;
    color:#991b1b;
    font-weight:700;
    padding:.25rem .625rem;
    border-radius:.375rem;
    display:inline-block;
    margin-bottom:.5rem;
    font-size:.875rem;
  }
  .product-prices .regular-price{
    color:#94a3b8;
    text-decoration:line-through;
    font-size:1rem;
  }
  .product-prices .current-price .price{
    color:#0078D4!important;
    font-size:2rem!important;
    font-weight:800!important;
  }
  .product-prices .has-discount .discount{
    background:linear-gradient(135deg,#ef4444,#f97316);
    color:#fff!important;
    padding:.25rem .625rem;
    border-radius:.375rem;
    font-weight:700;
  }

  /* 6) Mobile <380px — even tighter trust strip */
  @media (max-width:380px){
    .ks-trust-strip{padding:2px 0!important;font-size:.625rem!important}
    .ks-trust-strip .container{gap:.375rem!important}
    .ks-trust-strip-item svg{width:10px!important;height:10px!important}
  }

  /* 7) Header logo + ks-row3 — keep logo from being too small on mobile */
  @media (max-width:480px){
    #_desktop_logo img,
    #_mobile_logo img{max-height:28px!important;width:auto!important}
  }

  /* 8) "Bestseller 2026" badge — clearer year-current styling */
  .product-flag.online-only,
  .product-flag.new,
  .product-flag.bestseller{
    background:linear-gradient(135deg,#0078D4,#005a9c)!important;
    color:#fff!important;
    font-weight:700!important;
    border-radius:.25rem;
    padding:.25rem .5rem!important;
    box-shadow:0 1px 3px rgba(0,120,212,.25);
  }

  /* 9) Floating "Ochrona Kupującego" Trusted Shops badge — bottom-left, dismissable visual position */
  /* If iframe injected by Trusted Shops, constrain its position */
  .trustbadge,
  .trustbadge--anchorTopRight{
    bottom:80px!important;
    top:auto!important;
    right:auto!important;
    left:16px!important;
  }

  /* 10) Login mobile — finalize POKAŻ alignment */
  @media (max-width:768px){
    body[id*="auth"] .input-group{align-items:stretch}
    body[id*="auth"] .input-group-btn,
    body[id*="auth"] .input-group-append,
    body[id*="auth"] button.show-password{
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
    }
  }

/* KS-AUTH-MOBILE-V4: force LIGHT login card on mobile, kill heading overflow */
  @media (max-width:768px){
    /* Force the login card to light background regardless of where dark bg comes from */
    body[id*="auth"] section.login-form,
    body[id*="auth"] .login-form,
    body[id*="auth"] form.js-customer-form,
    body[id*="auth"] .page-content,
    body[id*="auth"] .page-customer-account,
    body[id*="auth"] .card-block,
    body[id*="auth"] .form-fields{
      background:#fff!important;
      color:#0f172a!important;
      padding:1rem!important;
      border-radius:.5rem!important;
      box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
      max-width:100%!important;
      box-sizing:border-box!important;
    }
    /* Heading wrap inside the form */
    body[id*="auth"] .page-header h1,
    body[id*="auth"] section.login-form h2,
    body[id*="auth"] .login-form .form-fields h2,
    body[id*="auth"] .page-content h2{
      font-size:1.25rem!important;
      line-height:1.3!important;
      white-space:normal!important;
      word-break:break-word!important;
      overflow-wrap:break-word!important;
      max-width:calc(100vw - 2rem)!important;
      color:#0f172a!important;
      margin:0 0 1rem 0!important;
    }
    /* Labels dark on white form */
    body[id*="auth"] label,
    body[id*="auth"] .form-control-label{
      color:#0f172a!important;
      font-weight:600!important;
      font-size:.875rem!important;
    }
    /* "Nie pamiętasz hasła?" - dark gray on light */
    body[id*="auth"] .forgotten-password a,
    body[id*="auth"] .forgot-password a{
      color:#475569!important;
    }
    /* Footer "Nie masz konta?" - brand blue link */
    body[id*="auth"] .no-account,
    body[id*="auth"] .no-account a{
      color:#0078D4!important;
    }
    /* Container that holds the whole auth section */
    body[id*="auth"] #content-wrapper,
    body[id*="auth"] main{
      background:#f8fafc!important;
      padding:.75rem!important;
    }
  }

/* KS-MOBILE-FIX-V3: login mobile + blog mobile titles */
  @media (max-width:768px){
    /* Login mobile - force page wrapper to be light, not navy */
    body[id*="auth"] #wrapper,
    body[id*="auth"] #main,
    body[id*="auth"] .page-wrapper,
    body[id*="my-account"] #wrapper{
      background:#f8fafc!important;
      padding:1rem!important;
    }
    /* Heading width + wrap */
    body[id*="auth"] h1,
    body[id*="auth"] .page-heading,
    body[id*="auth"] h2{
      font-size:1.375rem!important;
      line-height:1.25!important;
      white-space:normal!important;
      overflow-wrap:break-word!important;
      word-break:break-word!important;
      max-width:100%!important;
      padding:0 .25rem!important;
      color:#0f172a!important;
    }
    /* Form fields light background, dark labels */
    body[id*="auth"] label,
    body[id*="auth"] .form-control-label,
    body[id*="auth"] .form-group label{
      color:#0f172a!important;
      font-weight:600!important;
    }
    /* POKAŻ button — fit within input width */
    body[id*="auth"] .input-group .input-group-btn,
    body[id*="auth"] .input-group-append,
    body[id*="auth"] button.show-password{
      max-width:60px!important;
      padding:.25rem .375rem!important;
      font-size:.625rem!important;
    }
    /* Forgot password + register link contrast */
    body[id*="auth"] .forgotten-password a,
    body[id*="auth"] .forgot-password a{
      color:#475569!important;
    }
    body[id*="auth"] .no-account a{
      color:#0078D4!important;
      font-weight:600!important;
    }

    /* Blog mobile post title - line-clamp:3 stops mid-word truncation */
    .ybc-blog-list .blog-post .post-title,
    .ybc-blog-list .blog-post h2.post-title,
    .ybc-blog-list .blog-post h3,
    .blog-list-grid .blog-post .post-title{
      display:-webkit-box!important;
      -webkit-line-clamp:3!important;
      -webkit-box-orient:vertical!important;
      overflow:hidden!important;
      text-overflow:ellipsis!important;
      line-height:1.35!important;
      max-height:4.05em!important;
      font-size:1rem!important;
    }
    /* Blog mobile excerpt clamp */
    .ybc-blog-list .blog-post .blog-content,
    .ybc-blog-list .blog-post .post-summary,
    .ybc-blog-list .blog-post p{
      display:-webkit-box!important;
      -webkit-line-clamp:2!important;
      -webkit-box-orient:vertical!important;
      overflow:hidden!important;
    }
  }

/* KS-BLOG-H1-V3: blog post H1 was invisible — actual selectors */
  body#ybc_blog_page h1.page-heading,
  body#ybc_blog_page h1.page-heading .title_cat,
  body#ybc_blog_page .blog-detail h1,
  body.ybc_blog h1.page-heading,
  body.ybc_blog h1.page-heading .title_cat,
  body.ybc_blog .post-title,
  body.ybc_blog .post-title .title_cat,
  body.ybc_blog h1{
    color:#0f172a!important;
    font-weight:700!important;
    line-height:1.2!important;
  }
  body.ybc_blog h2{color:#0f172a!important;font-weight:700}

  /* TOC links — brand blue not orange */
  body.ybc_blog .blog-detail .toc a,
  body.ybc_blog .table-of-contents a,
  body.ybc_blog .spis-tresci a,
  body.ybc_blog #toc a,
  body.ybc_blog .blog-detail-content ul li a:not(.btn){
    color:#0078D4!important;
  }
  body.ybc_blog .blog-detail .toc a:hover,
  body.ybc_blog .table-of-contents a:hover{color:#005a9c!important}

/* KS-VISUAL-FIX-V2: post-Gemini-audit polish */

  /* 1) Blog post H1 was invisible (light gray on white) */
  .ybc_blog .post-title,
  .ybc_blog .post-title h1,
  .ybc_blog h1.h1.post-title,
  .ybc_blog .blog-detail-content h1,
  .post-page h1,
  .blog-post h1.h1{
    color:#0f172a!important;
    font-weight:700!important;
  }
  .ybc_blog h2,.blog-post h2{color:#0f172a!important;font-weight:700}

  /* 2) Blog sidebar search placeholder + contrast (not cut off) */
  .ybc-blog-sidebar .blog-search input,
  .ybc-blog-sidebar input.form-control,
  .blog-search-form input,
  #ybc_blog_search_input,
  .ybc-blog-list-sidebar input[type=search],
  .ybc-blog-list-sidebar input[type=text]{
    background:#fff!important;
    color:#0f172a!important;
    border:1px solid #cbd5e1!important;
    padding:.625rem .875rem!important;
    border-radius:.375rem!important;
  }
  .ybc-blog-sidebar .blog-search input::placeholder,
  .blog-search-form input::placeholder{
    color:#94a3b8!important;
    font-size:.875rem;
  }

  /* 3) Mobile trust strip — tighter padding, smaller font, allow horizontal scroll */
  @media (max-width:480px){
    .ks-trust-strip{padding:3px 0!important;font-size:.6875rem!important;line-height:1.1!important}
    .ks-trust-strip .container{
      gap:.5rem!important;
      padding:0 .5rem!important;
      flex-wrap:nowrap!important;
      overflow-x:auto!important;
      -webkit-overflow-scrolling:touch;
      justify-content:flex-start!important;
    }
    .ks-trust-strip-item.hide-mobile{display:none!important}
    .ks-trust-strip-item svg{width:11px!important;height:11px!important}
  }

  /* 4) Mobile login - prevent truncation */
  @media (max-width:480px){
    .login-form,.login-form .form-group,
    body[id*="auth"] .login-form{
      width:100%!important;
      box-sizing:border-box;
    }
    .login-form .input-group .form-control,
    body[id*="auth"] form input[type=email],
    body[id*="auth"] form input[type=password]{
      width:100%!important;
      min-width:0!important;
    }
    /* POKAŻ → svelte */
    .login-form .input-group-btn,
    .login-form button.show-password{
      padding:0 .5rem!important;
      font-size:.6875rem!important;
      letter-spacing:0!important;
    }
    /* Reduce above-the-fold header on auth pages */
    body[id*="auth"] .ks-row1{display:none!important}
    body[id*="auth"] .ks-row3{display:none!important}
  }

  /* 5) Category — reduce filter line-height + dedupe Podkategorie/sidebar */
  .product-list-page .ybc-cat-tree li,
  #search_filters .facet-input-wrapper,
  #search_filters li{line-height:1.4!important;padding:.25rem 0!important}

  /* 6) PDP — sticky add-to-cart on scroll (mobile + desktop) */
  @media (min-width:769px){
    .product-actions .add-to-cart-wrapper{position:sticky;top:120px;z-index:5}
  }
  @media (max-width:768px){
    .product-actions .add{
      position:fixed;left:0;right:0;bottom:0;z-index:998;
      background:#fff;padding:.75rem 1rem;
      box-shadow:0 -2px 12px rgba(0,0,0,.08);
      border-top:1px solid #e2e8f0;
    }
    .product-actions .add .btn-primary{width:100%!important}
    body.product main{padding-bottom:80px}
  }

/* KS-LOGIN-POLISH-V1: login + form polish from Gemini visual review */
  /* 1) "POKAŻ" password reveal button — inline-flush, branded color */
  .login-form .form-control-comment,
  .login-form .input-group-btn,
  .login-form button.show-password{
    background:transparent!important;
    color:#475569!important;
    font-weight:600!important;
    font-size:.75rem!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
    padding:0 .75rem!important;
  }
  .login-form button.show-password:hover{color:#0078D4!important}

  /* 2) Registration "create account" link — bolder, darker, more visible */
  .no-account a,
  body[id*="auth"] .no-account a,
  .login-form ~ * .no-account a{
    color:#0078D4!important;
    font-weight:600!important;
    text-decoration:underline!important;
  }
  .no-account a:hover{color:#005a9c!important}

  /* 3) "Forgot password" link spacing — breathing room above submit */
  .login-form .forgot-password{
    margin-bottom:1.25rem!important;
    display:block;
    text-align:right;
  }
  .login-form .forgot-password a{
    color:#64748b!important;
    font-size:.8125rem!important;
  }
  .login-form .forgot-password a:hover{color:#0f172a!important;text-decoration:underline}

  /* 4) "Zaloguj się" submit button text contrast */
  .login-form button[type="submit"],
  .login-form input[type="submit"],
  body[id*="auth"] form button.btn-primary{
    color:#fff!important;
    font-weight:700!important;
    letter-spacing:.025em!important;
  }

  /* 5) Focus rings consistency — brand blue */
  body:not(#header) input:focus-visible,
  body:not(#header) textarea:focus-visible,
  body:not(#header) select:focus-visible,
  body:not(#header) button:focus-visible{
    outline:2px solid #0078D4!important;
    outline-offset:2px!important;
  }

  /* 6) Hero image preload hint — for LCP optimization */
  /* see <link rel="preload"> below */

/* KS-FORM-INPUT-V1: ensure all form inputs have light background + dark readable text */
  .login-form input[type=email],
  .login-form input[type=password],
  .login-form input[type=text],
  .registration-form input[type=email],
  .registration-form input[type=password],
  .registration-form input[type=text],
  form.js-customer-form input[type=email],
  form.js-customer-form input[type=password],
  form.js-customer-form input[type=text],
  body:not(#header) .form-control:not(.search_query):not(.btn),
  body:not(#header) input[type=email]:not(.search_query),
  body:not(#header) input[type=password]:not(.search_query),
  body:not(#header) input[type=text]:not(.search_query):not(.ks-trust-strip *),
  body:not(#header) input[type=tel]:not(.search_query),
  body:not(#header) input[type=number]:not(.search_query),
  body:not(#header) textarea:not(.search_query),
  body:not(#header) select:not(.search_query){
    background:#fff!important;
    color:#0f172a!important;
    border:1px solid #cbd5e1!important;
  }
  body:not(#header) input:not(.search_query):focus,
  body:not(#header) textarea:focus,
  body:not(#header) select:focus{
    border-color:#0078D4!important;
    box-shadow:0 0 0 3px rgba(0,120,212,0.15)!important;
    outline:none!important;
  }
  body:not(#header) input::placeholder,
  body:not(#header) textarea::placeholder{
    color:#94a3b8!important;
  }
  /* Sidebar search box (blog) — fix dark-on-dark */
  .blog-search input[type=text],.blog-search input[type=search],
  #ybc_blog_search_input,#ybc-blog-search input,
  .ybc_blog_search input{
    background:#fff!important;
    color:#0f172a!important;
    border:1px solid #cbd5e1!important;
  }


/* ============================================================ */
/* KS-CLS-QUICKWIN-V1 — aspect-ratio reservation site-wide for CLS */
/* ============================================================ */

/* Blog list (ybc_blog) — reserve 16:9 aspect for posts (was causing CLS 0.87) */
.ybc_blog .blog-post img,
.ybc-blog-list .blog-post img,
#ybc_blog_list .blog-post img,
.ybc_blog_list_articles .blog-post img,
.ybc-list-blog-post img,
.ybc_blog .ybc_item_img img,
.ybc_blog .post-list img,
.ybc_blog .post-wrapper img:not(.avata){
  aspect-ratio:16/9!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  background:#e2e8f0;
  display:block;
}

/* Blog post body images */
.ybc_blog .blog-detail img:not([class*="logo"]):not([class*="icon"]),
body#ybc_blog_page .blog-detail img,
.blog-content img:not(.avata){
  height:auto!important;
  max-width:100%;
  background:#e2e8f0;
}

/* Product card images */
.product-miniature .product-thumbnail img,
.product-list .product-miniature img,
.products .product-miniature img{
  aspect-ratio:1/1!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  background:#fff;
}

/* Category cover image */
.product-list-page .category-cover img,
#category .category-cover img{
  aspect-ratio:5/1!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover;
}

/* Hero/slider images */
.ks-hero img,
.homeslider img,
#homeslider img{
  aspect-ratio:21/9!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover;
}

/* CMS page images */
.cms-page img,
.cms-content img{
  height:auto!important;
  max-width:100%;
}

/* Avatar — separate aspect (1:1) */
.ybc_blog .avata,
img.avata{
  aspect-ratio:1/1!important;
  width:36px!important;
  height:36px!important;
  border-radius:50%;
  object-fit:cover;
}

/* Lazy-load placeholder appearance — no shift */
img[loading="lazy"]:not([src]),
img.lazyload:not([src]){
  background:#e2e8f0;
  min-height:100px;
}

/* ============================================================ */
/* KS-CLS-STRONG-V2 — additional CLS fixes for blog/category/PDP */
/* ============================================================ */

/* Font display swap → optional to reduce font-induced CLS */
@font-face{font-family:Inter;font-display:optional}

/* Reserve container heights for blog list cards */
.ybc_blog .post-wrapper,
.ybc_blog .blog-post,
.ybc-blog-list .blog-post,
#ybc_blog_list li{
  contain:layout style;
  min-height:280px;
  contain-intrinsic-size:auto 280px;
}

/* Specifically reserve the post img container */
.ybc_blog .ybc_item_img,
.ybc_blog a.ybc_item_img{
  display:block;
  aspect-ratio:260/180;
  width:100%;
  background:#e2e8f0;
  overflow:hidden;
}
.ybc_blog .ybc_item_img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Category page product grid — reserve card height */
.product-list .product-miniature,
#js-product-list .product-miniature,
.products .product-miniature{
  contain:layout style;
  min-height:340px;
  contain-intrinsic-size:auto 340px;
}

/* PDP — reserve image gallery container */
body.product .pdp-col-image,
body.product .product-cover,
body.product #content,
body.product .product-images{
  contain:layout style;
  min-height:400px;
}
body.product .product-cover img,
body.product .product-images img{
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}

/* Block third-party widgets (Trusted Shops, chat) from causing late shifts */
.trustbadge,.trustbadge-container,
[id^="trustbadge"],
#chat-widget-container,
.zendesk-chat,
[class*="livechat"],
[class*="chat-widget"]{
  contain:strict!important;
  position:fixed!important;
}

/* Cookie consent — reserve space if block-level */
#cookie-consent-banner,
.cookies-banner,
.cmp-banner,
.gdpr-banner,
[class*="cookie-bar"]{
  contain:layout style;
  position:fixed!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  z-index:9990!important;
}

/* Trust strip — prevent shift on font load */
.ks-trust-strip{
  min-height:32px;
  contain:layout style;
}
@media (max-width:480px){
  .ks-trust-strip{min-height:24px}
}

/* Header — reserve fixed dimensions */
#header{contain:layout style;min-height:140px}
@media (max-width:768px){#header{min-height:90px}}

/* Hero section — reserve space */
.ks-hero,#index .ks-hero{contain:layout style;min-height:380px}
@media (max-width:768px){.ks-hero{min-height:280px}}

/* Footer — large block reservation */
#footer,.footer-container{contain:layout style;min-height:200px}