:root {
    --primary-color: #96e2fe;
    --btn-border-radius: 8px;
}

.no-overflow {
    overflow: visible;
}

.fake-header {
    height:  70px;
}

.page-footer {
    box-shadow: 0 0 1rem #f1f1f1;
}

@media (max-width: 768px) {
    .fake-header {
        height: calc(70px + 44px);
    }
}

.city-selector-dropdown {
    position: relative;
    padding: .5rem 1rem;
}

.city-selector-dropdown--mobile {
    display: none;
    background-color: #fafafa;
}

@media (max-width: 768px) {
    .city-selector-dropdown--mobile {
        display: block;
    }
    .top-block .city-selector-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        padding: 0;
        width: 100%;
    }
    .top-block .city-selector__button {
        border-radius: 0;
        padding: 10px 20px;
    }
    .top-block .city-selector__dropdown {
        top: 100%;
        border-radius: 0 0 8px;
    }
}

.city-selector {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.city-selector__button {
    display: flex;
    align-items: center;
    background: #96e2fe;
    border-radius: var(--btn-border-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.city-selector__button svg:first-child {
    margin-right: 8px;
}

.city-selector__current {
    flex-grow: 1;
    color: #1b2828;
    font-size: 16px;
}

.city-selector__arrow {
    transition: transform 0.3s ease;
    margin-left: .3rem;
}

.city-selector__button.active .city-selector__arrow {
    transform: rotate(180deg);
}

.city-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: var(--btn-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    padding: .5rem 1rem;
}

.city-selector__dropdown.active {
    display: block;
}

.city-selector__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.city-selector__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0;
}

.city-selector__item {
    display: block;
    font-size: 1rem;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: left;
}

.city-selector__item:hover {
    background: #96e2fe;
    color: #000;
}

@media (max-width: 768px) {
    .city-selector__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .city-selector__list {
        grid-template-columns: 1fr;
    }
}

.description.flex {
    display: flex;
    align-items: center;
    gap: .5rem;
}

a.index-sections-item-link,
a.index-sections-item-link img {
    border-radius: var(--btn-border-radius);
    object-fit: cover;
}

/* catalog */

a.catalog-item-photo-link,
a.catalog-item-photo-link img {
    border-radius: var(--btn-border-radius);
    object-fit: cover;
}

.product-card .card-body {
    margin-top: .5rem;
}

.product-card .card-body .card-title {
    color: #000;
    font-weight: 500;
}

.product-card .card-body .card-text {
    color: #1b2828;
}

.product-card .card-kbzu {
    float: left;
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}

.product-card .card-kbzu .card-info-kbzu-item-count {
    font-size: 1rem;
}

.product-card .card-kbzu .card-info-kbzu-item-name {
    font-size: .8rem;
    color: #3b3b3b;
}

/* mainpage */

section.instagram-box {
    padding: 2rem;
    padding-top: 0;
    margin-bottom: 2rem;
    border-radius: var(--btn-border-radius);
}

section.instagram-box img {
    border-radius: var(--btn-border-radius);
}

@media (max-width: 769px)
{
    section.instagram-box,
    section.instagram-box img {
        border-radius: 0;
        padding: 0;
    }
}

main.page-content.page-content-vn {
    margin-top: 0;
    padding-top: 2rem;
}

.delivery-slide {
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    background-color: #fafafa;
}

.page-header-cart.page-header-cart--small {
    border-left: 0;
}

.page-content {
    background-color: #fafafa;
}

.page-footer__copyright .link {
    color: #000;
}

.page-footer__copyright .link:hover {
    color: #96e2fe;
}

.delivery-info {
    overflow: auto;
}

@media (max-width: 650px) {
    .delivery-slide__content {
        height: 210px;
    }
}

/* cookie */

.cookie_notice {
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    left: 0px;
    transform: translateX(-50%);
    margin: 0px -50% 15px 50%;
    padding: 12px calc(2rem + 20px) 12px 2rem;

    font-size: 12px;
    font-family: Verdana, sans-serif;
    font-weight: 500;
    text-align: left;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.95);
    pointer-events: auto;
    max-width: 1280px;
    box-shadow: rgba(6, 5, 50, 0.1) 0px 6px 20px;
}

.cookie_notice .cookie_notice--text {
    margin: 0;
}

.cookie_notice .cookie_notice--text a {
    color: #000
}
.cookie_notice .cookie_notice--text a:hover {
    color: #5b5b5b;
    text-decoration: underline;
}
/* Оформление кнопок */
.cookie_notice--actions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 100%;
}
.cookie_notice--actions .cookie__button {
    font-size: 14px;
    padding: 16px;
    margin: 0;
    display: inline-block;
    width: fit-content;
    height: 100%;
    border: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.cookie_notice--actions .cookie__button:hover {
    background: transparent;
    color: var(--primary-color);
}
@media screen and (max-width: 768px) { 
    .cookie_notice {
        bottom: 0;
        padding-right: 54px;
        box-shadow: none;
        background: white;
        margin: 0;
        transform: none;
        width: 100%;
    }
    .cookie_notice--actions .cookie__button {
        padding: 16px 20px;
        padding-right: 32px;
    }
}

.d-flex {
    display: flex;
}

.wrapper-banner {
    border-radius: var(--btn-border-radius);
    width: fit-content;
}

.banners .banner-title {
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
}

.banners .banner-title h3 {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    font-weight: 500;
}

.banners .wrapper-banner .banner .wrap-img {
    min-height: 30px;
    border-radius: var(--btn-border-radius);
}

@media screen and (max-width: 600px) {
    .wrapper-banner {
        width: 100%;
        max-width: 80%;
    }
}