/* [TB-PD] Служебные стили внедрения: гасим то, что тема навязывает поверх вёрстки.
   Сама вёрстка лежит в pd.css и генерируется скриптом — правится только этот файл.
   По образцу tb-lk/auth.css. */

/* Swiper. В вёрстке .feedbacks__slider описан гридом, и на странице фронтендера
   его перебивал swiper-bundle.css: специфичность была равной, а подключался он
   позже. После оборачивания в скоуп правило вёрстки стало сильнее и ломало
   слайдер — возвращаем слайдерам блочную раскладку. */
.tb-pd-page .swiper {
    display: block;
}

/* Тема (us-core) навешивает полям line-height высотой поля, серый фон и
   внутреннюю тень — из-за этого «Добавьте комментарий» выглядело серым блоком. */
body.tb-pd-body .tb-pd-page .form__item input,
body.tb-pd-body .tb-pd-page .form__item textarea {
    height: auto;
    line-height: 1.4;
    box-shadow: none;
    background: transparent;
}

.tb-pd-page .form-item__input::placeholder {
    color: #999;
    opacity: 1;
}

/* Кнопки темы приходят со своим радиусом, паддингами и кеглем (2em, 8px 45px,
   18px), а на узких экранах ещё и правилом
   «button[type=submit]:not(.w-btn) { padding: calc(1.6vw) calc(13.4vw) !important }».
   У него специфичность (0,2,1) — выше, чем у .tb-pd-page .button, поэтому селекторы
   ниже начинаются с body.tb-pd-body: только так пилюля макета остаётся на месте. */
body.tb-pd-body .tb-pd-page .button {
    color: var(--color-accent) !important;
    background: none;
    border: 1px solid var(--color-accent);
    border-radius: 50px !important;
    padding: 15px 35px !important;
    font-weight: 400 !important;
    font-size: var(--font-size-default) !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* Наведение тема перекрашивает своим правилом
   «.no-touch button[type="submit"]:not(.w-btn):hover { color: #9B2A2A !important }»
   со специфичностью (0,4,1) — ровно как у .tb-pd-page .button:hover, и в документе
   оно идёт ниже. Добавляем в селектор форму: (0,5,1) уже перебивает, и текст на
   заливке остаётся белым. */
body.tb-pd-body .tb-pd-page .tb-pd-cart .button:hover,
body.tb-pd-body .tb-pd-page .button:hover {
    color: var(--color-white) !important;
    background: var(--button-fill) !important;
}

body.tb-pd-body .tb-pd-page .button.button_fill {
    border: none;
    color: var(--color-white) !important;
    background: var(--button-fill);
}

body.tb-pd-body .tb-pd-page .tb-pd-cart .button.button_fill:hover,
body.tb-pd-body .tb-pd-page .button.button_fill:hover {
    filter: brightness(0.9);
    background: var(--button-fill) !important;
}

/* Блоки состава прячем не через display, а атрибутом hidden: у активного блока
   в вёрстке свой display: grid, и перебивать его инлайном было бы неудобно. */
.tb-pd-page .detail-info-compose__content[hidden] {
    display: none;
}

/* Скрытые условиями показа поля формы (аналог clogic плагина) */
.tb-pd-page .tb-pd-element[hidden] {
    display: none;
}

/* «Укажите надпись» рядом с полями выбора выглядела чужой: у неё тёмная линия из
   вёрстки, отступ слева и своя высота, а select2 тема рисует светлой линией без
   отступа. Приводим текстовое поле к тому же виду — форма читается одним блоком. */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form-item__input {
    /* высоту и кегль берём из тех же переменных темы, которыми она рисует селекты,
       иначе на узких экранах поле остаётся крупнее соседей */
    min-height: var(--inputs-height, 42px);
    font-size: var(--inputs-font-size, 15px);
    padding: 0;
    border-bottom: 1px solid var(--color-accent-light);
}

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form-item__input:focus {
    border-bottom-color: var(--color-accent);
}


/* Кнопка на время добавления в корзину. Модификатор .button_loading уже описан в
   вёрстке (прячет текст, крутит спиннер, глушит клики) — вешает его pd.js. Тут
   только приглушаем заливку, чтобы кнопка читалась как неактивная, и прячем
   спиннер плагина корзины: свой рисует сама вёрстка. */
body.tb-pd-body .tb-pd-page .button.button_loading {
    /* прозрачный текст вёрстка ставит на .button_loading, но наши правила заливки
       выше по специфичности и возвращали белый — повторяем здесь */
    color: transparent !important;
    opacity: 0.65;
}

.tb-pd-page .button.button_loading .xoo-cp-adding,
.tb-pd-page .button.button_loading .xoo-cp-added {
    display: none;
}

/* Иконка начинки не должна ужиматься: во flex-строке длинные названия
   («Грушевая с грильяжем и дорблю») отжимали её на пару пикселей, и поле вместе
   со всей колонкой прыгало по высоте при смене начинки. */
.tb-pd-page .select__icon {
    flex-shrink: 0;
}

.tb-pd-page .select__value {
    min-width: 0;
}

/* Цвет строк выпадающего списка. В вёрстке белым красится только .select__text,
   а он есть лишь у списков с картинками. В обычных списках (вес, порции) текст
   лежит прямо в опции, и там побеждали чужие правила: у выбранной строки на
   бордовом фоне текст оставался чёрным, а под курсором на светлом фоне — белым. */
.tb-pd-page .select2-container--default .select2-results__option {
    color: var(--color-default);
}

.tb-pd-page .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--color-default);
    background: var(--color-border);
}

.tb-pd-page .select2-container--default .select2-results__option.select2-results__option--selected,
.tb-pd-page .select2-container--default .select2-results__option.select2-results__option--selected.select2-results__option--highlighted {
    color: var(--color-white);
    background: var(--color-accent);
}

/* Список, раскрытый вверх, приклеивался вплотную к полю и накрывал его край.
   Отодвигаем — заодно курсор после нажатия не оказывается на последней строке. */
.tb-pd-page .select2-container--open.select2-container--above .select2-dropdown--above {
    transform: translateY(-10px);
}

/* Большую картинку листаем жестом. touch-action оставляет браузеру вертикальную
   прокрутку, а горизонтальное движение отдаёт нам — иначе на телефоне свайп
   утаскивал бы страницу вбок. */
.tb-pd-page .product-detail-hero__preview {
    touch-action: pan-y;
    cursor: grab;
}

/* Кегль заголовков на узких экранах. Вёрстка на мобиле оставляет h1 35px и
   заголовки секций 28px — заметно крупнее старой карточки (25px и 25.2px), и
   «Отзывы о Тортах в оформлении от TeaBakery» разъезжались на три строки.
   Заказчик попросил уменьшить; шаг делаем не до старых цифр, а чуть выше, чтобы
   иерархия макета сохранилась. */
@media (max-width: 600px) {
    body.tb-pd-body .tb-pd-page .product-detail-hero__title {
        font-size: 30px;
    }
    body.tb-pd-body .tb-pd-page .feedbacks .title,
    body.tb-pd-body .tb-pd-page .similar .title {
        font-size: 26px;
    }
}

@media (max-width: 430px) {
    body.tb-pd-body .tb-pd-page .product-detail-hero__title {
        font-size: 27px;
    }
    body.tb-pd-body .tb-pd-page .feedbacks .title,
    body.tb-pd-body .tb-pd-page .similar .title {
        font-size: 23px;
    }
}

/* Акцентная часть заголовка («Тортах в оформлении») в вёрстке задана жёстко 40px.
   Заголовок вокруг неё масштабируется, а она нет — на телефоне выходило 23px
   рядом с 40px, и строка разъезжалась на четыре. Привязываем к кеглю родителя:
   на широком экране это те же ~40px, на узком уменьшается вместе с заголовком. */
.tb-pd-page .title__accent span {
    font-size: 1.15em;
}

/* Точки листания держим в одну строку и не даём им заезжать на карточки:
   ряд у Swiper позиционирован абсолютно, поэтому место под него отдаём отступом
   самого слайдера. */
.tb-pd-page .feedbacks__slider .swiper-pagination,
.tb-pd-page .similar__slider .swiper-pagination {
    white-space: nowrap;
}

/* Состав по начинке.

   Сетку в две колонки из вёрстки используем как задумано: слева перечень
   ингредиентов, справа факты. Раньше мы клали в неё сплошной текст поля ACF
   (абзац, <hr>, абзац) — сетка раскидывала это по ячейкам, разделитель занимал
   целую колонку, а текст жался в 318px при доступных 655.

   Где текст разобрать не удалось (в одном поле несколько начинок либо подписей
   нет), блок помечается _plain и отдаётся обычному потоку во всю ширину. */
.tb-pd-page .detail-info-compose__content_plain {
    display: block;
}

.tb-pd-page .detail-info-compose__content[hidden] {
    display: none;
}

/* Правая колонка: пищевая и энергетическая ценность, срок годности, вес. */
.tb-pd-page .detail-info-compose__facts {
    display: grid;
    gap: 30px;
    align-content: start;
}

/* Подпись части состава — «Заварное тесто», «Начинки», «Покрытие». */
.tb-pd-page .detail-info-compose__part {
    margin: 16px 0 6px;
    font-weight: 600;
}

.tb-pd-page .detail-info-compose__group > ul:first-of-type,
.tb-pd-page .detail-info-compose__part:first-child {
    margin-top: 0;
}

/* Рекламный текст из того же поля: пока показываем под таблицей во всю ширину,
   до переноса в «Описание». */
.tb-pd-page .detail-info-compose__prose {
    grid-column: 1 / -1;
    margin-top: 10px;
    color: #666;
}

.tb-pd-page .detail-info-compose__content > p {
    margin-bottom: 20px;
}

.tb-pd-page .detail-info-compose__content > hr {
    margin: 30px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Стрелки поверх большой картинки. В вёрстке их нет — превью там просто figure с
   подменой содержимого, поэтому кнопки рисуем сами и возвращаем в узел после
   каждой смены кадра. */
.tb-pd-page .product-detail-hero__preview {
    position: relative;
    overflow: hidden;
}

.tb-pd-page .tb-pd-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #323232;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.tb-pd-page .tb-pd-nav_prev { left: 16px; }
.tb-pd-page .tb-pd-nav_next { right: 16px; }
.tb-pd-page .tb-pd-nav_next svg { transform: rotate(180deg); }

.tb-pd-page .product-detail-hero__preview:hover .tb-pd-nav { opacity: 1; }
.tb-pd-page .tb-pd-nav:hover { background: #fff; }
.tb-pd-page .tb-pd-nav:focus-visible { opacity: 1; outline: 2px solid var(--color-accent); }

/* На тач-экранах наведения нет, а листать можно свайпом — стрелки только мешают. */
@media (hover: none) {
    .tb-pd-page .tb-pd-nav { display: none; }
}

/* Смена кадра: новый въезжает с той стороны, куда листаем. */
@keyframes tb-pd-in-next {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tb-pd-in-prev {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: none; }
}

.tb-pd-page .product-detail-hero__preview .tb-pd-in_next { animation: tb-pd-in-next 0.35s ease-out; }
.tb-pd-page .product-detail-hero__preview .tb-pd-in_prev { animation: tb-pd-in-prev 0.35s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .tb-pd-page .product-detail-hero__preview .tb-pd-in { animation: none; }
}

/* Ролик с YouTube занимает превью целиком — как и файл видео. */
.tb-pd-page .product-detail-hero__preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==================== правки по TEA-72 ==================== */

/* Название товара — тем же шрифтом, что на действующей карточке: там заголовок
   набран Noto Serif Display курсивом, а не Inter Tight. */
body.tb-pd-body .tb-pd-page h1.product-detail-hero__title {
    font-family: 'Noto Serif Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

/* Названия вкладок стали заголовками h2 ради иерархии для поиска — но выглядеть
   должны как прежние подписи на пилюлях, а не как заголовки раздела. */
.tb-pd-page .detail-info__tab h2 {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* Вкладка «Состав и КЖБУ»: кегль меньше, жирность убрана — по просьбе заказчика.
   Скрытые блоки начинок используют абзац вместо заголовка, поэтому правила
   описывают оба варианта. */
.tb-pd-page .detail-info-compose__group h3.title,
.tb-pd-page .detail-info-compose__heading {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.tb-pd-page .detail-info-compose__group li,
.tb-pd-page .detail-info-compose__group p {
    font-size: 14px;
    font-weight: 400;
}

.tb-pd-page .detail-info-compose__group li strong,
.tb-pd-page .detail-info-compose__group strong {
    font-weight: 500;
}

/* Иконка видео на миниатюре. В вёрстке это символ ▶, а телефоны рисуют его как
   эмодзи — своим синим цветом, CSS его не берёт. Заказчик просил белую, как у
   основного видео, поэтому рисуем треугольник рамкой. */
.tb-pd-page .product-detail-hero__slide_video::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    font-size: 0;
}

/* Слово TeaBakery: первые три буквы наклонно, как в логотипе. */
.tb-pd-page .tb-brand i {
    font-style: italic;
}

/* Ссылки «Подробнее» в списке начинок: выпадашка перехватывает нажатие, поэтому
   их обрабатывает скрипт. Показываем, что это ссылка. */
.tb-pd-page .select2-results__option .select__link {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* ==================== мобильная галерея (TEA-72, п. 7 и 9) ==================== */

@media (max-width: 767px) {
    /* Лента полноразмерных кадров вместо превью с миниатюрами — так устроена
       действующая карточка, к ней и возвращаемся. Прокрутка нативная, кадр
       прилипает к центру, следующий выглядывает справа и подсказывает, что
       можно листать. */
    .tb-pd-page .tb-pd-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 0 12px;
        padding: 0;
    }

    .tb-pd-page .tb-pd-strip::-webkit-scrollbar { display: none; }

    .tb-pd-page .tb-pd-strip__item {
        position: relative;
        flex: 0 0 92%;
        margin: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 10px;
        scroll-snap-align: center;
    }

    .tb-pd-page .tb-pd-strip__item img,
    .tb-pd-page .tb-pd-strip__item video,
    .tb-pd-page .tb-pd-strip__item iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        object-fit: cover;
    }

    /* Одинокий кадр листать некуда — растягиваем на всю ширину. */
    .tb-pd-page .tb-pd-strip__item:only-child {
        flex-basis: 100%;
    }

    /* Пока лента построена, прежние превью и миниатюры не нужны. */
    .tb-pd-page .product-detail-hero_mobile .product-detail-hero__preview,
    .tb-pd-page .product-detail-hero_mobile .product-detail-hero__slider {
        display: none;
    }

    /* Крошки подняты над фото: делаем их одной строкой с прокруткой, иначе
       четыре строки снова съедят экран. */
    .tb-pd-page .product-detail__hero > .breadcrumbs {
        margin: 0 0 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tb-pd-page .product-detail__hero > .breadcrumbs::-webkit-scrollbar { display: none; }

    .tb-pd-page .product-detail__hero > .breadcrumbs .breadcrumbs__list {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* [TEA-72 п.8] Строки «Кол-во человек / вес» и «Выберите начинку» терялись: подпись
   шла 12px обычным начертанием и читалась как пояснение, а не как обязательный
   выбор. Оставляем подпись как на действующей карточке — 15px, полужирная.
   Подложку под строкой сняли 14.09 по просьбе заказчика: выделение теперь даёт
   только линия под самим списком, она красная (см. ниже). */

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form-item__label {
    /* 600, а не 700: из Inter Tight подключены начертания 300–600, семьсот браузер
       дорисовал бы сам и подпись поплыла бы по ширине */
    font-size: 15px;
    font-weight: 600;
    color: var(--color-default);
}

/* Звёздочку обязательного поля действующая карточка ставит перед подписью — там
   к ней привыкли, переносим. */
.tb-pd-page .product-detail-hero__form .form__item_required .form-item__label::after {
    content: none;
}

.tb-pd-page .product-detail-hero__form .form__item_required .form-item__label::before {
    content: '*';
    color: var(--color-accent);
}

/* Стрелка выбора. В макете она 12×7 с закруглёнными боками и висит в 12px от края;
   заказчик просит лаконичную — ровно ту, что на действующей карточке: прямой
   треугольник 7×7, прижатый к концу линии. */
.tb-pd-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 7px;
    right: 0;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' fill='none'><path d='M3.5 7L0 0h7z' fill='%239B2A2A'/></svg>");
    background-size: 7px 7px;
}

/* Линия под списком и есть выделение строки: вёрстка рисует её бледным
   --color-accent-light, заказчик просил красную — берём фирменный акцент.
   !important обязателен: в общих стилях сайта висит
   `body .select2-selection { border-bottom: 1px solid #F9EFEE !important }`,
   без него линия остаётся бледной, сколько специфичности ни добавляй. */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_select .select2-selection--single {
    border-bottom: 1px solid var(--color-accent) !important;
    /* select2 скругляет бокс на 4px — с одной нижней линией скругление выглядит
       обрывком рамки, заказчик просил убрать */
    border-radius: 0 !important;
}

/* Поле «Добавьте комментарий» ведём так же, как списки: без скругления и с той же
   красной линией. Линия у него тоже прибита общим стилем сайта через !important. */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_input .form-item__input {
    border-bottom: 1px solid var(--color-accent) !important;
    border-radius: 0 !important;
}

/* [TEA-72] Описание под названием товара шло жирным — заказчик просил обычный
   шрифт, как в описаниях без выделения. Жирность приходит из самого текста
   товара (<b> в коротком описании), поэтому гасим её на карточке, а контент
   не трогаем: на действующей карточке всё остаётся как было. */
.tb-pd-page .product-detail-hero__desc b,
.tb-pd-page .product-detail-hero__desc strong,
.tb-pd-page .detail-info__text b,
.tb-pd-page .detail-info__text strong {
    font-weight: 400;
}

/* [TEA-72] Ровные строки выбора. В закрытом списке картинка начинки шла 52px —
   строка становилась на 11px выше соседней «Кол-во человек / вес», текст уезжал
   вниз, и линии под списками шли с разным шагом. Ужимаем картинку до высоты
   строки; в выпадающем списке размер прежний, там крупные превью уместны. */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .select2-selection__rendered .select__icon {
    width: 28px;
}

/* [TEA-72 п.8, редакция 14.09] Выделение строк выбора без плашки.
   Заказчик выбрал «подписи крупнее + подсветка строки», но плашка на подложке
   ломала ритм: строка с картинкой начинки была выше соседней, а линия под
   списком тонула в фоне. Оставляем то, что работает на действующей карточке —
   контраст подписи и линия, — и добавляем состояние:
   выбранное значение крупнее плейсхолдера, при наведении и открытом списке
   линия становится вдвое толще (через inset-тень, чтобы строка не прыгала),
   а подпись подсвечивается акцентом. */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .select2-selection__rendered {
    font-size: 16px;
    color: var(--color-default);
}

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_select .select2-selection--single,
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_input .form-item__input {
    transition: box-shadow 0.15s ease;
}

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_select:hover .select2-selection--single,
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_select:focus-within .select2-selection--single,
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item_input .form-item__input:focus {
    box-shadow: inset 0 -1px 0 0 var(--color-accent);
}

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item:hover .form-item__label,
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item:focus-within .form-item__label {
    color: var(--color-accent);
}

/* Ритм между строками: одинаковый шаг, подпись ближе к своему полю, чем к
   предыдущему — блок читается как список пар «подпись → выбор». */
body.tb-pd-body .tb-pd-page .product-detail-hero__form .form__item {
    margin-bottom: 18px;
}

body.tb-pd-body .tb-pd-page .product-detail-hero__form .form-item__label {
    margin-bottom: 2px;
}

/* Вкладка «Доставка». В исходном тексте воздух между строками сделан пустыми
   строками, и только в начале: перечень условий шёл сплошняком. Разметку теперь
   собирает tb_pd_delivery_format(), здесь задаём тот же ритм, что у списка в
   «Описании» — шаг 10px, между блоками 16px. */
.tb-pd-page .tb-pd-delivery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-pd-page .tb-pd-delivery p {
    margin: 0;
}

.tb-pd-page .tb-pd-delivery__subtitle {
    font-weight: 500;
}

.tb-pd-page .tb-pd-delivery__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* Вторая строка пункта («с 10 до 16, с 12 до 18…») — продолжение, а не новый
   пункт: держим её вплотную к своей строке. */
.tb-pd-page .tb-pd-delivery__note {
    display: block;
}

/* Текстовый «хвост» описания (рекламный абзац из поля состава) шёл с
   межстрочным 16px при кегле 16px — строки слипались в плотный кирпич, хотя
   список над ним дышит. Даём тот же интерлиньяж, что у вводного абзаца
   доставки, и отбиваем от списка. */
.tb-pd-page .detail-info__extra,
.tb-pd-page .detail-info-compose__content_plain {
    line-height: 1.4;
}

.tb-pd-page .detail-info__extra {
    margin-top: 16px;
}

/* [TB-TILES] Похожие товары — в той же пропорции 4:5, что фото товара и плитки
   в выдачах. В pd.css из вёрстки стоит квадрат, но файл генерится скриптом —
   правим здесь. */
.tb-pd-page .similar-item__preview {
    aspect-ratio: 4 / 5;
}