/* hlavicka-si-2026-10-02.css - julivan.si, CSS do HLAVICKY (jeden <link>). Zatial len hero rad. */

/* ---- hero rad na PC uz pred spustenim skriptu (2.10.2026) ----
   homepage-sekcia stavia z karuselu rad 3 dlazdic (.hpx-hero-dt), ale az po nacitani
   stranky. Dovtedy Shoptet ukazal karusel ako stvorec cez celu sirku (1178x1178 px).
   CZ ma karusel v .col-sm-8 a bocne bannery v .col-sm-4: tie skript presuva pod 1. rad
   produktov, preto sa tu dovtedy skryju.
   Toto rozlozi natívny karusel rovno do tych istych 3 dlazdic, skript ho potom len vymeni.
   Rozmery musia sediet s .hpx-hero-dt a breakpointmi 747/972/1178/1418 v homepage-sekcia. */
@media (min-width:768px){
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel){
    margin:0 auto !important; padding:0 15px; box-sizing:border-box; max-width:747px; display:block;
  }
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) > .wide-carousel,
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) > .col-sm-8{width:100%;padding:0;margin:0;float:none}
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) > .col-sm-4{display:none}
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel{margin:0}
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel .carousel-inner{display:flex;gap:14px;overflow:hidden;width:100%}
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel .carousel-inner > .item{
    display:block !important; position:relative !important; left:auto !important; transform:none !important;
    flex:0 0 calc((100% - 28px)/3); aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  }
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel .item img{width:100% !important;height:100% !important;object-fit:cover;display:block}
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel .carousel-control,
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel) #carousel .carousel-indicators{display:none}
}
@media (min-width:768px) and (max-width:991px){
  body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel){
    max-width:none !important; width:auto !important;
    margin-left:calc((100% - 100vw)/2 + 15px) !important; margin-right:calc((100% - 100vw)/2 + 15px) !important;
  }
}
@media (min-width:992px){ body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel){max-width:972px} }
@media (min-width:1200px){ body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel){max-width:1178px} }
@media (min-width:1440px){ body.in-index #content > .row.banners-row:not(.footer-banners):has(#carousel){max-width:1418px} }