/* Start:/local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/style.css?178161280560417*/ /* Стили для шаблона catalog.element wayoff_catalog */ .wayoff-product-detail { font-family: var(--ui-font-family-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Моб: 100px между хлебными крошками и фото товара */ @media (max-width: 960px) { .wayoff-product-detail { margin-top: 100px; } } .wayoff-product-detail .product-block { margin: 0 auto; padding: 0 20px; } .wayoff-product-detail .product-row { display: grid; grid-template-columns: 1.618fr 1fr; /* golden ratio φ */ gap: 40px; align-items: start; } .wayoff-product-detail .left-column { display: flex; flex-direction: column; gap: 30px; } .wayoff-product-detail .right-column { /* Static, выровнена по верху ряда (align-items:start). НЕ sticky: правая колонка (с блоком «Характеристики») выше левой при свёрнутом аккордеоне → sticky «флипал» и колонка прыгала при раскрытии аккордеона. */ align-self: start; } /* Accordion — отдельный row под .product-row для multi-photo. */ .wayoff-product-detail .product-row-accordion { display: grid; grid-template-columns: 1.618fr 1fr; gap: 40px; margin-top: 40px; } .wayoff-product-detail .product-row-accordion .accordion-wrap { grid-column: 1; } /* Single-photo: accordion перенесён в .left-column (inline). Поднимается максимально под фото — не ждём конца right-column. Sticky right остаётся стабильным потому что accordion часть .left-column, который только в row 1 grid'а */ .wayoff-product-detail .accordion-wrap--inline { margin-top: 32px; } /* Изображения */ .wayoff-product-detail .main-image-slider { position: relative; width: 100%; } .wayoff-product-detail .main-image-slider .splide-slider { position: relative; max-width: 800px; } .wayoff-product-detail .main-image-slider .splide__track { overflow: hidden; } .wayoff-product-detail .main-image-slider .splide__list { list-style: none; margin: 0; padding: 0; } /* Fallback без Splide: показ слайдов через .active (если нет .splide в разметке) */ .wayoff-product-detail .main-image-slider .slide { flex: 0 0 100%; display: none; } .wayoff-product-detail .main-image-slider .slide.active, .wayoff-product-detail .main-image-slider .slide.is-active { display: block; } /* Когда инициализирован Splide — отключаем наши правила и даём Splide управлять layout */ .wayoff-product-detail .main-image-slider .splide .splide__track { width: 100%; } .wayoff-product-detail .main-image-slider .splide .splide__list { transition: none; /* переход задаёт Splide */ } .wayoff-product-detail .main-image-slider .splide .splide__slide { display: block !important; } /* LCP/CLS: пока splide не смонтирован (моб.) — показываем ТОЛЬКО первый слайд. Без этого все фото идут стопкой (галерея высокая), а при mount splide схлопывает её в один слайд → сдвиг. У заданы width/height → высота первого слайда зарезервирована сразу → CLS≈0, а фото (preload+eager) рисуется как LCP не дожидаясь splide. На mount splide добавит .is-initialized → правило снимется. Только моб.: на desktop splide не инициализируется (фото идут стопкой). */ @media (max-width: 959.98px) { .wayoff-product-detail .main-image-slider .splide:not(.is-initialized) .splide__slide { display: none !important; } .wayoff-product-detail .main-image-slider .splide:not(.is-initialized) .splide__slide:first-child { display: block !important; } } .wayoff-product-detail .main-image-slider .image { width: 100%; position: relative; overflow: hidden; } .wayoff-product-detail .main-image-slider .image.contain-image>a { position: static; inset: auto; width: 100%; height: auto; } .wayoff-product-detail .main-image-slider .image.contain-image picture img, .wayoff-product-detail .main-image-slider .image.contain-image img { width: 100%; height: auto; max-height: none; object-fit: contain; } .wayoff-product-detail .main-image-slider .image a { display: block; width: 100%; } /* На телефоне не открываем фото по тапу (Fancybox), оставляем длинное нажатие для сохранения */ @media (max-width: 960px) { .wayoff-product-detail .main-image-slider .image a[data-fancybox] { pointer-events: none; } } .wayoff-product-detail .main-image-slider .image img { display: block; width: 100%; height: auto; vertical-align: bottom; } /* Mobile: фото крупнее на 10%. Ширина уже упёрта в контейнер, поэтому масштабируем саму картинку — .image имеет overflow:hidden, лишнее обрезается по краям (зум-кроп ~5% с каждой стороны). Бокс и раскладка не двигаются, горизонтального скролла не появляется. */ @media (max-width: 960px) { .wayoff-product-detail .main-image-slider .image img { transform: scale(1.1); } } /* Отключаем выделение при клике по слайдеру и кнопкам навигации */ .wayoff-product-detail .main-image-slider { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* Позиционирование над фото; внешний вид — единый стандарт .wf-arrow--on-photo (белая линия + тень, без плашки; см. assets/css/wf-arrow.css). */ .wayoff-product-detail .main-image-slider .splide-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; z-index: 10; } .wayoff-product-detail .main-image-slider .splide-next { right: 10px; } .wayoff-product-detail .main-image-slider .splide-prev { left: 10px; } .wayoff-product-detail .main-image-slider .splide-nav:active { transform: translateY(-50%) scale(0.92); } @media (max-width: 960px) { .wayoff-product-detail .main-image-slider .splide-next { right: -10px; } .wayoff-product-detail .main-image-slider .splide-prev { left: -10px; } } .wayoff-product-detail .thumbs-image-slider { margin-top: 20px; } .wayoff-product-detail .thumbs-image-slider .splide__track { overflow: visible; } .wayoff-product-detail .thumbs-image-slider .splide__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-start; } .wayoff-product-detail .thumbs-image-slider .slide { aspect-ratio: 1 / 1; cursor: pointer; border-radius: var(--r-sm); overflow: hidden; } .wayoff-product-detail .thumbs-image-slider .image { width: 100%; height: 100%; padding-bottom: 0; } .wayoff-product-detail .thumbs-image-slider .image img { width: 100%; height: 100%; object-fit: cover; border: 2px solid transparent; border-radius: var(--r-sm); transition: border-color 200ms var(--ease-out); } .wayoff-product-detail .thumbs-image-slider .slide.active .image img, .wayoff-product-detail .thumbs-image-slider .slide:hover .image img { border-color: var(--c-ink); } /* ========================================================= ===== Product gallery — rebag-style (desktop only) ======= Vertical thumb strip (88px) + stacked main photos. Mobile (< 960px) — оставляем существующий Splide slider. ========================================================= */ .wayoff-product-detail .product-gallery { display: block; width: 100%; } /* Правая колонка теперь static (см. выше) — компенсация margin-top для sticky-сдвига больше не нужна: обе колонки выровнены по верху ряда (align-items:start). */ @media (min-width: 960px) { .wayoff-product-detail .product-gallery { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto; gap: 12px; align-items: flex-start; } /* Override Splide's pre-mount visibility: hidden — на desktop не инитим */ .wayoff-product-detail .product-gallery .splide:not(.is-initialized) .splide__slide, .wayoff-product-detail .product-gallery .splide:not(.is-rendered) .splide__slide, .wayoff-product-detail .product-gallery .splide__slide { visibility: visible !important; } /* Main photos → column 2, stacked vertically */ .wayoff-product-detail .product-gallery .main-image-slider { grid-column: 2; grid-row: 1; max-width: none; } .wayoff-product-detail .product-gallery .main-image-slider .splide-slider { max-width: none; } .wayoff-product-detail .product-gallery .main-image-slider .splide__track { overflow: visible; } .wayoff-product-detail .product-gallery .main-image-slider .splide__list { display: flex !important; flex-direction: column !important; gap: 8px; transform: none !important; width: 100% !important; } .wayoff-product-detail .product-gallery .main-image-slider .splide__slide { width: 100% !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; display: block !important; scroll-margin-top: 100px; } /* Hide Splide nav arrows on desktop (stacked, не нужны) */ .wayoff-product-detail .product-gallery .main-image-slider .splide-nav { display: none; } /* Thumbnails → column 1, vertical strip, sticky */ .wayoff-product-detail .product-gallery .thumbs-image-slider { grid-column: 1; grid-row: 1; margin-top: 0; position: sticky; top: 100px; } .wayoff-product-detail .product-gallery .thumbs-image-slider .splide__track { overflow: visible; } .wayoff-product-detail .product-gallery .thumbs-image-slider .splide__list { display: flex !important; flex-direction: column !important; gap: 6px; transform: none !important; width: 100% !important; flex-wrap: nowrap; } .wayoff-product-detail .product-gallery .thumbs-image-slider .splide__slide { width: 80px !important; height: 80px !important; margin: 0 !important; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; } .wayoff-product-detail .product-gallery .thumbs-image-slider .image img { border-width: 2px; border-style: solid; border-color: transparent; } .wayoff-product-detail .product-gallery .thumbs-image-slider .splide__slide.is-active .image img, .wayoff-product-detail .product-gallery .thumbs-image-slider .splide__slide:hover .image img { border-color: var(--c-ink); } } /* ========================================================= ===== Mobile gallery (< 960px) — простой свайп-слайдер ==== Один кадр на экран, свайп + точки-пагинация. Полоса миниатюр и стрелки убраны — на телефоне они избыточны. ========================================================= */ @media (max-width: 959.98px) { .wayoff-product-detail .thumbs-image-slider { display: none; } .wayoff-product-detail .main-image-slider .splide-nav { display: none; } .wayoff-product-detail .main-image-slider .splide__pagination { position: static; display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 14px 0 2px; } .wayoff-product-detail .main-image-slider .splide__pagination li { line-height: 0; margin: 0; } .wayoff-product-detail .main-image-slider .splide__pagination__page { width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #d4d4d4; opacity: 1; transition: background 200ms var(--ease-out), transform 200ms var(--ease-out); } .wayoff-product-detail .main-image-slider .splide__pagination__page.is-active { background: #1a1a1a; transform: scale(1.18); } } /* Информация о товаре */ .wayoff-product-detail .product-info-block { display: flex; flex-direction: column; gap: 20px; } .wayoff-product-detail .title-block { display: flex; flex-direction: column; gap: 15px; } .wayoff-product-detail .title-block h1 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; color: var(--c-ink); margin: 0; } .wayoff-product-detail .title-block .price-wrapper { display: flex; flex-direction: column; gap: 6px; } .wayoff-product-detail .title-block .price-label { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-ink); font-variant-numeric: tabular-nums; } .wayoff-product-detail .title-block .special-price, .wayoff-product-detail .title-block .old-price { font-weight: inherit; color: inherit; } /* Старая цена + выгода (−N% / −N ₽) — в одну строку, выгода справа от старой цены (читается как «было X, выгода Y»; line-through только на старой цене, не на выгоде). */ .wayoff-product-detail .title-block .wf-old-row { display: flex; align-items: baseline; gap: 10px; } .wayoff-product-detail .title-block .old-price.line-through { text-decoration: line-through; } .wayoff-product-detail .title-block .old-price.line-through .price-label { font-size: 15px; font-weight: 500; color: var(--c-muted); letter-spacing: 0; } .wayoff-product-detail .title-block .special-price.hidden { display: none; } /* Ярлык скидки (−N% / −N ₽) рядом с ценой — Rule of 100 */ .wayoff-product-detail .title-block .price .wf-pdp-disc { display: inline-block; margin-left: 0; font-family: 'Golos UI', sans-serif; font-size: 13px; font-weight: 600; color: var(--c-red, #8b253b); white-space: nowrap; } /* Кнопки */ .wayoff-product-detail .product-block__buy { display: flex; flex-direction: column; gap: 15px; } .wayoff-product-detail .product-buy { display: flex; flex-direction: column; gap: 10px; } .wayoff-product-detail .cart-link-block { display: flex; gap: 10px; align-items: center; } .wayoff-product-detail .product-buy .submit-btn { padding: 16px 28px; line-height: 1.1; border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; text-decoration: none; border-radius: 999px; transition: transform 160ms var(--ease-out); cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; text-transform: none; width: 100%; max-width: 100%; } /* V5 hover: arrow reveal from right (без смены цветов) */ .wayoff-product-detail .product-buy .submit-btn::after { content: ""; display: inline-block; width: 0; height: 14px; margin-left: 0; opacity: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 230ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .wayoff-product-detail .product-buy .submit-btn:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .product-buy .submit-btn:hover::after { width: 14px; opacity: 1; margin-left: 10px; } } .wayoff-product-detail .product-buy .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; } .wayoff-product-detail .product-buy .submit-btn.white-btn { background: var(--ui-color-primary); color: #1a1a1a; } /* Размер на кнопке «В корзину»: показывается при выборе размера (JS добавляет .active) */ .wayoff-product-detail .js-cart-link .offer-size { display: none; } .wayoff-product-detail .js-cart-link .offer-size.active { display: flex; min-width: fit-content; } .wayoff-product-detail .js-cart-link .offer-size.active::before { content: attr(data-offer-size-button); padding-right: 16px; } .wayoff-product-detail .js-cart-link .offer-size.active:after { content: ''; display: block; border-left: 1px solid rgba(102, 102, 102, 1); } .wayoff-product-detail .js-cart-link .action-text { width: 100%; text-align: center; font-size: 16px; font-weight: 400; } .wayoff-product-detail .fav-link { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--ui-color-primary); border: 1px solid #1a1a1a; border-radius: 50%; text-decoration: none; transition: border-color 220ms var(--ease-out), transform 160ms var(--ease-out); flex-shrink: 0; } .wayoff-product-detail .fav-link .ico::before { content: ''; } /* Центрируем сердце в круге: flex + svg как блок (убирает baseline-зазор, из-за которого иконка съезжала вверх). */ .wayoff-product-detail .fav-link .ico { display: flex; align-items: center; justify-content: center; line-height: 0; } .wayoff-product-detail .fav-link .ico svg { display: block; } /* V2 — heart fills (Pinterest-style), bg stays */ .wayoff-product-detail .fav-link .ico path.fill { fill: transparent; transition: fill 240ms var(--ease-out); } .wayoff-product-detail .fav-link .ico path:not(.fill) { stroke: #1a1a1a; stroke-width: 1.2; transition: stroke 220ms var(--ease-out); } .wayoff-product-detail .fav-link:active { transform: scale(0.92); } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .fav-link:hover { border-color: var(--c-ink); } .wayoff-product-detail .fav-link:hover .ico path.fill { fill: var(--c-ink); } } .wayoff-product-detail .fav-link.active { background: var(--ui-color-primary); border-color: var(--c-red); } .wayoff-product-detail .fav-link.active .ico path.fill { fill: var(--c-red); } .wayoff-product-detail .fav-link.active .ico path:not(.fill) { stroke: var(--c-red); } .wayoff-product-detail .fav-link.active .ico svg { animation: wayoff-fav-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; } @keyframes wayoff-fav-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } } .wayoff-product-detail .fav-link .ico-text { display: none; } /* Вкладки */ .wayoff-product-detail .product-tabs-container { margin-top: 0; max-width: 800px; } .wayoff-product-detail .product-tabs-container .radio { display: none; } .wayoff-product-detail .product-tabs-container .tabs { display: flex; gap: 0; border-bottom: 1px solid #E6E6E6; margin-bottom: 20px; padding-bottom: 10px; align-items: center; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; } /* Десктоп: без видимого скроллбара, горизонтальная прокрутка мышью — в script.js */ @media (min-width: 768px) { .wayoff-product-detail .product-tabs-container .tabs { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .wayoff-product-detail .product-tabs-container .tabs::-webkit-scrollbar { display: none; } .wayoff-product-detail .product-tabs-container .tabs.is-tabs-dragging { cursor: grabbing; user-select: none; } } .wayoff-product-detail .product-tabs-container .tab { padding: 10px 4px; cursor: pointer; color: var(--c-muted); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; border-bottom: 1px solid transparent; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); white-space: nowrap; text-transform: none; } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .product-tabs-container .tab:hover { color: var(--c-ink); } } .wayoff-product-detail .product-tabs-container .tab.active { color: var(--c-ink); border-bottom-color: var(--c-ink); } .wayoff-product-detail .product-tabs-container .panels { position: relative; padding-bottom: 30px; } .wayoff-product-detail .product-tabs-container .panel { display: none; } .wayoff-product-detail .product-tabs-container .panel.active { display: block; } .wayoff-product-detail .product-tabs-container .panel-inner { font-size: 14px; line-height: 1.5; color: #1A1A1A; min-height: 680px; } .wayoff-product-detail .product-tabs-container .panel-inner p { margin: 0 0 0.75em 0; } /* ========================================================= Accordion — единый стиль для desktop + mobile вариантов ========================================================= */ .product-info-accordion.accordion { display: block; margin-top: 0; margin-bottom: 20px; } /* Visibility: desktop variant в левой колонке, mobile — в правой Используем 2-class specificity чтобы перебить .product-info-accordion.accordion */ .product-info-accordion.product-info-accordion--mobile { display: none; } .product-info-accordion.product-info-accordion--desktop { display: block; } /* На mobile инвертируем */ @media (max-width: 960px) { .product-info-accordion.product-info-accordion--desktop { display: none; } .product-info-accordion.product-info-accordion--mobile { display: block; } /* Аккордеон текстовых вопросов опускаем ПОД блоки «Гарантия подлинности» и «Нужна консультация?». .product-info-block — flex-колонка, у гарантии и консультации order:0 (по источнику), аккордеону даём order:1 → он уезжает в конец. Меняет только мобильный порядок, разметка не тронута. */ .wayoff-product-detail .product-info-block .product-info-accordion--mobile { order: 1; } } .product-info-accordion .accordion-item { border-bottom: 1px solid var(--c-line); } .product-info-accordion .accordion-item:last-child { border-bottom: 0; } .product-info-accordion .accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 21px 0; background: transparent; border: 0; cursor: pointer; color: var(--c-ink); text-align: left; font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; transition: color 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .product-info-accordion .accordion-header:hover { color: var(--c-ink-2); } } /* «+» / «−» как CSS-кросс (rotation 90° на vertical line) */ .product-info-accordion .accordion-icon { width: 14px; height: 14px; margin-left: 12px; flex-shrink: 0; position: relative; } .product-info-accordion .accordion-icon::before, .product-info-accordion .accordion-icon::after { content: ''; position: absolute; background: var(--c-ink); transition: transform 240ms var(--ease-out); } .product-info-accordion .accordion-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .product-info-accordion .accordion-icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .product-info-accordion .accordion-item.is-open .accordion-icon::after { transform: translateX(-50%) rotate(90deg); } /* Плавная content-aware анимация раскрытия через grid-template-rows */ .product-info-accordion { overflow-anchor: none; } .product-info-accordion .accordion-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 440ms var(--ease-drawer), opacity 280ms var(--ease-out); will-change: grid-template-rows; overflow-anchor: none; } .product-info-accordion .accordion-panel > * { overflow: hidden; min-height: 0; } .product-info-accordion .accordion-panel.is-open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 440ms var(--ease-drawer), opacity 320ms var(--ease-out) 80ms; } /* Padding НЕ на прямом grid-ребёнке (.accordion-inner): его padding входит в min-высоту и не даёт grid-строке 0fr схлопнуться в 0 (оставлял ряд +18px). Переносим отступ на вложенный .acc-body — он клипается при закрытии. */ .product-info-accordion .accordion-inner { padding-bottom: 0; } .product-info-accordion .acc-body { padding-bottom: 18px; } .product-info-accordion .accordion-inner .acc-body .info-content { padding-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--c-ink-2); } .product-info-accordion p, .product-info-accordion .info-content { font-family: var(--font-display); font-weight: 400; color: var(--c-ink-2); } .product-info-accordion ul { padding-left: 1.5em; list-style: none; font-family: var(--font-display); font-weight: 400; color: var(--c-ink-2); } .product-info-accordion ul li { margin-bottom: 6px; position: relative; padding-left: 1.5em; } /* Маркер-стрелка вместо буллета — пункты в аккордеоне (доставка/оплата/возврат) читаются яснее */ .product-info-accordion ul li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--c-ink-2); } .wayoff-product-detail .product-properties { list-style: none; padding: 0; margin: 0; } .wayoff-product-detail .product-properties li { padding: 15px 0; border-bottom: 1px solid #E6E6E6; display: flex; flex-direction: column; gap: 7px; } .wayoff-product-detail .product-properties .attribute-name { color: #666; font-size: 14px; } .wayoff-product-detail .product-properties .attribute-value { color: #1A1A1A; font-size: 16px; } .wayoff-product-detail .product-article-panel-item { padding: 14px 0; border-bottom: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; gap: 7px; } .wayoff-product-detail .product-article-panel-item .attribute-name { font-family: var(--font-ui); color: var(--c-muted); font-size: 13px; letter-spacing: 0.02em; } .wayoff-product-detail .product-article-panel-item .attribute-value { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .wayoff-product-detail .product-article-panel-item .attribute-value input { border: 0; outline: none !important; background: transparent; padding: 0; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--c-ink); width: 100%; text-align: right; text-transform: none; } .wayoff-product-detail .product-article-panel-item .icon { width: 40px; display: flex; justify-content: center; align-items: center; height: 24px; flex-shrink: 0; } /* Обратная связь при копировании артикула */ .wayoff-product-detail .product-article-panel-item .attribute-value.copy { position: relative; transition: transform 0.2s ease, background-color 0.25s ease; } .wayoff-product-detail .product-article-panel-item .attribute-value.copy:hover { background-color: rgba(0, 0, 0, 0.03); } .wayoff-product-detail .product-article-panel-item .attribute-value.copy.copied { animation: copyPulse 0.4s ease; } .wayoff-product-detail .product-article-panel-item .attribute-value.copy.copied .icon { animation: copyCheck 0.35s ease 0.1s both; } .wayoff-product-detail .product-article-panel-item .attribute-value.copy::after { content: 'Скопировано'; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px) scale(0.9); padding: 6px 10px; font-size: 12px; line-height: 1.2; color: #fff; background: #1a1a1a; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.25s; pointer-events: none; z-index: 2; } .wayoff-product-detail .product-article-panel-item .attribute-value.copy.copied::after { opacity: 1; visibility: visible; transform: translate(-50%, 6px) scale(1); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s; } @keyframes copyPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes copyCheck { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } /* Выбор предложения */ .wayoff-product-detail .product-offers-selection { margin: 20px 0; padding: 20px 0; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; } .wayoff-product-detail .offer-property-block { margin-bottom: 20px; } .wayoff-product-detail .offer-property-block:last-child { margin-bottom: 0; } .wayoff-product-detail .offer-property-title { font-size: 14px; color: #666; margin-bottom: 10px; font-weight: 400; } .wayoff-product-detail .offer-property-values { display: flex; flex-wrap: wrap; gap: 10px; } .wayoff-product-detail .offer-property-value { padding: 8px 16px; border: 1px solid var(--c-line); background: #fff; color: #1A1A1A; cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); border-radius: var(--r-sm); font-size: 14px; min-height: 40px; display: flex; align-items: center; justify-content: center; } .wayoff-product-detail .offer-property-value:hover { border-color: #000; background: #f5f5f5; } .wayoff-product-detail .offer-property-value.selected { border-color: #000; background: #000; color: #fff; } .wayoff-product-detail .offer-property-value-pict { width: 30px; height: 30px; background-size: cover; background-position: center; border-radius: 2px; } .wayoff-product-detail .offer-property-value-text { white-space: nowrap; } .wayoff-product-detail .offer-property-value.offer-simple { min-width: 150px; } .wayoff-product-detail .offer-property-value .offer-price { font-size: 12px; color: #666; margin-left: 5px; } .wayoff-product-detail .offer-property-value.selected .offer-price { color: #fff; } .wayoff-product-detail .offer-property-value.unavailable { opacity: 0.7; } .wayoff-product-detail .offer-property-value.unavailable:hover { border-color: #999; background: #f5f5f5; } .wayoff-product-detail .offer-property-value.unavailable.selected { border-color: #666; background: #666; color: #fff; } .wayoff-product-detail .offer-property-value .offer-unavailable { font-size: 11px; color: #999; font-style: italic; } .wayoff-product-detail .offer-property-value.selected .offer-unavailable { color: #fff; } /* Адаптивность */ @media (max-width: 960px) { .wayoff-product-detail .product-row { grid-template-columns: 100%; gap: 30px; } .wayoff-product-detail .right-column { position: static; } /* На мобилке десктоп-аккордеон внутри .accordion-wrap--inline скрыт (display:none), но сама обёртка оставалась пустым flex-элементом с margin-top:32px + gap → лишний отступ под фото. Скрываем обёртку целиком (мобильный аккордеон рендерится отдельно). */ .wayoff-product-detail .accordion-wrap--inline { display: none; } } @media (max-width: 960px) { .wayoff-product-detail .product-block { padding: 0; } .wayoff-product-detail .title-block h1 { font-size: 20px; } .wayoff-product-detail .product-buy { flex-wrap: wrap; } /* Избранное на мобилке — простое круглое сердечко рядом с «в корзину», как на десктопе (раньше раздувалось в широкую пилюлю с подписью). */ .wayoff-product-detail .cart-link-block { flex-wrap: nowrap; } } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-block:not(.no-size) { padding-bottom: 10px; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head { border-bottom: 1px solid rgba(230, 230, 230, 1); justify-content: space-between; margin-bottom: 30px; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:hover { border-bottom-color: rgba(0, 0, 0, 1); } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn.active { border-bottom: 0.54px solid rgba(0, 0, 0, 1); } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows { grid-column-gap: 4px; grid-row-gap: 4px; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:checked+label { border: none; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input+label { border-radius: var(--r-sm); background-color: var(--ui-color-primary); color: #1A1A1A; border: 1px solid var(--c-line); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out); } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input+label:active { transform: scale(0.97); } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:checked+label { background-color: #1a1a1a; border-color: #1a1a1a; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows label .check-price { color: var(--c-muted); font-weight: 400; font-size: 13px; display: flex; font-variant-numeric: tabular-nums; } @media (hover: hover) and (pointer: fine) { .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:not(:checked)+label:hover { background-color: #fff; color: #1A1A1A; border-color: #1a1a1a; } } @media screen and (max-width: 960px) { .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows { grid-template-columns: repeat(4, 1fr); } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn { align-self: flex-end; min-height: 32px; } } @media screen and (min-width: 960px) { .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn { height: 34px; line-height: 34px; } } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn { margin-right: 20px; color: var(--c-muted); text-transform: uppercase; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; transition: color 200ms var(--ease-out); } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn { border-bottom: 1px solid rgba(230, 230, 230, 1); margin-right: 0; width: 100%; justify-content: center; display: flex; } /* .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:after { content: ""; display: block; position: absolute; top: 50%; left: 100%; margin-left: 9px; height: 16px; margin-top: -8px; border-left: 1px solid #000000; } */ .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:after { content: none; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn.active, .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:hover { color: #000000; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:last-child { margin-right: 0; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-head .tab-btn:last-child:after { display: none; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 12px; grid-row-gap: 12px; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input { display: none; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows label { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 42px; border: 1px solid var(--c-line); cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 13px; border-radius: var(--r-sm); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out); } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows label { border: none; font-weight: 300; font-size: 16px; height: 52px; position: relative; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows .checkbox-block.is-favorite label::after { content: ""; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; background-color: var(--c-ochre); opacity: 0.9; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2015%27%3E%3Cpath%20d%3D%27M8.12336%202.11499C8.09493%202.14191%208.06687%202.16927%208.03919%202.19704L8.03708%202.19917L7.99999%202.23675L7.96288%202.19917L7.96076%202.19704C7.93334%202.16953%207.90555%202.14242%207.87739%202.11574C7.51726%201.77447%207.09752%201.5017%206.63872%201.31119C6.14404%201.10578%205.61367%201.00005%205.07804%201.00005C4.54241%201.00005%204.01204%201.10578%203.51736%201.31119C3.02285%201.51653%202.57372%201.81743%202.19571%202.19665C0.57734%203.81544%200.541336%206.49204%202.459%208.44562L7.55033%2013.5369C7.66958%2013.6562%207.99998%2013.9811%207.99998%2013.9811C7.99998%2013.9811%208.33037%2013.6562%208.44962%2013.5369L13.5368%208.44981L13.5409%208.4456C15.4586%206.49202%2015.4226%203.81544%2013.8042%202.19665C13.4262%201.81743%2012.9771%201.51653%2012.4826%201.31119C11.9879%201.10578%2011.4575%201.00005%2010.9219%201.00005C10.3863%201.00005%209.85591%201.10578%209.36123%201.31119C8.90276%201.50156%208.4833%201.77407%208.12336%202.11499Z%27/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2015%27%3E%3Cpath%20d%3D%27M8.12336%202.11499C8.09493%202.14191%208.06687%202.16927%208.03919%202.19704L8.03708%202.19917L7.99999%202.23675L7.96288%202.19917L7.96076%202.19704C7.93334%202.16953%207.90555%202.14242%207.87739%202.11574C7.51726%201.77447%207.09752%201.5017%206.63872%201.31119C6.14404%201.10578%205.61367%201.00005%205.07804%201.00005C4.54241%201.00005%204.01204%201.10578%203.51736%201.31119C3.02285%201.51653%202.57372%201.81743%202.19571%202.19665C0.57734%203.81544%200.541336%206.49204%202.459%208.44562L7.55033%2013.5369C7.66958%2013.6562%207.99998%2013.9811%207.99998%2013.9811C7.99998%2013.9811%208.33037%2013.6562%208.44962%2013.5369L13.5368%208.44981L13.5409%208.4456C15.4586%206.49202%2015.4226%203.81544%2013.8042%202.19665C13.4262%201.81743%2012.9771%201.51653%2012.4826%201.31119C11.9879%201.10578%2011.4575%201.00005%2010.9219%201.00005C10.3863%201.00005%209.85591%201.10578%209.36123%201.31119C8.90276%201.50156%208.4833%201.77407%208.12336%202.11499Z%27/%3E%3C/svg%3E") no-repeat center / contain; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:checked+label::after { background-color: #FFFFFF; opacity: 1; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:checked+label { border: 1px solid #000000; background-color: #000000; color: #FFFFFF; } /* IN STOCK — наличие на складе: зелёная точка в нижнем правом углу плитки размера */ .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows .checkbox-block.checkbox-block-instock label::before { content: ""; position: absolute; bottom: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background-color: #1f9d57; pointer-events: none; } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows input:checked+label::before { background-color: #34c172; } /* «В наличии в шоуруме» — строка-подсказка под сеткой размеров (показывается при выборе размера с зелёной точкой). Свёрнута по умолчанию (max-height:0) → не оставляет зазор. */ .wayoff-catalog-detail .sizes-block .wf-instock-line { display: flex; align-items: center; gap: 9px; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding: 0 14px; border-radius: 12px; background: rgba(31, 157, 87, 0.07); font-family: var(--font-display, 'Normalidad Text', sans-serif); font-size: 13px; line-height: 1.35; color: #1a1a1a; transition: max-height 0.3s var(--ease-out, cubic-bezier(0.23,1,0.32,1)), opacity 0.28s var(--ease-out, cubic-bezier(0.23,1,0.32,1)), margin 0.3s var(--ease-out, cubic-bezier(0.23,1,0.32,1)), padding 0.3s var(--ease-out, cubic-bezier(0.23,1,0.32,1)); } .wayoff-catalog-detail .sizes-block .wf-instock-line.is-shown { max-height: 64px; opacity: 1; margin-top: 14px; padding: 11px 14px; } .wayoff-catalog-detail .sizes-block .wf-instock-line__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #1f9d57; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-body .tab-body { display: none; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-body .tab-body.active { display: block; } @media screen and (max-width: 960px) { .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows { grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-body .tab-body { display: none; } .wayoff-catalog-detail .product-info-block .sizes-block .tabs-body .tab-body.active { display: block; } .wayoff-catalog-detail .product-info-block .sizes-block .sizes-pop-title-block { display: none; } } .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows label .check-price { display: flex; align-items: center; padding-left: 1px; } @media screen and (max-width: 500px) { .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows label .check-price { font-size: 12px; } } @media screen and (max-width: 380px) { .wayoff-catalog-detail .product-info-block .sizes-block .checkbox-rows { grid-template-columns: repeat(3, 1fr); } } /* === Артикул товара — над заголовком, серый, с кнопкой копирования === */ .wayoff-product-detail .title-block .product-sku { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0 0 8px 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; font-family: var(--font-display); /* как у хлебных крошек (Normalidad Text); размер/жирность/прочее без изменений */ font-size: 12px; color: var(--c-muted); letter-spacing: 0.02em; width: auto; -webkit-tap-highlight-color: transparent; transition: color 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .title-block .product-sku:hover { color: var(--c-ink-2); } } .wayoff-product-detail .title-block .product-sku__label { font-weight: 500; } .wayoff-product-detail .title-block .product-sku__value { font-weight: 500; color: inherit; } /* Скрываем input визуально (но доступен JS-handler для copy) */ .wayoff-product-detail .title-block .product-sku__input.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wayoff-product-detail .title-block .product-sku__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: inherit; opacity: 0.55; transition: opacity 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .title-block .product-sku:hover .product-sku__icon { opacity: 1; } } /* Feedback при копировании — реюзим .copied class (JS добавляет) */ .wayoff-product-detail .title-block .product-sku.copied { color: var(--c-ink); } .wayoff-product-detail .title-block .product-sku.copied::after { content: 'Скопировано'; margin-left: 8px; font-size: 11px; color: var(--success); opacity: 1; animation: skuCopied 1.6s ease; } @keyframes skuCopied { 0%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } } /* === Гарантия подлинности — inline card (thecultt-style) === */ .wayoff-product-detail .product-guarantee-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); margin-top: 28px; margin-bottom: 8px; transition: border-color 200ms var(--ease-out), transform 160ms var(--ease-out); } .wayoff-product-detail .product-guarantee-card:active { transform: scale(0.99); } @media (hover: hover) and (pointer: fine) { .wayoff-product-detail .product-guarantee-card:hover { border-color: var(--c-ink); } .wayoff-product-detail .product-guarantee-card:hover .product-guarantee-card__arrow { transform: translateX(4px); } } .wayoff-product-detail .product-guarantee-card__icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--c-ink); } .wayoff-product-detail .product-guarantee-card__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wayoff-product-detail .product-guarantee-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; color: var(--c-ink); } .wayoff-product-detail .product-guarantee-card__desc { font-family: var(--font-ui); font-size: 13px; color: var(--c-ink-2); line-height: 1.4; } .wayoff-product-detail .product-guarantee-card__arrow { width: 20px; height: 20px; color: var(--c-muted); flex-shrink: 0; transition: transform 200ms var(--ease-out); } /* === Консультация — карточка-контейнер в стиле главной === */ .size-block-info { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px 28px 22px; width: 100%; margin-top: -10px; margin-bottom: 20px; box-sizing: border-box; } .size-block-info .size-consultation-text { padding: 0; text-align: left; } .size-block-info__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--c-ink); margin: 0 0 10px 0; } /* D-pattern: stacked list rows (одна строка на канал) */ .size-block-info .social-links-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; } .size-block-info .social-links-list li { margin: 0; padding: 0; list-style: none; } .size-block-info .social-link { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; column-gap: 12px; padding: 12px 4px; text-decoration: none; color: var(--c-ink); border-bottom: 1px solid var(--c-line); transition: padding 220ms var(--ease-out), color 200ms ease; box-sizing: border-box; } .size-block-info .social-links-list li:last-child .social-link { border-bottom: none; } @media (hover: hover) and (pointer: fine) { .size-block-info .social-link:hover { padding-left: 12px; } } /* Иконка — монохромный кружок (одинаковый цвет для всех каналов) */ .size-block-info .social-icon-img { width: 28px; height: 28px; padding: 7px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--c-ink); } .size-block-info .social-icon-svg { fill: currentColor; color: #fff; } .size-block-info .social-link .social-icon-svg path { fill: #fff; } .size-block-info .social-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .size-block-info .social-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .size-block-info .social-link__sub { font-family: var(--font-ui); font-size: 11.5px; font-weight: 400; line-height: 1.3; color: var(--c-muted); } .size-block-info .social-link__arrow { color: var(--c-muted); transition: transform 240ms var(--ease-out), color 200ms ease; flex-shrink: 0; } @media (hover: hover) and (pointer: fine) { .size-block-info .social-link:hover .social-link__arrow { transform: translateX(4px); color: var(--c-ink); } } /* Описание — между заголовком и списком, основной body text */ .size-block-info__desc { font-family: var(--font-ui); font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 14px 0; } @media screen and (max-width: 480px) { .size-block-info { padding: 20px 22px 18px; } .size-block-info .social-link { flex: 1 1 auto; justify-content: center; } } /* ============================================================ Size chart trigger + modal ============================================================ */ .sizes-block .size-chart-trigger { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 0; background: transparent; border: none; border-bottom: 1px solid var(--c-line); color: var(--c-ink-2); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: color 200ms ease, border-color 200ms ease; } .sizes-block .size-chart-trigger:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); } .sizes-block .size-chart-trigger:active { transform: scale(0.985); } .sizes-block .size-chart-trigger svg { flex-shrink: 0; } .size-chart-modal[hidden] { display: none; } .size-chart-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .size-chart-modal__overlay { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.5); } .size-chart-modal__card { position: relative; background: #fff; border-radius: var(--r-lg); padding: 22px 24px 24px; width: calc(100% - 32px); max-width: 420px; max-height: calc(100vh - 80px); overflow-y: auto; box-shadow: 0 24px 64px rgba(26, 26, 26, 0.16); } .size-chart-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .size-chart-modal__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .size-chart-modal__close { width: 32px; height: 32px; border: none; background: var(--c-warm); border-radius: 50%; cursor: pointer; color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: background 200ms ease, transform 160ms var(--ease-out); } .size-chart-modal__close:hover { background: var(--c-line); } .size-chart-modal__close:active { transform: scale(0.92); } .size-chart-modal__table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 13px; font-variant-numeric: tabular-nums; } .size-chart-modal__table th { text-align: left; padding: 8px 6px; font-family: var(--font-display); font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); border-bottom: 1px solid var(--c-line); } .size-chart-modal__table td { padding: 9px 6px; border-bottom: 1px solid var(--c-line); color: var(--c-ink); } .size-chart-modal__table tbody tr:last-child td { border-bottom: none; } .size-chart-modal__table tbody tr { cursor: pointer; transition: background 160ms ease; } @media (hover: hover) and (pointer: fine) { .size-chart-modal__table tbody tr:hover td { background: var(--c-warm); } } .size-chart-modal__table tbody tr:active td { background: var(--c-line); } /* Размеры, которых нет у этого товара: серым, без интерактива (инфо остаётся полезной) */ .size-chart-modal__table tbody tr.is-unavailable td { color: var(--c-muted); opacity: 0.45; } .size-chart-modal__table tbody tr.is-unavailable { cursor: default; } .size-chart-modal__table tbody tr.is-unavailable:hover td, .size-chart-modal__table tbody tr.is-unavailable:active td { background: transparent; } @media (max-width: 480px) { .size-chart-modal__card { padding: 20px 18px 22px; max-width: calc(100vw - 24px); } .size-chart-modal__title { font-size: 16px; } .size-chart-modal__table { font-size: 12.5px; } .size-chart-modal__table th { font-size: 10px; } .size-chart-modal__table td { padding: 8px 4px; } } /* Карточка товара — ритм отступов слайдеров (единица x: десктоп 27px, мобайл 23px). Блок товара тоже
, поэтому первый слайдер цепляем смежным комбинатором. */ .wayoff-product-detail + .wayoff-home-product-section { margin-top: 81px; } /* «Гарантия…» → «Рекомендуем» 3x */ .wayoff-home-product-section:not(:last-of-type) { margin-bottom: 27px; } /* «Рекомендуем» → «Вы недавно смотрели» 1x */ .wayoff-home-product-section:last-of-type { margin-bottom: 81px; } /* «Вы недавно смотрели» → футер 3x */ @media (max-width: 960px) { .wayoff-product-detail + .wayoff-home-product-section { margin-top: 69px; } .wayoff-home-product-section:not(:last-of-type) { margin-bottom: 23px; } .wayoff-home-product-section:last-of-type { margin-bottom: 69px; } } /* ============================================================ Характеристики — карточка-сиблинг (как «Гарантия»/«Консультация»). Значения кликабельны (фасетная навигация). Emil: ховер тонкий и быстрый, движется только transform/цвет, кастомный ease-out, ховер за @media(hover), стрелка всегда видима (аффорданс на тач), стаггер-появление, reduced-motion. ============================================================ */ .wayoff-product-detail .pdp-specs { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px 28px; /* Зазор до «Консультации» = как «Гарантия»→«Консультация» (18px). Контейнер flex gap:20 + предыдущий .size-block-info margin-bottom:20 → mt -22 = 18px. */ margin-top: -22px; margin-bottom: 8px; box-sizing: border-box; } .wayoff-product-detail .pdp-specs__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--c-ink); margin: 0 0 8px; } .wayoff-product-detail .pdp-specs__list { display: flex; flex-direction: column; } .wayoff-product-detail .pdp-specs__row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; column-gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); transition: background-color 150ms ease, padding 200ms var(--ease-out); } .wayoff-product-detail .pdp-specs__row:last-child { border-bottom: none; } .wayoff-product-detail .pdp-specs__label { font-family: var(--font-ui); font-size: 14px; color: var(--c-muted); } .wayoff-product-detail .pdp-specs__value { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--c-ink); display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; text-align: right; } .wayoff-product-detail .pdp-specs__swatch { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .wayoff-product-detail .pdp-specs__arrow { color: var(--c-muted); flex-shrink: 0; transition: transform 200ms var(--ease-out), color 150ms ease; } /* Ховер: мягкий фон-таблетка + стрелка темнеет и уезжает (одобрено). Без подчёркивания. */ @media (hover: hover) and (pointer: fine) { a.pdp-specs__row:hover { background: rgba(0, 0, 0, 0.025); border-radius: 12px; border-bottom-color: transparent; margin: 0 -12px; padding-left: 16px; padding-right: 16px; } a.pdp-specs__row:hover .pdp-specs__arrow { color: var(--c-ink); transform: translateX(4px); } } /* Появление со стаггером (translateY+opacity, не scale0). Декоративно, один раз. */ @keyframes pdp-specs-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .wayoff-product-detail .pdp-specs__row { animation: pdp-specs-rise 360ms var(--ease-out) both; } .wayoff-product-detail .pdp-specs__row:nth-child(1) { animation-delay: 30ms; } .wayoff-product-detail .pdp-specs__row:nth-child(2) { animation-delay: 70ms; } .wayoff-product-detail .pdp-specs__row:nth-child(3) { animation-delay: 110ms; } .wayoff-product-detail .pdp-specs__row:nth-child(4) { animation-delay: 150ms; } .wayoff-product-detail .pdp-specs__row:nth-child(5) { animation-delay: 190ms; } @media (prefers-reduced-motion: reduce) { .wayoff-product-detail .pdp-specs__row { animation: none; } .wayoff-product-detail .pdp-specs__arrow { transition: color 150ms ease; } } @media screen and (max-width: 480px) { .wayoff-product-detail .pdp-specs { padding: 20px 22px; } .wayoff-product-detail .pdp-specs__row { grid-template-columns: 108px 1fr auto; column-gap: 10px; } } /* Бейдж Яндекс Сплита справа от цены (mountBadge type=bnpl) */ .wf-yp-badge { display: inline-block; vertical-align: middle; margin-left: 8px; line-height: 0; } .wf-yp-badge:empty { display: none; } /* Цена + бейдж Сплита в одну строку (бейдж справа от цены) */ .wf-price-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wf-price-line .wf-yp-badge { margin-left: 0; } /* Бейдж Сплита на PDP — справа от АКТУАЛЬНОЙ цены (не зачёркнутой), в её строке, по центру текста. size=m + лёгкий scale (соразмерно цене 26px). */ .product-block .wf-price-line { align-items: center; } .product-block .special-price, .product-block .price-wrapper > .old-price { display: inline-flex; align-items: center; gap: 14px; } .product-block .wf-yp-badge--pdp { transform: scale(0.93); transform-origin: left center; } /* Резерв места под бейдж Сплита на PDP (anti-CLS) */ .product-block .wf-yp-badge--pdp { display: inline-flex; align-items: center; min-height: 18px; min-width: 200px; } /* End */ /* Start:/local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/assets/css/fancybox.css?177999484415598*/ .carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden !important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);box-sizing:border-box;display:flex;flex-direction:column;color:var(--fancybox-color, #fff);-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;z-index:1050;outline:none;transform-origin:top left;--carousel-button-width: 48px;--carousel-button-height: 48px;--carousel-button-svg-width: 24px;--carousel-button-svg-height: 24px;--carousel-button-svg-stroke-width: 2.5;--carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4))}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))}@media all and (min-width: 1024px){.fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:27px;--carousel-button-svg-height:27px}}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;max-width:100%;margin:0;padding:48px 8px 8px 8px;position:relative;overscroll-behavior:contain;display:flex;flex-direction:column;outline:0;overflow:auto;--carousel-button-width: 36px;--carousel-button-height: 36px;--carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}@media all and (min-width: 1024px){.fancybox__slide{padding:64px 100px}}.fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);padding:36px;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:thin dotted;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0 0;line-height:1.375;color:var(--fancybox-color, currentColor);visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:var(--fancybox-color, #fff)}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-next{right:40px}}.fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-prev{left:40px}}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px);right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40}@media all and (min-width: 1024px){.carousel__button.is-close{right:40px}}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px;color:var(--fancybox-color, currentColor)}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{animation:fancybox-rotate 2s linear infinite;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;animation:fancybox-dash 1.5s ease-in-out infinite;stroke-linecap:round;stroke:currentColor}@keyframes fancybox-rotate{100%{transform:rotate(360deg)}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close{opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{animation:.15s ease backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close{animation:.15s ease both fancybox-fadeOut}.fancybox-fadeIn{animation:.15s ease both fancybox-fadeIn}.fancybox-fadeOut{animation:.1s ease both fancybox-fadeOut}.fancybox-zoomInUp{animation:.2s ease both fancybox-zoomInUp}.fancybox-zoomOutDown{animation:.15s ease both fancybox-zoomOutDown}.fancybox-throwOutUp{animation:.15s ease both fancybox-throwOutUp}.fancybox-throwOutDown{animation:.15s ease both fancybox-throwOutDown}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-zoomInUp{from{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes fancybox-zoomOutDown{to{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@keyframes fancybox-throwOutUp{to{transform:translate3d(0, -30%, 0);opacity:0}}@keyframes fancybox-throwOutDown{to{transform:translate3d(0, 30%, 0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__image{transform-origin:0 0;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px;opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid;border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0;transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;--carousel-button-svg-width: 20px;--carousel-button-svg-height: 20px;opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))}@media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:30;user-select:none}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block} /* End */ /* Start:/local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/assets/css/splide.min.css?17799948445002*/ .splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} /* End */ /* Start:/local/templates/wayoff/components/bitrix/breadcrumb/wayoff/style.css?17802474801740*/ /* Хлебные крошки на детальной странице товара */ .wayoff-catalog-breadcrumbs { margin-bottom: 1rem; } .wayoff-catalog-breadcrumbs--bottom { margin-bottom: 0; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* PDP: крошки опущены чуть ниже (равный зазор header↔крошки и крошки↔галерея) и выровнены по левому краю галереи (= padding-left .product-block = 20px). Только десктоп: там правая колонка sticky и галерея смещена. */ @media (min-width: 961px) { .wayoff-catalog-breadcrumbs--top { padding-top: 14px; padding-left: 20px; } } .wayoff-catalog-breadcrumbs--bottom.mobile-only { display: none; } .wayoff-catalog-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.25rem 0; line-height: 1; color: #BDBDBD; font-size: 14px; font-weight: 300; text-transform: uppercase; } .wayoff-catalog-breadcrumbs__list li { display: inline-flex; align-items: center; } .wayoff-catalog-breadcrumbs__list li:not(:last-child)::after { content: '/'; margin: 0 0.35rem; color: #BDBDBD; font-weight: 400; } .wayoff-catalog-breadcrumbs__link { color: inherit; text-decoration: none; } .wayoff-catalog-breadcrumbs__link:hover { text-decoration: underline; } /* .wayoff-catalog-breadcrumbs__item--current { color: #1a1a1a; font-weight: 500; } */ @media (max-width: 960px) { .wayoff-catalog-breadcrumbs--top.no-mobile { display: none !important; } .wayoff-catalog-breadcrumbs--bottom.mobile-only { display: block; } } /* End */ /* Start:/local/components/wayoff/home.section/templates/product_slider/style.css?17804181586704*/ /* Обёртка товарного блока на главной — стили только здесь */ .wayoff-home-product-section { margin: auto; margin-bottom: 100px; max-width: 1700px; } /* Главная — ритм отступов (2026-05-31). Не-слайдерные связные блоки = 48px (эталон hero→слайдер). Товарные слайдеры имеют снизу стрелки перелистывания → отступ до следующего блока больше (72px), чтобы стрелки не слипались со следующим блоком. Скоуп .index-page, т.к. базовые 100px переиспользуются в рекомендациях пустой корзины. */ .index-page .wayoff-home-product-section { margin-bottom: 72px; } /* Точные межблочные отступы главной (x=27px): 2x=54, 3x=81 */ .index-page .wayoff-home-product-section:has(+ .wf-popular-sections) { margin-bottom: 81px; } /* Популярное → Популярные разделы 3x */ .index-page .wayoff-home-product-section:has(+ .wayoff-home-collections){ margin-bottom: 81px; } /* On Cloud → Коллекции 3x */ .index-page .wayoff-home-product-section:has(+ .wayoff-home-brands) { margin-bottom: 81px; } /* Одежда → Популярные бренды 3x */ .index-page .wayoff-home-product-section:has(+ .wayoff-home-blog) { margin-bottom: 81px; } /* Sale → Blog 3x */ .wayoff-home-product-section .wayoff-catalog-section { margin: 0; } /* Owl Carousel: слайд = один товар на всю ширину ячейки */ .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-item .wayoff-product-item { width: 100%; padding: 0 8px; } /* Навигация Owl — стрелки под слайдером, справа */ .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* Стрелки Owl — единый стандарт .wf-arrow (тонкая линия, без фона). Owl генерирует .owl-prev/.owl-next сам, поэтому повторяем вид здесь; глиф (SVG) приходит из navText = wfArrowSvg() (см. catalog.section). */ .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-prev, .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-next { margin: 0; padding: 0; width: 30px; height: 30px; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--c-muted, #8a8a8a); font-size: 0; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 180ms ease; } .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-prev svg, .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-next svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; } @media (hover: hover) and (pointer: fine) { .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-prev:not(.disabled):hover, .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-next:not(.disabled):hover { color: var(--c-ink, #1a1a1a); } } .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-prev:active, .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-next:active { transform: scale(0.88); } .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-prev.disabled, .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav .owl-next.disabled { opacity: 0.3; cursor: default; pointer-events: none; } @media (max-width: 767px) { .wayoff-home-product-section .wayoff-home-products-slider.owl-carousel .owl-nav { display: none; } } @media (max-width: 960px) { .wayoff-home-product-section { margin-bottom: 50px; } } .wayoff-detail-sliders__panel--initializing { visibility: hidden; } /* Мобильный режим: flex-скролл вместо owl */ @media (max-width: 767px) { .wayoff-home-product-section .wayoff-home-products-slider:not(.owl-loaded) { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* Скроллбар скрыт — чистый mobile-вид. */ scrollbar-width: none; padding-bottom: 8px; gap: 0; /* Snap: карточки фиксируются на левой границе при скролле. */ scroll-snap-type: x mandatory; scroll-padding-left: 12px; } .wayoff-home-product-section .wayoff-home-products-slider:not(.owl-loaded)::-webkit-scrollbar { display: none; } .wayoff-home-product-section .wayoff-home-products-slider:not(.owl-loaded) .wayoff-product-item, .wayoff-home-product-section .wayoff-home-products-slider:not(.owl-loaded)>* { flex-shrink: 0; /* 2.2 карточки на экран — даёт peek-эффект следующей карточки (discovery hint). */ width: calc((100vw - 32px) / 2.2); min-width: 155px; max-width: 220px; padding: 0 6px; box-sizing: border-box; scroll-snap-align: start; } } /* Хедер секции: «Смотреть все» выравнивается по центру заголовка (а не по низу) + убираем точку (::after) у заголовка. Касается секций главной (Популярное и др.). */ .wayoff-home-product-section .index-block-header { align-items: center; } .wayoff-home-product-section .index-block-title::after { content: none; } .wayoff-home-product-section .index-block-header .wf-see-all { align-self: center; } /* перебить align-self:flex-start */ /* Мобилка (x=23): все межблочные 3x → 69px */ @media (max-width: 960px) { .index-page .wayoff-home-product-section:has(+ .wf-popular-sections), .index-page .wayoff-home-product-section:has(+ .wayoff-home-collections), .index-page .wayoff-home-product-section:has(+ .wayoff-home-brands), .index-page .wayoff-home-product-section:has(+ .wayoff-home-blog) { margin-bottom: 69px; } } /* End */ /* Start:/local/templates/wayoff/assets/css/owl.carousel.min.css?17799948443351*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(/local/templates/wayoff/assets/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* End */ /* Start:/local/templates/wayoff/assets/css/owl.theme.default.min.css?17799948441013*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} /* End */ /* Start:/local/templates/wayoff/components/bitrix/catalog.section/wayoff_catalog/style.css?178137222723114*/ /* Стили для шаблона catalog.section wayoff_catalog */ /* Стили для шаблона каталога WAYOFF */ .wayoff-catalog { font-family: var(--ui-font-family-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .catalog-page { width: 100%; } .catalog-page__container {} .catalog-page__content { display: flex; gap: 30px; } .catalog-page__sidebar { flex: 0 0 280px; } .catalog-page__main { flex: 1; min-width: 0; } .catalog-filter { margin-bottom: 30px; } .catalog-filter--horizontal { margin-bottom: 20px; } .catalog-sidebar { margin-top: 30px; } .catalog-sections { width: 100%; } .catalog-sections__container { max-width: 1200px; margin: 0 auto; padding: 20px; } .catalog-detail { width: 100%; } /* Адаптивность */ @media (max-width: 960px) { .catalog-page__main { padding-right: 0; } .catalog-page__content { flex-direction: column; gap: 20px; } .catalog-page__sidebar { flex: 1 1 auto; width: 100%; } .catalog-page__container, .catalog-sections__container { padding: 0; } .wayoff-catalog-seo-block__title { font-size: 1rem; } } .wayoff-catalog-section { font-family: var(--ui-font-family-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; width: 100%; } .wayoff-catalog-description { margin-bottom: 30px; padding: 20px 0; background: #f8f9fa; border-radius: 4px; font-size: 16px; line-height: 1.6; color: #333; } .wayoff-catalog-pagination { margin: 30px 0; text-align: center; } /* Блок заголовка и сортировки */ .catalog-header-block { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px 0; flex-wrap: wrap; gap: 20px; } .title-block h1 { margin: 0 0 10px 0; font-size: 28px; font-weight: 600; color: #333; } .title-block .count { font-size: 14px; color: #666; } .catalog-controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .wayoff-filter-open-btn { display: none; } .sort-list { position: relative; display: inline-block; } .sort-list.white-btn { display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07); background-color: var(--ui-color-primary); text-transform: uppercase; border: none; font-size: 12px; line-height: 1; color: #000000; padding: 0; cursor: pointer; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; } .sort-list.white-btn:hover { background-color: #000000; color: #FFFFFF; } .sort-list .js-sort-select { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .custom-drop { position: relative; display: inline-block; } .custom-drop select { display: none; } .custom-dropdown { border-radius: 0; width: 100%; height: 36px; font-weight: 400; font-size: 13px; position: relative; cursor: pointer; } .custom-dropdown .current { width: 100%; cursor: pointer; line-height: 34px; padding-left: 10px; padding-right: 20px; border: 1px solid #000000; border-radius: 4px; position: relative; } .custom-dropdown .current:before { font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e908"; display: block; position: absolute; top: 50%; font-size: 6px; margin-top: -3px; right: 8px; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; } .custom-dropdown.active .current:before { transform: rotate(180deg); } .custom-dropdown .drop-list { display: none; list-style: none; position: absolute; right: 0; top: 100%; margin-top: 5px; width: 200px; max-width: 90vw; max-height: 270px; border-radius: 4px; overflow: auto; z-index: 10; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07); background-color: #FFFFFF; scrollbar-color: #000000 #FFFFFF; scrollbar-width: thin; padding: 0; margin-left: 0; } .custom-dropdown.active .drop-list { display: block; } .custom-dropdown .drop-list li { display: block; padding: 10px 20px; cursor: pointer; width: 100%; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; color: #000000; list-style: none; } .custom-dropdown .drop-list li.active { background-color: #FFFFFF; color: #000000; } .custom-dropdown .drop-list li:hover { background-color: #000000; color: #FFFFFF; } .custom-dropdown ::-webkit-scrollbar { width: 4px; background-color: #BDBDBD; } .custom-dropdown ::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 2px; } .custom-dropdown ::-webkit-scrollbar-thumb:hover { opacity: 1; } .custom-dropdown ::-webkit-scrollbar-track { background-color: transparent; } /* Стили для блока сортировки в каталоге */ .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list, .catalog-header-block .catalog-controls .sort-list { display: flex; align-items: center; justify-content: center; margin-right: 30px; height: 40px; border-radius: 20px; max-width: 100%; padding: 0 45px; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list:hover, .catalog-header-block .catalog-controls .sort-list:hover { background-color: #FFFFFF; color: #000000; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-drop, .catalog-header-block .catalog-controls .sort-list .custom-drop { position: static; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-dropdown, .catalog-header-block .catalog-controls .sort-list .custom-dropdown { width: auto; height: auto; color: #BDBDBD; position: static; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-dropdown .current, .catalog-header-block .catalog-controls .sort-list .custom-dropdown .current { border: none; font-size: 12px; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-dropdown .current:before, .catalog-header-block .catalog-controls .sort-list .custom-dropdown .current:before { right: 0; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-dropdown .drop-list, .catalog-header-block .catalog-controls .sort-list .custom-dropdown .drop-list { border-radius: 20px; width: 100%; } .catalog-page .catalogue-section .catalogue-row .sort-block .sort-list .custom-dropdown .drop-list li, .catalog-header-block .catalog-controls .sort-list .custom-dropdown .drop-list li { font-size: 12px; } /* Мобильный блок управления каталогом */ .catalog-mobile-controls { display: none; } .mobile-only { display: none; } @media (max-width: 960px) { .mobile-only { display: block; } .catalog-mobile-controls { display: block; position: sticky; top: 0; z-index: 100; background: #FFFFFF; padding: 12px 0; border-bottom: 1px solid #E0E0E0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .catalog-mobile-search { display: none; /* на мобилке оставляем только 2 чипа: Фильтры + Сортировка (поиск — в шапке) */ } .mobile-search-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 4px; font-size: 14px; font-weight: 400; color: #666666; cursor: pointer; transition: all 0.3s ease; text-align: left; } .mobile-search-btn:hover { background: #EEEEEE; border-color: #000000; color: #000000; } .mobile-search-btn svg { flex-shrink: 0; width: 20px; height: 20px; fill: currentColor; } .mobile-search-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .catalog-mobile-sort-filter { display: flex; gap: 12px; align-items: center; } .mobile-sort-btn, .mobile-filter-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: #FFFFFF; border: 0; border-radius: 4px; font-size: 14px; font-weight: 400; min-height: 40px; color: #000000; cursor: pointer; transition: all 0.3s ease; position: relative; } .mobile-sort-btn:hover, .mobile-filter-btn:hover { background: #000000; color: #FFFFFF; } .mobile-sort-btn svg, .mobile-filter-btn svg { flex-shrink: 0; width: 20px; height: 20px; fill: currentColor; } .mobile-sort-btn svg { width: 20px; height: 20px; fill: currentColor; } .mobile-sort-btn svg use { fill: currentColor; } .mobile-sort-btn svg path { fill: currentColor; } .mobile-sort-text, .mobile-filter-text { flex-shrink: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-filter-badge, .filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; background: #000000; color: #FFFFFF; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1; margin-left: 4px; } .mobile-filter-badge:empty, .filter-badge:empty { display: none; } .mobile-filter-btn:hover .mobile-filter-badge, .wayoff-filter-open-btn:hover .filter-badge { background: #FFFFFF; color: #000000; } .mobile-sort-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border: 1px solid #000000; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 101; margin-top: -1px; } .mobile-sort-dropdown.active { display: block; } .mobile-sort-list { list-style: none; padding: 0; margin: 0; } .mobile-sort-list li { border-bottom: 1px solid #E0E0E0; } .mobile-sort-list li:last-child { border-bottom: none; } .mobile-sort-list li a { display: block; padding: 12px 16px; color: #000000; text-decoration: none; font-size: 14px; transition: all 0.3s ease; } .mobile-sort-list li.active a { background: #F5F5F5; font-weight: 600; } .mobile-sort-list li a:hover { background: #000000; color: #FFFFFF; } .mobile-sort-btn { position: relative; } .wayoff-filter-open-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; } .catalog-header-block { flex-direction: column; align-items: flex-start; margin-bottom: 0; } .catalog-controls { width: 100%; } .sort-list.no-mobile, .wayoff-catalog-breadcrumbs--top.no-mobile { display: none !important; } .custom-drop select { display: none; } .custom-dropdown { border-radius: 0; width: 100%; height: 36px; font-weight: 400; font-size: 13px; } .custom-dropdown .current { width: 100%; cursor: pointer; line-height: 34px; padding-left: 10px; padding-right: 20px; border: 1px solid #000000; border-radius: 4px; } .custom-dropdown .current:before { font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e908"; display: block; position: absolute; top: 50%; font-size: 6px; margin-top: -3px; right: 8px; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; } .custom-dropdown .drop-list { display: none; list-style: none; position: absolute; right: 0; top: 100%; margin-top: 5px; width: 200px; max-width: 90vw; max-height: 270px; border-radius: 4px; overflow: auto; z-index: 10; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07); background-color: #FFFFFF; scrollbar-color: #000000 #FFFFFF; scrollbar-width: thin; } .custom-dropdown .drop-list li { display: block; padding: 10px 20px; cursor: pointer; width: 100%; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; color: #000000; } .custom-dropdown .drop-list li.active { background-color: #FFFFFF; color: #000000; } .custom-dropdown .drop-list li:hover { background-color: #000000; color: #FFFFFF; } .custom-dropdown ::-webkit-scrollbar { width: 4px; background-color: #BDBDBD; } .custom-dropdown ::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 2px; } .custom-dropdown ::-webkit-scrollbar-thumb:hover { opacity: 1; } .custom-dropdown ::-webkit-scrollbar-track { background-color: transparent; } .submit-btn { display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07); background-color: #000000; text-transform: uppercase; border: none; line-height: 1; color: #FFFFFF; padding: 0; cursor: pointer; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; } .submit-btn:hover { background-color: #FFFFFF; color: #000000; } .submit-btn.white-btn { background-color: #FFFFFF; color: #000000; } .submit-btn.white-btn:hover { background-color: #000000; color: #FFFFFF; } } /* Сетка товаров - адаптивная */ .wayoff-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* gap: <вертикальный ряд> <горизонтальная колонка> — вертикаль крупнее для «воздушного» ритма рядов (как на brandshop.ru) */ gap: 60px 20px; margin-bottom: 30px; } /* Планшеты - 3 колонки */ @media (min-width: 768px) { .wayoff-products-grid { grid-template-columns: repeat(3, 1fr); gap: 72px 24px; } } /* Десктоп - 4 колонки */ @media (min-width: 1024px) { .wayoff-products-grid { grid-template-columns: repeat(4, 1fr); gap: 84px 30px; } } /* Карточки каталога на ~13% меньше (планшет+десктоп): уменьшаем сам элемент в ячейке, фото (width:100%) и текст скейлятся пропорционально. Кол-во колонок не меняем, мобилку (2 кол) не трогаем. 2026-06-07. width (НЕ max-width): с max-width + margin auto грид-айтем ужимается до fit-content — карточки с коротким названием получались уже остальных. */ @media (min-width: 768px) { .wayoff-products-grid .wayoff-product-item { width: 87%; margin-inline: auto; } } /* Стили для карточки товара */ .wayoff-product-item { display: flex; flex-direction: column; background: var(--ui-color-primary); border-radius: 12px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .wayoff-product-item:hover { transform: translateY(-4px); } /* Адаптация внутренних элементов товара */ .wayoff-product-item .product-item { height: 100%; display: flex; flex-direction: column; } .wayoff-product-item .product-item-image-wrapper { flex-shrink: 0; position: relative; width: 100%; padding-top: 100%; /* Квадратное соотношение */ overflow: hidden; background: #f8f9fa; } .wayoff-product-item .product-item-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .wayoff-product-item:hover .product-item-image-wrapper img { transform: scale(1.05); } .wayoff-product-item .product-item-info-container { flex: 1; display: flex; flex-direction: column; padding: 16px; } .wayoff-product-item .product-item-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.9em; } .wayoff-product-item .product-item-title a { color: var(--c-ink); text-decoration: none; transition: color 200ms var(--ease); } .wayoff-product-item .product-item-title a:hover { color: var(--c-ochre); } .wayoff-product-item .product-item-price { margin-top: auto; padding-top: 10px; } .wayoff-product-item .product-item-price-current { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink); font-variant-numeric: tabular-nums; } .wayoff-product-item .product-item-price-old { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); text-decoration: line-through; margin-left: 8px; font-variant-numeric: tabular-nums; } .wayoff-product-item .product-item-button-container { margin-top: 12px; } .wayoff-product-item .btn { padding: 10px 20px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; border: none; cursor: pointer; width: 100%; } .wayoff-product-item .btn-primary { background: #000; color: #fff; } .wayoff-product-item .btn-primary:hover { background: #333; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Мобильная адаптация */ @media (max-width: 960px) { .wayoff-products-grid { /* вертикаль крупнее горизонтали — воздушный ритм рядов */ gap: 48px 16px; } .wayoff-product-item .product-item-info-container { padding: 12px; } .wayoff-product-item .product-item-title { font-size: 11px; min-height: 40px; } .wayoff-product-item .product-item-price-current { font-size: 12px; } .wayoff-catalog-description { padding: 16px; font-size: 14px; } } /* Стили для пагинации */ .wayoff-catalog-pagination .bx-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .wayoff-catalog-pagination .bx-pagination a, .wayoff-catalog-pagination .bx-pagination span { padding: 8px 12px; border-radius: 4px; text-decoration: none; color: #333; background: #fff; border: 1px solid #e0e0e0; transition: all 0.2s ease; min-width: 40px; text-align: center; display: inline-block; } .wayoff-catalog-pagination .bx-pagination a:hover { background: #f8f9fa; border-color: #000; color: #000; } .wayoff-catalog-pagination .bx-pagination .bx-active span { background: #000; color: #fff; border-color: #000; } /* Заголовок блока на главной (только при BLOCK_TITLE) — в стиле остальных секций главной */ .index-block-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; padding: 0; } .index-block-title { font-family: var(--font-display); font-size: var(--fs-h2-sec); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; text-transform: none; color: var(--c-ink); margin: 0; } /* Точка в конце заголовков убрана (по требованию — без точек у всех заголовков). */ .index-block-title::after { content: none; } .index-block-all { font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--c-ink-2); text-transform: none; white-space: nowrap; position: relative; padding-bottom: 2px; text-decoration: none; transition: color 200ms var(--ease); } /* Animated underline — выезжает слева направо при hover (clip-path trick a la Emil) */ .index-block-all::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path 280ms var(--ease); } @media (hover: hover) and (pointer: fine) { .index-block-all:hover { color: var(--c-ink); } .index-block-all:hover::after { clip-path: inset(0 0 0 0); } } .index-block-all .ico { font-size: 11px; margin-left: 8px; } @media (max-width: 960px) { .index-block-all .ico { font-size: 9px; margin-left: 6px; } } @media (max-width: 1024px) { .index-block-title { font-size: clamp(24px, 5vw, 32px); } .index-block-all { font-size: 12px; } } /* Блок под SEO-текст внизу листинга */ .wayoff-catalog-seo-block { margin: 2.5rem 0; padding: 2rem 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .wayoff-catalog-seo-block__title { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0 0 1rem; } .wayoff-catalog-seo-block__content { font-size: 1rem; line-height: 1.6; color: #333; } .wayoff-catalog-seo-block__content p { margin: 0 0 0.75em; } .wayoff-catalog-seo-block__content p:last-child { margin-bottom: 0; } .wayoff-catalog-seo-block__content a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; } .wayoff-catalog-seo-block__content a:hover { opacity: 0.8; } .wayoff-catalog-seo-block__content ul, .wayoff-catalog-seo-block__content ol { margin: 0 0 1em; padding-left: 1.5em; } .wayoff-catalog-seo-block__content li { margin-bottom: 0.35em; } .wayoff-catalog-seo-block__content ul { list-style-type: disc; } .wayoff-catalog-seo-block__content ol { list-style-type: decimal; } .wayoff-catalog-seo-block__content strong { font-weight: 600; } .wayoff-catalog-seo-block__content h2, .wayoff-catalog-seo-block__content h3 { font-size: 1.125rem; font-weight: 600; margin: 1em 0 0.5em; } .wayoff-catalog-seo-block__content h2:first-child, .wayoff-catalog-seo-block__content h3:first-child { margin-top: 0; } /* Бейдж Яндекс Сплита справа от цены (mountBadge type=bnpl) */ .wf-yp-badge { display: inline-block; vertical-align: middle; margin-left: 8px; line-height: 0; } .wf-yp-badge:empty { display: none; } /* Цена + бейдж Сплита в одну строку (бейдж справа от цены) */ .wf-price-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wf-price-line .wf-yp-badge { margin-left: 0; } /* Резерв места под бейдж Сплита (anti-CLS): контейнер держит размер до загрузки iframe-бейджа Яндекса, контент не прыгает при появлении. */ .wf-yp-badge { display: inline-flex; align-items: center; min-height: 16px; min-width: 150px; } /* Каталог: бейдж Сплита ПОД ценой, по центру карточки (безопасно для мобильной сетки — своя строка, не распирает). На скидочных: актуальная, зачёркнутая, бейдж. */ .catalog-page .wf-price-line { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; } .catalog-page .wf-price-line .wf-yp-badge { min-width: 0; } /* End */ /* Start:/local/templates/wayoff/components/bitrix/catalog.item/wayoff_catalog/style.css?17816128053831*/ /* Стили для шаблона catalog.item wayoff_catalog */ .product-item-container { width: 100%; position: relative; } .product-item { display: block; text-decoration: none; color: inherit; transition: all 0.3s ease; } .product-item:hover { opacity: 0.9; } /* Изображение товара */ .product-item .image { position: relative; width: 100%; padding-top: 100%; /* Квадратное соотношение */ overflow: hidden; background: transparent; margin-bottom: 12px; } .product-item .image picture, .product-item .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .product-item:hover .image img { transform: scale(1.05); } .product-item .image.contain-image img { object-fit: contain; } .fav-btn .ico::before { content: ''; } /* Лейблы товара */ .product-label { position: absolute; top: 10px; left: 10px; z-index: 10; padding: 4px 8px; background: #000; color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; } .product-label-discount { background: #8b253b; } .product-label-text { background: #000; } /* Стек лейблов столбиком (несколько тегов одновременно: скидка / NEW / IN STOCK) */ .product-labels { position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .product-labels .product-label { position: static; top: auto; left: auto; z-index: auto; } /* IN STOCK — наличие на складе (чёрный, как NEW) */ .product-label-instock { background: #000; } /* Кнопка избранного */ .fav-btn { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(249, 249, 249, 0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9; transition: all 0.3s ease; padding: 0; } .fav-btn:hover { background: rgba(249, 249, 249, 1); transform: scale(1.1); } .fav-btn.active .ico svg .fill { fill: #8b253b; } .fav-btn.active .ico svg path:last-child { stroke: #8b253b; } .fav-btn .ico { display: flex; align-items: center; justify-content: center; } .fav-btn .ico svg { width: 20px; height: 20px; } /* Название товара */ .product-item h3 { font-size: 20px; font-weight: 400; text-transform: uppercase; line-height: 1.2; margin-bottom: 8px; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Резервируем высоту под 2 строки (2 × line-height), чтобы цена была на одном уровне у товаров с названием в 1 и в 2 строки. em → подстраивается под mobile. */ min-height: 2.4em; } /* Цена */ .product-item .price-wrapper { display: flex; flex-direction: column; gap: 4px; } /* Цена */ .product-item .special-price { display: flex; align-items: baseline; gap: 4px; font-size: 18px; font-weight: 600; color: #000; } .product-item .special-price .price { font-size: 20px; font-weight: 700; } .product-item .old-price { font-size: 14px; color: #999; text-decoration: line-through; } .product-item .price { font-size: 16px; font-weight: 400; color: #000; display: flex; align-items: baseline; gap: 4px; } /* Адаптивность */ @media (max-width: 768px) { .product-item h3 { font-size: 12px; } .product-item .special-price { font-size: 16px; } .product-item .special-price .price { font-size: 18px; } .product-item .price { font-size: 12px; } } /* End */ /* /local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/style.css?178161280560417 */ /* /local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/assets/css/fancybox.css?177999484415598 */ /* /local/templates/wayoff/components/bitrix/catalog.element/wayoff_catalog/assets/css/splide.min.css?17799948445002 */ /* /local/templates/wayoff/components/bitrix/breadcrumb/wayoff/style.css?17802474801740 */ /* /local/components/wayoff/home.section/templates/product_slider/style.css?17804181586704 */ /* /local/templates/wayoff/assets/css/owl.carousel.min.css?17799948443351 */ /* /local/templates/wayoff/assets/css/owl.theme.default.min.css?17799948441013 */ /* /local/templates/wayoff/components/bitrix/catalog.section/wayoff_catalog/style.css?178137222723114 */ /* /local/templates/wayoff/components/bitrix/catalog.item/wayoff_catalog/style.css?17816128053831 */