/* =========================================================
   1. ZÁHLAVÍ
   ========================================================= */

#header .header-phone {
    display: none !important;
}

#header #top-links {
    display: none !important;
}

@media (min-width: 992px) {

    #menu > ul > li.first-line > a {
        position: relative !important;
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-indent: -9999px !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    #header,
    #header-in {
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .header-info {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-center {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #logo {
        display: block !important;
        height: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #logo img {
        display: block !important;
        width: auto !important;
        max-height: 100px !important;
    }

    #header-cart-wrapper {
        display: block !important;
        margin: 0 !important;
        padding-top: 30px !important;
        text-align: right !important;
    }
}


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

@media (min-width: 992px) {

    .searchform {
        position: relative !important;
        z-index: 5 !important;
        width: 430px !important;
        max-width: 430px !important;
        margin: 28px auto 0 !important;
    }

    .searchform form,
    .searchform fieldset {
        position: relative !important;
        width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .searchform .large-10 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .searchform .large-2 {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 3 !important;
        width: 46px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .searchform input.s-word {
        width: 100% !important;
        height: 42px !important;
        padding: 0 52px 0 16px !important;
        box-sizing: border-box !important;

        color: #444 !important;
        font-size: 14px !important;
        line-height: 42px !important;

        background: #fff !important;
        border: 1px solid #d9d9d9 !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .08) !important;
    }

    .searchform input.s-word::placeholder {
        color: #777 !important;
    }

    .searchform input.s-word:focus {
        outline: none !important;
        border-color: #0087CD !important;
    }

    .searchform input.b-search {
        position: relative !important;
        top: -1px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        color: transparent !important;
        font-size: 0 !important;

        background:
            transparent
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230087CD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'%3E%3C/line%3E%3C/svg%3E")
            center center
            no-repeat !important;

        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
}


/* =========================================================
   3. HORNÍ MENU
   ========================================================= */

@media (min-width: 992px) {

    #menu {
        min-height: 42px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #0087CD !important;
        border: 0 !important;
    }

    #menu > ul {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        float: none !important;

        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;

        background: #0087CD !important;
    }

    #menu > ul > li {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border-right: 1px solid rgba(255, 255, 255, .4) !important;
    }

    #menu > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;

        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;

        background: transparent !important;
        border: 0 !important;
    }

    #menu > ul > li > a:hover,
    #menu > ul > li.hover > a {
        color: #fff !important;
        background: rgba(255, 255, 255, .16) !important;
    }

    #menu .menu-item-39 {
        display: none !important;
    }

    #menu .custom-login-first,
    #menu > ul > li.custom-login-item:nth-last-child(2) {
        margin-left: auto !important;
    }

    #menu-helper-wrapper {
        display: none !important;
    }
}


/* =========================================================
   4. MOBILNÍ MENU
   ========================================================= */

@media (max-width: 991px) {

    #menu {
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
    }

    #menu > ul {
        display: none !important;
    }

    #menu-helper-wrapper {
        display: block !important;
    }

    #menu-helper-box {
        display: none;
    }

    #menu-helper-box .menu-item-39 {
        display: none !important;
    }

    html,
    body {
        overflow-x: hidden !important;
    }
}


/* =========================================================
   5. LEVÝ SLOUPEC – KATEGORIE, TOP 5, PLATBY
   ========================================================= */
/* Sjednocení tučnosti kategorií v levém menu */
#categories .categories > .topic > a,
#categories .categories > .topic > a.expanded {
    font-weight: 500 !important;
}
#categories::before {
    content: "KATEGORIE";
    display: block;

    margin: -10px -10px 10px;
    padding: 10px 12px;

    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: left;

    background: #0087CD;
    border-radius: 6px 6px 0 0;
}

#categories,
#top10,
#onlinePayments {
    margin-bottom: 14px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
}

#categories .categories {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #d9d9d9 !important;
}

#categories .categories:last-child {
    border-bottom: 0 !important;
}

#categories a:hover {
    display: block !important;
    padding-left: 10px !important;

    color: #fff !important;
    background: #0087CD !important;
}

#top10 .topic,
#onlinePayments .topic {
    margin: -10px -10px 10px !important;
    padding: 9px 10px !important;

    color: #333 !important;
    font-weight: 700 !important;

    background: #f5f5f5 !important;
    border-bottom: 1px solid #d9d9d9 !important;
    border-radius: 6px 6px 0 0 !important;
}
/* =========================================================
   TOP 5 – jemné oddělení a kompaktnější vzhled
   ========================================================= */

#top10 li.panel-element {
    position: relative !important;
    transition: background-color .18s ease !important;
}

#top10 li.panel-element:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    background: #e3e6e8;
}

#top10 li.panel-element:hover {
    background: #f7fbff !important;
}

#top10 li.panel-element > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#top10 li.panel-element br {
    line-height: .8 !important;
}


/* =========================================================
   6. NADPISY A DROBEČKOVÁ NAVIGACE
   ========================================================= */

h1,
.product-top h1,
.p-detail h1 {
    font-weight: 500 !important;
}

@media (max-width: 991px) {

    h1,
    .product-top h1,
    .p-detail h1,
    .p-detail-info h1,
    .p-data h1,
    .p-detail-inner h1,
    #content h1 {
        font-weight: 600 !important;
    }
}

#navigation {
    margin-bottom: 8px !important;
    font-size: 13px !important;
}

#navigation span,
#navigation a {
    color: #555 !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
}

#navigation a:hover {
    color: #0087CD !important;
}

.banner1441 a > div {
    background-color: #0087CD !important;
}


/* =========================================================
   7. KATEGORIE – TEXT A ROZESTUP PŘED PRODUKTY
   ========================================================= */

#category-products-wrapper,
.category-products-wrapper,
.products {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#content > h1,
#content-in > h1 {
    margin-bottom: 10px !important;
}

#content .category-perex,
#content .category-description,
#content .description,
#content .text-align-center {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

#content .text-align-center + .clear,
#content .category-perex + .clear,
#content .category-description + .clear {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#category-products-wrapper {
    clear: both !important;
}

.pagination-category-tabs,
.info-paging,
.tar.pagination-category-tabs.info-paging {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

#category-tabs {
    display: none !important;
}


/* =========================================================
   8. PRODUKTOVÉ KARTY
   ========================================================= */

@media (min-width: 992px) {

    .products .product > .columns {
        margin: -1px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        background: #fff !important;
        border: 1px solid #cfd3d7 !important;
        border-radius: 6px !important;
    }

    .products .product > .columns:hover {
        border-color: #0087CD !important;
        box-shadow: 0 0 0 1px rgba(0, 135, 205, .18) !important;
    }

    .products .product a {
        cursor: pointer !important;
    }

    .products .p-image {
        position: relative !important;
    }

    .products .product-card-static-source-js,
    .products .product-card-static-source-js *,
    .products .p-main-price,
    .products .p-det-main-price {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .products .product-card-hover-content,
    .products .product-card-hover-content-p-detail {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;

        border: 0 !important;
        pointer-events: none !important;
    }

    .products .stock-badge-custom {
        display: inline-block !important;
        margin: 0 0 8px !important;
        padding: 6px 12px !important;

        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .3px !important;
        text-align: center !important;
        text-transform: uppercase !important;

        border-radius: 20px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
    }

    .products a.p-name {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 24px) !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;

        margin: 8px -12px 2px !important;
        padding: 6px 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        color: #2f2f2f !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 17px !important;
        text-align: center !important;
        text-decoration: none !important;

        background: linear-gradient(to bottom, #f7f7f7, #ececec) !important;
        border-top: 1px solid #fdfdfd !important;
        border-bottom: 1px solid #ddd !important;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            0 2px 6px rgba(0, 0, 0, .04) !important;
    }

    .products .product-card-static-source-js {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .products .p-main-price,
    .products .product .p-main-price {
        position: relative !important;

        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;

        text-align: center !important;
    }

    .products .p-main-price::before {
        display: none !important;
        content: none !important;
    }

    .products .p-det-main-price,
    .products .product .p-det-main-price {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1.1 !important;
        text-align: center !important;
    }
}

@media (max-width: 991px) {

    .products .p-image {
        position: relative !important;
    }

    .products .stock-badge-custom {
        display: inline-block !important;
        max-width: 80% !important;
        margin: 0 0 6px !important;
        padding: 5px 10px !important;

        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .2px !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;

        border-radius: 18px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
    }

    .products .product-card-hover-content,
    .products .product-card-hover-content-p-detail {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;

        border: 0 !important;
        pointer-events: none !important;
    }

    .products .p-main-price::before {
        display: none !important;
        content: none !important;
    }
}

.products .clear.decor-delimeter {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    line-height: 0 !important;
    border: 0 !important;
}

.products .product {
    margin: 0 !important;
}

.products .product-code {
    display: none !important;
}


/* =========================================================
   9. DETAIL PRODUKTU – ZÁLOŽKY A POPIS
   ========================================================= */

#tabs-div {
    margin-top: 18px !important;
}

#tabs {
    position: relative !important;
    z-index: 3 !important;

    margin: 0 !important;
    padding: 0 0 0 14px !important;

    border-bottom: 0 !important;
}

#tabs li {
    margin: 0 4px 0 0 !important;
}

#tabs li a {
    padding: 12px 28px !important;

    color: #333 !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    background: linear-gradient(to bottom, #fafafa, #e9ecef) !important;
    border: 1px solid #cfd5dc !important;
    border-bottom: 0 !important;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .05) !important;
}

#tabs li.ui-tabs-active a,
#tabs li.active a,
#tabs li a.active {
    color: #0087CD !important;
    background: #fff !important;
    border-color: #cfd5dc !important;
}

#tabs li a:hover {
    color: #0087CD !important;
}

#tab-content {
    margin-top: -1px !important;
    padding-top: 0 !important;
}

#description {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.description-inner {
    margin-top: 0 !important;
    padding: 28px 30px !important;

    background: linear-gradient(to bottom, #fff, #f8f8f8) !important;
    border: 1px solid #cfd5dc !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 4px 14px rgba(0, 0, 0, .06) !important;
}

.description-inner p,
.description-inner li {
    color: #444 !important;
    line-height: 1.55 !important;
}

.description-inner h2,
.description-inner h3 {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
}


/* =========================================================
   10. SYSTÉMOVÉ HLÁŠKY
   ========================================================= */

.message.success-message,
.success-message.fixed-message,
.fixed-message,
#notifierMessage {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* SOUBORY – odsazení od záložek */
#relatedFiles {
    padding-top: 18px !important;
}

/* Pravý banner SMS konfigurátoru – jemné zarovnání doleva */
@media (min-width: 992px) {
    #column-r .banner1441 {
        position: relative !important;
        left: -2px !important;
    }
}

/* =========================================================
   DETAIL PRODUKTU – název přes celou šířku nad produktem
   ========================================================= */

#product-detail-h1.product-title-moved {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 20px !important;
    padding: 0 0 12px !important;
    box-sizing: border-box !important;

    border-bottom: 1px solid #e1e4e7 !important;
}

#product-detail-h1.product-title-moved h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #353535 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    text-align: left !important;
}

/* odstranění případné mezery po původním umístění nadpisu */
#td-product-detail #product-detail-h1 {
    margin: 0 !important;
}

/* =========================================================
   KATEGORIE
   ========================================================= */

/* Skrytí breadcrumbu */
#navigation {
    display: none !important;
}

/* Nadpis kategorie */
#content-in > h1 {
    display: block !important;
    width: 100% !important;

    margin: 8px 0 16px !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    color: #353535 !important;
}


/* =========================================================
   ODSAZENÍ OBSAHU OD HORNÍHO MENU
   ========================================================= */

#content-in {
    padding-top: 12px !important;
}

@media (max-width: 991px) {
    #content-in {
        padding-top: 8px !important;
    }
}

/* Oprava nadpisu produktu na mobilu */
@media (max-width: 991px) {

    #product-detail-h1.product-title-moved {
        width: auto !important;
        max-width: calc(100% - 32px) !important;
        margin: 6px 16px 16px !important;
        padding: 0 0 10px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #product-detail-h1.product-title-moved h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        font-size: 21px !important;
        line-height: 1.22 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
    }
}

/* =========================================================
   MOBIL – jemné oddělení produktů v kategorii
   ========================================================= */

@media (max-width: 991px) {

    .products .product {
        position: relative !important;
        padding-bottom: 22px !important;
        margin-bottom: 22px !important;
    }

    .products .product:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 0;

        height: 1px;
        background: #e3e6e8;
    }

}

/* =========================================================
   MOBIL – responzivní YouTube video
   ========================================================= */

@media (max-width: 991px) {
    .description-inner iframe[src*="youtube.com"],
    .description-inner iframe[src*="youtube-nocookie.com"],
    #content-in iframe[src*="youtube.com"],
    #content-in iframe[src*="youtube-nocookie.com"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 16px auto !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   MOBIL – obrázky na stránce Kontakt
   ========================================================= */

@media (max-width: 991px) {
    .contact-page table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        table-layout: auto !important;
    }

    .contact-page table tbody,
    .contact-page table tr,
    .contact-page table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .contact-page table td {
        margin-bottom: 14px !important;
    }

    .contact-page table img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* =========================================================
   MOBIL – konfigurátor jako první malý banner
   ========================================================= */

@media (max-width: 991px) {

    #category-banners > li.mobile-configurator-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #category-banners > li.mobile-configurator-banner > a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #category-banners > li.mobile-configurator-banner img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
}

/* =========================================================
   11. DESKTOP – MĚNY NAD KOŠÍKEM
   Pouze absolutní překryv uvnitř stávajícího wrapperu.
   Nemění rozměry ani rozložení hlavičky.
   ========================================================= */

@media (min-width: 992px) {

    #currency-switcher-custom {
        position: absolute !important;
        top: 3px !important;
        right: 0 !important;
        z-index: 20 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;

        width: auto !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        pointer-events: auto !important;
    }

    #currency-switcher-custom a {
        display: inline-block !important;
        margin: 0 !important;
        padding: 2px 5px !important;

        color: #666 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
        text-decoration: none !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 3px !important;
    }

    #currency-switcher-custom a:hover {
        color: #0087CD !important;
        background: #f3f8fb !important;
    }

    #currency-switcher-custom a.active {
        color: #0087CD !important;
        font-weight: 700 !important;
        background: #eef7fb !important;
    }
}

@media (max-width: 991px) {
    #currency-switcher-custom {
        display: none !important;
    }
}