/*
 * banners-hp.css
 * Sloučeno a pročištěno z mv0824.css + mv1024.css
 * Nahrazuje oba soubory — mv0824.css a mv1024.css lze smazat.
 *
 * Obsah:
 *  1. Carousel
 *  2. Next-to-carousel bannery
 *  3. Úvodní welcome wrapper
 *  4. HP sekce: kategorie, značky
 *  5. Patičkové ikony (FB, IG, YT) — JEDNA kopie
 *  6. Různé globální drobnosti (iframe, flag, bronz, newsletter)
 *  7. Oblíbené položky (favBtn)
 *  8. Zákaznická zóna – tabulky na mobilu
 */


/* =============================================================
   1. CAROUSEL
   ============================================================= */

#carousel .banner-caption {
    background: rgba(0, 0, 0, 0.1);
}

#carousel .banner-caption h2,
#carousel .banner-caption .extended-banner-title {
    color: #fff;
}

#carousel .banner-caption p,
#carousel .banner-caption .extended-banner-text {
    color: #fff;
    font-weight: 400;
}

@media only screen and (max-width: 767px) {
    #carousel .banner-caption {
        padding: 25px 20px;
        margin: 0;
        text-align: left;
        justify-content: flex-end;
        align-items: flex-start;
    }

    #carousel .banner-caption .extended-banner-title {
        color: #fff;
        padding: 10px 0 0 0;
    }

    #carousel .banner-caption p,
    #carousel .banner-caption .extended-banner-text {
        color: #fff;
        font-weight: 400;
    }
}

@media only screen and (max-width: 490px) {
    #carousel .item img {
        min-height: 200px !important;
    }
}


/* =============================================================
   2. NEXT-TO-CAROUSEL BANNERY
   ============================================================= */

.next-to-carousel-banners .normal-banners-line .banner-wrapper IMG {
    min-height: 70px;
    height: 130px;
    width: auto;
}

.next-to-carousel-banners .normal-banners-line .banner-caption {
    background: rgba(0, 0, 0, 0.1);
}

.next-to-carousel-banners .banner-caption h2,
.next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts h2,
.next-to-carousel-banners .banner-caption .extended-banner-title,
.next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts .extended-banner-title {
    color: #fff;
    padding: 25px 50px 25px 10px;
    font-size: 1.4em;
}

.footer-banners .footer-banner .banner-caption .extended-banner-title {
    color: #fff;
}

@media only screen and (max-width: 992px) {
    .next-to-carousel-banners .normal-banners-line .banner-caption {
        padding: 5px 40px 5px 5px;
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .next-to-carousel-banners .normal-banners-line .banner-caption {
        background: rgba(0, 0, 0, 0.1);
    }

    .next-to-carousel-banners .banner-caption h2,
    .next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts h2,
    .next-to-carousel-banners .banner-caption .extended-banner-title,
    .next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts .extended-banner-title {
        padding: 25px 125px 25px 3px;
        color: #fff;
        font-weight: 500;
    }

    .next-to-carousel-banners .normal-banners-line .banner-wrapper {
        min-height: 125px;
        width: calc(99% - 1px);
    }
}

@media only screen and (max-width: 490px) {
    .next-to-carousel-banners .normal-banners-line .banner-caption {
        width: 100%;
    }

    .next-to-carousel-banners .banner-caption h2,
    .next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts h2,
    .next-to-carousel-banners .banner-caption .extended-banner-title,
    .next-to-carousel-banners .banner-wrapper > a > .extended-banner-texts .extended-banner-title {
        padding: 25px 85px 25px 10px;
    }
}


/* =============================================================
   3. WELCOME WRAPPER
   ============================================================= */

.welcome-wrapper {
    margin: 0 50px;
}

@media only screen and (max-width: 767px) {
    .welcome-wrapper {
        display: none !important;
    }

    .homepage-box.welcome-wrapper {
        display: none !important;
    }
}


/* =============================================================
   4. HP SEKCE: KATEGORIE, ZNAČKY
   ============================================================= */

.hp-znacky,
.hp-categories {
    display: inline;
    width: 100%;
}

.hp-manufactures {
    background: #f3ecec;
}

/* Značky */
.hp-znacky .hp-znacky-posts .news-wrapper .news-item,
.hp-categories .hp-categories-posts .news-wrapper .news-item {
    width: calc(100% / 6 - 16px);
}

.hp-znacky .news-wrapper .news-item .text .title {
    display: none;
}

.hp-znacky .hp-znacky-posts .news-wrapper .news-item .image {
    max-width: 100%;
    max-height: 100%;
    width: 260px;
    height: 120px;
}

.hp-znacky .h4.homepage-group-title a {
    text-decoration: none;
}

.hp-znacky .h4.homepage-group-title {
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 767px) {
    .hp-znacky {
        margin-top: -30px;
        padding-bottom: 10px;
    }

    .hp-znacky .hp-znacky-posts .news-wrapper {
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-znacky .hp-znacky-posts .news-wrapper .news-item,
    .hp-categories .hp-categories-posts .news-wrapper .news-item {
        width: calc(100% / 3 - 16px);
    }
}

@media only screen and (max-width: 767px) {
    .hp-znacky .h4.homepage-group-title {
        padding-top: 25px;
        padding-bottom: 10px;
        margin-top: 10px;
        clear: both;
    }

    .hp-znacky .h4.homepage-group-title a {
        text-decoration: none !important;
    }

    h4.homepage-group-title,
    .h4.homepage-group-title {
        margin-top: 0;
        font-size: 1.8em;
    }

    .hp-categories .hp-categories-posts .news-wrapper .news-item .text .title {
        margin: 5px;
        font-size: 15px;
    }

    .hp-znacky .hp-znacky-posts .news-wrapper .news-item,
    .hp-categories .hp-categories-posts .news-wrapper .news-item {
        width: calc(100% / 3 - 16px);
    }

    .hp-znacky .hp-znacky-posts .news-wrapper .news-item .image {
        width: 120px;
        height: 60px;
    }
}

@media only screen and (max-width: 480px) {
    .hp-znacky .hp-znacky-posts .news-wrapper .news-item,
    .hp-categories .hp-categories-posts .news-wrapper .news-item {
        width: calc(100% / 3 - 16px);
    }

    .hp-znacky .hp-znacky-posts .news-wrapper .news-item .image {
        max-width: 100%;
        max-height: 100%;
        width: 120px;
        height: 60px;
    }
}

/* Headings – margin na mobilu */
@media only screen and (max-width: 768px) {
    .h4,
    .content h4,
    .category-title,
    .p-detail-inner h1,
    h1,
    h4.homepage-group-title,
    .h4.homepage-group-title,
    .products-related-header,
    .in-klient h1 {
        margin-bottom: 5px;
    }
}

/* Recepty – skrýt novinky od 5. */
.recipes-section #newsWrapper .news-item:nth-child(n + 5) {
    display: none !important;
}


/* =============================================================
   5. PATIČKOVÉ IKONY — jedna kopie (FB, IG, YT)
   ============================================================= */

footer .custom-footer .site-name .inner-box .contacts .project-fb {
    margin-bottom: 12px;
}

footer .custom-footer .site-name .inner-box .contacts .project-fb:before {
    position: relative;
    width: 20px;
    height: 25px;
    margin-right: 15px;
    content: '';
    display: inline-block !important;
    background: url("https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/adamin/img/icons/facebook.svg") no-repeat center;
}

footer .custom-footer .site-name .inner-box .contacts .project-in {
    margin-bottom: 12px;
}

footer .custom-footer .site-name .inner-box .contacts .project-in:before {
    position: relative;
    width: 20px;
    height: 25px;
    margin-right: 15px;
    content: '';
    display: inline-block !important;
    background: url("https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/adamin/img/icons/instagram.svg") no-repeat center;
}

footer .custom-footer .site-name .inner-box .contacts .project-yt {
    margin-bottom: 12px;
}

footer .custom-footer .site-name .inner-box .contacts .project-yt:before {
    position: relative;
    width: 20px;
    height: 25px;
    margin-right: 15px;
    content: '';
    display: inline-block !important;
    background: url("/user/documents/icons/youtube.svg") no-repeat center;
}


/* =============================================================
   6. GLOBÁLNÍ DROBNOSTI
   ============================================================= */

.flag {
    max-width: 11em;
}

iframe {
    border: none;
}

@media (max-width: 992px) {
    iframe {
        width: 100%;
        height: 100%;
    }
}

span.flag-bronz {
    display: none !important;
}

div.custom-footer__newsletter {
    display: none !important;
}


/* =============================================================
   7. OBLÍBENÉ POLOŽKY (favBtn / dkLab)
   ============================================================= */

a.favBtn,
.dkLabFavHeaderIconBtn {
    text-decoration-color: white;
}

.dkLabFavHeaderIconBtn::before {
    font-size: 23px;
}

body.template-11 .dkLabFavHeaderIconBtn {
    top: 3px;
    text-decoration-color: white;
}

/* Desktop: skrýt favBtn v responsive-tools (je umístěn jinak) */
@media only screen and (min-width: 768px) {
    .top-navigation-bar .nav-part .responsive-tools > a.favBtn {
        display: none !important;
    }
}

/* Mobil: favBtn v hlavičce */
@media only screen and (max-width: 767px) {
    .top-navigation-bar .nav-part .responsive-tools a.favBtn {
        position: relative;
        display: inline-block;
        top: 13px;
        left: 3px !important;
        cursor: pointer;
        color: var(--dklab-favourites-header-icon-color);
        margin-left: 3px !important;
        transition: 350ms;
    }

    .top-navigation-bar .nav-part .responsive-tools a.favBtn::before {
        font-family: 'oblibene' !important;
        content: '\e900';
        font-size: 22px;
        margin: 4px !important;
        position: relative;
        color: #E91B7D;
        opacity: 1;
    }

    .oblibeneBtn {
        position: relative;
        left: 3px !important;
        top: 0;
        margin-top: 5px;
        margin-left: 5px !important;
        display: inline-block;
        cursor: pointer;
    }

    .oblibeneBtn::before,
    .oblibeneBtn::after {
        opacity: 1;
        font-size: 21px;
    }
}


/* =============================================================
   8. ZÁKAZNICKÁ ZÓNA – tabulky na mobilu
   ============================================================= */

@media only screen and (max-width: 767px) {
    .in-klient-slevy #content table,
    .in-klient-doklady #content table {
        margin: 10px 0;
    }

    table.customer-orders {
        width: 400px !important;
    }

    table.customer-orders thead {
        display: none;
    }
}