:root {
    --brand: #0d6efd;
    --brand-dark: #0b5ed7;
}

body {
    background: #f6f7f9;
}

.shop-header {
    background: #fff;
    border-bottom: 1px solid #e6e8ec;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.shop-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1c1f24;
    white-space: nowrap;
}

.shop-brand i {
    color: var(--brand);
}

.shop-brand__logo {
    height: 40px;
    width: auto;
    display: block;
}

.shop-footer__logo {
    height: 28px;
    width: auto;
    display: block;
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-outline-brand {
    border-color: var(--brand);
    color: var(--brand);
}

.shop-nav {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    font-size: .95rem;
}

.shop-nav a {
    color: #495057;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: .25rem;
}

.shop-nav a:hover {
    color: var(--brand);
}

.product-card {
    border: 1px solid #e6e8ec;
    border-radius: .75rem;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.product-card:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.product-card__img {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
}

.product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .75rem;
}

.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.5rem;
    color: #cfd4dc;
}

.product-card__badge {
    position: absolute;
    left: .5rem;
    top: .5rem;
}

.product-card__title {
    color: #1c1f24;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__title:hover {
    color: var(--brand);
}

.product-card__price {
    font-size: 1.15rem;
    font-weight: 700;
}

.hero {
    background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 55%, #60a5fa 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2rem;
}

.section-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.product-gallery {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: .75rem;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-gallery img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.product-price {
    font-size: 2rem;
    font-weight: 700;
}

.shop-footer {
    background: #fff;
    border-top: 1px solid #e6e8ec;
}

.shop-footer a {
    color: #495057;
    text-decoration: none;
}

.shop-footer a:hover {
    color: var(--brand);
}

.blog-cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-radius: .5rem .5rem 0 0;
    background: #eef1f5;
}

.step-line {
    display: flex;
    gap: .5rem;
    color: #8a9199;
    font-size: .9rem;
}

.step-line .active {
    color: var(--brand);
    font-weight: 600;
}

/* Статичные страницы из БД: единый ритм заголовков, абзацев, списков и таблиц */
.shop-page-content h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.25rem 0 .5rem;
}

.shop-page-content h2:first-child {
    margin-top: 0;
}

/* h3/h4 внутри контента — на ступень ниже h2, чтобы не спорить с секционными
   заголовками страницы (те идут классом .section-title и вне .shop-page-content) */
.shop-page-content h3 {
    font-size: .95rem;
    font-weight: 600;
    margin: 1rem 0 .4rem;
}

.shop-page-content h4 {
    font-size: .9rem;
    font-weight: 600;
    margin: .85rem 0 .35rem;
}

.shop-page-content p {
    color: #5c636a;
    margin-bottom: 1rem;
}

.shop-page-content p:last-child {
    margin-bottom: 0;
}

/* Списки и сноски внутри контента */
.shop-page-content ul,
.shop-page-content ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
    color: #5c636a;
}

/* В документах (оферта, политики) встречаются двухзначные пункты — маркеру нужно больше места */
.shop-page-content ol {
    padding-left: 1.75rem;
}

.shop-page-content li {
    margin-bottom: .3rem;
}

.shop-page-content li:last-child {
    margin-bottom: 0;
}

.shop-page-content li > ul,
.shop-page-content li > ol {
    margin: .3rem 0 0;
}

.shop-page-content sup {
    font-size: .7em;
    line-height: 0;
    color: var(--brand);
}

/* Таблицы («Оплата и доставка»): цвета через переменные Bootstrap — читаемо в
   светлой и тёмной теме; на мобильных таблица уезжает в горизонтальный скролл,
   а не растягивает страницу */
.shop-table-scroll {
    margin: 0 0 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.shop-table-scroll:last-child {
    margin-bottom: 0;
}

.shop-page-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #5c636a);
}

.shop-page-content caption {
    caption-side: bottom;
    padding: .35rem 0 0;
    font-size: .8rem;
    color: var(--bs-tertiary-color, #8a9199);
    text-align: left;
}

.shop-page-content th,
.shop-page-content td {
    padding: .55rem .7rem;
    border: 1px solid var(--bs-border-color, #e6e8ec);
    text-align: left;
    vertical-align: top;
}

.shop-page-content thead th {
    background: var(--bs-tertiary-bg, #f1f3f6);
    color: var(--bs-body-color, #1c1f24);
    font-weight: 600;
    white-space: nowrap;
}

.shop-page-content tbody tr:nth-child(even) {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

@media (max-width: 767.98px) {
    .shop-page-content table {
        min-width: 620px;
    }
}

/* Блок «Уведомления о заказе в MAX» */
.max-notify__qr {
    width: 132px;
    height: 132px;
    border: 1px solid #e6e8ec;
    border-radius: .5rem;
    padding: .35rem;
    background: #fff;
}

/* QR, нарисованный клиентски (qrcodejs), должен влезать в рамку */
.max-notify__qr--live canvas,
.max-notify__qr--live img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Живой чат витрины */
.shop-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
}

.shop-chat__toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .35);
    transition: background .15s ease, transform .15s ease;
}

.shop-chat__toggle:hover,
.shop-chat__toggle:focus {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

.shop-chat__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    line-height: 20px;
    font-weight: 600;
}

.shop-chat__panel {
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 2.5rem));
    height: min(480px, calc(100vh - 2.5rem));
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: .75rem;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    overflow: hidden;
}

.shop-chat__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #eef1f5;
}

.shop-chat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #f6f7f9;
}

.shop-chat__empty {
    margin: auto;
    text-align: center;
    max-width: 220px;
}

.shop-chat__msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.shop-chat__msg--out {
    align-self: flex-end;
    align-items: flex-end;
}

.shop-chat__msg--in {
    align-self: flex-start;
    align-items: flex-start;
}

.shop-chat__bubble {
    padding: .5rem .75rem;
    border-radius: .75rem;
    font-size: .9rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.shop-chat__msg--out .shop-chat__bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: .25rem;
}

.shop-chat__msg--in .shop-chat__bubble {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-bottom-left-radius: .25rem;
}

.shop-chat__meta {
    font-size: .7rem;
    color: #98a0a8;
    margin-top: .15rem;
}

.shop-chat__guest,
.shop-chat__form {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid #eef1f5;
    background: #fff;
}

.shop-chat__guest {
    flex-direction: column;
}

.shop-chat__form {
    align-items: flex-end;
}

.shop-chat__form textarea {
    resize: none;
}

.shop-chat__form .btn {
    flex: 0 0 auto;
    height: 38px;
}

.shop-chat__error {
    padding: 0 .75rem .75rem;
}

/* Главная из админки: hero-картинка, услуги, преимущества, полезные ссылки */
.hero__image {
    max-height: 280px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.service-card {
    border: 1px solid #e6e8ec;
    border-radius: .75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.service-card:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.service-card__visual {
    font-size: 1.9rem;
    color: var(--brand);
    line-height: 1;
    margin-bottom: .75rem;
}

.service-card__emoji,
.block-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.service-card__image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: .75rem;
    background: #eef1f5;
}

.service-card__more {
    color: var(--brand);
    font-weight: 600;
}

.feature__icon {
    color: var(--brand);
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}

.home-links__item + .home-links__item {
    border-top: 1px solid #eef1f5;
}

.home-links__a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .25rem;
    color: #1c1f24;
    text-decoration: none;
}

.home-links__a:hover {
    color: var(--brand);
}

.home-links__a i {
    margin-left: auto;
    font-size: .85rem;
    color: #98a0a8;
}

.home-links__plain {
    display: block;
    padding: .6rem .25rem;
    color: #5c636a;
}

/* Страница контактов: связь, карта, реквизиты */
.shop-contacts__list li + li {
    margin-top: .35rem;
}

.shop-contacts__list a {
    color: #495057;
    text-decoration: none;
}

.shop-contacts__list a:hover {
    color: var(--brand);
}

.shop-map {
    border: 1px solid #e6e8ec;
    border-radius: .75rem;
    overflow: hidden;
    background: #eef1f5;
}

.shop-map__frame {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

@media (max-width: 767.98px) {
    .shop-map__frame {
        height: 300px;
    }
}

/* Компактная карта в блоке «Контакты» на главной */
.shop-map--sm .shop-map__frame {
    height: 300px;
}

@media (max-width: 767.98px) {
    .shop-map--sm .shop-map__frame {
        height: 240px;
    }
}

.shop-requisites p {
    color: #5c636a;
}

/* Рекламные баннеры (карусель Bootstrap) */
.shop-banners {
    margin-bottom: 1.5rem;
}

.shop-banners__carousel {
    border-radius: .75rem;
    overflow: hidden;
    background: #eef1f5;
}

.shop-banner__link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

/* Высота задана заранее — блок не «прыгает», пока грузится картинка */
.shop-banner__img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.shop-banner__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1.25rem 1rem;
    color: #fff;
    font-size: .95rem;
    line-height: 1.35;
    background: linear-gradient(to bottom, rgba(16, 24, 40, 0), rgba(16, 24, 40, .7));
}

.shop-banners__carousel .carousel-control-prev,
.shop-banners__carousel .carousel-control-next {
    width: 46px;
    opacity: .9;
}

.shop-banners__carousel .carousel-control-prev:hover,
.shop-banners__carousel .carousel-control-next:hover {
    opacity: 1;
}

.shop-banners__carousel .carousel-control-prev-icon,
.shop-banners__carousel .carousel-control-next-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(16, 24, 40, .45);
    background-size: 45%;
}

.shop-banners__carousel .carousel-indicators {
    margin-bottom: .6rem;
}

.shop-banners__carousel .carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    opacity: .6;
}

.shop-banners__carousel .carousel-indicators .active {
    opacity: 1;
}

/* Один баннер — ни стрелок, ни точек (страховка на случай чужой разметки) */
.shop-banners__carousel--single .carousel-indicators,
.shop-banners__carousel--single .carousel-control-prev,
.shop-banners__carousel--single .carousel-control-next {
    display: none;
}

@media (max-width: 767.98px) {
    .shop-banner__img {
        height: 200px;
    }

    .shop-banner__text {
        padding: 1.5rem 1rem .75rem;
        font-size: .875rem;
    }
}

/* Галерея товара: главное фото, миниатюры, лайтбокс */
.product-gallery--main {
    cursor: zoom-in;
}

.product-gallery--empty i {
    font-size: 5rem;
    color: #cfd4dc;
}

.product-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    padding-bottom: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: .25rem;
    border: 1px solid #e6e8ec;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumb:hover {
    border-color: #cbd2da;
}

.product-thumb.is-active {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 3.5rem;
    background: rgba(12, 15, 20, .88);
}

/* display задан автором — без этого правила атрибут hidden не сработает */
.product-lightbox[hidden] {
    display: none;
}

.product-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .5rem;
    background: #fff;
}

.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.product-lightbox__close:hover,
.product-lightbox__nav:hover {
    background: rgba(255, 255, 255, .28);
}

.product-lightbox__close {
    top: 1rem;
    right: 1rem;
}

.product-lightbox__nav--prev {
    left: 1rem;
}

.product-lightbox__nav--next {
    right: 1rem;
}

body.product-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .product-thumb {
        width: 60px;
        height: 60px;
    }

    .product-lightbox {
        padding: 1rem;
    }

    .product-lightbox__close,
    .product-lightbox__nav {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
}

/* Сетка с правой колонкой под вертикальный баннер (каталог, товар, блог, текстовые страницы).
   В разметке баннер один: пока ширины нет — он просто идёт следующей строкой под контентом,
   на широких экранах встаёт в правую колонку 300 px. Одна копия — два положения.
   minmax(0, 1fr) вместо 1fr — чтобы вложенные сетки Bootstrap не растягивали колонку
   по min-content и не появлялась горизонтальная прокрутка. */
.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

/* 1200 px, а не 992: контейнер Bootstrap на lg всего 960 px, и колонка 300 px
   оставила бы контенту 636 px (на каталоге и текстовых страницах со своим меню — ещё меньше).
   На xl контейнер 1140 px → контенту 792 px.
   Класс shop-layout--col страница ставит только если правый баннер реально отрисовался:
   пустая колонка не должна сжимать контент. */
@media (min-width: 1200px) {
    .shop-layout--col {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

.shop-banner-col {
    min-width: 0;
}

/* Липкая колонка: 124 px = 108 px липкая шапка + зазор.
   z-index + фон нужны на страницах, где под баннером в колонке ещё карточки
   (текстовые страницы): карточки уезжают под баннер, а не сквозь него. */
@media (min-width: 1200px) {
    .shop-banner-col__inner {
        position: sticky;
        top: 124px;
        z-index: 2;
        background: #f6f7f9;
    }
}

/* Плашка занимает всю колонку, отступ карусели внутри неё не нужен */
.shop-banner-col__inner .shop-banners {
    margin-bottom: 0;
}

/* Вертикальный баннер 300×600: место под картинку занято заранее (aspect-ratio),
   поэтому блок не «прыгает» при загрузке. На узких экранах пропорции не навязываем —
   там работает обычная высота баннера (200 px) или отдельная mobile-картинка. */
@media (min-width: 1200px) {
    .shop-banner-col__inner img {
        height: auto;
        aspect-ratio: 1 / 2;
        object-fit: cover;
    }
}

/* Заголовок бренда не влезает в шапку на самых узких телефонах (≤ 400 px) */
@media (max-width: 399.98px) {
    .shop-brand span {
        display: none;
    }
}

/* Вертикальный баннер ниже 1200 px (правой колонки там нет — блок одной копией
   уезжает под содержимое страницы):
   • 768–1199 px — сохраняем пропорции 1:2, иначе базовая высота .shop-banner__img
     обрезает картинку 300×600 / 600×1200 в полосу;
   • ≤ 767 px — пропорции не навязываем: вертикальная картинка показывается целиком,
     а если у баннера задан mobile_image, работает он (обычно широкая версия).
   Добавлено вместе с полем orientation у баннера. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .shop-banners--vertical .shop-banner__img {
        height: auto;
        aspect-ratio: 1 / 2;
        object-fit: cover;
    }
}

@media (max-width: 767.98px) {
    .shop-banners--vertical .shop-banner__img {
        height: auto;
    }
}