/* =========================================================
   KOMIKSAN CSS - STEP 1 / V10
   Soubor: komiksan-v10.css
   FTP: /upload/komiksan-v10.css
   WEB: /user/documents/upload/komiksan-v10.css
   ========================================================= */

:root{
  --ks-blue:#1806FD;
  --ks-pink:#FF00D8;
  --ks-soft-pink:#FF9BEF;
  --ks-red:#FE0130;
  --ks-yellow:#FFD600;
  --ks-dark:#080044;
  --ks-white:#FFFFFF;
  --ks-black:#000000;
  --ks-hero:url("/user/documents/upload/Komiks-San%20Carousel%201%201.jpg");
}

/* KOMIKSAN FONT */
@font-face{
  font-family:"KomiksanSliza";
  src:url("/user/documents/upload/fonts/sliza-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   A) HLAVIČKA - MODRÁ
   ========================================================= */

#header,
.header,
.header-top,
.header-bottom,
.header-wrapper,
.header-in,
.site-name,
.site-name-wrapper,
.navigation-buttons,
.navigation-tools,
.responsive-tools{
  background:var(--ks-blue)!important;
  background-color:var(--ks-blue)!important;
  color:var(--ks-white)!important;
  border:0!important;
  box-shadow:none!important;
}

/* vnitřní bílé plochy v headeru pryč */
#header .container,
.header .container,
.header-top .container,
.header-bottom .container,
.header-wrapper .container,
.header-in .container{
  background:transparent!important;
  background-color:transparent!important;
}

/* texty a ikony v headeru */
#header a,
#header button,
#header span,
#header i,
#header svg,
.header a,
.header button,
.header span,
.header i,
.header svg{
  color:var(--ks-white)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* input hledání */
#header input,
.header input,
.search input,
.search-form input,
.search-window input{
  background:var(--ks-white)!important;
  color:#111!important;
  border:0!important;
}

/* =========================================================
   B) HORNÍ INFO PRUH - ČERVENÝ
   Jak nakupovat / Obchodní podmínky / GDPR
   ========================================================= */

.top-navigation-bar,
.top-navigation-bar .container,
.top-navigation-menu{
  background:var(--ks-red)!important;
  background-color:var(--ks-red)!important;
  color:var(--ks-white)!important;
  border:0!important;
  box-shadow:none!important;
}

.top-navigation-bar a,
.top-navigation-bar span,
.top-navigation-bar li,
.top-navigation-menu a,
.top-navigation-menu span,
.top-navigation-menu li{
  color:var(--ks-white)!important;
  fill:var(--ks-white)!important;
  stroke:var(--ks-white)!important;
  font-weight:700!important;
  text-decoration:none!important;
}

.top-navigation-bar a:hover,
.top-navigation-menu a:hover{
  color:var(--ks-yellow)!important;
}

/* =========================================================
   C) HLAVNÍ MENU - RŮŽOVÉ + KOMIKSAN FONT
   Kategorie: Kartičky TCG / Plyšáci / ...
   ========================================================= */

#navigation,
.navigation,
.navigation-wrapper,
.navigation-in,
.menu-helper,
.menu-helper > .container,
.menu-level-1{
  background:var(--ks-pink)!important;
  background-color:var(--ks-pink)!important;
  color:var(--ks-white)!important;
  border:0!important;
  box-shadow:none!important;
}

#navigation a,
#navigation button,
.navigation a,
.navigation button,
.navigation-wrapper a,
.navigation-wrapper button,
.navigation-in a,
.navigation-in button,
.menu-helper a,
.menu-helper button,
.menu-level-1 > li > a{
  font-family:"KomiksanSliza",Arial,sans-serif!important;
  color:var(--ks-white)!important;
  fill:var(--ks-white)!important;
  stroke:var(--ks-white)!important;
  font-weight:400!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  text-decoration:none!important;
}

#navigation a:hover,
.navigation a:hover,
.navigation-wrapper a:hover,
.navigation-in a:hover,
.menu-helper a:hover,
.menu-level-1 > li > a:hover{
  color:var(--ks-blue)!important;
  fill:var(--ks-blue)!important;
  stroke:var(--ks-blue)!important;
}

/* dropdown necháme modrý kvůli kontrastu */
#navigation .dropdown,
#navigation .dropdown-menu,
#navigation .children,
#navigation .submenu,
#navigation .menu-dropdown,
.navigation .dropdown,
.navigation .dropdown-menu,
.navigation .children,
.navigation .submenu,
.navigation .menu-dropdown,
.navigation-in .dropdown,
.navigation-in .dropdown-menu,
.navigation-in .children,
.navigation-in .submenu,
.navigation-in .menu-dropdown{
  background:var(--ks-blue)!important;
  background-color:var(--ks-blue)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 16px 35px rgba(0,0,0,.28)!important;
}

#navigation .dropdown a,
#navigation .dropdown-menu a,
.navigation .dropdown a,
.navigation .dropdown-menu a,
.children a,
.submenu a,
.menu-dropdown a{
  color:var(--ks-white)!important;
  background:transparent!important;
}

/* =========================================================
   D) HERO BANNER
   ========================================================= */

body.in-index .content-wrapper::before,
.in-index .content-wrapper::before{
  content:""!important;
  display:block!important;
  width:100vw!important;
  aspect-ratio:4/1!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  background-image:var(--ks-hero)!important;
  background-position:center center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-color:var(--ks-dark)!important;
}

/* odstranění zbytečné mezery */
.content-wrapper,
.content,
.main,
.carousel,
.carousel-inner,
.banners,
.banners-content{
  margin-top:0!important;
}

/* =========================================================
   E) SKRÝT SLOGAN / CLAIM BLOK
   ========================================================= */

.claim,
.claim-wrapper,
.header-claim,
.header-slogan,
.site-slogan,
.slogan,
.slogan-wrapper,
.welcome,
.welcome-wrapper,
.welcome-message,
.welcome-content,
.homepage-welcome,
.homepage-welcome-wrapper,
.homepage-box.before-carousel,
[class*="slogan"],
[class*="welcome"],
[class*="claim"]{
  display:none!important;
  height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* =========================================================
   F) NADPISY SEKCÍ NA HOMEPAGE
   ========================================================= */

body.in-index .homepage-group-title,
body.in-index .homepage-products-heading,
body.in-index .homepage-box > h2,
body.in-index .homepage-box > h3,
body.in-index .homepage-box .title,
body.in-index .products-block > h2,
body.in-index .products-block > h3,
body.in-index .content-wrapper > h2,
body.in-index .content-wrapper > h3,
body.in-index .content > h2,
body.in-index .content > h3,
body.in-index main > h2,
body.in-index main > h3,
.homepage-group-title,
.homepage-products-heading{
  font-family:"KomiksanSliza",Arial,sans-serif!important;
  color:var(--ks-pink)!important;
  font-weight:400!important;
  text-transform:uppercase!important;
  letter-spacing:1px!important;
  line-height:1.15!important;
  text-align:center!important;
  font-size:clamp(32px,4vw,56px)!important;
  margin-top:28px!important;
  margin-bottom:32px!important;
}

/* neaplikovat font na produkty */
body.in-index .product h2,
body.in-index .product h3,
body.in-index .products h2,
body.in-index .products h3,
body.in-index .product .name,
body.in-index .product a,
body.in-index .p .name,
body.in-index .p a{
  font-family:inherit!important;
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}

/* neaplikovat font na levé kategorie */
body.in-index .sidebar h2,
body.in-index .sidebar h3,
body.in-index .sidebar h4,
body.in-index .sidebar a,
body.in-index .categories h2,
body.in-index .categories h3,
body.in-index .categories h4,
body.in-index .categories a{
  font-family:inherit!important;
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}

/* =========================================================
   G) KOŠÍK - zatím jen opatrně
   ========================================================= */

#header .cart-count,
#header .quantity,
#header .navigation-buttons .cart-count,
.header .cart-count,
.header .quantity,
.header .navigation-buttons .cart-count{
  background:var(--ks-red)!important;
  color:var(--ks-white)!important;
  border-color:var(--ks-red)!important;
}

/* =========================================================
   H) MOBIL
   ========================================================= */

@media(max-width:767px){
  body.in-index .content-wrapper::before,
  .in-index .content-wrapper::before{
    aspect-ratio:4/1!important;
    background-size:contain!important;
  }

  body.in-index .homepage-group-title,
  body.in-index .homepage-products-heading,
  body.in-index .homepage-box > h2,
  body.in-index .homepage-box > h3,
  body.in-index .homepage-box .title,
  body.in-index .products-block > h2,
  body.in-index .products-block > h3,
  body.in-index .content-wrapper > h2,
  body.in-index .content-wrapper > h3,
  body.in-index .content > h2,
  body.in-index .content > h3,
  body.in-index main > h2,
  body.in-index main > h3,
  .homepage-group-title,
  .homepage-products-heading{
    font-size:clamp(28px,9vw,42px)!important;
    margin-bottom:24px!important;
  }
}