/* ==========================================================
   VINOTEKAZBIROH.COM
   MASTER CSS
   Shoptet / Waltz
   ========================================================== */


/* ==========================================================
   VINOTÉKA ZBIROH – TYPOGRAFIE / BRAND
   Pouze fonty + barvy. Layout zůstává z VA-PAX masteru.
   ========================================================== */

:root {
    --vz-gold: #c4a75a;
    --vz-beige: #f8f3ec;
    --vz-black: #000000;
    --vz-white: #ffffff;
}

body,
input,
textarea,
select,
button,
.product,
.products,
.price,
.shortDescription,
.description,
.p-detail,
.cart-inner,
.ordering-process {
    font-family: "Lexend", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navigation-in > ul > li > a,
.navigation-in > ul > li > a b,
.category-title,
.welcome h1,
.vp-footer-logo,
.vp-footer-brand-label,
.vp-footer-column-title {
    font-family: "Cinzel", Georgia, serif;
}

/* ==========================================================
   1. ZÁKLAD
   ========================================================== */

h1.header-title > span,
h2.header-title > span,
.header-title {
    display: none;
}

.shortDescription,
.link-like,
a,
.home-btn {
    color: #000;
}

.price.price-final {
    color: #000;
}

.type-index .h4::before,
.type-index .welcome h1::before {
    background-color: #c4a75a;
}

#videoWrapper::before {
    background-color: transparent;
}


/* ==========================================================
   2. COLORBOX / POPUP
   ========================================================== */

#cboxLoadedContent {
    background-color: #000;
}

.colorbox-html-content {
    padding: 10px;
    background-color: #fff;
}

#cboxOverlay {
    background-color: transparent;
}


/* ==========================================================
   3. BUTTONS
   ========================================================== */

.wp-block-button.is-style-primary .wp-block-button__link {
    color: #fff;
    background-color: #424242;
}

.wp-block-button .wp-block-button__link {
    overflow-wrap: normal;
    text-align: center;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: var(--font-size-m);
    line-height: 1.2;
}

#site-agree-button,
.btn.btn-default,
a.btn.btn-default {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
    color: #fff;
}


/* ==========================================================
   4. HEADER
   ========================================================== */

.scrolled .header-navigation {
    background-color: #c4a75a;
}


/* ==========================================================
   LOGO – POUZE DESKTOP
   ========================================================== */

/*
 * DŮLEŽITÉ:
 *
 * Všechny naše vlastní zásahy do .site-name jsou pouze
 * na desktopu.
 *
 * Mobilní Waltz si logo pozicuje sám.
 *
 * Tím odstraníme:
 * - logo uříznuté zleva
 * - logo prosvítající přes mobilní menu
 * - z-index 10000+ na mobilu
 */

@media (min-width: 1001px) {

    .site-name {
        position: absolute !important;

        left: -2px !important;
        top: 0 !important;

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

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        z-index: 10020 !important;

        transform: translateY(6px) !important;
    }


    .site-name a {
        display: block !important;

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

        height: auto !important;

        line-height: 0 !important;

        overflow: visible !important;
    }


    .site-name img {
        display: block !important;

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

        height: auto !important;

        position: relative !important;

        z-index: 10021 !important;
    }


    /*
     * Overflow dovolujeme pouze na desktopu.
     *
     * Na mobilu ho necháváme nativnímu Waltzu.
     */

    .header-top,
    .header-top-wrapper,
    .header-in,
    .header-navigation,
    .navigation-wrapper,
    .navigation-in,
    .navigation-buttons {
        overflow: visible !important;
    }


    /*
     * Sticky desktop header
     */

    .scrolled .site-name {
        top: 50% !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
    }


    .scrolled .site-name img {
        transform: none !important;
    }
}


/* ==========================================================
   5. HOME BUTTON
   ========================================================== */

.home-btn {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: -13%;
    font-size: 15px;
}


/* ==========================================================
   6. STARŠÍ IMAGE PRVKY
   ========================================================== */

.imgg {
    background-image:
        url("https://i.ibb.co/3S6VVtt/slovakia-1758917-340-kopie.png");

    margin: -3% auto 0 22%;

    display: block;

    background-repeat: no-repeat;

    width: 68px;
    height: 42px;
}

img[src="https://cdn.myshoptet.com/usr/www.va-pax.cz/user/banners/yeye.png?5fb285b5"] {
    width: 17%;
    height: 91.2px;

    display: block;

    margin: 0 auto;
}


/* ==========================================================
   7. DESKTOP NAVIGACE
   ========================================================== */

@media (min-width: 1001px) {

    /*
     * Pouze první úroveň navigace.
     */

    .fitted .navigation-in > ul {
        margin-top: -30px;
    }

    .id-1 .fitted .navigation-in > ul {
        margin-top: 0;
    }


    /*
     * Povolení přesahu dropdownu.
     */

    .navigation-in,
    .navigation-in > ul,
    .header-navigation,
    .navigation-buttons {
        overflow: visible !important;
    }


    /* ======================================================
       HLAVNÍ POLOŽKY MENU
       ====================================================== */

    .navigation-in > ul > li {
        position: relative !important;

        top: 27px;

        overflow: visible !important;

        z-index: 30;
    }


    .navigation-in > ul > li > a {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center;

        overflow: visible !important;
    }


    .navigation-in > ul > li > a b {
        position: static !important;

        top: auto !important;

        font-size: 130%;

        color: #fff;

        text-shadow:
            1px 0 0 #000,
            0.54px 0.84px 0 #000,
            -0.42px 0.91px 0 #000,
            -0.99px 0.14px 0 #000,
            -0.65px -0.76px 0 #000,
            0.28px -0.96px 0 #000,
            0.96px -0.28px 0 #000;
    }


    /* ======================================================
       DESKTOP ŠIPKY – PRYČ
       ====================================================== */

    .navigation-in .submenu-arrow {
        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;

        width: 0 !important;
        height: 0 !important;

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

        pointer-events: none !important;
    }


    .navigation-in .submenu-arrow::before,
    .navigation-in .submenu-arrow::after {
        display: none !important;

        content: none !important;
    }


    /* ======================================================
       DESKTOP DROPDOWN
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2 {
        display: block !important;

        position: absolute !important;

        top: calc(100% - 19px) !important;
        left: 50% !important;

        width: max-content !important;

        min-width: 260px !important;
        max-width: 360px !important;

        max-height: min(600px, 68vh) !important;

        margin: 0 !important;

        padding: 10px !important;

        background:
            rgba(255, 255, 255, 0.985) !important;

        border:
            1px solid
            rgba(0, 0, 0, 0.07) !important;

        border-radius: 14px !important;

        box-shadow:
            0 22px 55px rgba(0, 0, 0, 0.13),
            0 5px 16px rgba(0, 0, 0, 0.07) !important;

        list-style: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        white-space: normal !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translate(-50%, 4px)
            scale(0.985) !important;

        transform-origin: top center;

        transition:
            opacity 0.14s ease,
            transform 0.18s ease,
            visibility 0s linear 0.16s !important;

        z-index: 99999 !important;
    }


    /* ======================================================
       DEADZONE FIX
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;

        top: -12px;

        height: 12px;

        display: block;

        background: transparent;

        pointer-events: auto;
    }


    .navigation-in > ul > li:has(> ul.menu-level-2)::after {
        content: "";

        position: absolute;

        left: -20px;
        right: -20px;

        top: 100%;

        height: 24px;

        display: block;

        background: transparent;

        pointer-events: auto;

        z-index: 99998;
    }


    /* ======================================================
       OPEN STATE
       ====================================================== */

    .navigation-in > ul > li:hover > ul.menu-level-2,
    .navigation-in > ul > li:focus-within > ul.menu-level-2 {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translate(-50%, 0)
            scale(1) !important;

        transition:
            opacity 0.14s ease,
            transform 0.18s ease,
            visibility 0s !important;
    }


    /* ======================================================
       DROPDOWN LI
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2 > li {
        display: block !important;

        position: relative !important;

        float: none !important;

        width: 100% !important;

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

        border: 0 !important;

        list-style: none !important;

        background: transparent !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 > li::before,
    .navigation-in > ul > li > ul.menu-level-2 > li::after {
        display: none !important;

        content: none !important;
    }


    /* ======================================================
       DROPDOWN LINKS
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2 > li > a {
        display: block !important;

        position: relative !important;

        float: none !important;

        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding:
            12px
            14px !important;

        border: 0 !important;

        border-radius: 8px !important;

        background: transparent !important;

        color: #111 !important;

        font-size: 14px !important;

        font-weight: 500 !important;

        line-height: 1.35 !important;

        letter-spacing: -0.01em;

        text-align: left !important;

        text-decoration: none !important;

        text-shadow: none !important;

        white-space: normal !important;

        overflow-wrap: anywhere;

        transition:
            background-color 0.14s ease,
            color 0.14s ease,
            padding-left 0.16s ease !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 > li > a b {
        position: static !important;

        top: auto !important;

        display: inline !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: inherit !important;

        font-weight: inherit !important;

        line-height: inherit !important;

        letter-spacing: inherit !important;

        color: inherit !important;

        text-shadow: none !important;
    }


    /* ======================================================
       MODERNÍ HOVER
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2 > li > a:hover,
    .navigation-in > ul > li > ul.menu-level-2 > li > a:focus {
        background: #f3f3f1 !important;

        color: #000 !important;

        padding-left: 18px !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 > li > a::before,
    .navigation-in > ul > li > ul.menu-level-2 > li > a::after {
        display: none !important;

        content: none !important;
    }


    /* ======================================================
       SCROLLBAR
       ====================================================== */

    .navigation-in > ul > li > ul.menu-level-2 {
        scrollbar-width: thin;

        scrollbar-color:
            rgba(0, 0, 0, 0.16)
            transparent;
    }


    .navigation-in > ul > li > ul.menu-level-2::-webkit-scrollbar {
        width: 6px;
    }


    .navigation-in > ul > li > ul.menu-level-2::-webkit-scrollbar-track {
        background: transparent;
    }


    .navigation-in > ul > li > ul.menu-level-2::-webkit-scrollbar-thumb {
        background:
            rgba(0, 0, 0, 0.15);

        border-radius: 20px;

        border:
            2px solid #fff;
    }
}


/* ==========================================================
   8. MOBIL + TABLET NAVIGACE
   ========================================================== */

@media (max-width: 1000px) {

    .home-btn {
        width: 100%;
        margin-top: -17.6%;
    }


    /*
     * Na mobilu NEPOZICUJEME .site-name.
     *
     * Logo necháváme nativnímu Waltzu.
     * Desktopový z-index 10020 sem už vůbec nedosáhne.
     */


    /*
     * Reset desktopových posunů navigace.
     */

    /*
     * SAFE ZONE PRO ZAVÍRACÍ X
     *
     * Mobilní Waltz má zavírací X v pravém horním rohu.
     * První položku menu proto nezačínáme ve stejné výšce.
     * Celý seznam se posune pod X, takže první chevron už
     * nemůže zavírací tlačítko překrývat.
     */
    .navigation-in > ul {
        padding-top: 28px !important;
        box-sizing: border-box !important;
    }

    .navigation-in > ul > li {
        top: auto !important;
    }


    .navigation-in ul li {
        position: relative !important;
    }


    .navigation-in ul li > a {
        position: relative !important;
    }


    .navigation-in ul li a b {
        position: static !important;

        top: auto !important;

        font-size: 115%;

        color: #000 !important;

        text-shadow: none !important;
    }


    /*
     * Shoptet používá .ext pro položky se submenu.
     * Necháme vpravo prostor pro chevron.
     */

    .navigation-in ul li.ext > a {
        padding-right: 58px !important;
    }


    /* ======================================================
       MOBILNÍ CHEVRON
       ====================================================== */

    /*
     * DŮLEŽITÉ:
     *
     * Aktuální Shoptet struktura:
     *
     * <li>
     *   <a>
     *     <b>PAX</b>
     *     <span class="submenu-arrow"></span>
     *   </a>
     * </li>
     *
     * Proto musí být:
     *
     * li > a > .submenu-arrow
     *
     * nikoliv původní:
     *
     * li > .submenu-arrow
     */

    .navigation-in ul li > a > .submenu-arrow {
        display: flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: absolute !important;

        right: 14px !important;

        top: 50% !important;

        width: 34px !important;

        height: 44px !important;

        margin: 0 !important;

        padding: 0 !important;

        align-items: center !important;

        justify-content: center !important;

        background: transparent !important;

        border: 0 !important;

        color: #111 !important;

        font-size: 0 !important;

        line-height: 1 !important;

        text-shadow: none !important;

        transform: translateY(-50%) !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        z-index: 5 !important;

        -webkit-tap-highlight-color: transparent;
    }


    /*
     * Zrušení případné původní Shoptet ikony.
     */

    .navigation-in ul li > a > .submenu-arrow::before {
        display: none !important;

        content: none !important;
    }


    /*
     * PAX-style chevron doprava:
     *
     *       >
     */

    .navigation-in ul li > a > .submenu-arrow::after {
        content: "" !important;

        display: block !important;

        width: 8px !important;

        height: 8px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-top:
            1.5px solid
            currentColor !important;

        border-right:
            1.5px solid
            currentColor !important;

        transform:
            rotate(45deg) !important;

        transform-origin:
            center center !important;

        transition:
            transform 0.16s ease !important;
    }


    /*
     * Neotáčíme ho dolů.
     *
     * Zůstává pořád doprava jako navigační
     * chevron.
     */

    .navigation-in ul li.expanded > a > .submenu-arrow::after,
    .navigation-in ul li.open > a > .submenu-arrow::after,
    .navigation-in ul li.active > a > .submenu-arrow::after,
    .navigation-in ul li.menu-expanded > a > .submenu-arrow::after,
    .navigation-in ul li > a > .submenu-arrow.active::after {
        transform:
            rotate(45deg) !important;
    }


    /*
     * Jemná odezva při tapnutí.
     */

    .navigation-in ul li > a > .submenu-arrow:active {
        opacity: 0.55 !important;
    }


    /* ======================================================
       MOBILE SUBMENU
       ====================================================== */

    .navigation-in ul.menu-level-2 {
        position: relative !important;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        max-height: none !important;

        margin: 0 !important;

        padding:
            4px
            0
            9px !important;

        background:
            rgba(0, 0, 0, 0.035) !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

        overflow: visible !important;

        white-space: normal !important;
    }


    .navigation-in ul.menu-level-2 > li {
        margin: 0 !important;

        padding: 0 !important;
    }


    .navigation-in ul.menu-level-2 > li > a {
        display: block !important;

        padding:
            11px
            22px
            11px
            30px !important;

        color: #222 !important;

        font-size: 14px !important;

        line-height: 1.4 !important;

        text-shadow: none !important;

        background: transparent !important;
    }


    .navigation-in ul.menu-level-2 > li > a b {
        position: static !important;

        top: auto !important;

        color: inherit !important;

        font-size: inherit !important;

        text-shadow: none !important;
    }


    .navigation-in ul.menu-level-2 > li > a:active {
        background:
            rgba(0, 0, 0, 0.055) !important;
    }


    /*
     * Sticky mobilní header.
     *
     * Logo zde záměrně neřešíme.
     */

    .scrolled .header-navigation {
        background:
            rgba(155, 155, 155, 0.5);

        height: auto;
    }


    img[src="https://cdn.myshoptet.com/usr/www.va-pax.cz/user/banners/yeye.png?5fb285b5"] {
        width: 50%;

        height: auto;
    }
}


/* ==========================================================
   9. MENŠÍ MOBILY
   ========================================================== */

@media (max-width: 650px) {

    .home-btn {
        margin-top: -36%;
    }
}


/* ==========================================================
   10. MODERN SECTION
   ========================================================== */

.modern-section {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    background-color: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, 0.1);
}


.text-content {
    max-width: 50%;

    padding-right: 20px;
}


.text-content h2 {
    font-size: 24px;

    color: #333;

    margin-bottom: 20px;
}


.text-content p {
    font-size: 18px;

    color: #555;

    line-height: 1.6;

    margin-bottom: 15px;
}


.text-content ul {
    list-style: none;

    padding: 0;
}


.text-content ul li strong {
    color: #333;
}


.contact-link {
    display: inline-block;

    padding:
        10px
        20px;

    background-color: #007bff;

    color: #fff;

    text-decoration: none;

    border-radius: 4px;

    transition:
        background-color
        0.3s ease;
}


.contact-link:hover {
    background-color: #0056b3;
}


/* ==========================================================
   11. CUSTOM SECTION
   ========================================================== */

.custom-section {
    max-width: 1200px;

    margin: 0 auto;

    padding:
        40px
        20px;

    background-color: #fff;

    border-radius: 12px;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.1);
}


.custom-section h1,
.custom-section h2 {
    color: #333;

    text-align: center;

    margin-bottom: 25px;
}


.custom-section h1 {
    font-size: 32px;

    text-transform: uppercase;

    font-weight: 700;
}


.custom-section h2 {
    font-size: 28px;
}


.custom-section p {
    font-size: 18px;

    color: #555;

    line-height: 1.8;

    text-align: center;

    max-width: 900px;

    margin:
        0
        auto
        20px;
}


.custom-section .highlight {
    font-weight: 400;

    color: #c4a75a;

    margin-bottom: 20px;
}


.custom-section .custom-link {
    display: block;

    padding:
        10px
        20px;

    background-color: #c4a75a;

    color: #fff;

    border-radius: 8px;

    transition:
        background-color
        0.3s ease;

    width: fit-content;

    margin:
        20px
        auto;

    text-align: center;
}


.custom-section .custom-link:hover {
    background-color: #a98d45;
}


/* ==========================================================
   12. BUBBLES
   ========================================================== */

.bubbles-section-custom {
    display: flex;

    justify-content: space-around;

    align-items: flex-start;

    margin-top: 40px;

    gap: 40px;
}


.bubble-custom {
    text-align: center;

    width: 30%;
}


.bubble-custom img {
    width: 100%;

    max-width: 150px;

    height: auto;

    border-radius: 50%;

    margin-bottom: 15px;
}


.bubble-custom p {
    font-size: 16px;

    color: #333;

    font-weight: 400;

    text-transform: uppercase;

    text-align: center;

    line-height: 1.5;

    max-width: 90%;

    margin: 0 auto;
}


/* ==========================================================
   13. CUSTOM FOOTER
   ========================================================== */

.custom-footer-section {
    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;
}


.custom-footer-section a {
    display: inline-block;

    margin: 10px 0;

    padding:
        12px
        14px;

    background-color: #c4a75a;

    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    text-align: center;

    width: 100%;

    max-width: 170px;

    box-sizing: border-box;
}


.custom-footer-section a:hover,
.custom-footer-section a:first-child:hover {
    background-color: #a98d45;
}


.custom-footer-section a:first-child {
    background-color: #c4a75a;
}


/* ==========================================================
   14. PAX FEATURE BLOCK
   ========================================================== */

.pax-feature-block {
    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: center;

    gap: 40px;

    max-width: 1200px;

    margin:
        60px
        auto;

    padding:
        40px
        20px;

    box-sizing: border-box;
}


.pax-feature-block.reverse {
    flex-direction: row-reverse;
}


.pax-text {
    flex: 1;

    max-width: 50%;

    padding:
        0
        20px;

    box-sizing: border-box;
}


.pax-text h2 {
    font-size: 2.6rem;

    font-weight: 800;

    margin-bottom: 15px;

    color: #000;
}


.pax-text p {
    font-size: 1.8rem;

    line-height: 1.9;

    color: #333;
}


.pax-media {
    flex: 1;

    max-width: 50%;

    box-sizing: border-box;
}


.pax-media video {
    width: 100%;

    height: auto;

    border-radius: 16px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.1);

    display: block;

    object-fit: cover;
}


/* ==========================================================
   15. PAX HERO
   ========================================================== */

.pax-hero {
    width: 100%;

    max-width: 1600px;

    margin:
        0
        auto
        60px;

    padding:
        0
        20px;

    box-sizing: border-box;

    text-align: center;
}


.pax-hero video {
    width: 100%;

    height: auto;

    border-radius: 16px;

    display: block;

    object-fit: cover;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.1);
}


.pax-hero h1 {
    margin-top: 25px;

    font-size: 3rem;

    font-weight: 800;
}


.pax-hero p {
    font-size: 1.8rem;

    line-height: 1.9;

    max-width: 900px;

    margin:
        20px
        auto
        0;

    color: #333;
}


/* ==========================================================
   16. RESPONSIVE CONTENT
   ========================================================== */

@media (max-width: 900px) {

    .pax-feature-block {
        flex-direction:
            column !important;

        gap: 30px;

        padding:
            30px
            15px;

        text-align: center;
    }


    .pax-text,
    .pax-media {
        max-width: 100%;

        padding: 0;
    }


    .pax-text h2 {
        font-size: 2.2rem;
    }


    .pax-text p {
        font-size: 1.6rem;

        line-height: 1.8;
    }


    .pax-hero h1 {
        font-size: 2.2rem;
    }


    .pax-hero p {
        font-size: 1.6rem;
    }
}


/* ==========================================================
   17. TABLET
   ========================================================== */

@media (max-width: 768px) {

    .modern-section {
        flex-direction: column;

        align-items: center;
    }


    .text-content {
        max-width: 100%;

        padding-right: 0;
    }


    .gallery {
        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;
    }


    .gallery-item {
        width: 45%;
    }


    .bubbles-section-custom {
        flex-direction: column;

        align-items: center;

        gap: 20px;
    }


    .bubble-custom {
        width: 80%;
    }
}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .gallery-item {
        width: 100%;
    }


    .text-content h2 {
        font-size: 20px;
    }


    .text-content p,
    .text-content ul li {
        font-size: 16px;
    }


    .contact-link {
        margin-bottom: 20px;
    }


    .bubble-custom {
        width: 100%;
    }


    .custom-section h1,
    .custom-section h2 {
        font-size: 24px;
    }


    .custom-section p {
        font-size: 16px;
    }


    .custom-footer-section a {
        width: 100%;

        padding:
            10px
            20px;
    }


    .pax-text h2 {
        font-size: 2rem;
    }


    .pax-text p {
        font-size: 1.5rem;
    }
}

/* ==========================================================
   19. VINOTÉKA ZBIROH – MINIMAL FOOTER
   ========================================================== */

/*
 * Původní Shoptet "Magazín" ve footeru schováme.
 * Vlastní Vinotéka Zbiroh footer se vloží před systémový spodní řádek.
 */
#footer .custom-footer {
    display: none !important;
}

#footer {
    margin-top: 0 !important;
    padding: 0 !important;

    background: #f8f3ec !important;
    color: #151515 !important;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.09) !important;

    font-size: 14px;
}


/* ======================================================
   HLAVNÍ VLASTNÍ FOOTER
   ====================================================== */

.vp-footer-shell {
    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    padding:
        58px
        32px
        30px;

    box-sizing: border-box;
}


.vp-footer-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.6fr)
        repeat(3, minmax(140px, 1fr));

    gap:
        42px
        56px;

    align-items: start;
}


/* ======================================================
   BRAND
   ====================================================== */

.vp-footer-brand {
    max-width: 330px;
}


.vp-footer-logo {
    display: inline-block;

    margin: 0 0 13px;

    color: #111 !important;

    font-size: 22px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;

    text-decoration: none !important;
}


.vp-footer-brand-label {
    margin: 0 0 10px;

    color: #111;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.vp-footer-brand-text {
    margin: 0;

    max-width: 280px;

    color: rgba(17, 17, 17, 0.58);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;
}


/* ======================================================
   SLOUPCE
   ====================================================== */

.vp-footer-column-title {
    display: block;

    margin: 1px 0 17px;

    color: rgba(17, 17, 17, 0.43);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.vp-footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.vp-footer-links a {
    position: relative;

    display: inline-block;

    padding: 0;

    color: #161616 !important;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.45;

    text-decoration: none !important;

    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}


.vp-footer-links a:hover,
.vp-footer-links a:focus {
    color: #161616 !important;

    opacity: 0.58;

    text-decoration: none !important;

    transform: translateX(2px);
}


/* ======================================================
   SPODNÍ META ŘÁDEK VLASTNÍHO FOOTERU
   ====================================================== */

.vp-footer-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 46px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.075);

    color: rgba(17, 17, 17, 0.47);

    font-size: 11px;

    line-height: 1.5;
}


.vp-footer-meta-left,
.vp-footer-meta-right {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;
}


.vp-footer-meta a {
    color: rgba(17, 17, 17, 0.58) !important;

    font-weight: 500;

    text-decoration: none !important;

    transition: opacity 0.16s ease;
}


.vp-footer-meta a:hover,
.vp-footer-meta a:focus {
    opacity: 0.58;

    text-decoration: none !important;
}


.vp-footer-dot::before {
    content: "·";

    margin:
        0
        2px;

    color: rgba(17, 17, 17, 0.26);
}


/* ======================================================
   SHOPTET SYSTÉMOVÝ SPODNÍ ŘÁDEK
   ====================================================== */

#footer .footer-bottom {
    margin: 0 !important;

    padding:
        17px
        0
        20px !important;

    background: transparent !important;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.06) !important;

    color:
        rgba(17, 17, 17, 0.35) !important;

    font-size: 10px !important;

    line-height: 1.5 !important;
}


#footer .footer-bottom .container {
    max-width: 1320px !important;

    padding-left: 32px !important;
    padding-right: 32px !important;

    box-sizing: border-box !important;
}


#footer .footer-bottom a,
#footer #signature a {
    color:
        rgba(17, 17, 17, 0.42) !important;

    text-decoration: none !important;
}


#footer .footer-bottom a:hover,
#footer #signature a:hover {
    color:
        rgba(17, 17, 17, 0.72) !important;

    text-decoration: none !important;
}


/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 900px) {

    .vp-footer-shell {
        padding:
            46px
            24px
            26px;
    }


    .vp-footer-grid {
        grid-template-columns:
            minmax(240px, 1.4fr)
            1fr;

        gap:
            38px
            42px;
    }


    .vp-footer-brand {
        grid-row: span 2;
    }


    .vp-footer-meta {
        margin-top: 38px;
    }


    #footer .footer-bottom .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 600px) {

    .vp-footer-shell {
        padding:
            38px
            20px
            23px;
    }


    .vp-footer-grid {
        grid-template-columns: 1fr;

        gap: 29px;
    }


    .vp-footer-brand {
        grid-row: auto;

        max-width: 100%;
    }


    .vp-footer-brand-text {
        max-width: 310px;
    }


    .vp-footer-column-title {
        margin-bottom: 13px;
    }


    .vp-footer-links {
        gap: 9px;
    }


    .vp-footer-meta {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 32px;

        padding-top: 19px;

        gap: 8px;
    }


    .vp-footer-meta-left,
    .vp-footer-meta-right {
        gap: 5px;
    }


    #footer .footer-bottom {
        padding:
            14px
            0
            18px !important;
    }


    #footer .footer-bottom .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    #footer #signature {
        float: none !important;

        margin:
            5px
            0
            0 !important;
    }
}

/* ==========================================================
   20. FOOTER COPYRIGHT – STŘED + VĚTŠÍ
   ========================================================== */

#footer .footer-bottom {
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

#footer .footer-bottom .container {
    text-align: center !important;
}

#footer .footer-bottom .footer-bottom-wrapper,
#footer .footer-bottom .copyright,
#footer .footer-bottom .system-footer,
#footer #signature {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

#footer #signature {
    margin-top: 6px !important;
}

#footer .footer-bottom a,
#footer #signature a {
    font-size: 12px !important;
}

/* ==========================================================
   21. SKRÝT SHOPTET BRANDING
   ========================================================== */

/* "Vytvořeno v Shoptetu" / Shoptet signature */
#footer #signature,
#footer .signature,
#footer .shoptet-signature,
#footer [class*="signature"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================
   22. FOOTER NO-FLASH FIX
   ========================================================== */

[data-vp-footer]:not(.vp-footer-mounted) {
    display: none !important;
}

[data-vp-footer].vp-footer-mounted {
    display: block !important;
}

/* ==========================================================
   23. PAX PŘÍSLUŠENSTVÍ – "KOMPATIBILNÍ S" DROPDOWN
   Nahrazuje obrázkové podkategorie pouze na hlavní stránce
   /paxprislusenstvi/
   ========================================================== */

/*
 * Původní Shoptet podkategorie necháváme v DOM kvůli
 * odkazům a struktuře, ale vizuálně je schováme.
 */
body.in-paxprislusenstvi .category-top > ul.subcategories.with-image {
    display: none !important;
}


/* vlastní selector */
.vp-compatible-selector {
    position: relative;
    z-index: 60;

    width: min(100%, 420px);

    margin:
        24px
        0
        42px;

    font-family:
        "Lexend",
        Arial,
        sans-serif;
}


/* hlavní tlačítko */
.vp-compatible-trigger {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 72px;

    padding:
        0
        26px
        0
        28px;

    background: #fff;

    border:
        2px solid
        #111;

    border-radius: 20px;

    color: #111;

    cursor: pointer;

    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;

    text-align: left;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


.vp-compatible-trigger:hover {
    background: #fafafa;
}


.vp-compatible-trigger:focus-visible {
    outline:
        2px solid
        #c4a75a;

    outline-offset: 3px;
}


/* vlastní jemný chevron */
.vp-compatible-chevron {
    position: relative;

    width: 15px;
    height: 15px;

    flex:
        0
        0
        15px;

    margin-left: 24px;

    transition:
        transform 0.2s ease;
}


.vp-compatible-chevron::before,
.vp-compatible-chevron::after {
    content: "";

    position: absolute;
    top: 6px;

    width: 9px;
    height: 2px;

    background: #111;

    border-radius: 2px;
}


.vp-compatible-chevron::before {
    left: 0;

    transform: rotate(45deg);
}


.vp-compatible-chevron::after {
    right: 0;

    transform: rotate(-45deg);
}


.vp-compatible-selector.is-open
.vp-compatible-chevron {
    transform: rotate(180deg);
}


/* rozbalený panel */
.vp-compatible-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;

    width: 100%;

    margin: 0;
    padding:
        19px
        0;

    list-style: none;

    background: #fff;

    border:
        2px solid
        #111;

    border-radius: 20px;

    box-shadow:
        0
        18px
        42px
        rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-8px);

    transform-origin:
        top center;

    transition:
        opacity 0.18s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


.vp-compatible-selector.is-open
.vp-compatible-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0);
}


/* položky */
.vp-compatible-menu li {
    margin: 0;
    padding: 0;
}


.vp-compatible-menu a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;

    padding:
        0
        32px;

    color: #111 !important;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;

    text-decoration: none !important;

    transition:
        background-color 0.15s ease,
        padding-left 0.18s ease;
}


.vp-compatible-menu a:hover,
.vp-compatible-menu a:focus-visible {
    background:
        #f5f5f2;

    padding-left:
        36px;

    color: #111 !important;

    text-decoration: none !important;
}


.vp-compatible-menu a:focus-visible {
    outline: none;
}


/* "Všechny" jemně oddělené */
.vp-compatible-menu li:first-child a {
    font-weight: 700;
}


.vp-compatible-menu li:first-child {
    margin-bottom: 7px;
    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.09);
}


/* otevřený panel musí být nad produkty */
body.in-paxprislusenstvi .category-top {
    position: relative;
    z-index: 5;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 700px) {

    .vp-compatible-selector {
        width: 100%;

        margin:
            20px
            0
            32px;
    }


    .vp-compatible-trigger {
        min-height: 66px;

        padding:
            0
            22px;

        border-radius: 18px;

        font-size: 17px;
    }


    .vp-compatible-menu {
        top:
            calc(100% + 8px);

        padding:
            15px
            0;

        border-radius: 18px;

        box-shadow:
            0
            16px
            34px
            rgba(0, 0, 0, 0.09);
    }


    .vp-compatible-menu a {
        min-height: 54px;

        padding:
            0
            26px;

        font-size: 17px;
    }


    .vp-compatible-menu a:hover,
    .vp-compatible-menu a:focus-visible {
        padding-left:
            30px;
    }
}


/* menší telefony */
@media (max-width: 420px) {

    .vp-compatible-trigger {
        min-height: 62px;

        padding:
            0
            20px;

        font-size: 16px;
    }


    .vp-compatible-menu a {
        min-height: 52px;

        padding:
            0
            24px;

        font-size: 16px;
    }
}

/* ==========================================================
   24. PŘESUNUTO ZE SHOPTET INLINE HTML DO GITHUB CSS
   ========================================================== */

:is(.vp-accessory-image, .vp-acc-img) {
    height: 260px !important;
    padding: 10px !important;
}

:is(.vp-accessory-image, .vp-acc-img) img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.5) !important;
}

.shp-tabs-row.responsive-nav {
    display: none !important;
}

.basic-description > p:first-child {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

@media (max-width: 700px) {
    :is(.vp-accessories-rail, .vp-acc-rail) {
        padding-inline:
            calc((100% - min(80vw, 285px)) / 2) !important;
    }

    :is(.vp-accessory-card, .vp-acc-card) {
        scroll-snap-align: center !important;
    }

    :is(.vp-accessory-image, .vp-acc-img) {
        height: 270px !important;
    }
}

/* ==========================================================
   25. PAX COMPATIBLE DROPDOWN V2
   MENŠÍ + VŠECHNY KATEGORIE + RESPONZIVNÍ
   ========================================================== */

.vp-compatible-selector {
    width: 310px !important;
    max-width: 100% !important;

    margin:
        16px
        0
        30px !important;
}

.vp-compatible-trigger {
    min-height: 52px !important;

    padding:
        0
        18px
        0
        20px !important;

    border-width: 1.5px !important;
    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}

.vp-compatible-chevron {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
    margin-left: 18px !important;
}

.vp-compatible-chevron::before,
.vp-compatible-chevron::after {
    top: 5px !important;
    width: 7px !important;
    height: 1.5px !important;
}

.vp-compatible-menu {
    top: calc(100% + 7px) !important;

    padding:
        10px
        0 !important;

    border-width: 1.5px !important;
    border-radius: 14px !important;

    box-shadow:
        0
        12px
        30px
        rgba(0, 0, 0, 0.07) !important;
}

.vp-compatible-menu a {
    min-height: 44px !important;

    padding:
        0
        20px !important;

    font-size: 15px !important;
    font-weight: 500 !important;
}

.vp-compatible-menu a:hover,
.vp-compatible-menu a:focus-visible {
    padding-left: 23px !important;
}

.vp-compatible-menu a[aria-current="page"] {
    background: #f4f4f1 !important;
    font-weight: 700 !important;
}

.vp-compatible-menu a[aria-current="page"]::after {
    content: "";

    width: 6px;
    height: 6px;

    margin-left: auto;

    background: #c4a75a;

    border-radius: 50%;
}

.vp-compatible-menu li:first-child {
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
}

@media (max-width: 700px) {

    .vp-compatible-selector {
        width: min(100%, 340px) !important;

        margin:
            15px
            0
            27px !important;
    }

    .vp-compatible-trigger {
        min-height: 56px !important;
        padding: 0 19px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
    }

    .vp-compatible-menu {
        border-radius: 15px !important;
    }

    .vp-compatible-menu a {
        min-height: 47px !important;
        padding: 0 20px !important;
        font-size: 16px !important;
    }

    .vp-compatible-menu a:hover,
    .vp-compatible-menu a:focus-visible {
        padding-left: 23px !important;
    }
}

@media (max-width: 420px) {

    .vp-compatible-selector {
        width: 100% !important;
    }

    .vp-compatible-trigger {
        min-height: 54px !important;
        font-size: 15px !important;
    }

    .vp-compatible-menu a {
        min-height: 45px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================
   26. PAX DROPDOWN V3
   KOMPAKTNĚJŠÍ + HEADER MENU VŽDY NAD SELECTOREM
   ========================================================== */

/*
 * Selector má být nad produkty, ale nikdy nad hlavním
 * rozbalovacím menu v headeru.
 */
.vp-compatible-selector {
    z-index: 20 !important;
    width: 280px !important;
}

body.in-paxprislusenstvi .category-top,
.category-top {
    z-index: 2 !important;
}

/*
 * Hlavní navigace musí být vždy úplně nahoře.
 */
#header,
#header .navigation-wrapper,
#navigation,
#navigation .navigation-in,
#navigation .menu-level-2 {
    z-index: 500 !important;
}


/* ======================================================
   MOBILE – kratší horizontálně
   ====================================================== */

@media (max-width: 700px) {

    .vp-compatible-selector {
        width: 250px !important;
        max-width: calc(100vw - 40px) !important;
    }

    .vp-compatible-trigger {
        width: 100% !important;

        min-height: 52px !important;

        padding:
            0
            17px !important;
    }

    .vp-compatible-menu {
        width: 100% !important;
    }
}


@media (max-width: 360px) {

    .vp-compatible-selector {
        width: 230px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ==========================================================
   27. DESKTOP MAIN DROPDOWN V2
   OKAMŽITÉ OTEVŘENÍ + CLICK AREA FIX PRO MENŠÍ NOTEBOOKY
   ========================================================== */

@media (min-width: 1001px) {

    /*
     * Starý Shoptet/jQuery kód používá slideDown / slideUp,
     * který zapisuje inline height a overflow.
     *
     * Tímto ho vizuálně úplně neutralizujeme.
     */
    .navigation-in > ul > li > ul.menu-level-2 {
        display: block !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 10px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        /*
         * Bez scale animace – dropdown se zobrazí celý
         * najednou a pouze velmi jemně fade-in.
         */
        transform:
            translate(-50%, 0) !important;

        transition:
            opacity 0.08s ease,
            visibility 0s linear 0.09s !important;

        will-change: opacity;
    }


    .navigation-in > ul > li:hover > ul.menu-level-2,
    .navigation-in > ul > li:focus-within > ul.menu-level-2 {
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translate(-50%, 0) !important;

        transition:
            opacity 0.08s ease,
            visibility 0s !important;
    }


    /*
     * DŮLEŽITÉ:
     * každý top-level <li> dříve vytvářel stacking context
     * se stejným z-indexem. Na menších displejích tak mohl
     * sousední menu item překrýt horní část dropdownu.
     */
    .navigation-in > ul > li {
        z-index: auto !important;
    }


    /*
     * Pouze právě aktivní položka s otevřeným dropdownem
     * dostane vysoký stacking order.
     */
    .navigation-in > ul > li:hover,
    .navigation-in > ul > li:focus-within {
        z-index: 1000 !important;
    }


    .navigation-in > ul > li:hover > a,
    .navigation-in > ul > li:focus-within > a {
        position: relative !important;
        z-index: 2 !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 {
        z-index: 1001 !important;
    }


    /*
     * Celá plocha každého dropdown odkazu je skutečně
     * klikací – nejen samotný text.
     */
    .navigation-in > ul > li > ul.menu-level-2 > li {
        pointer-events: auto !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 > li > a {
        display: flex !important;

        align-items: center !important;

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

        box-sizing: border-box !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 3 !important;
    }


    /*
     * Transparentní hover bridge nesmí nikdy přikrýt
     * samotné položky dropdownu.
     */
    .navigation-in > ul > li:has(> ul.menu-level-2)::after {
        z-index: 1 !important;
    }


    /*
     * PAX + PAX příslušenství mají krátké seznamy.
     * Na notebooku budou kompaktní a stabilní.
     */
    .navigation-in > ul > li.menu-item-673 > ul.menu-level-2,
    .navigation-in > ul > li.menu-item-691 > ul.menu-level-2 {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;

        max-height: none !important;
    }
}


/* ======================================================
   MENŠÍ DESKTOP / NOTEBOOK
   ====================================================== */

@media (min-width: 1001px) and (max-width: 1366px) {

    .navigation-in > ul > li.menu-item-673 > ul.menu-level-2,
    .navigation-in > ul > li.menu-item-691 > ul.menu-level-2 {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }


    .navigation-in > ul > li > ul.menu-level-2 > li > a {
        min-height: 40px !important;

        padding:
            10px
            13px !important;
    }
}