/* =========================================
   PROMO AKCE
========================================= */

.promo-akce{
    width:100%;
    display:block;
    background:#ffbd59;
    color:#000;
    text-align:center;
    font-weight:700;
    font-size:18px;
    padding:16px;
    position:relative;
    z-index:1;
    line-height:1.3;
    text-decoration:none;
    cursor:pointer;
    transition:.2s
}

.promo-akce:hover{
    color:#000;
    text-decoration:none;
    opacity:.95
}

.promo-mensi{
    font-size:14px;
    font-weight:600;
}


/* =========================================
   ŠÍŘKY WEBU
========================================= */

@media(min-width:1440px){

#content>.container,
.cms-content>.container,
.content-inner{
    max-width:1418px!important;
    margin:auto;
    padding:0 15px!important
}

}

body.homepage .content-wrapper-in>.container{
    width:1500px!important;
    max-width:1500px!important;
    margin:auto!important
}


/* =========================================
   PRODUKTY
========================================= */

.flag.flag-discount{
    background:#5170ff
}

h1,
.h1{
    color:#2f5c65!important;
    font-weight:700!important;
    font-size:30px!important;
    letter-spacing:.3px;
    margin-bottom:35px!important
}


/* =========================================
   INSPIRACE
========================================= */

.inspirace-nadpis{
    font-size:20px;
    font-weight:600;
    color:#333;
    margin:60px 0 35px;
    padding-bottom:10px;
    border-bottom:2px solid #ddd
}

.custom-related-wrapper{
    margin-top:60px
}

.custom-related-wrapper h2,
.custom-related-wrapper h3{
    margin-bottom:25px
}

.custom-related-wrapper .products,
.custom-related-wrapper .related-products,
.custom-related-wrapper #relatedProducts{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:20px
}

.custom-related-wrapper .product{
    width:calc(25% - 15px)!important
}

@media(max-width:1024px){

.custom-related-wrapper .product{
    width:calc(33.333% - 15px)!important
}

}

body.inspirace-page .barevny-wrapper{
    margin-bottom:60px;
    position:relative
}

body.inspirace-page .barevny-carousel{
    overflow:hidden
}

body.inspirace-page .barevny-track{
    display:flex;
    gap:16px;
    transition:.4s
}

body.inspirace-page .barevna-item{
    flex:0 0 calc((100% - 32px)/3);
    box-sizing:border-box
}

body.inspirace-page .barevna-item>*{
    width:100%!important;
    margin:0!important;
    padding:0!important
}

body.inspirace-page .barevna-item img{
    width:100%!important;
    display:block;
    aspect-ratio:1/1;
    object-fit:cover
}

body.inspirace-page .barevna-sipka{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    background:#b4b4b4;
    border:none;
    cursor:pointer;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#fff
}

body.inspirace-page .barevna-sipka.hidden{
    opacity:0;
    pointer-events:none
}

body.inspirace-page .barevna-sipka.vlevo{
    left:10px
}

body.inspirace-page .barevna-sipka.vpravo{
    right:10px
}


/* =========================================
   BLOG
========================================= */

body[class*="blog"] article,
body[class*="blog"] .news-item{
    display:flex;
    gap:20px;
    margin-bottom:25px;
    padding-bottom:25px;
    border-bottom:1px solid #eee
}

body[class*="blog"] article img,
body[class*="blog"] .news-item img{
    width:240px;
    height:180px;
    object-fit:cover;
    border-radius:6px;
    flex-shrink:0
}

body[class*="blog"] h2{
    font-size:20px;
    margin-bottom:8px;
    line-height:1.3
}

body[class*="blog"] p{
    font-size:14px;
    line-height:1.6;
    color:#555
}

body[class*="blog"] .news-item .title{
    color:#1f2a30!important;
    font-weight:700!important;
    font-size:21px!important
}

body[class*="blog"] .news-item .description{
    color:#666!important
}


/* =========================================
   MOBIL
========================================= */

@media(max-width:768px){

.promo-akce{
    font-size:18px;
    padding:18px 12px;
    margin-top:60px
}

.custom-related-wrapper .product{
    width:100%!important
}

body.inspirace-page .barevny-carousel{
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch
}

body.inspirace-page .barevna-item{
    flex:0 0 85%
}

body[class*="blog"] article,
body[class*="blog"] .news-item{
    flex-direction:column
}

body[class*="blog"] article img,
body[class*="blog"] .news-item img{
    width:100%;
    height:auto
}

}

/* =========================================
   KATEGORIE PRODUKTŮ
========================================= */

/* Produkt */
.products .product{
    padding-bottom:26px!important;
    margin-bottom:26px!important;
    border-bottom:none!important;
}

/* Skrytí všech linek */
.products .product::before,
.products .product::after{
    display:none!important;
}

/* Ztmavení původní Shoptet linky */
.products .product{
    border-color:#c2c2c2!important;
}

/* Obrázek */
.products .product .image{
    margin-bottom:12px!important;
}

/* Název produktu */
.products .product .name{
    margin-bottom:8px!important;
    line-height:1.4!important;
}

/* Krátký popis */
.products .product .description{
    margin-top:8px!important;
    margin-bottom:10px!important;
    line-height:1.5!important;
}

/* Skladem */
.products .product .availability{
    margin-top:4px!important;
    margin-bottom:6px!important;
}

/* Cena */
.products .product .prices{
    margin-top:4px!important;
    margin-bottom:4px!important;
}

/* Cena + košík */
.products .product .p-bottom,
.products .product .product-bottom{
    margin-top:6px!important;
    padding-top:0!important;
}

/* Tlačítko */
.products .product .btn,
.products .product .btn-cart{
    margin-top:0!important;
}

/* Mobil */
@media (max-width:768px){

.products .product{
    padding-bottom:34px!important;
    margin-bottom:34px!important;
}

}