/*
 * Интернет-магазин qrvcard.pro — стили витрины (Фаза A).
 * Базируются на Bootstrap 5 темы altum; дизайн уточняется отдельно.
 */

/* Витрина-лендинг */
.shop-hero {
    background: linear-gradient(135deg, var(--primary, #5c60f5) 0%, #7a7dff 100%);
    color: #fff;
}
.shop-hero .text-muted,
.shop-hero .lead {
    color: rgba(255, 255, 255, .85) !important;
}

/* Карточка категории */
.shop-category-card {
    transition: box-shadow .15s ease, transform .15s ease;
}
.shop-category-card:hover {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.shop-category-card__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Карточка товара */
.shop-product-card {
    transition: box-shadow .15s ease, transform .15s ease;
}
.shop-product-card:hover {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.shop-product-card__image-wrap {
    overflow: hidden;
}
.shop-product-card__image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* Галерея товара */
.shop-product-gallery__main img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.shop-product-gallery__thumbs img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
}

/* Характеристики */
.shop-characteristics th {
    width: 45%;
}

/* Галерея работ */
.shop-gallery__image,
.shop-gallery-teaser__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ── Лендинг /shop: блок «Нам доверяют» ──
   index-header/subheader/button/hero/background НЕ переопределяем — берём
   глобальные стили темы (те же, что на /business), чтобы размеры совпадали 1:1. */

/* Карточки логотипов «Нам доверяют» — без тени (1:1: класс box-shadow в оригинале пустой) */
.box-shadow,
.box-shadow-dt {
    box-shadow: none !important;
}
/* Сетка: 2 в ряд на мобильных, 5 в ряд на десктопе (перенос держим flex-basis'ом) */
.shop-trust.card-deck {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0;
}
.shop-trust.card-deck .card {
    flex: 0 0 auto;
    width: calc(50% - 1rem);
    margin: .5rem;
}
.shop-trust .w-100 {
    display: none !important;
}
@media (min-width: 768px) {
    .shop-trust.card-deck .card {
        width: calc(20% - 1rem);
    }
}
.shop-trust .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
}
.shop-trust .card-body img {
    max-height: 64px;
    width: auto;
}
/* Появление при прокрутке (IntersectionObserver добавляет .is-visible). Без JS — видны сразу. */
.js-reveal .shop-trust .card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
.js-reveal .shop-trust .card.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Lazy-load изображений: локальный placeholder + плавное проявление.
   Боксы уже зарезервированы aspect-ratio (категории 4/3, товары 1/1, галерея 4/3,
   логотипы min-height) → реальных скачков макета нет ни на одном экране. ── */
img.lazyload {
    background-color: var(--gray-100, #f1f3f5);
    background-image: url("../images/shop/placeholder.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(34px, 16%, 64px);
}
img.lazyload.is-loaded {
    background-image: none;
    background-color: transparent;
    animation: shopLazyFade .45s ease;
}
@keyframes shopLazyFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Доставка на чекауте (Фаза 29). BEM, mirror .shop-product-card__*. ── */
.shop-delivery__service,
.shop-delivery__method {
    margin-bottom: 1rem;
}
/* Брендовая плашка службы доставки (СДЭК): логотип + отметка «выбрано». */
.shop-delivery__carrier {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .5rem 1rem;
    background-color: #fff;
    border: 1.5px solid var(--gray-200, #e9ecef);
    border-radius: .625rem;
    transition: border-color .15s ease, background-color .15s ease;
}
.shop-delivery__carrier--active {
    border-color: #00b33c;
    background-color: rgba(0, 179, 60, .06);
}
.shop-delivery__carrier-logo {
    display: block;
    height: 30px;
    width: auto;
}
.shop-delivery__carrier-name {
    font-weight: 600;
    font-size: 1.05rem;
}
.shop-delivery__carrier-check {
    margin-left: .25rem;
    color: #00b33c;
    font-size: 1.2rem;
    line-height: 1;
}
/* Способ получения — тумблеры (custom-switch) в один ряд, перенос на узких экранах. */
.shop-delivery__methods {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin-top: .25rem;
}
.shop-delivery__method-switch {
    margin-bottom: 0;
}
.shop-delivery__method-switch .custom-control-label {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.shop-delivery__city {
    position: relative;
}
/* Автоподсказка города — чистая выпадашка-карточка под инпутом (поверх остального контента). */
.shop-delivery__suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1030;
    max-height: 240px;
    overflow-y: auto;
    margin-top: .25rem;
    background-color: #fff;
    border: 1px solid var(--gray-200, #e9ecef);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .25rem 0;
}
/* Пункты подсказки: блочные на всю ширину, без плиточных рамок, с hover (перебиваем list-group темы). */
.shop-delivery__suggest .list-group-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: .5rem .75rem;
}
.shop-delivery__suggest .list-group-item:hover,
.shop-delivery__suggest .list-group-item:focus {
    background-color: var(--gray-100, #f1f3f5);
    outline: none;
}
/* Обёртка карты + оверлей загрузки (показывается, пока тянутся ПВЗ из СДЭК). */
.shop-delivery__map-wrap { position: relative; }
.shop-delivery__map-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .85);
    border-radius: .5rem;
    z-index: 2;
    text-align: center;
}
.shop-delivery__map-loading[hidden] { display: none; }
/* Карта Яндекса: явная пиксельная высота (тайлы Яндекса не рендерятся без неё). */
.shop-delivery__map {
    height: 360px;
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--gray-100, #f1f3f5);
}
@media (max-width: 767.98px) {
    .shop-delivery__map {
        height: 280px;
    }
}
/* Скролл-список ПВЗ рядом с картой (высота под карту). */
.shop-delivery__list {
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
}
.shop-delivery__list-item {
    padding: .5rem .75rem;
    border: 1px solid var(--gray-200, #e9ecef);
    border-radius: .375rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.shop-delivery__list-item:hover {
    background-color: var(--gray-100, #f1f3f5);
}
/* Выбранный ПВЗ — фирменный зелёный СДЭК: обводка + заливка + левый акцент-бар. */
.shop-delivery__list-item.is-selected {
    border-color: #1ab248;
    background-color: rgba(26, 178, 72, .12);
    box-shadow: inset .25rem 0 0 #1ab248;
}
/* Кастомная зелёная СДЭК-метка ПВЗ с иконкой (templateLayoutFactory). Центр на гео-точке (-15,-15). */
.shop-delivery__pin {
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #1ab248;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    cursor: pointer;
    color: #ffffff; /* FontAwesome в SVG-режиме рисует fill=currentColor → иконка наследует белый от контейнера */
}
.shop-delivery__pin i,
.shop-delivery__pin svg { color: #ffffff; fill: #ffffff; font-size: 13px; line-height: 1; }
/* Выбранная метка — темнее + зелёное кольцо + крупнее. */
.shop-delivery__pin--selected {
    background-color: #0b8a37;
    box-shadow: 0 0 0 4px rgba(26, 178, 72, .4), 0 1px 5px rgba(0, 0, 0, .35);
    transform: scale(1.15);
}
/* Постамат — голубая метка (отличие от зелёного ПВЗ, Ф.29.1). Иконка остаётся белой. */
.shop-delivery__pin--postamat { background-color: #29b6d6; }
.shop-delivery__pin--postamat.shop-delivery__pin--selected {
    background-color: #1a8aa6;
    box-shadow: 0 0 0 4px rgba(41, 182, 214, .4), 0 1px 5px rgba(0, 0, 0, .35);
}
/* Код ПВЗ СДЭК (SPB156 и т.п.) — моноширинный бейдж, читается как код. */
.shop-delivery__code {
    font-family: var(--font-family-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: .02em;
}
/* Сводка заказа (корзина/чекаут) прилипает при прокрутке — только на десктопе, где две
   колонки. На мобильном (col-12, стек) остаётся в потоке под товарами. */
@media (min-width: 992px) {
    .shop-sticky-summary {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem;
    }
}
/* Модалка «карта на весь экран» (выбор ПВЗ). JS переносит сюда поиск+карту+список. */
.shop-delivery__modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, .5);
}
.shop-delivery__modal[hidden] { display: none; }
.shop-delivery__modal-dialog {
    display: flex;
    flex-direction: column;
    width: min(1100px, 96vw);
    max-height: 92vh;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
    overflow: hidden;
}
.shop-delivery__modal-header,
.shop-delivery__modal-footer {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
}
.shop-delivery__modal-header { justify-content: space-between; border-bottom: 1px solid var(--gray-200, #e9ecef); }
.shop-delivery__modal-footer { justify-content: flex-end; border-top: 1px solid var(--gray-200, #e9ecef); }
.shop-delivery__modal-body { padding: 1rem; overflow-y: auto; }
/* Внутри модалки карта и список — крупные. */
.shop-delivery__modal-body .shop-delivery__map { height: 68vh; }
.shop-delivery__modal-body .shop-delivery__list { max-height: 68vh; }
@media (max-width: 767.98px) {
    .shop-delivery__modal-body .shop-delivery__map { height: 45vh; }
    .shop-delivery__modal-body .shop-delivery__list { max-height: 40vh; }
}
/* Маркеры/кластеры карты (нейтральный маркер, primary-кластер). */
.shop-delivery__marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid var(--primary, #5c60f5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.shop-delivery__cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .25rem;
    border-radius: 14px;
    background-color: var(--primary, #5c60f5);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
}
/* Бесплатная доставка — primary-акцент (НЕ зелёный, одна акцентная роль). */
.shop-delivery__summary-row [data-shipping-label] {
    font-weight: 600;
}

/* ── Ф.30: плашки выбора способа оплаты (СБП / карта) ───────────────────── */
/* Раскладка плашек: единый отступ по обеим осям (тема BS4 — нет gutter g-*, у col
   только горизонтальный padding → зазоры разные). Заменяем row/col-сетку на flex-gap. */
.pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}
.pay-methods > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
@media (min-width: 576px) {
    .pay-methods > [class*="col-"] {
        flex: 0 0 calc(50% - .5rem);
        max-width: calc(50% - .5rem);
    }
}
.pay-methods .pay-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    height: 100%;
    min-height: 152px;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 2px solid #e6e8ef;
    border-radius: .9rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.pay-methods .pay-method:hover {
    border-color: var(--primary, #5c60f5);
    box-shadow: 0 .4rem 1.3rem rgba(92, 96, 245, .18);
}
.pay-methods .pay-method:focus-visible {
    outline: none;
    border-color: var(--primary, #5c60f5);
    box-shadow: 0 0 0 .2rem rgba(92, 96, 245, .25);
}
/* Акцент на рекомендуемом способе — СБП (UI-SPEC: ровно один primary-акцент на экране):
   подсвеченная primary-рамка + мягкая тень постоянно, остальные плашки нейтральны. */
.pay-methods .pay-method--sbp {
    border-color: var(--primary, #5c60f5);
    box-shadow: 0 .4rem 1.3rem rgba(92, 96, 245, .18);
}
.pay-methods .pay-method--sbp:hover {
    box-shadow: 0 .6rem 1.65rem rgba(92, 96, 245, .26);
}
.pay-methods .pay-method:active { transform: translateY(1px); }
.pay-methods .pay-method:disabled { opacity: .55; cursor: default; box-shadow: none; }

.pay-method__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
}
.pay-method__logo { height: 42px; width: auto; max-width: 100%; }
/* Иконка карты — цвет на КОНТЕЙНЕРЕ (FA svg-режим наследует currentColor). */
.pay-method__media--card { font-size: 2.6rem; line-height: 1; color: var(--primary, #5c60f5); }
.pay-method__label { font-weight: 600; font-size: 1.05rem; color: #1f2430; }
.pay-method__sub { font-size: .8rem; }

/* Брендированная кнопка Долями: «Оплатить» + официальный ворд-марк ||||долями в строку
   (бренд-гайд Т-Банка). Логотип по высоте ≈ высоте текста. */
.pay-method__dolyame-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.pay-method__dolyame-pay { font-weight: 600; font-size: 1.15rem; color: #1f2430; }
.pay-method__dolyame-logo { height: 20px; width: auto; max-width: 100%; display: block; }

/* Миниатюра товара в сводке заказа на странице оплаты (mirror checkout-сводки + фото). */
.shop-pay-summary__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: .4rem;
    border: 1px solid var(--gray-200, #e9ecef);
    flex-shrink: 0;
}

/* Промо-плашка «подарок-тариф» на карточке товара: акцентный градиент + иконка подарка. */
.shop-gift-plan {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(232, 62, 140, .10), rgba(124, 77, 255, .10));
    border: 1px solid rgba(232, 62, 140, .25);
}
.shop-gift-plan__icon {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(232, 62, 140, .25));
}
.shop-gift-plan__body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.shop-gift-plan__title {
    font-weight: 700;
    color: #1f2430;
}
.shop-gift-plan__sub {
    font-size: .85rem;
    color: #6c757d;
}

/* Баннер «Возможна персонализация визитки» (товар + категория) — фирменный розово-фиолетовый акцент. */
.shop-personalization {
    display: flex;
    gap: 1.15rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(232, 62, 140, .09), rgba(124, 77, 255, .10));
    border: 1.5px solid rgba(232, 62, 140, .28);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(232, 62, 140, .10);
    scroll-margin-top: 90px;
}
.shop-personalization__icon {
    font-size: 2.1rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(232, 62, 140, .3));
}
.shop-personalization__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: #1f2430;
}
.shop-personalization__text {
    color: #4b5563;
}
.shop-personalization__contact {
    font-size: .9rem;
    color: #6c757d;
}
.shop-personalization__contact a {
    font-weight: 600;
    white-space: nowrap;
}

/* CTA первого экрана (карточка цены) → приглашение к индивидуальному заказу, скроллит к блоку выше. */
.shop-personalization-cta {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(232, 62, 140, .08), rgba(124, 77, 255, .09));
    border: 1.5px solid rgba(232, 62, 140, .35);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.shop-personalization-cta:hover {
    border-color: var(--primary, #e8388c);
    box-shadow: 0 .4rem 1.1rem rgba(232, 62, 140, .18);
    text-decoration: none;
}
.shop-personalization-cta:active { transform: translateY(1px); }
.shop-personalization-cta__icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.shop-personalization-cta__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.shop-personalization-cta__title { font-weight: 700; color: #1f2430; }
.shop-personalization-cta__sub { font-size: .82rem; color: #6c757d; }
.shop-personalization-cta__arrow { margin-left: auto; color: var(--primary, #e8388c); flex-shrink: 0; }

/* ============================================================
   Корзина — адаптивные карточки позиций (UX-редизайн).
   Мобайл-фёрст: вертикальный стек БЕЗ горизонтального скролла
   (прежняя .table-responsive давала overflow-x). На ≥768px —
   выровненные колонки под общей шапкой .shop-cart-head.
   JS таргетит data-cart и js-cart классы — структура свободна.
   ============================================================ */
/* Миниатюра заполняет фиксированный бокс .shop-cart-item__media (см. ниже).
   Бокс с overflow:hidden гарантирует, что картинка НЕ вылезет за 64/72px,
   даже если её собственный width будет перебит чужим правилом. */
.shop-cart-thumb {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;   /* Tiny ландшафтная; contain показывает карточку целиком, без обрезки */
    display: block;
}

/* Шапка-колонки скрыта на мобайле (там подписи дают .shop-cart-item__label). */
.shop-cart-head { display: none; }

/* Карточка позиции — мобайл: миниатюра слева, детали справа в три ряда. */
.shop-cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "media info   remove"
        "media price  price"
        "media qty    total";
    column-gap: .75rem;
    row-gap: .5rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-200, #e9ecef);
}
.shop-cart-item:first-child { padding-top: 0; }
.shop-cart-item:last-child  { padding-bottom: 0; border-bottom: 0; }

.shop-cart-item__media  {
    grid-area: media;
    align-self: start;
    width: 72px;
    height: 48px;
    overflow: hidden;
    border-radius: .2rem;   /* скруглённые углы; overflow:hidden обрезает картинку по этому радиусу */
}
.shop-cart-item__info   { grid-area: info; min-width: 0; }
.shop-cart-item__price  { grid-area: price; }
.shop-cart-item__qty    { grid-area: qty; }
.shop-cart-item__total  { grid-area: total; text-align: right; }
.shop-cart-item__remove { grid-area: remove; text-align: right; align-self: start; }

/* Подпись поля (Цена/Кол-во/Сумма) — только мобайл, на десктопе её роль у шапки. */
.shop-cart-item__label {
    display: block;
    font-size: .75rem;
    color: var(--gray-600, #868e96);
    margin-bottom: .15rem;
}

.shop-cart-item__pkg-select { max-width: 260px; }
.shop-cart-item--unavailable { opacity: .6; }

/* Компактный стэппер количества (минус/инпут/плюс) — узкие кнопки, узкий инпут. */
.shop-cart-qty .js-cart-qty-input { width: 44px; }
.shop-cart-qty .btn { padding-left: .5rem; padding-right: .5rem; }

/* Десктоп: одна строка, колонки совпадают с шапкой .shop-cart-head. Фиксы узкие —
   чтобы название товара получало максимум ширины (иначе перенос в 3 строки). */
@media (min-width: 768px) {
    .shop-cart-head,
    .shop-cart-item {
        grid-template-columns: 72px minmax(0, 1fr) 84px 116px 100px 32px;
        grid-template-areas: "media info price qty total remove";
        column-gap: .75rem;
        align-items: center;
    }

    .shop-cart-head {
        display: grid;
        padding-bottom: .75rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid var(--gray-200, #e9ecef);
    }

    .shop-cart-item { row-gap: 0; }
    .shop-cart-item__remove { align-self: center; }
    .shop-cart-item__price  { text-align: right; }
    .shop-cart-item__qty    { text-align: center; }
    .shop-cart-item__total  { text-align: right; }
    .shop-cart-item__label  { display: none; }
}

/* ============================================================
   Видео-галерея Дзен (999.6) — вертикальные плееры 9:16.
   ============================================================ */
.shop-video-card__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: .5rem;
    overflow: hidden;
    background: #000;
    box-shadow: 0 .4rem 1.1rem rgba(0, 0, 0, .12);
}
.shop-video-card__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.shop-video-card__title {
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}