/* Start:/local/templates/box/components/bitrix/catalog/shop/style.css?17854988193281*/
.catalog-header-list {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-flow: row nowrap;
	width: 100%;
}

.catalog-btn-filter {
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
}

.catalog-sort {
	font-size: 15px;
	line-height: 20px;
	display: flex;
	align-items: center;
}

.catalog-sort::before {
	content: attr(data-name);
	color: #000;
	margin-right: 10px;
}

.catalog-sort a {
	color: #000;
}

.catalog-sort select {
	min-width: 220px;
}

@media (max-width:992px) {
	.catalog-header-list {
		flex-wrap: wrap;
	}

	.filter-tile {
		display: flex;
		justify-content: space-between;
		background: transparent;
		border: 1px solid var(--border-color);
		border-left: 0;
		border-right: 0;
		padding: 12px 20px;
		margin: 0 -20px 10px -20px;
		width: calc(100% + 40px);

	}

	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	
}

@media (max-width:776px) {
	.catalog-sort::before {
		display: none;
	}
	.catalog-sort select{
		min-width: 150px;
		font-size: 14px;
	}
}

.catalog-btn-filter svg {
	margin-right: 5px;
}

.catalog-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-flow: row nowrap;
	margin-bottom: 30px;
	margin-top: 15px;
	width: 100%;
}



/* SORT */

.catalog-sort-panel {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	line-height: 19px;
	margin-right: 10px;
	position: relative;
	margin-top: 12px;
}

.catalog-sort-panel>a {
	margin-left: 10px;
	position: relative;
	text-decoration: none;
	color: #343A40;
}

.catalog-sort-panel>a::after {
	content: '';
	position: absolute;
	right: -11px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 5px;
	height: 5px;
	border-bottom: 1px solid #5F5F5F;
	border-right: 1px solid #5F5F5F;
	transform: rotate(45deg);
}

.catalog-sort-panel>a.active::after {
	transform: rotate(-135deg);
	top: 6px;
}

.hidden-sort-list-menu {
	list-style: none;
	padding: 5px 5px 5px 33px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
	border-radius: 2px;
	border: 1px solid #F2F2F2;
	background-color: #fff;
	display: none;
	position: absolute;
	top: 22px;
	width: calc(100% + 14px);
	left: 0;
	box-sizing: border-box;
}

.hidden-sort-list-menu.active {
	display: block;
	z-index: 2;
}

.hidden-sort-list-menu li a {
	text-decoration: none;
	padding: 5px 0;
	display: block;
	position: relative;
	font-size: 14px;
	color: #343A40;
}

.hidden-sort-list-menu li a.active::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20px;
	width: 10px;
	margin: auto;
	height: 5px;
	border-bottom: 2px solid #323232;
	border-left: 2px solid #323232;
	transform: rotate(-45deg);
}

.all_filter_click {
	display: none;
}

.catalog-wrapper--main {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 40px;
	justify-content: flex-start;
	align-items: flex-start;
}

.main-catalog-goods-panel {
	margin-bottom: 50px;
}

.catalog-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - 324px);
}

.catalog-row {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
/* End */


/* Start:/local/templates/box/components/bitrix/catalog.element/us/templates/us/photo-zoom.css?17865231214904*/
/* Зум фото в карточке товара (Z-13). Монохром, mercury-курс дизайн-системы. */

/* Зум-слой в рамке (десктоп) */

.element-picture .picture {
    position: relative;
    overflow: hidden;
}

/* Курсор-подсказка «можно увеличить» только там, где зум реально работает. */
@media (hover: hover) and (pointer: fine) {
    .element-picture .picture {
        cursor: zoom-in;
    }
}

.zoom-lens {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    z-index: 2;
}

.zoom-lens.is-active {
    opacity: 1;
}

/* Значок «на весь экран» в углу основного слайдера */

.element__pictures {
    position: relative;
}

.photo-expand {
    position: absolute;
    /* Миниатюры (--el-width-nav-slider) — СЛЕВА (order:-1), справа их нет.
       До края фото от правого края контейнера — только padding-right слайдера. */
    right: calc(var(--el-mr-nav-slider) + 12px);
    top: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #EDEAE4;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    color: #231F20;
    cursor: pointer;
    transition: background .2s ease;
}

.photo-expand:hover {
    background: #fff;
}

.photo-expand:focus-visible {
    outline: 2px solid #231F20;
    outline-offset: 2px;
}

.photo-expand svg {
    width: 20px;
    height: 20px;
}

/* На мобиле миниатюр-колонки нет — значок к правому краю. */
@media (max-width: 992px) {
    .photo-expand {
        right: 12px;
    }
}

/* Полноэкранный просмотр */

.photo-fs {
    position: fixed;
    inset: 0;
    z-index: 200; /* выше меню (100), WhatsApp (90), куки-плашки (95) */
    display: none;
    align-items: center;
    justify-content: center;
    background: #231F20; /* сплошной графит — фокус на товаре, страница под ним не отвлекает */
    opacity: 0;
    transition: opacity .2s ease;
}

.photo-fs.is-open {
    display: flex;
    opacity: 1;
}

.photo-fs__img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    user-select: none;
}

.photo-fs__close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Тёмная подложка: белая иконка тогда читается на любом фоне — и на графите
       оверлея, и когда кнопка попадает на белую карточку товара (фото 96vw). */
    background: rgba(35, 31, 32, .55);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.photo-fs__close:hover {
    background: rgba(35, 31, 32, .8);
}

.photo-fs__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Тёмная подложка — стрелки лежат прямо на фото (на мобиле оно 96vw, белое):
       белая иконка на полупрозрачно-белом фоне там была невидима. */
    background: rgba(35, 31, 32, .55);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.photo-fs__nav:hover {
    background: rgba(35, 31, 32, .8);
}

.photo-fs__nav--prev { left: 20px; }
.photo-fs__nav--next { right: 20px; }

.photo-fs__nav[hidden] {
    display: none;
}

.photo-fs__close:focus-visible,
.photo-fs__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.photo-fs__close svg,
.photo-fs__nav svg {
    width: 24px;
    height: 24px;
}

.photo-fs__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    letter-spacing: .04em;
    opacity: .85;
}

.photo-fs__counter[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .photo-fs__nav { width: 40px; height: 40px; }
    .photo-fs__nav--prev { left: 8px; }
    .photo-fs__nav--next { right: 8px; }
    .photo-fs__img { max-width: 96vw; }
}

@media (prefers-reduced-motion: reduce) {
    .zoom-lens,
    .photo-fs,
    .photo-expand,
    .photo-fs__close,
    .photo-fs__nav {
        transition: none;
    }
}

/* End */


/* Start:/local/templates/box/components/bitrix/catalog.element/us/templates/us/style.css?178663655518632*/
/* FIX slick */

.element-picture .slick-track {
    display: flex;
}

.element-picture  {
    display: flex !important;
    position: relative;
}

.element-picture__item {
    position: absolute;
    left: 0;
    top: 0;
    right: var(--el-mr-nav-slider);
}

.slick-initialized .element-picture__item, .element-picture__item:first-child {
    position: relative;
    right: 0;
}

/* FIX slick */

.element {
    --el-width-nav-slider: 92px;
    --el-mr-nav-slider: 20px;
}

.element__pictures {
    display: flex;
}

.element__pictures img{
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.element-picture {
    width: calc(100% - var(--el-width-nav-slider) - var(--el-mr-nav-slider));
    padding-right: var(--el-mr-nav-slider);
}

.element-picture-slider {
    width: var(--el-width-nav-slider);
    margin-right: var(--el-mr-nav-slider);
    order: -1;
    padding: 20px 0;
    overflow: hidden;
}

.element-picture-slider .slick-arrow {
    position: absolute;
    bottom: 0;
    transform: none;
    left: 0;
    width: 100%;
    height: 20px;
}

.element-picture-slider .slick-arrow svg{
    height: auto;
    width: 12px;
}

.element-picture-slider .slick-next {
    top: auto;
    bottom: 0;
}

.element-picture-slider .slick-prev {
    top: 0;
    bottom: auto;
}

.element-picture-slider__item {
    display: flex;
    margin: 7.5px 0px;
    cursor: pointer;
    background: #fff;
    opacity: 0.5;
}

.element-picture-slider__item .picture {
    width: var(--el-width-nav-slider);
    height: var(--el-width-nav-slider);
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-vertical .element-picture-slider__item {
    border: 1px solid transparent;
}

.slick-vertical .element-picture-slider__item.slick-current {
    border: 1px solid #414042;
    opacity: 1;
}

/* mercury: вся карточка — белый блок, «парящий» на сером фоне страницы («3D-рамка»).
   Фон #fff и страница #f7f7f7 близки по тону — чтобы блок читался, нужны И мягкая
   широкая тень (ощущение парения), И тонкий тёплый hairline (чёткий край). */
.element-container {
    display: flex;
    align-items: flex-start;
    position: relative;
    background: #fff;
    border: 1px solid #EDEAE4;
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .09);
    padding: 40px;
    margin-top: 10px;
}

.element__pictures {
    width: 50%;
}

.element__info {
    width: 50%;
    padding-left: 40px;
    box-sizing: border-box;
}

/* заголовок — тонкий Manrope, в правой колонке (как mercury) */
/* заголовок карточки — КАПСОМ (концепт 03, решение 2026-07-21). Осознанное исключение:
   в каталоге и на главной заголовки строчные, здесь — капс. Light 300 держит капс лучше 200. */
.element__title {
    font-family: var(--font-family-display);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-color);
    margin: 0 0 16px;
}

/* артикул — НАД заголовком (как в артефакте), капс с трекингом */
.element__article-top {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--main-color-8);
    margin-bottom: 10px;
}

.element__price {
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
    color: #231F20;
}

.element__price--old {
    font-size: 16px;
    line-height: 24px;
    text-decoration: line-through;
    color: var(--main-color-8);
    margin-top: 5px;
}

/* лайк — серое сердечко в углу карточки, НЕ кнопка */
.element__fav {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    cursor: pointer;
    line-height: 0;
    padding: 10px;
    transition: transform .2s ease;
}

.element__fav:hover {
    transform: scale(1.1);
}

.element__fav svg path {
    transition: stroke .2s ease, fill .2s ease;
}

.element__info-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 20px 0 10px;
}

.element__row--justify {
    display: flex;
    justify-content: space-between;
}

.element-prop {
    --el-margin: 2.5px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--el-margin) * -1);
}

.element-prop.ui-select {
    margin: 0;
    max-width: 285px;
}


.element-prop .element-prop__item {
    margin: var(--el-margin);
}

.element-props__item {
    font-size: 14px;
    line-height: 20px;
}

.element-props__item {
    margin-top: 10px;
    color: #000;
}

.element-props__item span:first-child {
    color: #777777;
}

/* кнопки — outline, ненавязчивые (mercury): белые с тонкой рамкой, тёмный текст */
.element__btns {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* база пары кнопок — капс + трекинг, равная ширина (по артефакту концепт 03) */
.element__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* primary «В корзину» — чёрная заливка, главная кнопка */
.element__btn--primary {
    background: #231F20;
    border: 1px solid #231F20;
    color: #fff;
}

.element__btn--primary:hover {
    background: #3a3634;
    border-color: #3a3634;
}

/* ghost «Примерка» — прозрачная, инверсия на hover */
.element__btn--ghost {
    background: transparent;
    border: 1px solid #231F20;
    color: #231F20;
}

.element__btn--ghost:hover {
    background: #231F20;
    color: #fff;
}

/* вторичные действия — тихие текст-ссылки под основными кнопками */
.element__btns-secondary {
    margin-top: 16px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.element__btns-secondary .element__link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: var(--main-color-8);
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
    transition: color .2s ease;
}

.element__link-btn:hover {
    color: #231F20;
}

/* Попап примерки: вид полей и селекта — в style/popup-forms.css (общий слой
   всех форм во всплывающих окнах). Здесь остаётся только отступ блока. */
.showroom__store {
    margin-bottom: 16px;
}

[data-element-discount] {
    position: relative;
    width: fit-content;
}

[data-element-discount]::after {
    content: attr(data-element-discount);
    position: absolute;
    background: #B06A34;
    border-radius: 2px;
    color: #fff;
    padding: 3px 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    left: calc(100% + 10px);
}

.prop-disabled {
    display: none;
}

.buy1click {
    display: none;
}

.liked svg {
    fill: #231F20 !important
}

.liked svg path {
    stroke: #231F20 !important
}

#errorBuy1Click{
    color: #e20338;
    margin-top: 10px;
}

@media (max-width: 992px) {
    /* Сердечко «в избранное» лежало ровно под кнопкой разворота фото: на широком экране
       они разнесены по колонкам, а на телефоне колонки схлопываются и обе оказываются
       в правом верхнем углу — сверху зум, он и перехватывал нажатие. Разводим: избранное
       слева, разворот справа. Подложка та же, что у зума, — без неё тонкий контур
       теряется на светлой фотографии. Селектор с родителем не для красоты: общий
       .btn-clear в main.css (width/height: auto, background: transparent) идёт позже
       по каскаду и при равной специфичности перебивал бы подложку. */
    .element-container .element__fav {
        left: 12px;
        right: auto;
        top: 12px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #EDEAE4;
        border-radius: 8px;
        background: rgba(255, 255, 255, .9);
    }

    .element-picture-slider {
        display: none !important;
    }
    .slick-slide img {
        margin: auto;
    }
    .element-picture{
        padding: 0;
    }

    .element-container {
        padding: 16px;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .element__info {
        padding: 20px 0 0;
    }

    .slider-nav {
        display: none;
    }

    .element-container {
        flex-wrap: wrap;
    }

    .element__info,
    .element__pictures {
        width: 100%;
    }

    .element__info, .element__pictures {
        position: static;
    }

    .element__info {
        margin: 24px 0 0;
        width: 100%;
    }

    .element__pictures {
        flex-wrap: wrap;
    }

    .element-picture {
        width: 100%;
    }

    .element-picture-slider {
        width: 100%;
        margin: 10px 0;
        order: 0;
    }

    .element__btns {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: #fff;
        padding: 8px 20px 0;
        border-top: 1px solid var(--border-color);
        /* justify-content: space-between; */
        z-index: var(--z-index-menu);
        flex-wrap: nowrap;
    }

    .element__btns button {
        /* font-size: 12px 15px; */
        padding: 15px 20px;
        margin-bottom: 8px;
    }

    .element__btns button {
        /* font-size: 12px 15px; */
        padding: 15px 20px;
        margin-bottom: 8px;
        width: 100%;
    }

    .element__btns button.btn-link--ic {
        padding: 10px 12px;
        width: auto;
    }
}


@media (max-width: 550px) {
    .element-title h1 {
        font-size: 20px;
    }

    .element__btns {
        padding: 8px 10px 0;
    }

    .element__btns button {
        font-size: 11px;
    }

    .element__btns button.btn-link--ic {
        padding: 8px 10px;
        width: auto;
    }
}

@media (max-width: 350px) {
    .element__btns button {
        font-size: 12px;
        padding: 15px 13px;
    }
}

.element-deliverys {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    margin-top: 20px;
}
.element-delivery {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #D2C9B7;
    max-width: 310px;
}
.element-delivery__title {
    color: #293133;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.element-delivery__title button {
    color: var(--link-color);
}
.element-delivery__description {
    color: #697279;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}
/* ---- Счётчик количества вместо кнопки «В корзину» ----
   Появляется, когда товар уже в корзине (js/cart-stepper.js). Габариты и
   радиус — как у пары кнопок рядом, иначе строка «прыгает» при подмене. */
.element__qty {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 8px;
    border: 1px solid #231F20;
    border-radius: 2px;
    background: #fff;
    user-select: none;
}

.element__qty[hidden] {
    display: none;
}

.element__qty.is-busy {
    opacity: .55;
    pointer-events: none;
}

.element__qty-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #231F20;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s ease;
}

.element__qty-btn:hover {
    opacity: .55;
}

.element__qty-btn:disabled {
    opacity: .25;
    cursor: default;
}

.element__qty-value {
    min-width: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* На узком экране пара кнопок закреплена у нижнего края (position: fixed),
   и ряд вторичных ссылок уезжал под неё — со ссылкой «Перейти в корзину»
   их стало три, и вторая строка полностью скрывалась. Отводим место. */
@media (max-width: 992px) {
    .element__btns-secondary {
        margin-bottom: 84px;
    }

    /* Та же панель закрывает и самый низ страницы: докрутив до конца, покупатель
       не видит последние 69px футера — там копирайт и ссылка на политику.
       Отводим место в футере (высота панели 69px + запас на safe-area iPhone).
       Правило живёт в стилях карточки, поэтому на других страницах футер
       остаётся как был. */
    /* body в селекторе — не украшение: ниже по каскаду у футера есть шорткат
       `padding: 48px 20px 40px` (медиа ≤768px), и он перебивал одиночный
       padding-bottom при равной специфичности. */
    body .footer {
        padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom, 0px));
    }

    /* Счётчик — не одна из кнопок ряда, а блок на месте кнопки, и мобильные
       правила `.element__btns button` били по его минусу с плюсом: те получали
       padding 15/20 и распирали счётчик до 60px против 52px у «Примерки», а сам
       счётчик оставался без нижнего отступа и вставал уже соседа (167 против 191).
       Габариты берём у ряда: высота приходит растяжением, ширина — flex-basis. */
    .element__qty {
        min-height: 44px;
        padding: 0;
        margin-bottom: 8px;
        align-self: stretch;
    }

    /* Ряд делится ровно пополам. Базис именно 50%, а не 0: при нулевом базисе
       элемент всё равно не сжимается ниже своих padding с рамкой, и кнопка со
       своими 20px по бокам забирала на 40px больше счётчика (199 против 159). */
    .element__btns > .element__btn,
    .element__btns > .element__qty {
        /* Половина минус половина gap — тогда сумма ровно равна ряду, сжатие не
           включается и обе половины выходят пиксель в пиксель. */
        flex: 1 1 calc(50% - 6px);
        width: auto;
        min-width: 0;
    }

    .element__btns .element__qty-btn {
        width: 52px;
        height: auto;
        align-self: stretch;
        padding: 0;
        margin-bottom: 0;
        font-size: 18px;
    }

    /* Значение занимает остаток — тогда знаки прижаты к краям, как в макете */
    .element__qty-value {
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }
}

/* Пока не известно, лежит ли товар в корзине, пара кнопок держит место, но не
   рисуется: иначе покупатель, вернувшийся на отложенный товар, успевал увидеть
   кнопку «В корзину», которую тут же подменял счётчик. Класс снимает инлайн-
   скрипт сразу за разметкой — то есть ещё до первой отрисовки. */
.element__btns.is-resolving > * {
    visibility: hidden;
}

/* Без JS решение принять некому — показываем кнопку как раньше */
.no-js .element__btns.is-resolving > * {
    visibility: visible;
}

/* Группа выбора размера, в которой нет ни одного настоящего значения: из 1С
   такие приходят как «0.0» — это «размер не указан», а не размер. Кнопки
   остаются в DOM (по ним script.js выбирает торговое предложение, и порядок
   свойств в OFFERS_TREE завязан на их состав), но покупателю не показываются.
   !important — потому что группу показывает JS инлайновым style. */
[data-treeprop-empty="Y"] {
    display: none !important;
}

/* End */


/* Start:/local/templates/box/style/shopList.css?17848955607289*/
#popupShops_background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#popupShops_background {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#popupShops {
    margin: auto;
    height: 600px;
    background: #fff;
    padding: 0;
}

.glyphicon-remove {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
}

#popupShops #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.nullValue {
    border-color: red !important
}

[data-element='shop-popup'] {
    position: fixed;
    z-index: 102;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
}

[data-element="shop-popup-overlay"] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(128, 128, 128, 0.5);
    z-index: 101;
}

.shop-list-content {
    display: flex;
    max-height: 100%;
    position: relative;
    border-top: 1px solid var(--main-color-4);
}

.shop-list-container .shop-map {
    /*width: calc(100% - 400px);
    height: 400px;*/

    width: 100%;
    height: 100%;
}

.shop-list-container .shop-map>div {
    width: 100%;
    height: 400px;
    /*    height: 600px;*/
}

.shop-list-container.container {
    max-width: 950px;
    width: 100%;
    padding: 25px 15px 25px 25px !important;
}

.shop-list-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 16px;
}

.city-select.dropdown {
    text-align: center;
    width: 100%;
}

.city-select__current {
    width: 100%;
}

.shop-list-list {
    height: 100%;
}

.shop-list-list .dropdown-content {
    top: 32px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    border: 1px solid #aa8851;
    background-color: #f3e9d4;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}

.shop-list-list-ul {
    /*    max-width: 350px;*/
    padding: 5px;

    height: 100%;
    overflow-y: auto;

    margin: 0;
}

.shop-list-list-ul::-webkit-scrollbar {
    width: 4px;
}

.shop-list-list-ul::-webkit-scrollbar-track {
    background-color: var(--main-color-5);
    border-radius: 4px;

}

.shop-list-list-ul::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 4px;

}

.shop-list-list-ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin: 0px 0px 15px 0px; */
    padding: 10px;
}

.shop-list-list-ul .shop-item-name,
.shop-list-list-ul .shop-item-address,
.shop-list-list-ul .shop-item-phone,
.shop-list-list-ul .shop-item-email,
.shop-list-list-ul .shop-item-worktime,
.shop-list-list-ul .shop-item-btn {
    width: 25%;
    /* padding: 0 5px; */
}



.shop-item-address {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.shop-item-info,
.shop-item-worktime {
    color: var(--night-gray);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.shop-list-list-ul .shop-item-name {
    color: #8e6b36;
}

.shop-list-list-ul .shop-item-btn {
    text-align: center;
}

.shop-list-list-ul .shop-item-btn a {
    color: #333;
    padding: 5px;
    max-width: 130px;
    width: 100%;
    border: 1px solid #333;
    -webkit-transition: all 280ms ease;
    -o-transition: all 280ms ease;
    transition: all 280ms ease;
}

.shop-list-list-ul .shop-item-btn a:hover {
    color: #fff;
    background: #8e6b36;
    border: 1px solid #8e6b36;
    -webkit-transition: all 280ms ease;
    -o-transition: all 280ms ease;
    transition: all 280ms ease;
    text-decoration: none;
}

.shop-list-list-ul .shop-item-phone {
    /*text-align: center;*/
}

.shop-list-close {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    font-size: 20px;
}

@media (max-width: 1200px) {
    .shop-list-container.container {
        max-width: 875px !important;
    }
}

.shop-list-list-ul .shop-item-name, .shop-item-address {
    /* width: 100%; */
    /* margin: 0px 0px 20px 0px; */
    /*    text-align: center;*/
}

.shop-list-list-ul li {
    padding: 24px 40px;
    border-bottom: 1px solid var(--main-color-4);
}

.shop-list-list-ul li:last-child {
    border: none;
}


@media (max-width: 450px) {
    .shop-list-title.title {
        font-size: 17px;
    }
}

.shop-list-list-ul .btn-link {
    padding: 5px 10px;
    font-size: 12px;
    width: 100%;
    /* margin-top: 15px; */
    max-width: 200px;
}

.shop-list {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    /*    border-radius: 4px;*/
    z-index: 1;
    background-color: #fff;
    height: 100%;
    max-width: 100%;
}

.shop-list-message {
    background-color: var(--main-bg-color);
    padding: 16px;
    border-radius: 8px;
    color: var(--main-color);
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

.shop-list-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 24px;
}

.shop-list-viewes {
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-list-viewes div {
    background: #fff;
    border-radius: 4px;
    padding: 13.5px 15px;
    display: inline-block;
    line-height: initial;
    cursor: pointer;
    text-align: center;
    width: calc(50% - 5px);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--btn-bg-color);
}

.shop-list-viewes div.active {
    background: var(--btn-bg-color);
    color: #fff;
}

.shop-list-search {
    flex: 1;
    position: relative;
}

.shop-list-search input {
    width: 100%;
    height: 48px;
}

.shop-list-search button {
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .shop-list-actions {
        flex-wrap: wrap;
    }

    .shop-list-search {
        width: 100%;
        order: -1;
        flex: none;
    }

    .shop-list-list-ul li {
        flex-wrap: wrap;
    }

    .shop-list-content .shop-list-list-ul .shop-item-name,
    .shop-list-content .shop-list-list-ul .shop-item-address,
    .shop-list-content .shop-list-list-ul .shop-item-phone,
    .shop-list-content .shop-list-list-ul .shop-item-email,
    .shop-list-content .shop-list-list-ul .shop-item-worktime,
    .shop-list-content .shop-list-list-ul .shop-item-btn {
        width: 100%;
    }

    .shop-list-list-ul li{
        padding: 24px 20px;
    }

    .shop-item-worktime, .shop-item-address {
        margin-bottom: 12px;
    }
}

#shop-popup .ui-popup__container{
    max-width: 1180px;
    width: calc(100% - 40px);
    padding: 32px 40px;
}
.shop-item-info__phone {
    display: flex;
}
/* End */


/* Start:/local/templates/box/css/related-blocks.css?178663316119519*/
/*
 * Нижние «этажи» карточки товара: «Собрали образ» (product.look) и «Вам может
 * понравиться» (product.similar).
 *
 * Замысел: это НЕ отдельная секция под карточкой, а продолжение той же белой
 * плоскости. Раньше блоки сидели на сером фоне страницы отдельной плашкой и
 * читались как чужая вставка. Теперь плоскость карточки идёт вниз, разделы
 * отбиты волосяной линией — ровно так же, как отбиты разделы внутри карточки.
 *
 * Подключается явно через $this->addExternalCss() из template.php ОБОИХ
 * компонентов: если у товара не набралось похожих, product.similar не
 * отрисуется вовсе, и его ассеты Битрикс не подключит — левая половина осталась
 * бы без стилей. Дважды один файл ядро не подключает.
 *
 * Специфичное одной половине (кнопки прокрутки — только справа; ссылки «Ещё N»
 * и «Добавить всё», строка выбора размера — только слева) живёт в собственном
 * style.css компонента.
 */

/* --- Плоскость -------------------------------------------------------------
   Геометрия снята с .element-container карточки: та же ширина, тот же паддинг
   40px, та же тень. Верхние углы прямые, нижние скруглены — вместе с карточкой
   получается одна форма, а не два блока встык. */
.zt-plate {
    /* Ширина карточки товара объявлена здесь, а не на .zt-rel: её использует и
       грид (.zt-related считает по ней ширину левой колонки), и сами секции.
       CSS-переменные наследуются только вниз — с .zt-rel грид бы её не увидел. */
    --zt-rel-card: 168px;
    position: relative;      /* перекрывает нижнюю тень карточки, иначе она легла бы полосой поверх плоскости */
    z-index: 1;
    background: #fff;
    /* Рамка по бокам и снизу — та же волосяная линия, что обводит карточку выше.
       Без неё нижняя плоскость обрывалась в тень: сверху край читался чёткой
       линией #EDEAE4, снизу — размытым пятном, и «этажи» выглядели как блоки
       разной ширины. Сверху рамки нет намеренно: разделителем работает
       border-bottom самой карточки, две линии встык дали бы жирный 2px шов. */
    border: 1px solid #EDEAE4;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: rgba(0, 0, 0, .09) 0 6px 28px;
    /* Тень обрезана по верхней границе. У box-shadow с blur 28px и сдвигом 6px
       ореол поднимается на 22px ВВЕРХ и ложился серой дымкой на белую карточку
       над стыком (замер: 255 → 248 к линии шва). Отрицательные значения по
       остальным сторонам оставляют тень целой там, где она нужна. */
    clip-path: inset(0 -40px -40px -40px);
    padding: 40px;
    margin-bottom: 64px;
}

/* Карточка выше должна закончиться без скругления, иначе на стыке по бокам
   останутся серые уголки. Правило безопасно: этот файл грузится только на
   карточке товара и только когда хотя бы одна половина отрисовалась.
   Её тень симметрично обрезана снизу — иначе ниже шва она складывалась бы с
   тенью плоскости и по бокам проступало утолщение. */
.element-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: inset(-40px -40px 0 -40px);
}

/* --- Сетка -----------------------------------------------------------------
   Половины делятся по стыку колонок карточки («фото | описание»), который
   приходится ровно на середину контентной ширины. Вертикальный волосок — не
   декор: он продолжает вниз линию, которая уже существует выше. */
/* Колонки делятся по содержимому, а не пополам: в 87 связках из 200 всего два
   товара, и жёсткие 50/50 оставляли слева дыру в пол-колонки. Левая занимает
   ровно столько, сколько стоит карточек (их число компонент отдаёт в
   data-zt-look-count), правая забирает остаток. Ширина считается явно, а не
   через max-content: иначе ширину колонки задавали бы ссылки «Добавить N
   позиций в корзину», которые длиннее ряда карточек. */
.zt-related {
    display: grid;
    --zt-look-w: calc(3 * var(--zt-rel-card) + 2 * 24px + 40px);
    grid-template-columns: max(280px, var(--zt-look-w)) minmax(0, 1fr);
}
/* 280px — нижний предел: в более узкой колонке ссылки под рядом ломаются на три строки. */
.zt-related:has(.zt-rel--look[data-zt-look-count="2"]) { --zt-look-w: calc(2 * var(--zt-rel-card) + 24px + 40px); }
.zt-related:has(.zt-rel--look[data-zt-look-count="1"]) { --zt-look-w: calc(var(--zt-rel-card) + 40px); }

.zt-related > .zt-rel:first-child { padding-right: 40px; }
.zt-related > .zt-rel:last-child { padding-left: 40px; border-left: 1px solid #EDEAE4; }

/* Одна половина — линии делить нечего, контент занимает всю ширину. */
.zt-related:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.zt-related:has(> :only-child) > .zt-rel { padding: 0; border-left: 0; }

/* Обе половины могли не отрисоваться (ранний return в component.php) — тогда
   плоскость осталась бы пустой белой полосой под карточкой. */
.zt-plate:not(:has(.zt-rel)) { display: none; }

/* min-width: 0 глушит авто-минимум grid-item'а: секция с overflow: visible
   тянет наверх min-content своей ленты и распирает колонку в обход minmax(0,1fr)
   (замер до фикса: scrollWidth 2836 при окне 1440). */
.zt-related > .zt-rel { min-width: 0; }

/* --- Типографика -----------------------------------------------------------
   Заголовок раздела — уменьшенный H1 товара (Manrope 300 / 30px / uppercase /
   0.6px): блоки принадлежат карточке, а не футеру, откуда был взят прежний
   стиль 14px с трекингом 1.5px. */
/* min-height по высоте кнопок прокрутки: они есть только справа, и без резерва
   слева заголовки половин висят на разной высоте, а ряды карточек не совпадают
   (замер до фикса — 7px и 16px). Половины стоят рядом и читаются как пара. */
.zt-rel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 24px; }
.zt-rel__title {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #231F20;
}

/* --- Карточка товара -------------------------------------------------------
   Без рамки и без своего фона: на белой плоскости обведённые карточки читались
   как «карточки в карточке» — дешёвая сетка. В каталоге товар тоже подан голым
   фото (.catalog-item__picture, радиус 2px, без границы) — здесь тот же язык.
   Разделяет позиции воздух, а не линии. */
.zt-rel__track {
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.zt-rel__track::-webkit-scrollbar { display: none; }

/* --- Полоса прокрутки -------------------------------------------------------
   Стрелки в углу человек не связывает с содержимым: они мелкие и стоят далеко от
   карточек. Полоса лежит прямо под лентой и показывает долю просмотренного —
   видно и что подборка длиннее экрана, и сколько осталось. Скрипт показывает её
   только когда есть что листать. Её можно тянуть мышью и пальцем. */
.zt-rel__scrollbar {
    position: relative;
    height: 2px;
    margin-top: 24px;
    background: #EDEAE4;
    border-radius: 2px;
    cursor: pointer;
    touch-action: none;   /* иначе браузер перехватит перетаскивание как скролл страницы */
}
/* Ловим промах пальцем: сама линия тонкая, зона захвата — 20px по вертикали. */
.zt-rel__scrollbar::before {
    content: '';
    position: absolute;
    inset: -9px 0;
}
.zt-rel__thumb {
    display: block;
    height: 100%;
    min-width: 32px;
    background: #231F20;
    border-radius: 2px;
    transition: transform .1s linear;
}
@media (prefers-reduced-motion: reduce) {
    .zt-rel__thumb { transition: none; }
}

/* Лента упирается в край плоскости и режет карточку на полуслове. Маска гасит
   последние 40px — обрыв читается как «дальше есть ещё», а не как ошибка
   вёрстки. Гаснет только правый край: слева лента начинается ровно по сетке. */
.zt-rel__track {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
/* Долистали до конца (или листать нечего) — гасить нечего, маска снимается. */
.zt-rel__track.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}
.zt-rel__item { position: relative; flex: 0 0 var(--zt-rel-card); scroll-snap-align: start; }
.zt-rel__link { display: block; text-decoration: none; color: inherit; }
.zt-rel__pic { display: block; aspect-ratio: 1; margin-bottom: 12px; border-radius: 2px; overflow: hidden; }
.zt-rel__pic img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.zt-rel__item:hover .zt-rel__pic img { opacity: .82; }   /* только прозрачность: scale и bounce — запрет §5.4 */
.zt-rel__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; line-height: 1.43; color: #414042; margin-bottom: 6px;
}
.zt-rel__price { font-size: 16px; line-height: 1.5; font-weight: 500; color: #231F20; }

/* Сердечко — те же данные (data-wishlistid) и то же состояние .liked, что на
   остальном сайте (favorite.js). Без подложки и рамки: фон под ним и так белый,
   плашка добавляла бы шума там, где её нечем оправдать. */
.zt-rel__fav {
    position: absolute; top: 0; right: 0;
    width: 32px; height: 32px; padding: 0;
    background-color: transparent;
    background-repeat: no-repeat; background-position: center; background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.45067 13.9082L11.4033 20.4395C11.6428 20.6644 11.7625 20.7769 11.9037 20.8046C11.9673 20.8171 12.0327 20.8171 12.0963 20.8046C12.2375 20.7769 12.3572 20.6644 12.5967 20.4395L19.5493 13.9082C21.5055 12.0706 21.743 9.0466 20.0978 6.92607L19.7885 6.52734C17.8203 3.99058 13.8696 4.41601 12.4867 7.31365C12.2913 7.72296 11.7087 7.72296 11.5133 7.31365C10.1304 4.41601 6.17972 3.99058 4.21154 6.52735L3.90219 6.92607C2.25695 9.0466 2.4945 12.0706 4.45067 13.9082Z' stroke='%238c8071' stroke-width='1.5'/%3E%3C/svg%3E");
    border: 0; cursor: pointer; opacity: 0; transition: opacity .2s ease;
    -webkit-appearance: none; appearance: none;
}
/* Сердечко проявляется при наведении на позицию, но уже отмеченное видно всегда —
   иначе покупатель теряет из виду, что отложил. На тач-экранах hover не
   срабатывает, поэтому там показываем сразу. */
.zt-rel__item:hover .zt-rel__fav,
.zt-rel__fav:focus-visible,
.zt-rel__fav.liked { opacity: 1; }
.zt-rel__fav.liked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.45067 13.9082L11.4033 20.4395C11.6428 20.6644 11.7625 20.7769 11.9037 20.8046C11.9673 20.8171 12.0327 20.8171 12.0963 20.8046C12.2375 20.7769 12.3572 20.6644 12.5967 20.4395L19.5493 13.9082C21.5055 12.0706 21.743 9.0466 20.0978 6.92607L19.7885 6.52734C17.8203 3.99058 13.8696 4.41601 12.4867 7.31365C12.2913 7.72296 11.7087 7.72296 11.5133 7.31365C10.1304 4.41601 6.17972 3.99058 4.21154 6.52735L3.90219 6.92607C2.25695 9.0466 2.4945 12.0706 4.45067 13.9082Z' fill='%23231F20' stroke='%23231F20' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (hover: none) {
    .zt-rel__fav { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .zt-rel__track { scroll-behavior: auto; }
    .zt-rel__pic img, .zt-rel__fav { transition: none; }
}

/* --- Мобильная -------------------------------------------------------------
   Половины встают друг под друга, вертикальный волосок ложится горизонтально —
   тот же приём деления, только по другой оси. Плоскость сохраняет паддинг
   карточки (на узких экранах он там 20px). */
@media (max-width: 900px) {
    /* Боковой паддинг ровно как у .element-container на этом брейкпоинте (16px):
       иначе контент плоскости не встанет по одной вертикали с контентом карточки. */
    .zt-plate { padding: 24px 16px; margin-bottom: 40px; }
    .zt-related { grid-template-columns: minmax(0, 1fr); }
    .zt-related > .zt-rel:first-child { padding: 0 0 32px; }
    .zt-related > .zt-rel:last-child { padding: 32px 0 0; border-left: 0; border-top: 1px solid #EDEAE4; }
}

@media (max-width: 767px) {
    .zt-plate { --zt-rel-card: 55vw; }
    .zt-rel__title { font-size: 18px; }
}

/* --- «Хорошо дополнит» под корзиной ----------------------------------------
   Тот же товарный кирпичик (.zt-rel__item и потроха), другая раскладка: под
   корзиной свободна вся ширина страницы, шесть карточек встают рядом, и лента
   с прокруткой была бы механикой ради механики.

   Форму берём у корзины, а не у карточки товара: там своя плоскость — рамка
   #E7E4DF, радиус 4px, без тени (.basket-items). Блок под ней обязан выглядеть
   её продолжением, иначе на одной странице окажутся две разные «карточки». */
.zt-cart-rel {
    /* Сверху отступа нет намеренно: секция корзины уже несёт padding-bottom 64px,
       и свой margin давал бы 88px разрыва — блок отваливался от корзины. */
    margin: 0 0 64px;
    padding: 28px 24px 32px;
    background: #fff;
    border: 1px solid #E7E4DF;
    border-radius: 4px;
}
.zt-cart-rel__title { margin-bottom: 24px; }

/* Шесть в ряд, ширина карточки резиновая: полоса шире, чем на карточке товара,
   поэтому фиксированные 168px оставили бы справа дыру. Сколько показать, решает
   компонент (LIMIT) — сетка просто раскладывает то, что пришло. */
.zt-cart-rel__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}
/* Карточка приехала из ленты, где она flex-элемент фиксированной ширины —
   в гриде ширину задаёт колонка. */
.zt-cart-rel .zt-rel__item { flex: none; }

@media (max-width: 1200px) {
    .zt-cart-rel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Пятая и шестая карточки во втором ряду смотрелись бы обрубком ряда. */
    .zt-cart-rel .zt-rel__item:nth-child(n+5) { display: none; }
}
@media (max-width: 900px) {
    .zt-cart-rel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zt-cart-rel .zt-rel__item:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
    /* На телефоне ряд из двух — фото остаётся крупным, и подборка не съедает
       экран: четыре карточки в два ряда, остальное отсекаем. */
    .zt-cart-rel { padding: 24px 16px 28px; margin-bottom: 40px; }
    .zt-cart-rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .zt-cart-rel .zt-rel__item:nth-child(n+4) { display: revert; }
    .zt-cart-rel .zt-rel__item:nth-child(n+5) { display: none; }
}

/* End */


/* Start:/local/components/custom/product.similar/templates/.default/style.css?17866293141520*/
/*
 * Лента «Вам может понравиться» — только своё: кнопки прокрутки трека.
 * Плоскость, сетка, карточка и типографика — общие с левой половиной, живут в
 * local/templates/box/css/related-blocks.css (там же объяснено, почему файл
 * подключается из обоих компонентов явно).
 */
.zt-rel__nav { display: flex; gap: 4px; margin-right: -8px; }

/* Без рамки и заливки: на белой плоскости обведённые кнопки спорили бы с
   товаром за внимание. Сама стрелка мелкая, поэтому кликается вся площадка
   40×40 — рисунок при этом остаётся прежнего размера. */
.zt-rel__arrow {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    font-family: inherit; font-size: 20px; line-height: 1;
    color: #756A5A; background: transparent; border: 0;
    cursor: pointer;
    transition: opacity .15s ease;
}
.zt-rel__arrow:hover { opacity: .6; }   /* только прозрачность — запрет §5.4 */
.zt-rel__arrow:focus-visible { outline: 2px solid #231F20; outline-offset: -2px; }
.zt-rel__arrow:disabled { opacity: .25; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .zt-rel__arrow { transition: none; }
}

/* End */


/* Start:/local/components/custom/guide.links/templates/.default/style.css?17849222011439*/
/* «Читайте в гиде» на карточке товара: чистые ссылки, без JS.
   Токены — из local/templates/box/style/constructor.css: заголовок — Manrope
   (var(--font-family-display)), ссылки — Inter (var(--font-family-serif)),
   цвета — только --text-color/--text-color-2/--border-color/--accent
   боевого шаблона, никаких новых hex (тот же приём, что у guide.list/detail). */

.zt-guide-links__title {
    font-family: var(--font-family-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0 0 20px;
}

.zt-guide-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zt-guide-links__item {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.zt-guide-links__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.zt-guide-links__link {
    font-family: var(--font-family-serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-color-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.zt-guide-links__link:hover {
    color: var(--accent);
}

@media (max-width: 767px) {
    .zt-guide-links__title {
        font-size: 22px;
        margin-bottom: 16px;
    }
}

/* End */


/* Start:/local/templates/box/components/bitrix/form.result.new/gift/style.css?17858476313347*/
/* Форма «Намекните другу о подарке».
   Общий вид попапа и полей — style/popup-forms.css (класс .ui-popup--form).
   Здесь только то, что есть лишь у этой формы: две колонки и превью письма.

   Файл подключается компонентом и попадает в head ПОСЛЕ общего слоя, поэтому
   любое правило отсюда его перебивает — старая версия так и ломала вёрстку
   ширинами 46% внутри новой сетки. */

.btn-friends {
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.btn-friends i {
    font-size: 20px;
    margin-left: 5px;
}

.popup-gift__container {
    max-width: 860px;
}

.form-gift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
}

.form-gift__inputs {
    min-width: 0;
}

.form-gift__label {
    display: block;
    font-family: var(--font-family-display);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-color-4);
    /* 18px, а не 12: подпись поля в заполненном состоянии поднимается над рамкой
       и без этого зазора читается вторым заголовком */
    margin-bottom: 18px;
}

.form-gift__block+.form-gift__block {
    margin-top: 28px;
}

/* Кнопка идёт за honeypot-полем, поэтому соседский селектор выше её не достаёт */
.form-gift .btn--gift {
    margin-top: 24px;
}

.zform__errors {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--main-bg-color);
    border-left: 2px solid var(--red);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color-2);
}

.zform__errors font,
.zform__errors b {
    color: inherit;
    font-weight: 400;
}

/* Превью письма — то, что увидит получатель */
.form-gift__content {
    padding: 20px;
    background: var(--main-bg-color);
    border-radius: 12px;
    text-align: center;
}

.form-gift__preview-label {
    font-family: var(--font-family-display);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-color-4);
    margin-bottom: 16px;
}

.form-gift__content img {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    display: block;
    /* фото товара снято на белом — на сером фоне карточки убираем рамку кадра */
    mix-blend-mode: multiply;
}

.form-gift__content-text {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color-2);
}

.form-gift__content-text span {
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 767px) {
    .form-gift {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Превью уходит под кнопку: на узком экране сначала действие, потом картинка */
    .form-gift__content {
        order: 2;
    }
}

/* End */
/* /local/templates/box/components/bitrix/catalog/shop/style.css?17854988193281 */
/* /local/templates/box/components/bitrix/catalog.element/us/templates/us/photo-zoom.css?17865231214904 */
/* /local/templates/box/components/bitrix/catalog.element/us/templates/us/style.css?178663655518632 */
/* /local/templates/box/style/shopList.css?17848955607289 */
/* /local/templates/box/css/related-blocks.css?178663316119519 */
/* /local/components/custom/product.similar/templates/.default/style.css?17866293141520 */
/* /local/components/custom/guide.links/templates/.default/style.css?17849222011439 */
/* /local/templates/box/components/bitrix/form.result.new/gift/style.css?17858476313347 */