/*** ------- HEADER ------- ***/

.dropdown-main-categories {
    flex-direction: column;
}

header .main-nav > * {
    display: none;
}

header .main-nav .logo {
    display: block;
}

header nav.main-submenu {
    display: none;
}

header .main-nav .toggle-menu {
    display: flex;
}

.dropdown-clinic {
    top: 120px;
    gap: 60px;
    flex-direction: column;
}

    .dropdown-clinic .close-dropdown {
        top: 40px;
    }

    .dropdown-clinic-banner {
        width: 100%;
    }

    header .dropdown-clinic .mobile-tabs {
        display: flex;
    }

    .dropdown-main-menu.tab-target, .tab-target {
        display: none;
    }
    .dropdown-main-menu.tab-target.active, .tab-target.active {
        display: flex;
    }


/*** ------- HERO SLIDER ------- ***/


.hero-slider {
    padding: 0 15px;
}

    .hero-slider .hero-slider-text {
        padding-left: 15px;
        padding-right: 15px;

        gap: 50px;
        width: 100%;
    }

        .hero-slider .hero-slider-text h2 {
            gap: 20px;
        }

    .hero-slider nav {
        left: calc(50% - 53px);
        z-index: 10;
    }

    .hero-slider .hero-slider-media {
        margin: 0 -15px 0 calc(-100% - 15px);
        width: calc(100% + 30px);
    }

    .hero-slider .hero-slider-notes {
        display: none;
    }


/*** ------- ARCHIVE ------- ***/


.archive-layout {
    flex-direction: column;
}

.archive-sidebar {
    width: 100%;
    position: static;

    display: none;
}
.archive-sidebar.open {
    display: block;
}

.archive-filters-toggle {
    display: flex;
}

.archive-sidebar .sidebar-section {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
}

    .sidebar-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 10px;
    }

        .sidebar-categories li a {
            padding: 5px 0;
        }

        .sidebar-categories ul {
            padding: 0 0 0 10px;
        }

.archive-header h1 {
    font-size: 26px;
}


/*** ------- SINGLE PRODUCT ------- ***/


.product-single {
    flex-direction: column;
    padding: 20px 15px 40px;
    gap: 30px;
}

.product-gallery {
    width: 100%;
    max-width: 100%;
}

.product-info {
    max-width: 100%;
    width: 100%;
}

    .product-gallery-main {
        /*aspect-ratio: 1 / 0.7;*/
    }

    .product-gallery-thumbs .product-thumb {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        height: 60px;
    }

h1.product-title {
    font-size: 20px;
}

.product-delivery-banner {
    width: auto;
    align-self: flex-start;
}

.product-price-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

    .product-price-buy .product-price {
        gap: 10px;
    }

.product-highlights {
    gap: 10px;
}

    .product-highlight {
        width: auto;
        flex: 1;
    }

.product-description {
    padding: 0 15px 40px;
}


/*** ------- CONTACTS ------- ***/


.contacts-block {
    flex-wrap: wrap;
}

    .contacts-block .contacts-map {
        width: 100%;
        height: 500px;
        min-width: 200px;
    }

    .contacts-block .contacts-info {
        padding: 60px 15px;
        gap: 15px;
    }

        .contacts-block .contacts-info .contacts-info-blocks {
            gap: 10px;

            flex-direction: column;
        }


/*** ------- FOOTER ------- ***/


/*** ------- CART PAGE ------- ***/


.cart-layout {
    flex-direction: column;
}

    .cart-summary-column {
        width: 100%;
    }

    .cart-summary {
        position: static;
    }

.cart-item-image {
    width: 100px;
    height: 100px;
}


/*** ------- CHECKOUT PAGE ------- ***/


.checkout-layout {
    flex-direction: column;
}

    .checkout-summary-column {
        width: 100%;
    }

    .checkout-summary {
        position: static;
    }


/*** ------- MY ACCOUNT ------- ***/


.account-layout {
    flex-direction: column;
}

    .account-sidebar {
        width: 100%;
    }

    .account-nav {
        position: static;
    }

    .account-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

        .account-nav-item {
            flex: 0 0 auto;
        }

        .account-nav-item a {
            padding: 8px 14px;
            border: 1px solid #E0E7F6;
            border-radius: 20px;
            gap: 8px;
            font-size: 13px;
        }

        .account-nav-item.is-active a {
            border-color: #4768A9;
        }

        .account-nav-item:last-child {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

.account-dashboard-cards {
    grid-template-columns: 1fr;
}

.account-address-cards {
    grid-template-columns: 1fr;
}


footer {
    flex-direction: column-reverse;
}