/* keprt.css pro rakousky e-shop BrennholzHier
   Cast 1: prevzato z klales.cz (keprt.css), vyrazena pravidla s .id-712
   Cast 2: drive vlozeny <style> z administrace klales.cz, profiltrovany
           (vyhozeno 6 pravidel vazanych na cenik dopravy, ktery na .at neni)
   Pozor: pravidla s .in-blog, .in-o-nas a .flag-sypane cekaji na nemecke adresy. */

/* ===== cast 1: keprt.css ===== */
/* keprt.css pro rakousky e-shop, prevzato z klales.cz 14. 9. 2026
   ZMENY OPROTI ORIGINALU:
   1) Vyrazena vsechna pravidla s .id-712. Bylo to ID obsahove stranky na klales.cz.
      Na tomhle e-shopu patri jine strance, takze by tise schovavala cizi nadpis.
      Az ta stranka na .at vznikne, doplnit jeji nove ID sem.
   2) Zbytek je beze zmeny. Blok .mjs-cd-* je vzhled te obsahove stranky.
      Bez ni nic nedela, ale necha se pripraveny.
*/

/* ---- 1. Uprava zobrazeni ceny (prenaset vzdy) ---- */

.price-final > span:not(.mjs-price-final-holder):not(.default-variant) {
    display: none;
}

.price-final:has(> .default-variant:not(.no-display)) > .mjs-price-final-holder {
    display: none;
}


/* ---- 2. Vzhled obsahove stranky .mjs-cd-* (ceka na tu stranku) ---- */

.mjs-cd-page .container {
    max-width: 1280px;
}

.mjs-cd-main-block {
    background-image: linear-gradient(to bottom right, #525252, #262626);
}

.mjs-cd-main {
    display: flex;
    padding: 64px 32px;
    color: #fff;
    gap: 48px;
}

.mjs-cd-main > div {
    flex: 0 0 calc((100% - 54px) / 2);
}

.mjs-cd-main img {
    border-radius: 15px;
}

.mjs-cd-main h1 {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 60px;
    line-height: 1;
    margin-bottom: 24px;
    margin-top: 0;
}

.mjs-cd-main h1 span {
    color: #f5953a;
}

.mjs-cd-main p {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
}

.mjs-cd-main-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mjs-cd-main a.btn.btn-secondary {
    background-color: #dda15e;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    gap: 8px;
    font-weight: bold;
    text-transform: none;
    border: none;
    line-height: 24px;
}

.mjs-cd-main a.btn.btn-secondary:hover {
    background-color: #c78a4a;
}

.mjs-cd-main a.btn.btn-secondary svg {
    height: 20px;
    width: 20px;
}

.mjs-cd-block {
    background: #fef7ed;
    text-align: center;
    padding: 64px 32px;
}

.mjs-cd-block.mjs-cd-block--white {
    background: #fff;
}

.mjs-cd-block h2 {
    font-size: 36px;
    margin-bottom: 16px;
    margin-top: 0;
}

.mjs-cd-block .container > p {
    font-size: 20px;
    margin-bottom: 32px;
}


.mjs-cd-block .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    margin-top: 32px;
    border-bottom: 1px solid #e5e5e5;
}

.mjs-cd-block .nav li {
    display: flex;
}

.mjs-cd-block .nav a {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
}

.mjs-cd-block .nav li.active a {
    background-color: #dda15e;
    color: #fff;
}

.mjs-cd-block .tab-pane {
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    text-align: left;
}

.mjs-cd-block .tab-pane h3 {
    font-size: 24px;
    margin: 0;
    margin-bottom: 24px;
}

.mjs-cd-table > div {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    font-size: 16px;
    margin-top: 16px;
    padding: 12px 0;
    justify-content: space-between;
    gap: 10px;
}

.mjs-cd-table > div:last-child {
    border-bottom: none;
}

.mjs-cd-block .tab-pane > p {
    margin-top: 24px;
    padding: 16px;
    font-size: 14px;
}

.mjs-cd-block .panel {
    max-width: 896px;
    margin: 0 auto;
}

.mjs-cd-block .panel svg {
    width: 24px;
    height: 24px;
}

#cd-two > div:not(.mjs-cd-forest-box) {
    display: flex;
    gap: 15px;
    margin-bottom: 16px;
}

#cd-two p {
    font-size: 16px;
}

#cd-two h4 {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 0;
}

.mjs-cd-forest-box {
    background: #fef7ed;
    font-size: 16px;
    padding: 16px;
    margin-top: 24px;
    border-radius: 8px;
}

.mjs-cd-forest-box h4 {
    margin-bottom: 8px !important;
}

.mjs-cd-forest-box p {
    margin-bottom: 0;
}

.mjs-cd-boxes {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.mjs-cd-box {
    border-radius: 16px;
    padding: 24px;
    background: #fff;
    flex: 0 0 calc((100% - (32px * 2)) / 3);
}

.mjs-cd-box svg {
    width: 48px;
    height: 48px;
}

#mjs-cd-prehled .mjs-cd-box {
    text-align: left;
}

#mjs-cd-prehled .mjs-cd-box div {
    font-size: 36px;
    margin-bottom: 16px;
}

#mjs-cd-prehled .mjs-cd-box h3 {
    font-size: 20px;
    margin: 0;
    margin-bottom: 12px;
}

#mjs-cd-prehled .mjs-cd-box p {
    font-size: 16px;
}

.mjs-cd-boxes--shadow .mjs-cd-box {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: box-shadow cubic-bezier(.4, 0, .2, 1) .15s;
}

.mjs-cd-boxes--shadow-hover .mjs-cd-box:hover {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

#mjs-cd-technika .mjs-cd-box {
    flex: 0 0 calc((100% - (32px * 3)) / 4);
}

#mjs-cd-technika .mjs-cd-box h3 {
    margin: 16px 0;
    font-size: 18px;
}

#mjs-cd-technika .mjs-cd-box div > div {
    margin-top: 8px;
}

#mjs-cd-lokal .container {
    max-width: 896px;
}

#mjs-cd-lokal .mjs-cd-box h3 {
    margin-top: 16px;
    margin-bottom: 8px;
}

#mjs-cd-lokal .mjs-cd-box p {
    font-size: 16px;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .mjs-cd-main {
        flex-direction: column;
        padding: 64px 16px;
    }

    .mjs-cd-main-left * {
        text-align: center;
    }

    .mjs-cd-main p {
        font-size: 20px;
    }

    .mjs-cd-main-left h1 {
        font-size: 36px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .mjs-cd-main a.btn.btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .mjs-cd-block {
        padding: 64px 0;
    }

    .mjs-cd-block .panel-body {
        padding: 0 15px;
    }

    .mjs-cd-table b {
        white-space: nowrap;
    }

    .mjs-cd-box {
        flex: 0 0 100% !important;
    }
}

/* ===== cast 2: byvaly vlozeny styl ===== */
.kontakt-blok.stred {
    float: none !important;
    margin: 0 auto;
}
.read-more-btn:hover{background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover);color:#fff}
.mobile.in-blog .text{text-align:center}
.benefitBanner__item{font-size:15px}
.benefitBanner__picture{margin-right:0!important}
.read-more-btn{border-bottom-style:solid;border-radius:10px;margin-top:30px!important;padding:10px;margin:auto;background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;position:relative!important;display:inline-block}
.mobile.in-blog .news-item .text{padding:10px}
.in-blog .news-item{box-shadow:0 6px 12px rgba(0,0,0,.08);border-radius:20px;background-color:#fff;overflow:hidden;border:1px solid #dda15e}
.in-blog .news-item .title{padding-top:30px;font-weight:700!important}
#formContact .form-group{width:100%!important;display:block!important}
#formContact label{display:block!important;width:100%!important}
#formContact input.form-control,#formContact textarea.form-control{display:block!important;width:100%!important;box-sizing:border-box!important}
.desktop .dalsi-kontakty{padding-left:85px}
.mobile .col-sm-3.kontakt-blok,.mobile .col-sm-6.kontakt-blok{padding-left:0;padding-right:0}
.mobile .col-sm-6.kontakt-blok .kontakt-blok-in{min-height:unset!important}
.clear{clear:both!important}
.desktop .in-o-nas .kontakt-blok-in{min-height:450px}
.kontakt-formular p{text-align:center}
.kontakt-blok-in a{text-decoration:underline!important;color:#c0802e!important}
.kontakt-blok-in a:hover{text-decoration:none!important}
.kontakt-blok-in ul{list-style:none;padding:0;margin:0}
.kontakt-blok-in ul li{margin:8px 0;font-size:15px;color:#333;display:flex;align-items:flex-start}
.kontakt-blok-in ul li i{color:#c0802e;font-size:16px;margin-right:10px;line-height:1.4;flex-shrink:0}
.col-sm-3.kontakt-blok .kontakt-blok-in{min-height:280px}
#formContact{border:1px solid #fbd7a9;border-radius:15px;box-shadow:0 0 24px rgba(168,168,168,.25);padding:40px}
.kontakt-blok-in h3{padding-left:30px}
.kontakt-blok-in ul{padding-left:30px}
.kontakt-blok-in ul li{line-height:24px}
.kontakt-blok-in{border:1px solid #fbd7a9;border-radius:15px;box-shadow:0 0 24px rgba(168,168,168,.25);padding:20px;min-height:240px}
.kontakt-blok{border:2px solid #fff}
.kontakt-blok ul li{list-style:none}
.welcome a{color:#000}
.welcome .col-sm-2{padding-right:0!important;text-align:right}
.welcome .col-sm-10{padding-left:10px!important;line-height:20px}
.welcome .col-sm-10 h5{margin-bottom:5px!important}
.welcome img{padding-top:10px;padding-bottom:30px}
.welcome .radek-vitejte,.welcome h1{text-align:center}
.welcome .formular p{display:none}
.benefitBanner__item img{border:1px solid #dda15e;border-radius:20px;background-color:#fff}
.benefitBanner__item{border:5px solid #fff}
.desktop .container--bannersBenefit{padding-left:10px!important;padding-right:0!important}
@media (min-width:1200px) and (max-width:1438px){.next-to-carousel-banners{padding:20px!important}}
.next-to-carousel-banners .banner-wrapper h2 a:hover{text-decoration:underline}
@media (min-width:768px){.next-to-carousel-banners .banner-wrapper{margin:13px}}
.next-to-carousel-banners .banner-wrapper p{font-weight:600}
.next-to-carousel-banners .banner-wrapper .btn,.next-to-carousel-banners .banner-wrapper li,.next-to-carousel-banners .banner-wrapper p{font-size:17px}
.next-to-carousel-banners .banner-wrapper .btn{border-bottom-style:solid;border-radius:10px;padding:3px;margin:auto;max-width:50%;background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;display:block}
.next-to-carousel-banners .banner-wrapper .btn:hover{background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}
.btn.btn-cart,.btn.btn-conversion,a.btn.btn-cart,a.btn.btn-conversion{border-radius:10px}
@media (min-width:768px){.banner-wrapper+.banner-wrapper{margin-top:10px}}
.next-to-carousel-banners .banner-wrapper{box-shadow:0 6px 12px rgba(0,0,0,.08);border-radius:20px;background-color:#fff;overflow:hidden;padding:20px;border:1px solid #dda15e}
.filters-wrapper{border:1px solid #dda15e;border-radius:20px;padding:10px}
.ui-slider-horizontal .ui-slider-handle{background:#dda15e}
@media (min-width:768px){.products-block>div .p .name{font-weight:700}}
@media (min-width:992px){.next-to-carousel-banners{margin-top:8px}}
.p{border-color:#dda15e}
.p:hover{border-color:#c78a4a}
.product .p{box-shadow:0 6px 12px rgba(0,0,0,.08);border-radius:20px;background-color:#fff;overflow:hidden}
.next-to-carousel-banners img{border-radius:20px}
.footer-newsletter{display:none!important}
.custom-footer h4 span::after{content:""!important;display:block!important;width:40px!important;height:3px!important;background-color:#fff!important;border-radius:2px!important;margin:6px 0 auto}
html #footer,html #footer .contact-box ul li span.tel::after,html #footer a,html #footer span{color:#fff!important}
footer#footer{background:#000!important}
html #footer>.container{background-color:transparent!important}
.contact-box ul li>span.mail::before,.contact-box ul li>span.tel::before{color:#fff}
.footer-bottom,.footer-newsletter{border-color:transparent!important}
.navigation-in ul li a b{font-weight:500}
.mjs-origin-price{display:none}
.type-detail .button-variants-list .button-variants{display:flex;flex-wrap:wrap;width:100%}
.type-detail .button-variants-list .button-variants .variant{padding:12px;border:2px solid #ededed;border-radius:8px;margin-right:12px;transition:.3s;margin-bottom:10px;color:#000;cursor:pointer;min-width:50px;justify-content:center;align-items:center;font-size:16px;font-weight:300;transition-duration:.3s;display:flex;flex-direction:column}
.type-detail .button-variants-list .button-variants .variant .variant-sub{display:flex;flex-direction:column}
.type-detail .button-variants-list .button-variants .variant .variant-sub span{display:none}
.type-detail .button-variants-list .button-variants .variant.active{background-color:var(--color-secondary-hover);color:#fff;border-color:var(--color-secondary-hover)}
.button-variants-list select{display:none}
.button-variants .variant.variant-strike{position:relative}
.button-variants .variant.variant-strike:before{display:block;content:"";background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='4'/></svg>");background-repeat:no-repeat;background-position:center center;background-size:100% 100%,auto;width:100%;height:100%;position:absolute}
.type-detail .flag-sypane {
    display: none;
}
#colorbox {
  border-radius: 10px;
  overflow: hidden;
}
#cboxLoadedContent {
  padding: 25px 30px !important;
  border-radius: 10px;
}
#colorbox h2 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 700;
}

/* ===== cast 3: hero na titulce =====
   Nahrazuje puvodni banner z klales.cz, ktery mel text vypaleny v obrazku
   a nesel prelozit. Tady je text normalni text, takze jde kdykoli prepsat
   a precte ho i vyhledavac. Fotka je vyriznuta z puvodniho banneru. */
.hero-at { display: flex; gap: 40px; align-items: center; background: #fff4e8;
  border-radius: 20px; padding: 40px; margin-bottom: 30px; }
.hero-at__text { flex: 1 1 40%; }
.hero-at__text h2 { font-size: 44px; line-height: 1.12; font-weight: 800; margin: 0 0 18px; }
.hero-at__text h2 span { color: #6e4000; }
.hero-at__text p { font-size: 17px; margin: 0 0 26px; }
.hero-at__btn { display: inline-block; background: #6e4000; color: #fff; padding: 12px 26px;
  border-radius: 8px; text-decoration: none; font-weight: 700; }
.hero-at__btn:hover { background: #000; color: #fff; text-decoration: none; }
.hero-at__img { flex: 1 1 60%; }
.hero-at__img img { width: 100%; height: auto; border-radius: 16px; display: block; }
.hero-at__badges { display: flex; justify-content: space-around; gap: 10px; list-style: none;
  margin: -30px 18px 0; padding: 12px 16px; background: #fff; border-radius: 12px;
  position: relative; box-shadow: 0 6px 12px rgba(0,0,0,.08); }
.hero-at__badges li { font-size: 13px; font-weight: 600; }
@media (max-width: 767px) {
  .hero-at { flex-direction: column; padding: 24px; gap: 24px; }
  .hero-at__text h2 { font-size: 30px; }
  .hero-at__badges { flex-wrap: wrap; justify-content: center; }
}

/* ===== cast 4: opravy po prvnim nasazeni hero a kachli (20. 9. vecer) =====
   Sablona Step pritahuje kachle o 60 az 110 px nahoru, aby prekryly spodek
   fotobanneru v carouselu. Nas hero neni fotka, ale blok s textem, tlacitkem
   a odznaky, takze ho kachle prekryvaly. Rusi se to pravidlem se stejnou
   specificitou, keprt.css se nacita az za sablonou, takze vyhrava. */
@media (min-width: 768px) {
  .banners-row:has(.carousel) .next-to-carousel-banners { margin-top: 20px; }
}
@media (min-width: 992px) {
  .banners-row:has(.carousel) .next-to-carousel-banners { margin-top: 20px; }
}

/* Hero drzi stejnou sirku jako kachle pod nim, jinak by byl pres celou
   sirku okna a zaoblene rohy by nebyly videt. */
.hero-at { max-width: 1418px; margin-left: auto; margin-right: auto; }