/* ==================================================================
   VYZA PROFESSIONAL - HLAVNÍ STYLY (sloučený soubor)
   ------------------------------------------------------------------
   Sloučeno z původních souborů:
     - styly4b.css
     - styly6.css
     - ant_style.css
   ------------------------------------------------------------------
   Verze: 7
   ================================================================== */


/* ==================================================================
   01. GLOBÁLNÍ - BODY, POZADÍ
   ================================================================== */

body{
background-image: linear-gradient(to bottom, #e6e5e6, #ecebec, #f2f2f3, #f9f8f9, #ffffff);
background-repeat: no-repeat;
}

body {
  font-size: 15px;
    color: #444;
}


/* ==================================================================
   02. TYPOGRAFIE - NADPISY, ODSTAVCE, ODKAZY V TEXTU
   ================================================================== */

h1{
  color: #1b242d;
  font-weight: 600;
    }
h2{
  color: #1b242d;
  font-weight: 600;
    }
h3{
  color: #1b242d;
  font-weight: 400;
    }

p {
  font-weight: 100;
}

  p a {
    text-decoration: underline;
  }

  p a:hover {
    text-decoration: none;
    color: #6b0409;
  }


/* ==================================================================
   03. LAYOUT - WRAPPERY, KONTEJNERY, OBSAH
   ================================================================== */

.content-wrapper{
background: rgba(255, 255, 255, 0.85)
}

.content-wrapper.container{border-radius: 8px!important;}

.content-inner {
    max-width: 100%;
}

  .content-inner table {
    width: 100%;
  }

.type-index .overall-wrapper{padding-bottom:0px;}


/* ==================================================================
   04. ZÁHLAVÍ - HEADER, LOGO, TOP BAR
   ================================================================== */

#header{
background: none;
}

@media only screen and (max-width: 600px) {
  h1.site-name{padding-top:20px;}
  .site-name{padding-top:20px;}
}

@media screen and (min-width: 981px) {
#header .site-name a img{max-height: 50px;}
}

.header-top button{border-radius: 0px!important;border:none;}
.header-top input{border-radius: 0px!important;}

  .top-navigation-bar-menu {
    display: none;
  }


/* ==================================================================
   05. NAVIGACE - HLAVNÍ MENU
   ================================================================== */

.menu li a{border-radius: 4px!important;}
.menu li{border:none!important;}

@media (min-width: 768px) {.submenu-visible .navigation-in>ul>li.ext.exp>ul {padding-top:30px;}}

@media (max-width: 767px){
.navigation-in{margin-top: 90px!important;}
}

  @media screen and (min-width: 768px) {
    .navigation-in {
      padding: 10px;
    }

    #navigation {
      height: 52px;
    }

    .submenu-visible .navigation-in>ul>li.ext.exp>ul {
      margin-top: -10px;
      z-index: 9999;
    }
  }

  .navigation-in>ul>li.ext>ul>li>div>a {
    color: #6b0409 !important;
  }

/* Speciální položka menu */
.menu-item-external-81 a{color:#e20d09!important;}


/* ==================================================================
   06. VYHLEDÁVÁNÍ
   ================================================================== */

input[type=search].form-control{
  border-radius: 8px!important;
  }
#formSearchForm button{
  border-top-right-radius: 8px!important;
  border-bottom-right-radius: 8px!important;
  }


/* ==================================================================
   07. DROBEČKOVÁ NAVIGACE (BREADCRUMBS)
   ================================================================== */

.breadcrumbs{
margin-top:1px;
background-color: #f7f6f7;
}
.breadcrumbs a{
color: #313131;
}
.breadcrumbs a:hover{
color: #c02b2d;
}
.breadcrumbs{
color: #313131;
}

.breadcrumbs{background:transparent!important;border-bottom:none!important;}


/* ==================================================================
   08. ÚVODNÍ STRÁNKA - BANNER, HERO, ŘÁDKY
   ================================================================== */

#uvodnibanner h1{text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}

#uvodnibanner {
  min-height: 300px;
  text-align: center;
  padding-top: 50px;
}

#uvodnibanner h1 {
  color: #6b0409;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 60px;
}

 #uvodnibanner img{border-radius: 8px!important;}

.mensinadpis {
  color: #e20d09;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 50px;
}

.radek1 {
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.radek2 {
  margin-top: 70px;
  padding-left: 10%;
  padding-right: 10%;
  margin-bottom: 30px;
}

.radek2 img {
  transition: transform .2s;
}

.radek2 img:hover {
  transform: scale(1.05);
}

@media screen and (max-width: 800px) {
.before-carousel {
    background-size: contain;
    }
    #uvodnibanner h1 {
  font-size: 40px;
}

.mensinadpis {
  font-size: 30px;
}
.radek2 div{
    margin-bottom: 20px;}
    }


/* ==================================================================
   09. ÚVODNÍ STRÁNKA - HOMEPAGE BOXY, NADPISY SEKCÍ, WELCOME
   ================================================================== */

.homepage-box.welcome-wrapper {padding-top:0px;margin-bottom: 0px!important;padding-bottom: 0px!important;margin-top:20px;}
.banners-content{margin-top:20px;}

.homepage-products-heading-5{font-weight:800;text-transform: uppercase;color:#1b242d!important;}
.homepage-products-heading-7{font-weight:800;text-transform: uppercase;color:#1b242d!important;}
.homepage-products-heading-13{font-weight:800;text-transform: uppercase;color:#1b242d!important;}
.homepage-products-heading-10{font-weight:800;text-transform: uppercase;color:#1b242d!important;}

.homepage-box {
border-top: none!important;
border-bottom: none!important;
background-color: #ffffff;
}

.homepage-products-heading-5 {
  text-transform: uppercase;
  color: #1b242d;
}

.welcome div {
  max-width: 100%!important;
}

.dklabSliderplusHome{padding-top:20px!important;padding-bottom:20px!important;}


/* ==================================================================
   10. KATEGORIE - HLAVIČKA, VÝPIS PODKATEGORIÍ
   ================================================================== */

.category-title{font-weight:800;}

.category-header{
    background-color: #fff!important;
}

@media only screen and (min-width: 600px) and (max-width: 1112px) {
.subcategories.with-image li a{font-size: 13px;height: 60px;padding-right:10px!important;}
ul.subcategories li{width: 50%!important;}
}

.subcategories li a::before{content:none!important;}

ul.subcategories li{width: 33%;}

.subcategories.with-image li a {
    height: 80px;
    border: none;
    padding-right:10px!important;
    }

.subcategories.with-image li a .image {
    width: 48%;
    max-width: 100px;
    height: auto;
    margin-left: 0px;
    }

.subcategories.with-image li a .image img {
    max-height: 250px;
    }

@media only screen and (min-width: 300px) and (max-width: 600px) {
    ul.subcategories li {
        width: 100% !important;
        }

    .subcategories.with-image li a .image {
        width: 26%;
        }
    }

.subcategories.with-image li a {
  transition: transform .2s; /* Animation */
}

.subcategories.with-image li a:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

ul.subcategories a{
color: #1b242d;
}
ul.subcategories a:hover{
color: #c02b2d;
}

.subcategories li a{border-radius: 8px!important;}

  /* oprava výpisu podkategorií v příspěvcích */
  .subcategories {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -6px 36px -6px;
    padding: 26px 0;
    position: relative;
  }

  .subcategories li {
    list-style: none;
    flex: 0 0 auto;
    padding: 6px;
  }

  .subcategories.with-image li a {
    display: flex;
    align-items: center;
  }

  .subcategories.with-image li a .image {
    text-align: center;
  }

  .subcategories.with-image li a .text {
    padding-left: 5px;
    flex-grow: 0;
    text-align: left;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .subcategories li a {
    box-shadow: none;
    position: relative;
    display: flex;
    align-items: center;
    height: 88px;
    padding: 12px;
    font-weight: 500;
    color: #24242E;
    border: 1px solid #e4e4e4;
    text-decoration: none !important;
  }

  .subcategories li a:hover {
    border-color: #00a8ee !important;
  }

  /* zde se mění barva po najetí myší */
  @media (min-width: 768px) {
    .subcategories li a {
      height: 70px !important;
    }

    .subcategories.with-image li a .image {
      width: 55px !important;
    }

    .subcategories.with-image li a .text {
      width: auto !important;
    }
  }

  @media (max-width: 768px) {
    .subcategories.with-image li a .image {
      width: 30% !important;
    }

    .subcategories li {
      padding: 4px;
    }

    .subcategories li a {
      height: 73px;
    }
  }

  .subcategories li a .text {
    max-height: 62px;
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
  }

  .subcategories li a {
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
  }
  /* / oprava výpisu podkategorií v příspěvcích */


/* ==================================================================
   11. SIDEBAR - BOČNÍ MENU, FILTRY, KATEGORIE V SIDEBARU
   ================================================================== */

.box-categories>h4{height:0!important;}
.box-categories{padding-top:0!important;}

.box-categories>h4{visibility:hidden;}
.sidebar-inner>div{border-bottom:none;}

.categories li{line-height:1.8em;}

.categories li.active>a, .categories li.active>a:hover{border-radius: 8px!important;}

.sidebar{border-radius: 8px!important;}

  .sidebar {
    background-color: #fff;
  }

  .filter-sections {
    background-color: #fff;
  }

.param-filter-top {
      display:none!important;
}

  #categories .categories {
    padding-top: 5px;
    padding-bottom: 5px;
  }


/* ==================================================================
   12. PRODUKTY - KARTA, CENY, KÓDY, DODACÍ DOBA
   ================================================================== */

.product{
  transition: transform .2s; /* Animation */
}
.product:hover {
  transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  background: #fff!important;
  z-index:99999!important;
  border: 1px solid #dedede!important;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.26);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.26);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.26);
}

.product{border-radius: 8px!important;border:dashed 1px #EFF0F1!important;padding:10px;}
.product .p-code{font-size:10px;}

.p .name {
  font-size: 20px;
  font-weight: 600;
}

.p-code {
  font-weight: 100;
}

.p-code{
color: #c02b2d;
}

.category-appendix, .product-appendix {
color: #1b242d;
font-weight:300;
font-style: italic;
}

.product-appendix{color:#e20d09!important;font-weight:bold!important;}

.price-final{color:#1b242d!important;}

.price.price-final {
	color: #fff;
}

.showPrice .price.price-final {
	color: #000;
}

.delivery-time-label{display:none;}
.delivery-time{display:none;}

.variant-list th{
color: #1b242d;
}

.btn{border-radius: 4px!important;}


/* ==================================================================
   13. DETAIL PRODUKTU
   ================================================================== */

.p-detail-inner-header .p-code{display: block!important;margin-bottom:10px;font-size:16px!important;}

.p-detail-inner-header .p-code-label{
display: inline;
}

.p-detail-inner-header h1{
  color: #1b242d;
  font-weight: 600;
    font-size: 40px;
}

.p-detail-inner-header h1{
    font-size: 30px;
}

h2.products-related-header{
        color: #1b242d;
}

.p-detail-info{
background-color: #f7f6f7;
padding: 5px;
color: #1b242d;
}
.p-detail-info a{
color: #1b242d;
font-weight:600;
}

.p-detail-info{border-radius: 4px!important;}

/* Pořadí sekcí v detailu produktu */
#content .p-detail {
      display: flex;
      flex-direction: column;
}
#content .p-detail .products-related-header {
      order: 30;
}
#content .p-detail .products-related.products-additional {
      order: 31;
}
#content .p-detail .browse-p {
      order: 32;
}

#product-detail-form .price-final-holder {
	color: #fff;
}

#product-detail-form.showPrice .price-final-holder {
	color: #000;
}


/* ==================================================================
   14. FLAGY (NÁLEPKY) - SLEVA, TIP, NOVINKA
   ================================================================== */

.flag.flag-discount {
  background-color: #c02829;
}

  .flag.flag-tip {
    background-color: #6b0409;
  }

.flag-custom1 {
	display: none !important;
}


/* ==================================================================
   15. "NEPŘEHLÉDNĚTE" - PULZUJÍCÍ PRVEK (BLOB)
   ================================================================== */

.blob a{  font-size:18px;}
.blob {
	background: rgba(255, 82, 82, 1);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}


/* ==================================================================
   16. SHP-TABY (ZÁLOŽKY)
   ================================================================== */

.shp-tab{
border: 1px solid #bababa;
margin-right: 5px;
text-transform: uppercase;
}
.shp-tab-link {
    background: #1b242d;
    color: #fff;
    border: #1b242d;
}
.shp-tab-link a{
    color: #fff!important;
}
.shp-tab-link a:hover{
    color: #1b242d!important;
}
.active .shp-tab-link {
    background: #c02b2d;
    color: #fff;
    border: #c02b2d;
}

.shp-tab.active{
border: 1px solid #4c4c4c;
border-top-color: #4c4c4c;
color: #1b242d;
font-weight: 600;
border-bottom: 3px solid #4c4c4c;
}
.shp-tab.active a{
    color: #fff;
}
.shp-tab:hover{
border: 1px solid #4c4c4c;
}
.shp-tab.active:hover{
border: 1px solid #4c4c4c;
border-top-color: #4c4c4c;
border-bottom: 3px solid #4c4c4c
}

.shp-tab{border-radius: 8px!important;}
.shp-tabs-holder{border-radius: 8px!important;}


/* ==================================================================
   17. BANNER24
   ================================================================== */

.banner24{border-radius: 8px!important;}

  .banner24 {
    padding: 15px 15px 5px 15px;
    background-color: #f6f6f6;
  }

  .banner24 h4 {
    color: #1b242d;
    font-weight: 700;
  }


/* ==================================================================
   18. B2B A KONTAKTNÍ PRVKY
   ================================================================== */

.b2b-fce-priceTitle {
	color: #c02b2d;
	font-weight: 900;
	font-size: 22px;
}

.contactDetail {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	font-weight: 900;
}


/* ==================================================================
   19. MAPA
   ================================================================== */

.smap img {
  max-width: none;
}

@media only screen and (max-width: 1250px) {
  #mapa {
    width: 100% !important;
  }
}


/* ==================================================================
   20. ZÁPATÍ - FOOTER
   ================================================================== */

#footer .footer-rows .site-name {display: none;}
#footer .custom-footer {padding-left: 0px !important;}

footer{
margin-top:30px;
background:#1b242d;
}
#footer>.container {
background:#1b242d;
color: #ffffff;
}
.custom-footer h4{
color: #ffffff!important;
}
.custom-footer li a{
color: #ffffff!important;
}
.custom-footer li a:hover{
color: #ea4c22!important;
}
.custom-footer{border:none;}


/* ==================================================================
   21. SKRÝVANÉ PRVKY
   ================================================================== */

.latest-contribution-box {
  visibility: hidden;
  height: 0!important;
  width: 0!important;
}


/* ==================================================================
   ==================================================================
   REDESIGN 2026 - postupně přepisuje původní pravidla výše
   ==================================================================
   ================================================================== */


/* ==================================================================
   R-01. ZÁHLAVÍ - TOP BAR (horní lišta s kontakty)
   - světle šedý podklad přes celou šířku, žádné bílé bloky uvnitř
   ================================================================== */

.top-navigation-bar {
  background: #f5f5f3 !important;
  border-bottom: 1px solid #ececec !important;
  color: #3a3a3a !important;
}

.top-navigation-bar .container,
.top-navigation-contacts,
.top-navigation-menu,
.top-navigation-tools,
.languagesMenu,
.languagesMenu__content,
.currencies,
.currenciesMenu,
.currenciesMenu__content {
  background: transparent !important;
}

.top-navigation-bar a,
.top-navigation-bar strong {
  color: #3a3a3a !important;
}


/* ==================================================================
   R-02. ZÁHLAVÍ - HLAVNÍ HEADER (logo + search + košík)
   - bílé pozadí, potlačený gradient body
   ================================================================== */

body {
  background-image: none !important;
  background-color: #ffffff !important;
}

#header {
  background: #ffffff !important;
}

.content-wrapper {
  background: #ffffff !important;
}


/* ==================================================================
   R-03. ZÁHLAVÍ - VYHLEDÁVACÍ POLE
   - oblé pole, větší výška, červené tlačítko Hledat svisle centrované
   ================================================================== */

#formSearchForm fieldset {
  position: relative !important;
}

#formSearchForm input[type=search].form-control,
#formSearchForm .search-input {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 120px 0 22px !important;
  border-radius: 999px !important;
  background: #fafaf8 !important;
  border: 1.5px solid #ececec !important;
}

#formSearchForm input[type=search].form-control:focus,
#formSearchForm .search-input:focus {
  border-color: #DC1A22 !important;
  background: #ffffff !important;
}

#formSearchForm button,
#formSearchForm .btn,
#formSearchForm .btn-default {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  bottom: 5px !important;
  height: auto !important;
  padding: 0 26px !important;
  background: #DC1A22 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#formSearchForm button:hover,
#formSearchForm .btn:hover,
#formSearchForm .btn-default:hover {
  background: #B0141B !important;
}


/* ==================================================================
   R-04. ZÁHLAVÍ - HLAVNÍ MENU (navigace)
   - tmavě šedé pozadí + červená linka 3px nahoře
   - přes celou šířku zobrazení (full-bleed pomocí ::before)
   - bez oblých rohů, hamburger zarovnaný uvnitř menu
   ================================================================== */

#navigation {
  background: #1a1a1a !important;
  border-top: 3px solid #DC1A22 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

#navigation::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: #1a1a1a;
  border-top: 3px solid #DC1A22;
  z-index: 0;
  pointer-events: none;
}

#navigation .navigation-in,
#navigation .menu-level-1 {
  position: relative;
  z-index: 1;
}

/* Přepsat modrý podkres .navigation-in (Shoptet default #1b242d) */
.navigation-in,
.navigation-in.menu {
  background: transparent !important;
  background-color: transparent !important;
}
.navigation-in > ul {
  background: transparent !important;
}

/* Vypnout bílé hover pozadí (Shoptet default) - položky 1. úrovně */
#navigation .menu-level-1 > li,
#navigation .menu-level-1 > li > a,
#navigation .menu-level-1 > li:hover,
#navigation .menu-level-1 > li:hover > a,
#navigation .menu-level-1 > li.exp,
#navigation .menu-level-1 > li.exp > a,
#navigation .menu-level-1 > li.ext,
#navigation .menu-level-1 > li.ext > a,
#navigation .menu-level-1 > li.ext.exp,
#navigation .menu-level-1 > li.ext.exp > a,
#navigation .menu-level-1 > li.active,
#navigation .menu-level-1 > li.active > a {
  background: transparent !important;
  background-color: transparent !important;
}

/* Položky 1. úrovně - text barvy + relativní pozicování pro pseudo */
#navigation .menu-level-1 > li > a {
  position: relative !important;
}
#navigation .menu-level-1 > li > a,
#navigation .menu-level-1 > li > a b {
  color: #dddddd !important;
}

#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a:hover b,
#navigation .menu-level-1 > li:hover > a,
#navigation .menu-level-1 > li:hover > a b,
#navigation .menu-level-1 > li.active > a,
#navigation .menu-level-1 > li.active > a b {
  color: #ffffff !important;
}

/* Aktivní položka + hover - červené podtržení podle mockupu */
#navigation .menu-level-1 > li.active > a::after,
#navigation .menu-level-1 > li:hover > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background: #DC1A22;
  pointer-events: none;
}

/* Hamburger (přetékající menu) - svisle uvnitř menu řádku */
.menu-helper.visible {
  top: auto !important;
  bottom: 10px !important;
  transform: none !important;
  z-index: 5;
}

/* Mobilní/tablet menu - tmavé pozadí s bílým textem (po kliku na hamburger) */
@media (max-width: 991px) {
  .navigation-in,
  .navigation-in.menu,
  .navigation-in .menu-level-1,
  .navigation-in .menu-level-1 > li,
  .navigation-in .menu-level-1 > li > a {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
  }
  .navigation-in .menu-level-1 > li > a,
  .navigation-in .menu-level-1 > li > a b,
  .navigation-in .menu-level-1 a,
  .navigation-in .menu-level-1 a b,
  .navigation-in .submenu-arrow {
    color: #ffffff !important;
  }
  .navigation-in .menu-level-1 > li {
    border-bottom: 1px solid #2a2a2a !important;
  }
  /* Na mobilu odstranit červené podtržení (vizuálně nesedí v sloupcovém menu) */
  .navigation-in .menu-level-1 > li > a::after,
  .navigation-in .menu-level-1 > li:hover > a::after,
  .navigation-in .menu-level-1 > li.active > a::after {
    display: none !important;
  }
}


/* ==================================================================
   R-05. ZÁPATÍ (FOOTER) - černé pozadí, nadpisy kapitálky s červeným
   podtržením
   ================================================================== */

footer,
#footer,
#footer > .container,
.footer,
.footer .container {
  background: #0F0F0F !important;
  background-color: #0F0F0F !important;
  color: #ffffff !important;
  margin-top: 0 !important; /* zrušit původní margin-top 30px - CTA pruh nad ním je nalepený */
}

/* Nadpisy v zápatí - kapitálky + červené podtržení 24x2px */
#footer h3,
#footer h4,
#footer .pageElement__heading,
.footer h3,
.footer h4,
.footer .pageElement__heading {
  text-transform: uppercase !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  display: block;
}

#footer h3::after,
#footer h4::after,
#footer .pageElement__heading::after,
.footer h3::after,
.footer h4::after,
.footer .pageElement__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: #DC1A22;
}

/* Odkazy a text ve footeru */
#footer a,
#footer p,
#footer li,
#footer span,
#footer strong {
  color: rgba(255,255,255,0.7) !important;
}
#footer a:hover {
  color: #ffffff !important;
}
#footer .custom-footer h4,
#footer strong {
  color: #ffffff !important;
}


/* ==================================================================
   R-06. CTA PRUH nad zápatí (vkládá se JS-em z ant_scripts.js)
   - červený gradient přes celou šířku, label + nadpis + 2 tlačítka
   - responzivní (tablet, mobil)
   ================================================================== */

.vyza-cta-bar {
  background: linear-gradient(135deg, #DC1A22 0%, #8B0F14 100%);
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  margin-top: 60px; /* odsazení od obsahu výše (zejména podstránky) */
  margin-bottom: 0;
}

.vyza-cta-bar::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  pointer-events: none;
}

.vyza-cta-content {
  position: relative;
  z-index: 2;
}

.vyza-cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.vyza-cta-bar h3 {
  color: #ffffff !important;
  font-size: 28px;
  font-weight: 700;
  max-width: 600px;
  line-height: 1.2;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.vyza-cta-bar h3::after { display: none !important; }

.vyza-cta-actions {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.vyza-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none !important;
  border: 1.5px solid #ffffff;
  white-space: nowrap;
}

.vyza-cta-btn-white {
  background: #ffffff;
  color: #DC1A22 !important;
}
.vyza-cta-btn-white:hover {
  background: #f5f5f3;
}

.vyza-cta-btn-outline {
  background: transparent;
  color: #ffffff !important;
}
.vyza-cta-btn-outline:hover {
  background: rgba(255,255,255,0.1);
}

/* CTA - tablet a mobil */
@media (max-width: 900px) {
  .vyza-cta-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 24px;
    gap: 24px;
  }
  .vyza-cta-bar h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 600px) {
  .vyza-cta-bar {
    padding: 28px 20px;
  }
  .vyza-cta-bar h3 {
    font-size: 20px !important;
  }
  .vyza-cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .vyza-cta-btn {
    justify-content: center;
    width: 100%;
  }
}


/* ==================================================================
   R-07. TLAČÍTKA U PRODUKTŮ
   - výpis bez variant + detail produktu: červené "Do košíku" / "Přidat
     do košíku" s ikonou košíku
   - výpis s variantami: tmavé "Detail" s šipkou
   ================================================================== */

/* Červené tlačítko (Do košíku / Přidat do košíku) */
.product .add-to-cart-button,
.product .btn-cart,
#product-detail-form .add-to-cart-button,
#product-detail-form .btn-conversion {
  background: #DC1A22 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}

.product .add-to-cart-button:hover,
.product .btn-cart:hover,
#product-detail-form .add-to-cart-button:hover,
#product-detail-form .btn-conversion:hover {
  background: #B0141B !important;
  color: #ffffff !important;
}

/* Ikona košíku před textem - SVG jako background-image */
.product .add-to-cart-button::before,
.product .btn-cart::before,
#product-detail-form .add-to-cart-button::before,
#product-detail-form .btn-conversion::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Výpis - menší tlačítko */
.product .add-to-cart-button,
.product .btn-cart {
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* Detail produktu - větší tlačítko */
#product-detail-form .add-to-cart-button,
#product-detail-form .btn-conversion {
  padding: 14px 22px !important;
  font-size: 15px !important;
}
#product-detail-form .add-to-cart-button::before,
#product-detail-form .btn-conversion::before {
  width: 18px;
  height: 18px;
}

/* Tmavé tlačítko "Detail" (produkt s variantami na výpisu) */
.product a.btn-primary,
.product .btn.btn-primary {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}

.product a.btn-primary:hover,
.product .btn.btn-primary:hover {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

.product a.btn-primary::after,
.product .btn.btn-primary::after {
  content: "\2192"; /* šipka doprava */
  font-size: 14px;
  line-height: 1;
}


/* ==================================================================
   R-08. TLAČÍTKA V KOŠÍKU A OBJEDNÁVCE
   - Pokračovat / další konverzní kroky: červené
   - Zpět: sekundární (transparentní s tmavým rámečkem)
   ================================================================== */

a.btn-conversion,
.btn.btn-conversion,
button.btn-conversion,
a.next-step-forward,
button.next-step-forward,
.next-step-forward {
  background: #DC1A22 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 14px 22px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}

a.btn-conversion:hover,
.btn.btn-conversion:hover,
button.btn-conversion:hover,
.next-step-forward:hover {
  background: #B0141B !important;
  color: #ffffff !important;
}

/* Ikona košíku z R-07 nemá nic dělat na konverzních tlačítkách mimo detail produktu */
a.btn-conversion::before,
.next-step-forward::before {
  display: none !important;
}

/* Tlačítko Zpět - sekundární vzhled */
a.next-step-back,
.next-step-back {
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

a.next-step-back:hover,
.next-step-back:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
}