/* Samostatna finalni verze CSS pro Shoptet */

body,
button,
input,
select,
textarea {
    font-family: "Avenir Next", sans-serif !important;
}

/* Obrazky v hlavnim menu */
#header #navigation .menu-level-1 > li > a {
    position: relative !important;
    padding-left: 35px !important;
}

/* Ikony pro jednotlive kategorie */
#header #navigation .menu-level-1 > li.menu-item-1835 > a::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Pece o plet */
.menu-item-1835 > a::before {
    background-image: url("https://www.mysense.cz/user/documents/upload/Banner/discount.svg") !important;
}

/* Fonty */
body {
    font-weight: 400 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
}

.btn,
button {
    font-weight: 500 !important;
}

.price {
    font-weight: 600 !important;
}

#header #navigation ul.menu-level-1 > li > a b {
    font-weight: 500 !important;
}

.flags .flag {
    font-weight: 700;
    font-size: 0.8em;
    text-transform: none;
}

.categories a {
    font-weight: 700;
}

/* Hlavicka a navigace */
.top-navigation-tools {
    display: none;
}

.top-navigation-contacts {
    display: none !important;
}

#header {
    background-color: #151515;
}

#header.fixed-menu {
    background: #151515;
}

#header .top-nav-button-login {
    color: #fff;
}

#header .navigation-buttons .btn,
#header .top-nav-button-login {
    color: #fff !important;
}

#header #navigation ul.menu-level-1 > li > a {
    text-transform: none;
    color: #fff;
    font-size: 16px;
}

.top-navigation-bar .nav-part .top-navigation-menu > ul li a {
    text-transform: none !important;
}

.top-navigation-bar {
    background: white;
}

.top-navigation-bar .container {
    width: calc(100% - 64px) !important;
    max-width: 1920px !important;
}

/* Responzivni navigace */
@media (min-width: 768px) {
    #header .container.navigation-wrapper {
        width: calc(100% - 64px) !important;
        max-width: 1920px !important;
    }

    #header #navigation {
        width: 100% !important;
        max-width: 100% !important;
    }

    #navigation {
        float: none !important;
    }

    #header #navigation .navigation-in {
        display: flex !important;
        align-items: center !important;
    }

    #header #navigation ul.menu-level-1 {
        flex: 1 1 auto !important;
    }

    #header .menu-helper:after {
        background-image: url("https://www.mysense.cz/user/documents/upload/Ikonky/vectorpaint.svg") !important;
    }

    #navigation .navigation-in {
        position: relative;
        background-color: #151515;
    }
}

@media (max-width: 767px) {
    .top-navigation-bar .container {
        width: calc(100% - 24px) !important;
    }

    #header #navigation {
        width: auto !important;
    }

    .top-navigation-bar .nav-part .responsive-tools a[data-target="navigation"]:before {
        background-image: url("https://www.mysense.cz/user/documents/upload/Ikonky/vectorpaint.svg") !important;
    }

    #header #navigation ul.menu-level-1 > li > a {
        color: #222 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 44px !important;
        padding-right: 12px !important;
    }

    #header #navigation .submenu-arrow {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin-left: 8px !important;
    }
}

@media (max-width: 1366px) {
    #header .menu-helper {
        right: 16px !important;
        margin-top: 21px;
    }

    #header #navigation > .navigation-in > .menu-level-1 > li.splitted {
        display: none !important;
    }
}

/* Layout */
.content-wrapper.before-carousel .container {
    padding: 0 !important;
}

/* Tlacitka do kosiku */
.products-block.products .product .btn {
    background-color: white !important;
    color: #ff2470 !important;
    border: 2px solid #ff2470 !important;
}

.products-block.products .product .btn:hover {
    background-color: #ff2470 !important;
    color: white !important;
}

.product-top .add-to-cart button.add-to-cart-button {
    background-color: #ff2470 !important;
    color: white !important;
    border: 2px solid #ff2470 !important;
}

.product-top .add-to-cart button.add-to-cart-button:hover {
    background-color: #d91e5b !important;
    color: white !important;
    border: 2px solid #d91e5b !important;
}

/* Ceny a dalsi prvky */
.product-top .price-line .price-final {
    color: #292b32 !important;
}

.products .product .prices .price-final strong {
    color: #292b32 !important;
}

.product-top .social-buttons-wrapper .link-icons {
    display: none;
}

.flag.flag-new {
    color: #1b281d !important;
}

.p-image-wrapper .flags-extra .flag.flag.flag-discount,
.flags-extra .flag.flag.flag-discount {
    background: #f62b76 !important;
}

.flags-extra .flag.flag-discount .price-standard span {
    display: none;
}

.flag.flag-action {
    color: white !important;
}

.flags-extra .flag.flag-discount .price-save {
    font-size: 1.2em;
}

.products-block.products .product .flags.flags-extra .flag {
    width: 55px;
    height: 55px;
}

.subcategories {
    display: none;
}

.pageElement__heading {
    display: none;
}

@media only screen and (min-width: 768px) {
    .category-header .listSorting .listSorting__controls li button.listSorting__control--current {
        background-color: #000000;
    }
}

#header .search fieldset button {
    background: #ff2e77 !important;
}

#header .search fieldset button:hover {
    background: #fa76a4 !important;
}

.top-navigation-bar .msg-part .text {
    text-transform: none;
}

footer {
    background: #151515 !important;
}

footer ul li a {
    color: #ffffff !important;
}

footer h3 {
    color: #ffffff !important;
}

/* Banner radius */
.body-banners .col-sm-4 > .banner-wrapper > img,
.body-banners .col-sm-8 > .banner-wrapper > img {
    border-radius: 8px !important;
}

/* Homepage bannery a benefity */
@media (min-width: 768px) {
    .id-1 .next-to-carousel-banners {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    .id-1 .next-to-carousel-banners .banner-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }

    .id-1 .next-to-carousel-banners .banner-wrapper img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .id-1 .next-to-carousel-banners .banner-wrapper a {
        text-decoration: none;
    }

    .id-1 .next-to-carousel-banners .banner-wrapper a .extended-banner-texts {
        display: flex;
        justify-content: center;
    }

    .id-1 .before-carousel .row {
        margin: 0;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between {
        display: flex;
        flex-wrap: wrap;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between > .col-sm-4,
    .id-1 .before-carousel .row.banners-row.has-benefit-between > .col-sm-8,
    .id-1 .before-carousel .row.banners-row.has-benefit-between > .position--benefitHomepage {
        float: none;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between > .col-sm-8 {
        order: 1;
        width: 100%;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between > .position--benefitHomepage {
        order: 2;
        width: 100%;
        max-width: 1440px;
        margin: 12px auto;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between > .col-sm-4 {
        order: 3;
        width: 100%;
    }

    .id-1 .before-carousel .row .col-sm-8 {
        padding: 0 !important;
        margin: 0 !important;
    }

    .id-1 .homepage-box.welcome-wrapper {
        background-image: url(/user/documents/upload/o-nas-01.webp);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        background-color: #f5f5f5 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .id-1 .before-carousel .row.banners-row.has-benefit-between > .position--benefitHomepage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .id-1 .before-carousel .row.banners-row.has-benefit-between > .position--benefitHomepage > .benefitBanner__item {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        justify-content: center;
    }
}

.product-top .p-detail-info .p-short-description {
    font-weight: unset;
}

.product-top .p-image-wrapper {
    position: relative;
}

.product-top .p-image-wrapper .p-image-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-top .p-image-wrapper .p-image-badges .flag-action {
    margin: 0;
}

footer .pageElement__heading {
    display: block;
}

#header .menu-helper.visible,
#header .menu-helper {
    right: 0 !important;
}

.homepage-box.welcome-wrapper {
    text-align: left !important;
    padding: 40px 15px !important;
}

.homepage-box.welcome-wrapper .welcome {
    max-width: 60%;
    text-align: left;
    margin-left: 0;
}

.homepage-box.welcome-wrapper .welcome .h1 {
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 25px;
    padding: 0;
    line-height: 1.3;
}

.homepage-box.welcome-wrapper p {
    line-height: 1.5em;
}

@media (max-width: 768px) {
    .homepage-box.welcome-wrapper .welcome {
        max-width: 100%;
    }

    .homepage-box.welcome-wrapper {
        background-image: none !important;
        padding: 30px 15px !important;
    }

    .homepage-box.welcome-wrapper .welcome .h1 {
        font-size: 20px;
    }
}

.extended-banner-texts {
    padding-top: 8px !important;
}

span.extended-banner-text {
    padding-top: 12px !important;
    font-weight: 600 !important;
}

.benefitBanner.position--benefitHomepage.is-in-banners-row {
    justify-content: center !important;
}

.benefitBanner__item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 12px !important;
}

.benefitBanner__picture {
    margin-bottom: 20px !important;
    margin-right: 0 !important;
}

.benefitBanner__title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
}

.benefitBanner__data {
    font-size: 14px !important;
}

.footer-banners .slick-list a img {
    filter: none;
}

footer .custom-footer > div.newsletter button:hover {
    background: #fa76a4 !important;
}