/* ---------------------------------------------------------------
   product.css - карточка товара

   Разметка: product_detailed.tpl.html, обёртка .product_det.pd
   Логика:   js/product.js (галерея, вкладки, счётчик количества)

   Внутри .pd лежат старые классы движка (.extra, .extr_item, .buy,
   .colich, #optionPrice2), их трогать нельзя - на них висит
   GetCurrentCurrency() и отправка формы. Поэтому здесь они
   переопределяются через .pd и !important, а не переименовываются.
   --------------------------------------------------------------- */

.pd {
    color: #123f63;
}

/* ---- верхний блок ------------------------------------------------ */

.pd .pd-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    align-items: start;
    margin-bottom: 26px;
}

/* ---- галерея ------------------------------------------------------ */

.pd .pd-gallery {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.pd .pd-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow: hidden;
}

/* the strip scrolls (js/product.js sets overflow-y and adds the
   "more photos" arrow), but the scrollbar itself is not shown */
.pd .pd-gallery__thumbs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pd .pd-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.pd .pd-gallery__thumbs .fotosmile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pd .pd-gallery__thumbs a {
    display: block;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 2px solid #d3e3f3;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

/* рамки в цвет кнопки «В корзину» (#0d6efd) */
.pd .pd-gallery__thumbs a:hover {
    border-color: #6fa0f5;
}

.pd .pd-gallery__thumbs a.pd-thumb--active {
    border: 3px solid #0d6efd;
    padding: 2px !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, .25);
}

.pd .pd-gallery__thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 6px !important;   /* по скруглению рамки: 10px минус рамка и отступ */
}

/* стрелка под лентой превью (js/product.js, initGallery): есть, когда
   фото больше, чем помещается. Видна при наведении на галерею. Клик -
   лента раскрывается (все превью, листается), дальше - листает вниз, в
   конце списка стрелка разворачивается и сворачивает ленту обратно */

.pd .pd-thumbs-more {
    display: none;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 2px solid #d3e3f3;
    border-radius: 10px;
    background: #fff;
    color: #0d6efd;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s, background .15s, border-color .15s;
}

.pd .pd-thumbs-more svg {
    transition: transform .25s;
}

.pd .pd-thumbs-more:hover {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

.pd .pd-thumbs-more.pd-thumbs-more--on {
    display: flex;
}

.pd .pd-gallery:hover .pd-thumbs-more--on,
.pd .pd-thumbs-more--on:focus-visible,
.pd .pd-gallery.pd-thumbs-open .pd-thumbs-more--on {
    opacity: 1;
    transform: none;
}

.pd .pd-thumbs-more.pd-thumbs-more--up svg {
    transform: rotate(180deg);
}

/* на устройствах без наведения стрелка видна всегда */
@media (hover: none) {
    .pd .pd-thumbs-more--on { opacity: 1; transform: none; }
}

/* раскрытая лента листается колёсиком, полоса прокрутки тонкая */
.pd .pd-gallery.pd-thumbs-open .pd-gallery__thumbs {
    scroll-behavior: smooth;
}

/* места в сетке заданы явно: кнопку "ещё фото" (её вставляет js/product.js
   сразу после ленты) иначе сетка ставила во вторую колонку, и главное фото
   уезжало вниз - у товаров, где превью не влезают по высоте */
.pd .pd-gallery__thumbs { grid-column: 1; grid-row: 1; }
.pd .pd-thumbs-more { grid-column: 1; grid-row: 2; }

.pd .pd-gallery__main {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    border: 1px solid #cfe6f3;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.pd .pd-gallery__main .image__clicker,
.pd .pd-gallery__main .clicker-wrapper {
    display: none;
}

.pd .pd-gallery__main > a {
    display: block;
}

.pd .pd-gallery__main img {
    width: 100% !important;
    height: auto !important;
    max-height: 560px;
    object-fit: contain;
    display: block;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff;
}

/* heart "to favorites" on the main photo (js/catalog.js, .ct-fav) */
.pd .pd-gallery__main .ct-fav.pd-fav {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    box-shadow: 0 2px 8px rgba(18, 63, 99, .12);
}

/* ---- правая колонка ------------------------------------------------ */

.pd .pd-buy {
    position: sticky;
    top: 78px;
}

.pd h1.pd-title {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1.2;
    font-weight: bold;
    color: #123f63;
    text-align: left;
}

.pd .pd-sub {
    margin-bottom: 14px;
    font-size: 15px;
    color: #4a7d9c;
    line-height: 1.45;
}

/* ---- цена ---------------------------------------------------------- */

.pd .pd-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.pd .pd-price #optionPrice2,
.pd .pd-price .chena_summ {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

.pd .pd-price #optionPrice1 {
    font-size: 30px;
    line-height: 1.1;
    font-weight: bold;
    color: #2c7a45 !important;
    white-space: nowrap;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.pd .pd-price #price_d,
.pd .pd-price #optionPriceFull {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 17px;
    color: #c0554c !important;
    text-decoration: line-through;
    white-space: nowrap;
}

.pd .pd-sale {
    padding: 4px 10px;
    border-radius: 7px;
    background: #f2c16b;
    color: #4a3505;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
}

.pd .pd-price__note {
    margin-bottom: 16px;
    font-size: 13px;
    color: #7a99a9;
}

/* ---- карточка с опциями и кнопками --------------------------------- */

.pd .pd-card {
    padding: 6px 18px 18px;
    border: 1px solid #e2eef5;
    border-radius: 14px;
    background: #f7fbfd;
}

.pd .pd-options {
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.pd .pd-options form {
    margin: 0;
    padding: 0;
}

.pd .pd-options .extr_item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 215px);
    align-items: center;
    gap: 10px 14px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e2eef5;
    background: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

.pd .pd-options .extr_item:last-child {
    border-bottom: 0;
}

.pd .pd-options .extr_name {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 15px;
    font-weight: bold;
    color: #123f63 !important;
    text-align: left !important;
    background: none !important;
}

.pd .pd-options .nameopch {
    display: inline-block;
    margin-right: 6px;
}

.pd .pd-options .extr_value {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
}

/* Старые правила бьют по специфичности: style.css задаёт .inputtext1
   height:24px и .extr_value width:190px + display:inline-block, media.css -
   extr_name margin-left:-18px. Отсюда обрезанный текст в списках и
   съехавшие подписи, поэтому здесь !important. */

.pd .pd-options .extr_name {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100% !important;
    margin: 0 0 7px !important;
    margin-left: 0 !important;
    font-size: 15px !important;
}

.pd .pd-options .extr_value {
    display: block !important;
    width: 100% !important;
    line-height: normal !important;
    border-radius: 0 !important;
}

.pd .pd-options select,
.pd .pd-options .inputtext1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px;
    padding: 10px 12px !important;
    border: 1px solid #cfe6f3 !important;
    border-radius: 9px !important;
    background: #fff !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: normal !important;
    color: #123f63;
    cursor: pointer;
    box-shadow: none !important;
}

/* иконка характеристики из спрайта props-sprite.tpl.html */

.pd .pd-opt__icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #2585b4;
}

.pd .pd-opt__icon svg {
    display: block;
}

/* ---- плитки-образцы ------------------------------------------- */

.pd .pd-opt--tiles .extr_value select {
    display: none !important;
}

.pd .pd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.pd .swatch {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    background-color: #f3f6f8;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
}

.pd .swatch:hover {
    border-color: rgba(0, 0, 0, .4);
}

.pd .swatch:focus {
    outline: 2px solid #2563a8;
    outline-offset: 2px;
}

.pd .swatch--on {
    border: 2px solid #2563a8;
    box-shadow: inset 0 0 0 2px #fff;
}

/* значение без картинки среди картинок - плитка с текстом */

.pd .swatch--text {
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    background-color: #fff;
}

.pd .swatch__text {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    color: #123f63;
    white-space: nowrap;
}

/* подпись выбранного значения */

.pd .pd-chosen {
    margin-top: 7px;
    font-size: 14px;
    color: #4a7d9c;
}

.pd .pd-chosen b {
    color: #123f63;
}

.pd .pd-options select:focus {
    outline: none;
    border-color: #2585b4;
    box-shadow: 0 0 0 3px rgba(37, 133, 180, .13);
}

/* образцы-картинки внутри опции (оттенки, материал, основание) */

.pd .pd-options .variant1 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    float: none !important;
    width: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

.pd .pd-options .variant1 .modelI,
.pd .pd-options .variant1 > div {
    float: none !important;
    margin: 0 !important;
}

.pd .pd-options .variant1 img {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover;
    display: block;
    border: 1px solid #cfe6f3;
    border-radius: 7px;
    box-shadow: none !important;
}

.pd .pd-options .variant3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none !important;
    margin: 0 0 0 4px !important;
    font-size: 13px;
}

.pd .pd-options .variant3 img {
    width: 16px !important;
    height: 16px !important;
    box-shadow: none !important;
}

/* ---- количество ----------------------------------------------------- */

.pd .pd-qty {
    display: flex !important;
    align-items: center;
    gap: 8px;
    float: none !important;
    width: auto !important;
    margin: 4px 0 14px !important;
    padding: 0 !important;
    font-size: 15px;
    color: #123f63 !important;
}

.pd .pd-qty__label {
    margin-right: 4px;
}

.pd .pd-qty__btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #cfe6f3;
    border-radius: 8px;
    background: #fff;
    font-size: 17px;
    line-height: 1;
    color: #1b6f9c;
    cursor: pointer;
}

.pd .pd-qty__btn:hover {
    border-color: #1b6f9c;
    background: #f2f9fc;
}

.pd .pd-qty__input {
    width: 54px !important;
    height: 34px;
    padding: 0 !important;
    border: 1px solid #cfe6f3 !important;
    border-radius: 8px;
    background: #fff !important;
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    color: #123f63;
}

/* ---- кнопки покупки -------------------------------------------------- */

.pd .pd-actions {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.pd .pd-actions form {
    margin: 0;
    padding: 0;
}

.pd .cart-btn,
.pd .inputtextbuy {
    display: block;
    width: 100%;
    padding: 15px 20px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #1b6f9c !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: bold;
    cursor: pointer;
    transition: background .2s ease;
    height: auto !important;
    background-image: none !important;
}

.pd .cart-btn:hover,
.pd .inputtextbuy:hover {
    background: #12507d !important;
}

.pd #odinkl {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 14px 20px !important;
    border: 1px solid #a0d3eb !important;
    border-radius: 11px;
    background: #fff !important;
    color: #1b6f9c !important;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    position: static !important;
    float: none !important;
    height: auto !important;
}

.pd #odinkl:hover {
    background: #f2f9fc !important;
    border-color: #1b6f9c !important;
}

.pd #odinkl div {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- подсказки под кнопками ------------------------------------------ */

.pd .pd-help {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2eef5;
}

.pd .pd-help__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1b6f9c !important;
    font-size: 14px;
    text-decoration: none;
}

.pd .pd-help__link:hover {
    text-decoration: underline;
}

.pd .pd-share {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2eef5;
}

.pd .pd-share .ya-share3-good {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pd .pd-share h3 {
    margin: 0 0 8px !important;
    font-size: 14px;
    font-weight: bold;
    color: #7a99a9 !important;
}

/* ---- вкладки ---------------------------------------------------------- */

.pd .pd-tabs {
    margin-bottom: 26px;
    /* full width whatever tab is open: without it the block took the
       width of the open tab's content */
    width: 100%;
    box-sizing: border-box;
}

.pd .pd-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #cfe6f3;
}

.pd .pd-tab {
    padding: 12px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 15px;
    color: #4a7d9c;
    cursor: pointer;
    margin-bottom: -1px;
}

.pd .pd-tab:hover {
    color: #1b6f9c;
}

.pd .pd-tab--active {
    color: #1b6f9c;
    font-weight: bold;
    border-bottom-color: #1b6f9c;
}

.pd .pd-tab--hidden {
    display: none;
}

.pd .pd-tabs__body {
    padding: 18px 0 0;
}

.pd .pd-pane {
    display: none;
}

.pd .pd-pane--active {
    display: block;
}

.pd .pd-pane.des {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* ---- вкладка «Доставка и оплата» (#pd-pane-ship) ----------------------- */

.pd .pd-ship { color: #34465c; }

.pd h3.pd-ship__title {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 26px;
    font-weight: 700;
    color: #123f63;
    text-align: left;
}

.pd .pd-ship__lead {
    margin: 0 0 22px;
    text-indent: 0;
    color: #6a8799;
    font-size: 16px;
}

.pd .pd-ship__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: repeat(var(--pd-ship-n, 4), minmax(0, 1fr)); /* число этапов - из шаблона */
    gap: 18px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pd .pd-ship__step {
    position: relative;
    margin: 0;
    text-align: center;
    list-style: none;
}

/* пунктир со стрелкой к следующему этапу: от круга с иконкой до номера
   следующего (номер стоит на 78px левее центра его этапа) */
.pd .pd-ship__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 38px;
    left: calc(50% + 46px);
    width: calc(100% - 112px);
    border-top: 2px dotted #9cc3f0;
}

.pd .pd-ship__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    left: calc(50% + 46px + (100% - 112px) / 2 - 5px);
    width: 8px;
    height: 8px;
    border-top: 2px solid #4da3ff;
    border-right: 2px solid #4da3ff;
    transform: rotate(45deg);
}

.pd .pd-ship__head {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
}

.pd .pd-ship__num {
    position: absolute;
    left: -40px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: #e3efff;
    color: #0d6efd;
    font-weight: 700;
    font-size: 15px;
}

.pd .pd-ship__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #123f63;
    flex: 0 0 auto;
}

.pd .pd-ship__ico--sm {
    width: 58px;
    height: 58px;
}

.pd .pd-ship__step > b {
    display: block;
    margin: 0 0 6px;
    color: #123f63;
    font-size: 16px;
}

.pd .pd-ship__step > span {
    display: block;
    color: #5b7489;
    font-size: 14px;
    line-height: 1.45;
}

.pd .pd-ship__ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

.pd .pd-ship__way {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border: 1px solid #d7e8f7;
    border-radius: 14px;
    background: #f4f9fe;
}

.pd .pd-ship__art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #e3efff;
    flex: 0 0 auto;
}

.pd .pd-ship__way h4 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
    color: #123f63;
}

.pd .pd-ship__way h4 svg { flex: 0 0 auto; margin-top: 2px; }

.pd .pd-ship__way p {
    margin: 0;
    text-indent: 0;
    color: #5b7489;
    font-size: 15px;
    line-height: 1.5;
}

.pd .pd-ship__more {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px 10px;
    border: 1px solid #d7e8f7;
    border-radius: 14px;
    background: #fff;
}

.pd .pd-ship__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
}

.pd .pd-ship__item + .pd-ship__item { border-left: 1px solid #e2eef5; }

.pd .pd-ship__item .pd-ship__ico { background: #eaf3ff; }

.pd .pd-ship__item > div > b {
    display: block;
    margin: 0 0 3px;
    color: #123f63;
    font-size: 15px;
}

.pd .pd-ship__item > div > span {
    display: block;
    color: #5b7489;
    font-size: 13.5px;
    line-height: 1.4;
}

.pd .pd-ship__tel {
    display: block;
    margin: 0 0 2px;
    color: #0d6efd !important;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

@media only screen and (max-width: 1200px) {
    .pd .pd-ship__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .pd .pd-ship__step:nth-child(2)::before,
    .pd .pd-ship__step:nth-child(2)::after { display: none; }
    .pd .pd-ship__more { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pd .pd-ship__item + .pd-ship__item { border-left: 0; border-top: 1px solid #e2eef5; padding-top: 14px; }
}

@media only screen and (max-width: 760px) {
    .pd .pd-ship__ways { grid-template-columns: minmax(0, 1fr); }
    .pd .pd-ship__art { width: 84px; height: 84px; }
    .pd .pd-ship__art svg { width: 64px; height: auto; }
    .pd .pd-ship__way { padding: 16px; gap: 14px; }
    .pd .pd-ship__way h4 { font-size: 17px; }
}

@media only screen and (max-width: 520px) {
    .pd h3.pd-ship__title { font-size: 21px; }
    .pd .pd-ship__steps { grid-template-columns: minmax(0, 1fr); }
    .pd .pd-ship__step::before, .pd .pd-ship__step::after { display: none; }
}

/* ---- планшет и телефон -------------------------------------------------- */

@media only screen and (max-width: 1200px) {

    .pd .pd-top {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 18px;
    }
}

@media only screen and (max-width: 985px) {

    .pd .pd-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd .pd-buy {
        position: static;
    }

    .pd .pd-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd .pd-gallery__thumbs {
        order: 2;
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .pd .pd-gallery__thumbs .fotosmile {
        flex-direction: row;
    }

    .pd .pd-gallery__thumbs,
    .pd .pd-gallery__main {
        grid-column: auto;
        grid-row: auto;
    }

    .pd .pd-gallery__main {
        order: 1;
    }

    .pd .pd-thumbs-more {
        display: none !important;
    }
}

@media only screen and (max-width: 640px) {

    .pd h1.pd-title {
        font-size: 21px;
    }

    .pd .pd-price #optionPrice1 {
        font-size: 25px;
    }

    .pd .pd-card {
        padding: 14px;
    }

    .pd .pd-tab {
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 640px) {

    .pd .swatch {
        width: 44px;
        height: 44px;
    }

    .pd .swatch--text {
        width: auto;
        min-width: 44px;
    }
}

/* строка с плитками: название слева, плитки занимают правую колонку
   и при нехватке места переносятся под неё */

.pd .pd-options .extr_item.pd-opt--tiles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 215px);
}

.pd .pd-options .pd-swatches {
    grid-column: 2;
}

.pd .pd-options .pd-chosen {
    grid-column: 2;
    margin-top: 0;
}

/* "Подбор оттенка" - убираем фиолетовый градиент из trig.css */

.pd .pd-options #klic_ottenki_servis {
    display: inline-block;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    color: #1b6f9c !important;
    font-size: 13px;
    text-decoration: underline;
    box-shadow: none !important;
}

.pd .pd-options .variant3.ottenkifl {
    width: auto !important;
    gap: 8px;
}

@media only screen and (max-width: 640px) {

    .pd .pd-options .extr_item,
    .pd .pd-options .extr_item.pd-opt--tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd .pd-options .extr_name,
    .pd .pd-options .extr_value,
    .pd .pd-options .pd-swatches,
    .pd .pd-options .pd-chosen {
        grid-column: 1;
    }
}

/* ---- строка опции: одна линия, как в макете -------------------------
   Разбивало на три строки из-за старых размеров:
     option.css .variant3 { width:25px; height:25px }
     trig.css   .variant3.ottenkifl { width:130px }
     media.css  div.extr_name { width:100% !important }
   плюс .nameopch - блочный div, он забирал всю строку.
   -------------------------------------------------------------------- */

.pd .pd-options .extr_name {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-height: 34px;
}

.pd .pd-options .nameopch {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: bold;
    color: #123f63;
    white-space: normal;
}

.pd .pd-options .variant3,
.pd .pd-options .variant3.ottenkifl {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pd .pd-options .variant3 img {
    width: 16px !important;
    height: 16px !important;
    opacity: .75;
}

/* старые картинки-подсказки значений: их роль теперь у плиток-образцов,
   в строке они только ломали ширину */

.pd .pd-options .extr_name .variant1 {
    display: none !important;
}

/* поле справа - светлая плашка, как на макете */

.pd .pd-options select,
.pd .pd-options .inputtext1 {
    min-height: 44px;
    border: 1px solid #e3ebf2 !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    font-size: 14px !important;
    color: #123f63 !important;
}

.pd .pd-options select:hover {
    background: #e9f0f6 !important;
}

.pd .pd-options .extr_item {
    min-height: 60px;
}

/* плитки прижимаем к той же колонке, что и списки */

.pd .pd-options .pd-swatches {
    justify-content: flex-start;
}

.pd .swatch {
    width: 44px;
    height: 44px;
    border-radius: 9px;
}

/* ---- правки по замечаниям -------------------------------------------- */

/* всё в карточке считаем по border-box: без этого width:100% + padding
   вылезали за край - так и уехали "Купить в 1 клик" и блок "Поделиться" */

.pd,
.pd * {
    box-sizing: border-box;
}

/* отступ между хлебными крошками и фото */

.pd-crumbs {
    margin-bottom: 20px !important;
}

/* "В корзину" - синяя кнопка из макета.
   trig.css .cart-btn даёт градиент, свечение и ::after со стрелкой -
   всё это здесь снимается. */

.pd .cart-btn,
.pd .inputtextbuy {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0d6efd !important;
    background-image: none !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 17px !important;
    font-weight: bold;
    line-height: 1.2;
    text-transform: none;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
    transition: background .2s ease;
    position: relative;
    overflow: hidden;
}

.pd .cart-btn:hover,
.pd .inputtextbuy:hover {
    background: #0b5ed7 !important;
    box-shadow: none !important;
    transform: none !important;
}

.pd .cart-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .28) !important;
}

.pd .cart-btn:before,
.pd .cart-btn:after,
.pd .inputtextbuy:before,
.pd .inputtextbuy:after {
    content: none !important;
    display: none !important;
}

.pd .cart-btn svg {
    flex: 0 0 auto;
}

/* "Купить в 1 клик": trig.css прибивает #odinkl к 186 px */

.pd #odinkl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* блок "Поделиться": trig.css сдвигал его на 42 px вниз */

.pd .pd-share .ya-share3-good {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
}

.pd .pd-share .ya-share2 {
    display: block;
}

/* своя иконка характеристики файлом (dz_icon с точкой): не перекрашиваем */

.pd .pd-opt__icon--file img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    display: block;
    border: 0 !important;
    box-shadow: none !important;
    background: none;
}

/* ---- цена как в образце ---------------------------------------------- */

.pd .pd-price #optionPrice1 {
    font-size: 34px !important;
    font-weight: 800;
    color: #16a34a !important;
    letter-spacing: -.01em;
}

.pd .pd-price #price_d,
.pd .pd-price #optionPriceFull {
    font-size: 18px;
    font-weight: normal;
    color: #dc2626 !important;
    opacity: .75;
}

.pd .pd-sale {
    padding: 5px 11px;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}

.pd .pd-price {
    gap: 14px;
    margin-bottom: 6px;
}

.pd .pd-price__note {
    font-size: 14px;
}

@media only screen and (max-width: 640px) {

    .pd .pd-price #optionPrice1 {
        font-size: 28px !important;
    }
}

/* ---- характеристики: новый блок --------------------------------------- */

.pd .pd-spec {
    max-width: 900px;
}

.pd .pd-spec__chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pd .pd-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #e2eef5;
    border-radius: 12px;
    background: #f7fbfd;
}

.pd .pd-chip__ico {
    flex: 0 0 auto;
    color: #1b6f9c;
}

.pd .pd-chip__title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    color: #123f63;
}

.pd .pd-chip__sub {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.25;
    color: #7a99a9;
}

.pd .pd-spec__group {
    margin-bottom: 16px;
    border: 1px solid #e2eef5;
    border-radius: 12px;
    overflow: hidden;
}

.pd .pd-spec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #eaf4fa;
    font-size: 16px;
    font-weight: bold;
    color: #123f63;
}

.pd .pd-spec__head svg {
    flex: 0 0 auto;
    color: #1b6f9c;
}

.pd .pd-spec__row {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 10px 20px;
    padding: 11px 16px;
    border-top: 1px solid #eef4f8;
    font-size: 15px;
}

.pd .pd-spec__row:nth-child(odd) {
    background: #fbfdfe;
}

.pd .pd-spec__name {
    color: #4a7d9c;
}

.pd .pd-spec__val {
    color: #123f63;
}

.pd .pd-spec__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #cfe6f3;
    border-radius: 12px;
    background: #f2f9fc;
    font-size: 14px;
    line-height: 1.5;
    color: #2b5f7f;
}

.pd .pd-spec__note svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #1b6f9c;
}

.pd .pd-spec__note b {
    color: #123f63;
}

.pd .pd-spec__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #cfe6f3;
    border-radius: 14px;
    background: #f7fbfd;
}

.pd .pd-spec__cta-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1b6f9c;
    color: #fff;
}

.pd .pd-spec__cta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pd .pd-spec__cta-title {
    font-size: 15px;
    font-weight: bold;
    color: #123f63;
}

.pd .pd-spec__cta-sub {
    margin-top: 2px;
    font-size: 14px;
    color: #7a99a9;
}

.pd .pd-spec__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 20px;
    border: 1px solid #1b6f9c;
    border-radius: 10px;
    background: #fff;
    color: #1b6f9c !important;
    font-size: 15px;
    text-decoration: none !important;
}

.pd .pd-spec__cta-btn:hover {
    background: #1b6f9c;
    color: #fff !important;
}

@media only screen and (max-width: 985px) {

    .pd .pd-spec__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 640px) {

    .pd .pd-spec__chips {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .pd .pd-spec__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 10px 12px;
    }

    .pd .pd-spec__name {
        font-size: 13px;
    }

    .pd .pd-spec__cta {
        flex-wrap: wrap;
    }

    .pd .pd-spec__cta-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---- "С этим товаром покупают" ---------------------------------------
   Разметка: блок #pp777.pd-rel в product_detailed.tpl.html
   Чипсы и стрелки рисует js/product.js
   Старые классы .pohozietovari, .item2, .name7, .price1 больше не
   используются - карточка живёт в своём пространстве pd-rel.
   ----------------------------------------------------------------------- */

.pd-rel,
body div.pohozietovari.pd-rel {
    float: none !important;
    width: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: none !important;
    text-align: left !important;
}

.pd-rel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pd-rel h3.pd-rel__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1.15;
    font-weight: bold;
    color: #123f63;
    text-align: left;
}

.pd-rel__sub {
    margin-top: 4px;
    font-size: 15px;
    color: #7a99a9;
}

.pd-rel__count {
    flex: 0 0 auto;
    font-size: 14px;
    color: #7a99a9;
    white-space: nowrap;
}

.pd-rel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.pd-rel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.pd-rel__chip {
    padding: 9px 18px;
    border: 1px solid #e2eef5;
    border-radius: 22px;
    background: #f1f5f9;
    font-family: inherit;
    font-size: 14px;
    color: #4a7d9c;
    cursor: pointer;
    white-space: nowrap;
}

.pd-rel__chip:hover {
    border-color: #a0d3eb;
    color: #1b6f9c;
}

.pd-rel__chip--on {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    font-weight: bold;
}

.pd-rel__nav {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.pd-rel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eaf2fb;
    color: #1b6f9c;
    cursor: pointer;
}

.pd-rel__arrow:hover {
    background: #d9e8f8;
}

.pd-rel__arrow--next {
    background: #0d6efd;
    color: #fff;
}

.pd-rel__arrow--next:hover {
    background: #0b5ed7;
}

.pd-rel__arrow[disabled] {
    opacity: .4;
    cursor: default;
}

/* лента карточек */

.pd-rel__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}

.pd-rel__track::-webkit-scrollbar {
    height: 6px;
}

.pd-rel__track::-webkit-scrollbar-thumb {
    background: #cfe6f3;
    border-radius: 3px;
}

.pd-rel__card {
    position: relative;
    flex: 0 0 calc(25% - 12px);
    min-width: 230px;
    display: flex;
    flex-direction: column;
    padding: 0 0 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4fbff 0%, #e8f4fd 100%);
    overflow: hidden;
}

.pd-rel__card.pd-rel__card--hidden {
    display: none;
}

.pd-rel__img {
    display: block;
    padding: 18px 18px 6px;
}

.pd-rel__img img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    display: block;
    box-shadow: none !important;
}

.pd-rel__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 16px;
}

.pd-rel__cat {
    margin-bottom: 3px;
    font-size: 13px;
    color: #7a99a9;
}

.pd-rel__name {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
}

.pd-rel__name a {
    color: #123f63 !important;
    text-decoration: none;
}

.pd-rel__name a:hover {
    color: #1b6f9c !important;
}

.pd-rel .pd-rel__price {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: bold;
    color: #123f63 !important;
    white-space: nowrap;
}

.pd-rel__btn {
    display: block;
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff !important;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
}

.pd-rel__btn:hover {
    background: #0b5ed7;
}

.pd-rel .ct-fav.pd-rel__fav {
    top: 12px;
    right: 12px;
    border-color: transparent;
    background: rgba(255, 255, 255, .85);
    color: #1b6f9c;
    z-index: 3;
}

@media only screen and (max-width: 1200px) {

    .pd-rel__card {
        flex: 0 0 calc(33.333% - 11px);
    }
}

@media only screen and (max-width: 985px) {

    .pd-rel__card {
        flex: 0 0 calc(50% - 8px);
    }

    .pd-rel h3.pd-rel__title {
        font-size: 21px;
    }
}

@media only screen and (max-width: 640px) {

    .pd-rel__head {
        flex-wrap: wrap;
        gap: 6px;
    }

    .pd-rel__bar {
        flex-wrap: wrap;
    }

    .pd-rel__nav {
        display: none;
    }

    .pd-rel__card {
        flex: 0 0 76%;
        min-width: 0;
    }

    .pd-rel__img img {
        height: 140px;
    }
}

/* ---- правки блока рекомендаций по образцу ----------------------------- */

/* счётчик товаров - в одну строку с заголовком, сверху справа */

.pd-rel__head {
    align-items: flex-start;
}

.pd-rel__count {
    padding-top: 6px;
}

/* полосу прокрутки прячем: листаем стрелками, пальцем или колесом */

.pd-rel__track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pd-rel__track::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* карточка: картинка на светлой подложке, текст плотнее */

.pd-rel__card {
    background: linear-gradient(180deg, #f2fafe 0%, #e6f3fc 100%);
}

.pd-rel__img {
    padding: 14px 14px 4px;
}

.pd-rel__img img {
    height: 178px;
    background: none;
    border-radius: 8px;
}

.pd-rel__cat {
    font-size: 13px;
    color: #8aa6b6;
}

.pd-rel__name {
    font-size: 15px;
    margin-bottom: 6px;
}

.pd-rel .pd-rel__price {
    font-size: 21px;
    margin-bottom: 14px;
}

.pd-rel__btn {
    padding: 13px 16px;
    border-radius: 11px;
}

/* плашка помощи под лентой */

.pd-rel__help {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #eaf4fd;
}

.pd-rel__help-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d7e9fa;
    color: #1b6f9c;
}

.pd-rel__help-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-rel__help-title {
    display: block;
    font-size: 17px;
    font-weight: bold;
    color: #123f63;
}

.pd-rel__help-sub {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #5c8098;
}

.pd-rel__help-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 14px 24px;
    border-radius: 12px;
    background: #fff;
    color: #0d6efd !important;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none !important;
}

.pd-rel__help-btn:hover {
    background: #0d6efd;
    color: #fff !important;
}

@media only screen and (max-width: 640px) {

    .pd-rel__help {
        flex-wrap: wrap;
        padding: 14px;
    }

    .pd-rel__help-ico {
        display: none;
    }

    .pd-rel__help-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---- tab "Our advantages" (#pd-pane-adv) -----------------------------
   Content is the old triger.html / triger-preum-dover.html block. There it
   had a fixed height, floats and a "show more" fold (mai1.js adds .foolost
   and .prem_d); inside a tab everything is shown as a simple grid. */

/* old theme rules squeeze divs in the product card to 620px */
.pd #pd-pane-adv,
#pd-pane-adv noindex {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

#pd-pane-adv noindex { display: block; }

#pd-pane-adv .priimuw {
    width: auto;
    height: auto !important;
    margin: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    width: auto !important;
}

#pd-pane-adv .priimuw::before,
#pd-pane-adv .foolost::before {
    display: none;
    content: none;
}

#pd-pane-adv .priimuw h2,
#pd-pane-adv .prem_d,
#pd-pane-adv hr,
#pd-pane-adv br {
    display: none;
}

#pd-pane-adv div.priimuw_kateg {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d7ebf6;
    border-radius: 14px;
    background: #f7fbfd;
}

#pd-pane-adv div.priimuw_kateg_img {
    float: none;
    flex: 0 0 52px;
    width: 52px;
    padding: 0;
}

#pd-pane-adv .priimuw_kateg_img img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

#pd-pane-adv .priimuw_kateg_text {
    float: none;
    width: auto;
    min-width: 0;
}

#pd-pane-adv .priimuw_kateg_text span {
    display: block;
}

#pd-pane-adv .priimuw_kateg_text_sagal {
    margin-bottom: 4px;
    color: #123f63;
    font-size: 16px;
    font-weight: 700;
}

#pd-pane-adv .priimuw_kateg_text_sagal2 {
    color: #4f6b7c;
    font-size: 14px;
    line-height: 1.45;
}

/* ---- "Buy together" (.pd-rel): photo in a clean white frame ---------
   the photo used to sit in a narrower box than its frame, so the card's
   blue gradient showed on the sides and the site-wide img border drew a
   second line around it */

.pd-rel__img {
    margin: 12px 12px 6px;
    padding: 10px;
    border: 1px solid #dcebf4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.pd-rel__card:hover .pd-rel__img {
    border-color: #a9d2e8;
    box-shadow: 0 4px 14px rgba(18, 63, 99, .08);
}

.pd-rel__img img {
    width: 100%;
    height: 170px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: #fff;
    object-fit: contain;
}

.pd-rel .ct-fav.pd-rel__fav {
    top: 20px;
    right: 20px;
    border: 1px solid #e3eff6;
    background: rgba(255, 255, 255, .95);
}

@media only screen and (max-width: 640px) {

    .pd-rel__img img {
        height: 140px;
    }
}

/* ---- справка к характеристике -------------------------------------
   Значок "?" у названия характеристики (a.pd-opt-help) и окно поверх
   страницы (js/product.js, initOptHelp). Окно ниже fancybox по слоям
   нельзя - картинки из справки открываются в fancybox, поэтому пока
   окно открыто, fancybox поднимаем над ним. Классы .osnovanieviwer3,
   #osnovanie и т.п. - разметка старых вставок osnovanie.html,
   zakaz-*.html; раньше их стили лежали в product_detali_option.html.
   -------------------------------------------------------------------- */

.pd .pd-options .pd-opt-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dzoh-ov {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 30, 50, .55);
}

.dzoh-ov.is-open { display: flex; }

html.dzoh-open { overflow: hidden; }
html.dzoh-open .fancybox__container { z-index: 2100 !important; }

.dzoh-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    max-height: 100%;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    color: #123f63;
}

.dzoh-box--frame {
    max-width: 1080px;
    height: 100%;
    max-height: 760px;
}

.dzoh-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px 22px;
    border-bottom: 1px solid #e3eff6;
}

.dzoh-title {
    flex: 1;
    min-width: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.25;
}

.dzoh-x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #123f63;
    font-size: 16px;
    cursor: pointer;
}

.dzoh-x:hover { background: #e3ebf2; }

.dzoh-body {
    flex: 1 1 auto;
    min-height: 120px;
    padding: 16px 22px 22px;
    overflow: auto;
    font-size: 15px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

.dzoh-box--frame .dzoh-body { padding: 0; overflow: hidden; }
.dzoh-body iframe { display: block; width: 100%; height: 100%; border: 0; }

.dzoh-body.is-loading {
    background: url(/templates/frontend/mmoscal/images/ico/ajax-loader2.gif) center center no-repeat;
    background-size: 64px 64px;
}

.dzoh-body img { max-width: 100%; height: auto; }
.dzoh-body h2 { width: 100%; margin: 10px 0 8px; font-size: 17px; color: #123f63; }
.dzoh-body table { max-width: 100%; border-collapse: collapse; }
.dzoh-body .dzoh-fail { margin: 20px 0; text-align: center; color: #b3413f; }

/* старые вставки: сетка карточек с фото */
.dzoh-body #osnovanie,
.dzoh-body #material,
.dzoh-body #yawiki,
.dzoh-body #wit_material {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    max-height: none;
    overflow: visible;
}

.dzoh-body .osnovanieviwer3 {
    width: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid #e3eff6;
    border-radius: 12px;
    box-shadow: none;
    text-align: center;
}

.dzoh-body .osnovanieviwer3 img { width: 100%; border-radius: 8px; }
.dzoh-body .osnovanieviwer3 h2 { margin: 0 0 8px; font-size: 15px; }

.dzoh-body #ottenok_new,
.dzoh-body #kafel_new {
    height: auto;
    max-height: none;
}

@media only screen and (max-width: 640px) {

    .dzoh-ov { padding: 0; align-items: stretch; }
    .dzoh-box, .dzoh-box--frame { max-width: none; max-height: none; height: 100%; border-radius: 0; }
    .dzoh-title { font-size: 17px; }
    .dzoh-body { padding: 12px 14px 18px; }
}

/* ---- справка "Оттенки" (zakaz-ottenki.html в окне) ------------------
   Вставка рассчитана на старое окно: плитки по 200px с рамкой в две
   колонки (skidki.css). В окне - плотная сетка образцов, название под
   фото. */

.dzoh-body #ottenok_new.ottenkioki,
.dzoh-body #ottenok_new {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 16px 14px;
    align-items: start !important;   /* skidki.css ставит center */
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

.dzoh-body #ottenok_new > .ottenki_bloc {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;   /* в column-reverse это "прижать к верху" */
    gap: 7px;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none;
}

.dzoh-body #ottenok_new .ottenki_bloc a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e3eff6;
    transition: box-shadow .2s, transform .2s;
}

.dzoh-body #ottenok_new .ottenki_bloc a:hover {
    box-shadow: 0 6px 18px rgba(18, 63, 99, .18);
    transform: translateY(-2px);
}

.dzoh-body #ottenok_new .ottenki_bloc img {
    display: block;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
}

.dzoh-body #ottenok_new .ottenki_name {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25;
    font-weight: bold;
    color: #123f63;
    text-align: center;
    padding: 0 !important;
}

.dzoh-body #ottenok_new > br { display: none; }

/* видео под образцами: во всю ширину, резиновое */
.dzoh-body .youtube {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    width: auto !important;
    margin: 10px 0 0 !important;
    float: none !important;
}

.dzoh-body .youtube br { display: none; }

.dzoh-body .youtube iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
}

@media only screen and (max-width: 640px) {

    .dzoh-body #ottenok_new.ottenkioki,
    .dzoh-body #ottenok_new {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .dzoh-body #ottenok_new .ottenki_name { font-size: 12px !important; }
}

/* ---- "Вы недавно просматривали" (last_view.php, section.pd-lv) ------
   До 24 товаров. В ленте - по 6 карточек, если помещаются (не уже 170px),
   остальные листаются стрелками; «Посмотреть все» - сеткой по 6 в ряд. */
   Стрелки и "Посмотреть все" - js/product.js, initLastViewed. */

.pd-lv {
    clear: both;
    margin: 28px 0 24px;
    padding: 20px 22px 22px;
    border: 1px solid #e3eff6;
    border-radius: 16px;
    background: #fff;
}

.pd-lv__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.pd-lv h3.pd-lv__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    color: #123f63;
    text-align: left;
}

.pd-lv__tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.pd-lv__all {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #1b6f9c;
    cursor: pointer;
    white-space: nowrap;
}

.pd-lv__all:hover { color: #0d6efd; text-decoration: underline; }

.pd-lv__nav { display: flex; gap: 8px; }
.pd-lv__nav[hidden], .pd-lv__all[hidden] { display: none; }

.pd-lv__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eaf2fb;
    color: #1b6f9c;
    cursor: pointer;
}

.pd-lv__arrow:hover { background: #d9e8f8; }
.pd-lv__arrow--next { background: #6fa0f5; color: #fff; }
.pd-lv__arrow--next:hover { background: #0d6efd; }
.pd-lv__arrow[disabled] { opacity: .4; cursor: default; }

.pd-lv__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pd-lv__track::-webkit-scrollbar { display: none; }

.pd-lv.is-all .pd-lv__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - 80px) / 6)), 1fr));
    overflow: visible;
}

.pd-lv__card {
    position: relative;
    box-sizing: border-box;   /* ширина с полями: иначе 6 штук не влезают */
    flex: 0 0 calc((100% - 80px) / 6);
    min-width: 170px;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 12px;
    border: 1px solid #e3eff6;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .2s;
}

.pd-lv__card:hover { box-shadow: 0 8px 22px rgba(18, 63, 99, .10); }

.pd-lv__img {
    display: block;
    margin-bottom: 10px;
    border-radius: 9px;
    overflow: hidden;
    background: #f4f8fb;
}

.pd-lv__img--none {
    height: 150px;
    background: #f4f8fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9cfe2' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E") center / 44px no-repeat;
}

.pd-lv__img img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: contain;   /* фото целиком, по высоте рамки */
    box-shadow: none !important;
}

.pd-lv .ct-fav.pd-lv__fav {
    top: 14px;
    right: 14px;
    border-color: transparent;
    background: rgba(255, 255, 255, .92);
    color: #1b6f9c;
    z-index: 3;
}

.pd-lv__name {
    margin: 0 4px 6px;
    font-size: 15px;
    line-height: 1.3;
    color: #1b6f9c !important;
    text-decoration: none;
}

.pd-lv__name:hover { color: #0d6efd !important; text-decoration: underline; }

.pd-lv__price {
    margin: auto 4px 0;
    font-size: 19px;
    font-weight: bold;
    color: #123f63;
    white-space: nowrap;
}

@media only screen and (max-width: 985px) {
    .pd-lv__card { flex-basis: calc((100% - 48px) / 4); }
}

@media only screen and (max-width: 640px) {
    .pd-lv { padding: 16px 14px 18px; }
    .pd-lv h3.pd-lv__title { font-size: 20px; }
    .pd-lv__nav { display: none !important; }
    .pd-lv__card { flex-basis: 62%; min-width: 170px; }
    .pd-lv__img img, .pd-lv__img--none { height: 130px; }
    .pd-lv.is-all .pd-lv__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-lv.is-all .pd-lv__card { min-width: 0; }
}

/* ---- "Всё для вашей покупки" (section.pd-svc) ----------------------
   Бывшие ссылки "Сборка кровати" / "Сертификаты" (.sborka_sert). */

.pd-svc {
    clear: both;
    margin: 28px 0 24px;
    padding: 22px 22px 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f9fe 0%, #eaf3fc 100%);
}

.pd-svc h3.pd-svc__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1.2;
    font-weight: bold;
    color: #123f63;
    text-align: left;
}

.pd-svc__sub {
    margin: 4px 0 18px;
    font-size: 15px;
    color: #4a7d9c;
}

.pd-svc__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pd-svc__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 12px;
    border: 1px solid #dfeaf4;
    border-radius: 14px;
    background: #fff;
    color: #123f63 !important;
    text-decoration: none !important;
    transition: box-shadow .2s, border-color .2s;
}

.pd-svc__card:hover {
    border-color: #a9ccf0;
    box-shadow: 0 8px 22px rgba(18, 63, 99, .10);
}

.pd-svc__ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #eef5fc;
    color: #1f5f9e;
}

.pd-svc__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #4a7d9c;
}

.pd-svc__text b {
    font-size: 16px;
    color: #123f63;
}

.pd-svc__go {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dfeaf4;
    border-radius: 50%;
    color: #0d6efd;
    transition: background .2s, color .2s;
}

.pd-svc__card:hover .pd-svc__go { background: #0d6efd; border-color: #0d6efd; color: #fff; }

@media only screen and (max-width: 985px) {
    .pd-svc__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media only screen and (max-width: 640px) {
    .pd-svc { padding: 16px 14px 18px; }
    .pd-svc h3.pd-svc__title { font-size: 21px; }
    .pd-svc__ico { width: 52px; height: 52px; }
}

/* ---- "Остались вопросы о товаре?" (section.pd-ask) -----------------
   Вкладки, отправка, звёзды и маска телефона - js/product.js, initAsk.
   На вкладке "Оставить отзыв" (.is-review) вступление слева прячется,
   форма занимает всю ширину, заголовок "Оставить отзыв" - в шапке. */

.pd-ask {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 28px;
    margin: 28px 0 24px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f4f9fe 0%, #eaf3fc 100%);
    color: #123f63;
}

.pd-ask > a[name] { display: none; }

.pd-ask__intro { display: flex; flex-direction: column; }

.pd-ask h3.pd-ask__title {
    margin: 6px 0 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1.15;
    font-weight: bold;
    color: #123f63;
    text-align: left;
}

.pd-ask__text {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #3d6480;
}

.pd-ask__art { margin-top: auto; }
.pd-ask__art svg { display: block; width: 100%; max-width: 300px; height: auto; }

.pd-ask__box {
    padding: 0 22px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(18, 63, 99, .05);
}

.pd-ask__boxhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pd-ask h3.pd-ask__boxtitle {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 24px;
    font-weight: bold;
    color: #123f63;
}

.pd-ask__tabs {
    display: flex;
    flex: 1 1 auto;
    border-bottom: 1px solid #e3ebf2;
}

.pd-ask__tab {
    flex: 1 1 50%;
    padding: 18px 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    color: #7a99a9;
    cursor: pointer;
}

.pd-ask__tab:hover { color: #1b6f9c; }
.pd-ask__tab.is-on { color: #0d6efd; border-bottom-color: #0d6efd; }

.pd-ask__form { display: none; }
.pd-ask__form.is-on { display: block; }

.pd-ask__field { display: block; margin-bottom: 14px; }

.pd-ask__field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #123f63;
}

.pd-ask__field i { font-style: normal; color: #e03a3a; }

.pd-ask input[type=text],
.pd-ask input[type=tel],
.pd-ask textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #d5e2ee;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #123f63;
    box-shadow: none;
}

.pd-ask textarea { min-height: 96px; resize: vertical; }

.pd-ask input[type=text]:focus,
.pd-ask input[type=tel]:focus,
.pd-ask textarea:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

.pd-ask .pd-ask__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pd-ask__agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    font-size: 14px;
    color: #3d6480;
    cursor: pointer;
}

.pd-ask__agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0d6efd; flex: 0 0 auto; }
.pd-ask__agree a { color: #0d6efd !important; font-weight: bold; text-decoration: underline; }

.pd-ask__msg { min-height: 0; margin-bottom: 10px; font-size: 14px; color: #d0342c; }
.pd-ask__msg:empty { display: none; }

.pd-ask__send {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 10px;
    background: #0d6efd;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.pd-ask__send:hover { background: #0b5ed7; }
.pd-ask__send[disabled] { opacity: .6; cursor: wait; }

.pd-ask__ok {
    padding: 26px 16px;
    border-radius: 12px;
    background: #eef7ee;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: #2d6a33;
}

.pd-ask__ok b { font-size: 18px; }
.pd-ask__form.is-sent > :not(.pd-ask__ok) { display: none !important; }

/* вкладка отзыва */

.pd-ask.is-review { grid-template-columns: minmax(0, 1fr); }
.pd-ask.is-review .pd-ask__intro { display: none; }
.pd-ask.is-review .pd-ask__box { padding-top: 18px; }
.pd-ask.is-review h3.pd-ask__boxtitle { display: block; }
.pd-ask.is-review .pd-ask__tabs { flex: 0 0 auto; gap: 0; border: 1px solid #d5e2ee; border-radius: 10px; overflow: hidden; }
.pd-ask.is-review .pd-ask__tab { flex: 0 0 auto; padding: 10px 24px; margin: 0; border: 0; border-radius: 0; }
.pd-ask.is-review .pd-ask__tab.is-on { background: #0d6efd; color: #fff; }

.pd-ask__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 20px;
}

.pd-ask__field--grow { display: flex; flex-direction: column; }
.pd-ask__field--grow textarea { flex: 1 1 auto; min-height: 150px; }

.pd-ask__stars { display: flex; gap: 6px; }

.pd-ask__stars button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z' fill='none' stroke='%230d6efd' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
    cursor: pointer;
}

/* звёзды оценки: при выборе загораются по очереди (js/product.js,
   initAsk) - у каждой короткая анимация «вспышки» */
.pd-ask__stars button {
    transition: transform .18s ease;
}

.pd-ask__stars button.is-hover {
    transform: scale(1.12);
}

.pd-ask__stars button.is-pop {
    animation: pdStarPop .5s cubic-bezier(.28, 1.6, .5, 1);
}

@keyframes pdStarPop {
    0%   { transform: scale(.55) rotate(-25deg); filter: drop-shadow(0 0 0 rgba(255, 180, 0, 0)); }
    55%  { transform: scale(1.3) rotate(8deg);   filter: drop-shadow(0 0 6px rgba(255, 180, 0, .75)); }
    100% { transform: scale(1) rotate(0);        filter: drop-shadow(0 0 0 rgba(255, 180, 0, 0)); }
}

@media (prefers-reduced-motion: reduce) {
    .pd-ask__stars button.is-pop { animation: none; }
}

.pd-ask__stars button.is-on,
.pd-ask__stars button.is-hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z' fill='%23ffb400' stroke='%23ffb400' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pd-ask__drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed #a9ccf0;
    border-radius: 10px;
    background: #f5f9fe;
    cursor: pointer;
}

.pd-ask__drop.is-drag,
.pd-ask__drop:hover { border-color: #0d6efd; background: #eef5fe; }
.pd-ask__drop.is-set { border-style: solid; }

.pd-ask__drop input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pd-ask__drop-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: #0d6efd;
}

.pd-ask__drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: #123f63; }
.pd-ask__drop-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ask__drop-text small { font-size: 12px; color: #7a99a9; }

.pd-ask__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

.pd-ask__foot .pd-ask__agree { margin: 0; }
.pd-ask__foot .pd-ask__send { width: auto; min-width: 220px; }

@media only screen and (max-width: 985px) {
    .pd-ask { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pd-ask__art { display: none; }
}

@media only screen and (max-width: 640px) {
    .pd-ask { padding: 16px 12px; }
    .pd-ask h3.pd-ask__title { font-size: 24px; }
    .pd-ask__box { padding: 0 14px 16px; }
    .pd-ask.is-review .pd-ask__boxhead { flex-direction: column; align-items: stretch; }
    .pd-ask.is-review .pd-ask__tab { flex: 1 1 50%; padding: 10px 8px; }
    .pd-ask__cols { grid-template-columns: minmax(0, 1fr); }
    .pd-ask__foot { flex-direction: column; align-items: stretch; }
    .pd-ask__foot .pd-ask__send { width: 100%; min-width: 0; }
}

/* ---- «+N» на последнем видимом превью ----------------------------------
   js/product.js (initGallery) считает, сколько превью помещается рядом с
   главным фото; лишние прячет (pd-thumb--hidden), на последнем видимом
   пишет «+N» (data-more). Клик по нему открывает Fancybox со всеми фото.
   На телефоне лента горизонтальная и листается - там «+N» нет. */

/* старая лупа при наведении мешает «+N» и рамке - в ленте превью её нет */
.pd .pd-gallery__thumbs .clicker-wrapper,
.pd .pd-gallery__thumbs .image__clicker {
    display: none !important;
}

.pd .pd-gallery__thumbs a.pd-thumb--hidden {
    display: none !important;
}

.pd .pd-gallery__thumbs a.pd-thumb--more {
    position: relative;
}

.pd .pd-gallery__thumbs a.pd-thumb--more::after {
    content: attr(data-more);
    position: absolute;
    top: 3px; right: 3px; bottom: 3px; left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(18, 43, 66, .55);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
}

.pd .pd-gallery__thumbs a.pd-thumb--more:hover::after {
    background: rgba(18, 43, 66, .68);
}

/* ---- левая колонка и фото/отзывы покупателей (dz_reviews_card.tpl.html) --
   .pd-left - фото товара и под ним блоки покупателей. Колонка «плавает»
   (sticky) так же, как правая с ценой: какая из них короче, та и едет
   вниз при прокрутке до конца .pd-top, то есть до вкладок «Описание...».
   Так, когда отзывов нет, фото не оставляет под собой пустоту.
   На узком экране обёртки нет (display: contents): фото, цена, отзывы. */

.pd .pd-left {
    min-width: 0;
}

.pd .pd-ugc {
    min-width: 0;
    margin-top: 24px;
}

@media only screen and (min-width: 986px) {
    .pd .pd-left {
        position: -webkit-sticky;
        position: sticky;
        top: 78px;
    }
}

@media only screen and (max-width: 985px) {
    .pd .pd-left { display: contents; }
    .pd .pd-top > .pd-left > .pd-gallery { order: 1; }
    .pd .pd-top > .pd-buy { order: 2; }
    .pd .pd-top > .pd-left > .pd-ugc { order: 3; margin-top: 0; }
}

.pd .pd-ugc section {
    margin: 0 0 22px;
}

.pd .pd-ugc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.pd h3.pd-ugc__title {
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: #123f63;
    background: none;
    border: 0;
    text-align: left;
}

.pd .pd-ugc__n {
    font-size: 15px;
    font-weight: 400;
    color: #8aa3b5;
}

.pd .pd-ugc__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: #0d6efd;
    font: inherit;
    font-size: 15px;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}

.pd .pd-ugc__all:hover { color: #0a58ca; }

.pd .pd-ugc__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pd .pd-ugc__ph {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: #eef4f8;
}

.pd .pd-ugc__ph.pd-ugc__ph--hidden { display: none; }

.pd .pd-ugc__ph img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border: 0 !important;
    transition: transform .25s;
}

.pd .pd-ugc__ph:hover img { transform: scale(1.04); }

.pd .pd-ugc__zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(18, 43, 66, .6);
    color: #fff;
}

.pd .pd-ugc__ph--more::after {
    content: attr(data-more);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 43, 66, .55);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}

.pd .pd-ugc__ph--more .pd-ugc__zoom { display: none; }

/* звёзды: серые под цветными, ширина цветных = оценка в процентах */
.pd-stars {
    position: relative;
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    vertical-align: middle;
}

.pd-stars::before {
    content: "\2605\2605\2605\2605\2605";
    color: #d9e1e7;
}

.pd-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

.pd-stars__fill::before {
    content: "\2605\2605\2605\2605\2605";
    color: #f5a623;
}

.pd-stars--big { font-size: 22px; }

.pd .pd-rv__summary,
.pd-rvp .pd-rv__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #d7ebf6;
    border-radius: 12px;
    background: #f5fbfe;
}

.pd-rv__avg {
    font-size: 28px;
    font-weight: 700;
    color: #123f63;
    line-height: 1;
}

.pd-rv__cnt { color: #6a8799; font-size: 15px; }
.pd-rv__empty { flex: 1 1 260px; color: #34465c; font-size: 15px; line-height: 1.45; }

.pd-rv__write {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 9px 16px;
    border: 1px solid #0d6efd;
    border-radius: 10px;
    background: #fff;
    color: #0d6efd;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}

.pd-rv__write:hover { background: #0d6efd; color: #fff; }

.pd-rv__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.pd-rv__card {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #d7ebf6;
    border-radius: 12px;
    background: #fff;
    color: #34465c;
}

.pd-rv__product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #123f63 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.pd-rv__product:hover span { text-decoration: underline; }

.pd-rv__product img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3eef5 !important;
    margin: 0 !important;
    flex: 0 0 48px;
}

.pd-rv__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pd-rv__name { font-size: 17px; color: #123f63; }
.pd-rv__date { color: #8aa3b5; font-size: 13px; white-space: nowrap; }

.pd-rv__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 6px 0 10px;
}

.pd-rv__variant { color: #6a8799; font-size: 13px; }

.pd-rv__text {
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.pd-rv__text [hidden] { display: none; }

.pd-rv__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

.pd-rv__ph {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #eef4f8;
}

.pd-rv__ph img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border: 0 !important;
}

.pd-rv__answer {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #0d6efd;
    border-radius: 0 8px 8px 0;
    background: #f5f9ff;
    font-size: 14px;
    line-height: 1.5;
}

.pd-rv__answer b {
    display: block;
    margin: 0 0 3px;
    color: #123f63;
}

.pd-rv__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #0d6efd;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.pd-rv__more.is-open svg { transform: rotate(180deg); }

@media only screen and (max-width: 985px) {
    .pd .pd-top > .pd-left > .pd-ugc { margin-top: 6px; }
}

@media only screen and (max-width: 640px) {
    .pd h3.pd-ugc__title { font-size: 19px; }
    .pd .pd-ugc__grid { gap: 6px; }
    .pd .pd-ugc__ph { aspect-ratio: 1; border-radius: 8px; }
    .pd .pd-ugc__zoom { display: none; }
    .pd .pd-ugc__ph--more::after { font-size: 20px; }
    .pd-rv__list { grid-template-columns: minmax(0, 1fr); }
    .pd-rv__write { margin-left: 0; width: 100%; justify-content: center; }
}

/* переход к блоку (кнопки «Помочь с выбором», «Написать отзыв», ссылки
   #inquiry/#reviews): верх блока не должен уходить под закреплённое
   меню сайта (.navigation_wrap, около 72px) */
#inquiry, #reviews, #pd-tabs, #pd-lv, .pd-ask {
    scroll-margin-top: 90px;
}

/* ---- окно «Уточнить доставку» (#pd-dlv, product_detailed.tpl.html) ------
   Открывает js/product.js (initDelivery); на время показа окно переносится
   в body, чтобы sticky-колонка с ценой не обрезала его. */

.pd-dlv {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 30, 48, .62);
    opacity: 0;
    transition: opacity .2s;
}

.pd-dlv[hidden] { display: none; }
.pd-dlv.is-open { opacity: 1; }

.pd-dlv__box {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 28px 26px 24px;
    border-radius: 16px;
    background: #fff;
    color: #34465c;
    text-align: center;
    box-shadow: 0 20px 60px rgba(18, 43, 66, .3);
    transform: translateY(12px) scale(.97);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2);
}

.pd-dlv.is-open .pd-dlv__box { transform: none; }

.pd-dlv__x {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f6fb;
    color: #5b7489;
    cursor: pointer;
}

.pd-dlv__x:hover { background: #e2ecf7; color: #123f63; }

.pd-dlv__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 0 10px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0d6efd;
}

.pd-dlv h3.pd-dlv__t {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 22px;
    color: #123f63;
    text-align: center;
}

.pd-dlv__date {
    margin: 0 0 12px;
    padding: 14px 12px;
    border: 2px solid #0d6efd;
    border-radius: 12px;
    background: #f5f9ff;
}

.pd-dlv__date span {
    display: block;
    margin-bottom: 4px;
    color: #6a8799;
    font-size: 14px;
}

.pd-dlv__date b {
    display: block;
    color: #0d6efd;
    font-size: 26px;
    line-height: 1.2;
}

.pd-dlv__txt {
    margin: 0 0 12px;
    text-indent: 0;
    font-size: 14px;
    line-height: 1.5;
}

.pd-dlv__sale {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff4e0;
    color: #9a5b00;
    font-size: 14px;
}

.pd-dlv__sale b { color: #e67e00; }

.pd-dlv__acts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-dlv__btn {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
}

.pd-dlv__btn:hover { background: #0b5ed7; }

.pd-dlv__link {
    color: #1b6f9c !important;
    font-size: 15px;
}

/* ---- страница товара: ниже левой колонки - на всю ширину -----------
   Колонки сайта на float: div.sidenav (float:left, 19%) и div.content
   (float:right, 78%). На странице товара (index.tpl.html ставит .main
   класс main--product) div.content не плавает, а его блоки - отдельные
   "поля" (display: flow-root, у flex и grid это и так): такой блок встаёт
   рядом с плавающей левой колонкой, а когда она закончилась, занимает
   всю ширину. Сам .product_det.pd из flex делаем обычным блоком, чтобы
   это работало и для его частей (вкладки, "С этим товаром покупают").
   Левая колонка видна с 986px (media.css), уже - всё как было.
   -------------------------------------------------------------------- */

@media only screen and (min-width: 986px) {

    div.main.main--product > div.content {
        float: none !important;
        width: auto !important;
        padding: 10px 1%;   /* слева тот же 1%, что у левой колонки */
    }

    div.main.main--product > #sidenav_menu {
        margin-right: 1.5%;
    }

    /* колонка слева длиннее карточки - низ страницы под ней */
    div.main.main--product > div.content::after {
        content: "";
        display: block;
        clear: both;
    }

    div.main.main--product > div.content > .product_det.pd {
        display: block !important;
    }

    div.main.main--product > div.content > .breadcrambs,
    div.main.main--product > div.content > hr,
    div.main.main--product > div.content > .pd-svc,
    div.main.main--product > div.content > .pd-lv,
    div.main.main--product .product_det.pd > .pd-tabs,
    div.main.main--product .product_det.pd > hr,
    body div.main.main--product .product_det.pd > div.pohozietovari.pd-rel {
        display: flow-root !important;
        clear: none !important;   /* hr.top_line2 и старые блоки ставили clear: both */
        /* с шириной 100% блок не помещается рядом с колонкой и спрыгивает
           под неё; auto - сужается рядом, ниже неё растягивается */
        width: auto !important;
        min-width: 0 !important;
        /* ширину блок берёт только от свободного места, не от содержимого:
           лента карточек иначе требует ширину всех карточек сразу, и блок
           тоже спрыгивает под колонку, оставляя пустоту рядом с ней */
        contain: inline-size;
    }

    div.main.main--product > div.content > .pd-ask {
        clear: none;
        contain: inline-size;
    }
}

/* «Купить в один клик» той же высоты, что «В корзину» (52px): trig.css даёт
   line-height: 48px, из-за него кнопка была выше */
.pd #odinkl {
    min-height: 52px !important;
    padding: 0 20px !important;
    line-height: 1.2 !important;
    font-size: 16px !important;
}
.pd #odinkl div { line-height: 1.2 !important; }

/* ---- свои вкладки из шаблонов (Каталог -> Вкладки товара,
   core_functions/dz_tabs_functions.php) ---- */
.pd .pd-pane--tpl { color: #123f63; font-size: 15px; line-height: 1.6; }
.pd .pd-pane--tpl h2, .pd .pd-pane--tpl h3 { margin: 0 0 10px; color: #123f63; font-weight: 700; }
.pd .pd-pane--tpl h3 { font-size: 20px; }
.pd .pd-pane--tpl * + h2, .pd .pd-pane--tpl * + h3 { margin-top: 20px; }
.pd .pd-pane--tpl p { margin: 0 0 12px; }
.pd .pd-pane--tpl ul, .pd .pd-pane--tpl ol { margin: 0 0 12px; padding-left: 22px; }
.pd .pd-pane--tpl li { margin: 0 0 4px; }
.pd .pd-pane--tpl img { max-width: 100%; height: auto; border-radius: 8px; }
.pd .pd-pane--tpl a { color: #0d6efd; }

/* ---- «Варианты чехла» под фото (матрасы) - product_detailed.tpl.html .pd-cover,
   данные - core_functions/dz_mattress_functions.php, JS - initCover ---- */
.pd .pd-cover { margin: 18px 0 0; }
.pd .pd-cover__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; }
.pd h3.pd-cover__title { margin: 0; color: #123f63; font-size: 20px; font-weight: 700; }
.pd .pd-cover__hint { margin-left: auto; color: #6a8297; font-size: 13px; }
.pd .pd-cover__more { display: inline-flex; align-items: center; gap: 6px; color: #1f74c2 !important; font-size: 13px; text-decoration: none !important; }
.pd .pd-cover__more:hover { text-decoration: underline !important; }
.pd .pd-cover__more[hidden] { display: none; }
.pd .pd-cover__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd .pd-cover__item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid #dce8f2;
    border-radius: 12px;
    background: #fff;
    color: #123f63;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pd .pd-cover__item:hover { border-color: #a9cdea; }
.pd .pd-cover__item.is-on { border-color: #4a9be0; background: #f2f8fe; box-shadow: 0 0 0 2px rgba(74, 155, 224, .18); }
.pd .pd-cover__item:focus-visible { outline: none; border-color: #1f74c2; box-shadow: 0 0 0 3px rgba(31, 116, 194, .2); }
.pd .pd-cover__img { position: relative; flex: 0 0 44%; min-height: 86px; border-radius: 9px; background: #eef3f8 center / cover no-repeat; }
.pd .pd-cover__zoom { position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #123f63 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); opacity: 0; transition: opacity .15s; }
.pd .pd-cover__item:hover .pd-cover__zoom, .pd .pd-cover__zoom:focus { opacity: 1; }
@media (hover: none) { .pd .pd-cover__zoom { opacity: 1; } }
.pd .pd-cover__txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; padding: 2px 0; }
.pd .pd-cover__name { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.pd .pd-cover__radio { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid #9fb6ca; border-radius: 50%; background: #fff; }
.pd .pd-cover__item.is-on .pd-cover__radio { border-color: #1f74c2; background: radial-gradient(circle, #1f74c2 0 4px, #fff 4.5px); }
.pd .pd-cover__note { padding-left: 22px; color: #5b7489; font-size: 12px; line-height: 1.4; }
.pd .pd-cover__plus { padding-left: 22px; color: #1f74c2; font-size: 12px; font-weight: 600; }
.pd .pd-cover__grid--noimg .pd-cover__item { padding: 10px 12px; }
@media only screen and (max-width: 1300px) {
    .pd .pd-cover__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* до 985px .pd-left - display: contents, и без order блок чехлов вставал
   выше фото: ставим его сразу за фото (order как у .pd-gallery, порядок -
   как в разметке), плитки - одной лентой с прокруткой (initCover сам
   прокручивает к выбранному) */
@media only screen and (max-width: 985px) {
    .pd .pd-top > .pd-left > .pd-cover { order: 1; min-width: 0; margin: 4px 0 6px; }
    .pd .pd-cover__grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        margin: 0 -2px;
        padding: 3px 2px 8px;
        scrollbar-width: thin;
    }
    .pd .pd-cover__grid::-webkit-scrollbar { height: 4px; }
    .pd .pd-cover__grid::-webkit-scrollbar-thumb { background: #c7d9e8; border-radius: 4px; }
    .pd .pd-cover__item { flex: 0 0 260px; scroll-snap-align: start; }
    .pd .pd-cover__grid--noimg .pd-cover__item { flex-basis: 190px; }
}
@media only screen and (max-width: 520px) {
    .pd .pd-cover__item { flex-basis: 78%; max-width: 260px; }
    .pd .pd-cover__hint { margin-left: 0; }
}

/* ---- иконки в характеристиках описания (матрасы): li.dzm-li ставит
   dzmtDecorate() в core_functions/dz_mattress_functions.php ---- */
.pd ul:has(> li.dzm-li), .pd ol:has(> li.dzm-li) { padding-left: 0 !important; background: none !important; list-style: none !important; }
.pd li.dzm-li {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px !important;
    padding: 6px 10px !important;
    border-radius: 8px;
    background: #f3f8fc !important;
    background-image: none !important;
    list-style: none !important;
    max-width: 620px;
    color: #34465c;
}
.pd li.dzm-li::before, .pd li.dzm-li::marker { content: none !important; display: none !important; }
.pd .dzm-li__ico { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #1f74c2; box-shadow: 0 1px 2px rgba(18, 63, 99, .08); }
.pd .dzm-li__txt { min-width: 0; }

/* ---- «Варианты чехла»: окно с фото крупно (initCover в js/product.js,
   окно добавляется в body, поэтому без .pd в селекторах) ---- */
.pd .pd-cover__img { cursor: zoom-in; }
html.pdc-lock, html.pdc-lock body { overflow: hidden; }
.pdc-ov { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(12, 28, 44, .62); }
.pdc-ov.is-open { display: flex; animation: pdcIn .18s ease-out; }
@keyframes pdcIn { from { opacity: 0; } to { opacity: 1; } }
.pdc-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 0;
    width: min(1080px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    font-family: "Open Sans", Arial, sans-serif;
}
.pdc-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f1f5f9; color: #123f63; font-size: 24px; line-height: 38px; cursor: pointer; }
.pdc-close:hover { background: #e2eaf2; }
.pdc-close:focus { outline: none; }
.pdc-close:focus-visible, .pdc-nav:focus-visible, .pdc-th:focus-visible, .pdc-pick:focus-visible { outline: 2px solid #1f74c2; outline-offset: 2px; }
.pdc-main { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; background: #f4f7fa; }
.pdc-img { display: block; width: 100%; height: 100%; max-height: calc(100vh - 48px); object-fit: contain; }
.pdc-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #123f63; font-size: 30px; line-height: 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); cursor: pointer; }
.pdc-nav:hover { background: #fff; color: #1f74c2; }
.pdc-nav--prev { left: 14px; }
.pdc-nav--next { right: 14px; }
.pdc-count { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 12px; background: rgba(18, 63, 99, .7); color: #fff; font-size: 12px; }
.pdc-side { display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 22px; overflow-y: auto; }
.pdc-side h3.pdc-name { margin: 0 44px 8px 0; color: #123f63; font-size: 24px; font-weight: 700; line-height: 1.25; }
.pdc-note { color: #34465c; font-size: 15px; line-height: 1.5; }
.pdc-comp { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #4a9be0; border-radius: 0 8px 8px 0; background: #f2f8fe; color: #4f6a80; font-size: 13px; line-height: 1.5; }
.pdc-comp:empty { display: none; }
.pdc-plus { margin-top: 12px; color: #1f74c2; font-size: 18px; font-weight: 700; }
.pdc-pick { margin-top: 16px; height: 46px; padding: 0 22px; border: 1px solid #165e92; border-radius: 10px; background: #165e92; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.pdc-pick:hover { background: #0f4a75; }
.pdc-pick.is-on { border-color: #bfe3cb; background: #e9f7ee; color: #22683a; cursor: default; }
.pdc-all { margin: 22px 0 10px; color: #6a8297; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pdc-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pdc-th { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px; border: 1px solid #dce8f2; border-radius: 10px; background: #fff; color: #34465c; cursor: pointer; text-align: center; }
.pdc-th:hover { border-color: #a9cdea; }
.pdc-th.is-cur { border-color: #1f74c2; box-shadow: 0 0 0 2px rgba(31, 116, 194, .2); }
.pdc-th.is-sel::after { content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: #1f74c2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pdc-th__img { display: block; width: 100%; padding-top: 72%; border-radius: 7px; background: #eef3f8 center / cover no-repeat; }
.pdc-th__name { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
@media only screen and (max-width: 860px) {
    .pdc-ov { padding: 0; align-items: stretch; }
    .pdc-box { grid-template-columns: minmax(0, 1fr); max-height: none; height: 100%; border-radius: 0; overflow-y: auto; }
    .pdc-main { min-height: 0; height: 52vh; }
    .pdc-img { max-height: 52vh; }
    .pdc-side { padding: 18px 16px 24px; overflow: visible; }
    .pdc-side h3.pdc-name { font-size: 20px; }
    .pdc-thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .pdc-th { flex: 0 0 96px; scroll-snap-align: start; }
}

/* ---- «Заказ по своим размерам» под «Купить в один клик» (product_detailed.tpl.html,
   окно - zvonok/zakaz1clik, window.dzOpenSize) ---- */
.pd .pd-size { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 12px 0 0; padding: 16px 18px; border: 1px solid #d6e6f6; border-radius: 14px; background: linear-gradient(180deg, #f3f8fe 0%, #eaf3fc 100%); }
.pd .pd-size__ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #1f74d4; color: #fff; box-shadow: 0 6px 14px rgba(31, 116, 212, .25); }
.pd .pd-size__body { min-width: 0; }
.pd .pd-size__t { margin: 0 0 8px; color: #123f63; font-size: 17px; font-weight: 700; line-height: 1.3; }
.pd .pd-size__btn { display: block; width: 100%; min-height: 46px; margin: 0; padding: 10px 16px; border: 1px solid #bcd8f3; border-radius: 10px; background: #dcebfb; color: #1b5fa8; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.pd .pd-size__btn:hover { background: #cfe3fa; border-color: #1f74d4; }
.pd .pd-size__note { grid-column: 1 / -1; margin: 8px 0 0; color: #5b6b80; font-size: 13px; line-height: 1.4; text-indent: 0; }
@media only screen and (max-width: 420px) {
    .pd .pd-size { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; gap: 4px 12px; }
    .pd .pd-size__ico { width: 48px; height: 48px; }
    .pd .pd-size__ico svg { width: 24px; height: 24px; }
    .pd .pd-size__t { font-size: 15px; }
}

/* «Цвет / оттенок» под отзывами (ottenki-detal2.tpl.html; в каких категориях —
   core_functions/dz_cat_ott_functions.php) */
.pd .pd-ott { min-width: 0; }
.pd .pd-ott .ottenki-wrap { margin: 0 0 22px; }
@media only screen and (max-width: 985px) {
    .pd .pd-top > .pd-left > .pd-ott { order: 4; }
}

/* «?» у названия характеристики наезжал на список: колонка названия уже
   текста («Дополнительно» + иконка + «?»), а строка не переносилась
   (flex-wrap: nowrap выше). Теперь «?» при нехватке места уходит на
   следующую строку, а колонка названия не уже самого длинного слова. */
.pd .pd-options .extr_name {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    min-width: 0;
}
/* колонка названия не уже самого длинного слова (иначе «Дополнительно»
   вылезало на список); узкий экран (до 640px) - по-прежнему одна колонка */
@media only screen and (min-width: 641px) {
    .pd .pd-options .extr_item,
    .pd .pd-options .extr_item.pd-opt--tiles {
        grid-template-columns: minmax(min-content, 1fr) minmax(0, 215px);
    }
}

/* Увеличенный образец над плиткой оттенка при наведении (.swatch__pv в
   product_detailed.tpl.html) - как .ottenki-preview в блоке «Цвет / оттенок»
   (ottenki-detal2.tpl.html). Только для мыши: на телефоне нажатие сразу
   выбирает оттенок. */
.pd .swatch.swatch--pv {
    position: relative;
    overflow: visible;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pd .swatch__pv {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 60;
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f1ec;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px) scale(.9);
    transition: opacity .17s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .2s;
}
.pd .swatch__pv img,
.pd .swatch__pv i {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd .swatch__pv-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 6px;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (hover: hover) {
    .pd .swatch.swatch--pv:hover {
        z-index: 61;
        transform: translateY(-3px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
    }
    .pd .swatch.swatch--pv:hover .swatch__pv {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
        transition: opacity .17s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
    }
}

/* хлебные крошки карточки товара - как у категории (.ct-crumbs): раньше
   шрифт брался из неверной записи font в style.css и на телефоне был мелким */
div.breadcrambs.pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #7a99a9; }
div.breadcrambs.pd-crumbs a { color: #1b6f9c; text-decoration: none; }
div.breadcrambs.pd-crumbs a:hover { text-decoration: underline; }
div.breadcrambs.pd-crumbs svg { display: block; }
.pd-crumbs .pd-sep { color: #bcdcec; }
.pd-crumbs__cur { color: #5d7d90; }
@media (max-width: 985px) { div.breadcrambs.pd-crumbs { font-size: 15px; } div.breadcrambs.pd-crumbs svg { width: 18px; height: 18px; } }

/* Breadcrumbs in one line: on wide screens the flow-root rule above
   (div.main.main--product > div.content > .breadcrambs) beat display:flex,
   and the home icon (svg display:block) pushed the path to the next line.
   Long product name is cut with "..." on its own line end. */
div.main.main--product > div.content > div.breadcrambs.pd-crumbs,
div.breadcrambs.pd-crumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
}
div.breadcrambs.pd-crumbs > a,
div.breadcrambs.pd-crumbs > .pd-sep { flex: 0 0 auto; white-space: nowrap; }
div.breadcrambs.pd-crumbs > a:first-child { display: inline-flex; align-items: center; }
div.breadcrambs.pd-crumbs > .pd-crumbs__cur {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* phone: still one line - the product name keeps at least a few letters,
   a path longer than the screen scrolls sideways (no scrollbar shown) */
@media (max-width: 640px) {
    div.breadcrambs.pd-crumbs { overflow-x: auto; scrollbar-width: none; }
    div.breadcrambs.pd-crumbs::-webkit-scrollbar { display: none; }
    div.breadcrambs.pd-crumbs > .pd-crumbs__cur { min-width: 6em; }
}

/* Specification chips: title and caption on separate lines */
.pd .pd-chip__text { display: flex; flex-direction: column; min-width: 0; }
.pd .pd-chip__title, .pd .pd-chip__sub { display: block; }

/* Long product description: collapsed with fade + "read more" (initDescMore in js/product.js) */
.pd .pd-desc--clamp .pd-desc__body { position: relative; max-height: 420px; overflow: hidden; }
.pd .pd-desc--clamp .pd-desc__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.pd .pd-desc--clamp.is-open .pd-desc__body { max-height: none; overflow: visible; }
.pd .pd-desc--clamp.is-open .pd-desc__body::after { display: none; }
.pd .pd-desc__more { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 0 22px; height: 44px; border: 1px solid #19739B; border-radius: 10px; background: #fff; color: #19739B; font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
.pd .pd-desc__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.pd .pd-desc--clamp.is-open .pd-desc__more::after { transform: translateY(2px) rotate(-135deg); }
.pd .pd-desc__more:hover { background: #19739B; color: #fff; }

/* ---- "Dolyami" and "V rassrochku" under the price: one width, icons of one size,
   the arrow at the right edge (dz_dolyame_badge / dz_tbank_badge) ---------- */
.pd .dzdl-badge,
.pd .dztk-badge {
    display: flex;
    width: 100%;
    max-width: 380px;
    min-height: 46px;
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 8px 14px 8px 9px;
    gap: 10px;
}
.pd .dzdl-badge[hidden],
.pd .dztk-badge[hidden] { display: none; }
.pd .dzdl-badge__t,
.pd .dztk-badge__t { flex: 1 1 auto; min-width: 0; }
.pd .dzdl-badge__go,
.pd .dztk-badge__go { margin-left: auto; }
.pd .dzdl-badge .dzdl-logo,
.pd .dztk-badge .dztk-ico { width: 28px; height: 28px; align-items: center; justify-content: center; }
.pd .dzdl-badge .dzdl-logo svg { width: 26px; height: 26px; }

@media only screen and (max-width: 640px) {
    .pd .pd-price,
    .pd .pd-price #optionPrice2,
    .pd .pd-price .chena_summ { align-items: center; gap: 6px 12px; }
    .pd .pd-price { margin-bottom: 2px; }
    .pd .pd-price__note { margin-bottom: 12px; }
    .pd .pd-sale { padding: 4px 9px; font-size: 14px; }
    .pd .dzdl-badge,
    .pd .dztk-badge { max-width: none; font-size: 14px; }
}

/* ---- Телефон и планшет (до 985px): превью фото, название и цена по центру ---------
   превью переносятся рядами (flex-wrap у .fotosmile из trig.css) и
   прижимались влево - ряды центрируются; цена, старая цена, скидка и
   подпись «Цена выбранной комплектации» - по центру строки */
@media only screen and (max-width: 985px) {
    /* лента уже блока - margin: auto ставит её по центру, ряды при переносе
       центрирует safe center; лента шире экрана (листается вбок) - auto = 0
       и safe прижимает влево, иначе первые превью ушли бы за левый край */
    .pd .pd-gallery__thumbs .fotosmile { justify-content: safe center; margin: 0 auto !important; }
    .pd .pd-price,
    .pd .pd-price #optionPrice2,
    .pd .pd-price .chena_summ { justify-content: center; }
    .pd .pd-price__note { text-align: center; }
    .pd h1.pd-title { text-align: center; }
}

/* ---- Телефон (до 640px): вкладки карточки - кнопки с рамкой -------------
   подчёркнутые надписи на узком экране не читались как кнопки; по две в
   ряд одинаковой ширины, открытая - залита цветом рамки */
@media only screen and (max-width: 640px) {
    .pd .pd-tabs__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border-bottom: 0;
    }
    .pd .pd-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        border: 1px solid #b9d6ea;
        border-radius: 10px;
        background: #fff;
        color: #1b6f9c;
        font-size: 14px;
        line-height: 1.25;
        text-align: center;
        box-shadow: 0 1px 2px rgba(18, 63, 99, .06);
    }
    .pd .pd-tab:hover { border-color: #1b6f9c; }
    .pd .pd-tab--active,
    .pd .pd-tab--active:hover {
        background: #1b6f9c;
        border-color: #1b6f9c;
        color: #fff;
    }
    .pd .pd-tab--hidden { display: none; }
}

/* Свайп по главному фото (initGallery в js/product.js): горизонтальное
   движение ведёт скрипт, вертикальную прокрутку и масштаб - браузер */
.pd .pd-gallery__main { touch-action: pan-y pinch-zoom; }
.pd .pd-gallery__main img { will-change: transform; }

/* Телефон (до 640px): опция одной строкой - название слева, список справа
   (раньше название над списком, опции занимали пол-экрана). Строки с
   плитками-образцами - как были: плиткам нужна вся ширина. */
@media only screen and (max-width: 640px) {
    .pd .pd-options .extr_item:not(.pd-opt--tiles) {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        gap: 6px 8px;
        padding: 9px 0 !important;
    }
    .pd .pd-options .extr_item:not(.pd-opt--tiles) .extr_name {
        grid-column: 1;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.2;
        gap: 5px;
        flex-wrap: nowrap !important;
    }
    /* «?» - сразу за иконкой, потом название: так «?» не уходит на
       вторую строку под иконку */
    .pd .pd-options .extr_name .pd-opt__icon { order: 0; }
    .pd .pd-options .extr_name .variant3 { order: 1; flex: 0 0 auto; }
    .pd .pd-options .extr_name .nameopch { order: 2; min-width: 0; margin-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pd .pd-options .extr_name { gap: 4px !important; }
    .pd .pd-options .extr_name .pd-opt__icon svg,
    .pd .pd-options .extr_name .pd-opt__icon img { width: 18px; height: 18px; }
    .pd .pd-options .extr_name .variant3 img { width: 16px; height: 16px; }
    .pd .pd-options .extr_item:not(.pd-opt--tiles) .extr_value { grid-column: 2; }
    .pd .pd-options .extr_item:not(.pd-opt--tiles) select,
    .pd .pd-options .extr_item:not(.pd-opt--tiles) .inputtext1 {
        min-height: 40px;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* «Прилипающая» цена на телефоне (до 985px): копия цены под закреплённой
   шапкой, пока покупатель меняет опции ниже (initStickyPrice в
   js/product.js; sticky не держится из-за overflow-x у body). */
.pd-stick {
    position: fixed;
    left: 0;
    right: 0;
    top: 58px;
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #e2eef5;
    box-shadow: 0 6px 16px rgba(18, 61, 96, .12);
    font-family: Roboto, 'Segoe UI', Arial, sans-serif;
    cursor: pointer;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.pd-stick.is-on { opacity: 1; transform: none; }
/* подписи «Цена выбранной комплектации» больше нет - отступ до плашек цены */
.pd .pd-buy > .pd-price { margin-bottom: 14px; }
.pd-stick__price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pd-stick__price b { font-size: 22px; font-weight: 700; color: #2c7a45; }
.pd-stick__price s { font-size: 14px; color: #8a96a3; }
.pd-stick .pd-sale {
    padding: 3px 8px;
    border-radius: 7px;
    background: #f2c16b;
    color: #4a3505;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
}
@media only screen and (max-width: 985px) {
    .pd-stick { display: flex; pointer-events: none; }
    .pd-stick.is-on { pointer-events: auto; }
}

/* Старая (перечёркнутая) цена в карточке товара - серая, черта ровно
   посередине высоты цифр (своя линия вместо text-decoration: у шрифта
   линия зачёркивания ниже середины). */
.pd .pd-price #price_d,
.pd .pd-price #optionPriceFull,
.pd-stick__price s {
    position: relative;
    color: #8a96a3 !important;
    text-decoration: none !important;
}
.pd .pd-price #optionPriceFull::after,
.pd-stick__price s::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 52%;
    height: 1.5px;
    background: currentColor;
    pointer-events: none;
}