/* Start:/local/templates/sinagear/components/bitrix/catalog.element/2026/style.css?1786522761155395*/ .header--fixed .header__logo-icon, .header__logo-icon{ height: min(49 / var(--vw-screen) * 100 * 1vw, 49px)!important; } @media (max-width: 767px) { .header--fixed .header__logo-icon, .header__logo-icon { height: min(45 / var(--vw-screen) * 100 * 1vw, 45px)!important; } } :root { --pdp-page-bg: var(--c-white, #ffffff); --pdp-surface: var(--c-milk, #f5f5f5); --pdp-text: var(--c-black, #161616); --pdp-text-muted: #666666; --pdp-text-tertiary: rgba(22, 22, 22, 0.56); --pdp-title: #1a1c19; --pdp-accent: #de341d; --pdp-cart-btn-hover: #161616; --pdp-cart-btn-active: #2d2d2d; --pdp-accent-select: #ea001e; --pdp-badge-hit: #ff9319; --pdp-badge-sale: var(--pdp-accent); --pdp-badge-new: #0b7a3e; --pdp-badge-price: #e8f5e9; --pdp-badge-price-text: #0b7a3e; --pdp-expert: #c91517; --pdp-kit-num: #bb0016; --pdp-kit-change-bg: var(--pdp-surface); --pdp-kit-change-bg-hover: var(--pdp-surface); --pdp-kit-change-bg-active: #e4e4e4; --pdp-btn-on-inverse: var(--c-white, #ffffff); --pdp-reviews-submit-bg: var(--pdp-text); --pdp-cart-price-old-color: #16161666; --pdp-t-mono12-fw: 400; --pdp-check: #3a853e; --pdp-header-label: #434343; --pdp-promo-bg: #e8f5e9; --pdp-radius: 2px; --pdp-gap-section: var(--gap-40, min(40 / var(--vw-screen) * 100 * 1vw, 40px)); --pdp-max: 1440px; --pdp-col-left-share: 45%; --pdp-col-gap: min(92px, 6.3889vw); --pdp-reviews-side-w: min(335 / var(--vw-screen) * 100 * 1vw, 335px); --pdp-gallery-thumb: min(92px, 6.3889vw); color: var(--pdp-text); background: var(--pdp-page-bg); --pdp-font-primary: var(--font-primary); --pdp-font-secondary: var(--font-secondary); --pdp-fs-title-lg: min(32 / var(--vw-screen) * 100 * 1vw, 32px); --pdp-lh-title-lg: 1.2; --pdp-fw-title-lg: 700; --pdp-fs-title-md: min(18 / var(--vw-screen) * 100 * 1vw, 18px); --pdp-lh-title-md: 1.2; --pdp-fw-title-md: 700; --pdp-fs-body: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-lh-body: 1.8; --pdp-fw-body: 300; --pdp-fs-body-sm: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-lh-body-sm: 1.8; --pdp-fw-body-sm: 300; --pdp-fs-emphasis: min(18 / var(--vw-screen) * 100 * 1vw, 18px); --pdp-lh-emphasis: 1.2; --pdp-fw-emphasis: 700; --pdp-fs-ui: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-lh-ui: 1.2; --pdp-fw-ui: 300; --pdp-fs-caption: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-lh-caption: 2.2; --pdp-fw-caption: 300; --pdp-fs-btn: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-lh-btn: 1.2; --pdp-fw-btn: 600; --pdp-card-color-img-w: min(101 / var(--vw-screen) * 100 * 1vw, 101px); --pdp-card-color-img-h: min(32 / var(--vw-screen) * 100 * 1vw, 32px); --pdp-card-size-w: min(60 / var(--vw-screen) * 100 * 1vw, 60px); --pdp-card-size-h: min(40 / var(--vw-screen) * 100 * 1vw, 40px); --pdp-card-size-fs: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-review-photo-size: min(64 / var(--vw-screen) * 100 * 1vw, 64px); --pwd-fw-900: 900; --pwd-fw-400: 400; --pdp-t-flex-ff: var(--font-primary, "Roboto Flex"); --pdp-t-mono-ff: var(--font-secondary, "PitagonSansMono"); --pdp-t-color-text: #161616; --pdp-t-color-title: #1a1c19; --pdp-t-color-80: rgba(22, 22, 22, 0.8); --pdp-t-color-66: rgba(22, 22, 22, 0.4); --pdp-t-color-green: #3a853e; --pdp-t-uc-fs: min(12 / var(--vw-screen) * 100 * 1vw, 12px); --pdp-t-uc-fw: 900; --pdp-t-uc-lh: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-meta-fs: min(12 / var(--vw-screen) * 100 * 1vw, 12px); --pdp-t-meta-fw: 300; --pdp-t-meta-lh: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-body16-fs: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-body16-fw: 400; --pdp-t-body16-lh: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-body14-fs: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-t-body14-fw: 400; --pdp-t-body14-lh: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-body20-fs: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-body20-lh: min(28 / var(--vw-screen) * 100 * 1vw, 28px); --pdp-t-mono-label-fs: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-t-mono-label-fw: 700; --pdp-t-mono-label-lh: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-mono16-fs: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-mono16-fw: 400; --pdp-t-mono16-lh: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-mono12-fs: min(12 / var(--vw-screen) * 100 * 1vw, 12px); --pdp-t-mono12-lh: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-title32-fs: min(32 / var(--vw-screen) * 100 * 1vw, 32px); --pdp-t-title32-fw: 800; --pdp-t-title32-lh: min(32 / var(--vw-screen) * 100 * 1vw, 32px); --pdp-t-title24-fs: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-title24-fw: 800; --pdp-t-title24-lh: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-emph16-fs: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-t-emph16-fw: 900; --pdp-t-emph16-lh: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-price-fs: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-price-fw: 700; --pdp-t-price-lh: min(24 / var(--vw-screen) * 100 * 1vw, 24px); --pdp-t-btn-fs: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-btn-fw: 700; --pdp-t-btn-lh: min(20 / var(--vw-screen) * 100 * 1vw, 20px); --pdp-t-discount-fw: 500; --pdp-t-discount-lh: 1.3; } .pdp-typo--title-lg { font-family: var(--pdp-font-primary); font-weight: var(--pdp-fw-title-lg); font-size: var(--pdp-fs-title-lg); line-height: var(--pdp-lh-title-lg); } .pdp-typo--title-md { font-family: var(--pdp-font-primary); font-weight: var(--pdp-fw-title-md); font-size: var(--pdp-fs-title-md); line-height: var(--pdp-lh-title-md); } .pdp-typo--body { font-family: var(--font-primary); font-weight: var(--pdp-fw-body); font-size: var(--pdp-fs-body); line-height: var(--pdp-lh-body); } .pdp-typo--body-sm { font-family: var(--pdp-font-secondary); font-weight: var(--pwd-fw-400); font-size: var(--pdp-fs-body-sm); line-height: var(--pdp-lh-body-sm); } .pdp-typo--emphasis { font-family: var(--pdp-font-primary); font-weight: var(--pdp-fw-emphasis); font-size: var(--pdp-fs-emphasis); line-height: var(--pdp-lh-emphasis); } .pdp-typo--ui { font-family: var(--pdp-font-secondary); font-weight: var(--pdp-fw-ui); font-size: var(--pdp-fs-ui); line-height: var(--pdp-lh-ui); } .pdp-typo--caption { font-family: var(--font-primary); font-weight: var(--pwd-fw-900); font-size: var(--pdp-fs-caption); line-height: var(--pdp-lh-caption); } .pdp-typo--btn { font-family: var(--pdp-font-secondary); font-weight: var(--pdp-fw-btn); font-size: var(--pdp-fs-btn); line-height: var(--pdp-lh-btn); } /* —— Typography Figma: общие (PC + mob) —— */ .pdp .pdp-info__rating-sep, .pdp .pdp-info__copy, .pdp .pdp-info__copy-text { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-meta-fs); font-weight: var(--pdp-t-meta-fw); line-height: var(--pdp-t-meta-lh); } .pdp .pdp-info__suit { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-info__rating-value { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; } .pdp .pdp-buy__badge, .pdp .pdp-buy__badge-text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-buy__price { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-price-fs); font-weight: var(--pdp-t-price-fw); line-height: var(--pdp-t-price-lh); color: var(--pdp-t-color-text); } .pdp .pdp-variants__label { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); } .pdp .pdp-color__name { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-meta-fs); font-weight: var(--pdp-t-meta-fw); line-height: var(--pdp-t-meta-lh); } .pdp .pdp-variants__size-chip { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-specs__label { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; } .pdp .pdp-specs__value { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-specs__more { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); text-decoration: underline; } .pdp .pdp-cart-drawer__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; } .pdp .pdp-cart-drawer__name { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-emph16-fs); font-weight: var(--pdp-t-emph16-fw); line-height: var(--pdp-t-emph16-lh); } .pdp .pdp-cart-drawer__line { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-cart-drawer__price-old { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono12-fs); font-weight: var(--pdp-t-mono12-fw); line-height: var(--pdp-t-mono12-lh); color: var(--pdp-cart-price-old-color); } .pdp .pdp-cart-drawer__price { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono16-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono16-lh); } .pdp .pdp-cart-upsell-card__hover-label { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); } .pdp .pdp-cart-upsell-card__hover-guide { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); text-decoration: underline; } .pdp .pdp-cart-upsell-card__in-cart-text { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-btn-fs); font-weight: var(--pdp-t-btn-fw); line-height: var(--pdp-t-btn-lh); } .pdp .pdp-review-modal__dropdown-item { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); font-style: normal; line-height: var(--pdp-t-body16-lh); } .pdp #pdpSizeModal.pdp-size-modal .pdp-size-modal__size { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); font-style: normal; line-height: var(--pdp-t-body16-lh); } .pdp .pdp-quote__label { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; color: var(--pdp-t-color-80); } .pdp .pdp-quote__name-text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); color: var(--pdp-expert); } .pdp .pdp-delivery__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; text-align: center; text-align: left; } .pdp .pdp-delivery__list { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-kit-item__layer { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; } .pdp .pdp-kit-item__desc { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); color: var(--pdp-t-color-80); } .pdp .pdp-kit-item__name { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-emph16-fs); font-weight: var(--pdp-t-emph16-fw); line-height: var(--pdp-t-emph16-lh); } .pdp .pdp-kit-item__meta { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-kit-item__change { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); } .pdp .pdp-kit-promo__price-old { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono16-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono16-lh); text-decoration: line-through; } .pdp .pdp-kit-promo__discount { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-discount-fw); line-height: var(--pdp-t-discount-lh); } .pdp .pdp-kit-promo__price { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-price-fs); font-weight: var(--pdp-t-price-fw); line-height: var(--pdp-t-price-lh); } .pdp .pdp-review__name { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; } .pdp .pdp-review__variant, .pdp .pdp-review__text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-reviews-summary__value, .pdp .pdp-reviews-summary__max, .pdp .pdp-reviews-summary__sep { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); } .pdp .pdp-reviews-summary__bar-label, .pdp .pdp-reviews-summary__bar-count { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-reviews__page { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-meta-fs); font-weight: var(--pdp-t-meta-fw); line-height: var(--pdp-t-meta-lh); text-align: center; } .pdp .pdp-card__price { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono16-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono16-lh); } /* —— Typography Figma: только ПК (≥1024px) —— */ @media screen and (min-width: 1024px) { :root { --pdp-t-section-mb: min(80 / var(--vw-screen) * 100 * 1vw, 80px); --pdp-t-kit-title-mb: min(40 / var(--vw-screen) * 100 * 1vw, 40px); } .pdp .pdp-typo--title-lg { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title32-fs); font-weight: var(--pdp-t-title32-fw); line-height: var(--pdp-t-title32-lh); } .pdp .pdp-typo--body { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-typo--body-sm { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-typo--btn { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-btn-fs); font-weight: var(--pdp-t-btn-fw); line-height: var(--pdp-t-btn-lh); } .pdp .pdp__hero { margin-bottom: var(--pdp-t-section-mb); } .pdp .pdp-kit { margin-bottom: var(--pdp-t-section-mb); } .pdp .pdp-kit__title { margin-bottom: var(--pdp-t-kit-title-mb); } .pdp .pdp-about { margin-bottom: var(--pdp-t-section-mb); } .pdp .pdp-info__rating-value { color: var(--pdp-text-muted); } .pdp .pdp-info__rating-sep, .pdp .pdp-info__copy, .pdp .pdp-info__copy-text { color: var(--pdp-text-muted); } .pdp .pdp-specs__label { color: var(--pdp-text-muted); } .pdp .pdp-specs__more { color: var(--pdp-text-muted); } .pdp .pdp-variants__guide { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); color: var(--pdp-text-muted); text-decoration: underline; } .pdp .pdp-size-dropdown__value { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-variants__hint { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-quote__text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-delivery__title { color: var(--pdp-header-label); } .pdp .pdp-kit-item__name { color: var(--pdp-title); } .pdp .pdp-kit-item__viewing { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-kit__title, .pdp .pdp-kit-promo__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title32-fs); font-weight: var(--pdp-t-title32-fw); line-height: var(--pdp-t-title32-lh); color: var(--pdp-title); } .pdp .pdp-kit-promo__text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body20-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body20-lh); } .pdp .pdp-kit-promo__price-old { color: var(--pdp-text-muted); } .pdp .pdp-accordion__label { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-transform: uppercase; text-align: left; color: var(--pdp-t-color-80); } .pdp .text-block, .pdp .pdp-accordion__body.text-block { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-about__list li { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-about__text, .pdp .pdp-about__text p { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-review__name { color: var(--pdp-text-muted); } .pdp .pdp-reviews-summary__value { color: var(--pdp-title); } .pdp .pdp-reviews-summary__max { color: var(--pdp-t-color-80); } .pdp .pdp-slider__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title32-fs); font-weight: var(--pdp-t-title32-fw); line-height: var(--pdp-t-title32-lh); color: var(--pdp-title); } .pdp .pdp-card__title a { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-emph16-fs); font-weight: var(--pdp-t-emph16-fw); line-height: var(--pdp-t-emph16-lh); } .pdp .pdp-card__price-old { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono16-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono16-lh); text-decoration: line-through; color: var(--pdp-t-color-66); } .pdp .pdp-kit-modal__layer-title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); } .pdp .pdp-kit-modal__layer-desc { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body20-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body20-lh); color: var(--pdp-t-color-title); } .pdp .pdp-kit-modal__product-title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); color: var(--pdp-title); } .pdp .pdp-kit-modal__product-accent { color: var(--pdp-t-color-80); } .pdp .pdp-kit-modal__price-old { color: var(--pdp-text-muted); } .pdp .pdp-kit-modal__price-badge { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-discount-fw); line-height: var(--pdp-t-discount-lh); } .pdp .pdp-kit-modal__price { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-price-fs); font-weight: var(--pdp-t-price-fw); line-height: var(--pdp-t-price-lh); } .pdp .pdp-kit-modal__field-label { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); } .pdp .pdp-kit-modal__model-value { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-kit-modal__color-name { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-meta-fs); font-weight: var(--pdp-t-meta-fw); line-height: var(--pdp-t-meta-lh); } .pdp .pdp-kit-modal__size { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } } @media screen and (max-width: 574px) { .pdp .pdp-breadcrumbs__item, .pdp .pdp-breadcrumbs__sep { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-meta-fs); font-weight: var(--pdp-t-meta-fw); line-height: var(--pdp-t-meta-lh); } .pdp .pdp-info__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); color: var(--pdp-title); } .pdp .pdp-info__rating-value { color: var(--pdp-t-color-80); } .pdp .pdp-buy__price-old { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono16-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono16-lh); text-decoration: line-through; color: var(--pdp-t-color-80); } .pdp .pdp-specs__label { color: var(--pdp-t-color-80); } .pdp .pdp-specs__value { color: var(--pdp-t-color-text); } .pdp .pdp-specs__more { color: var(--pdp-t-color-80); } .pdp .pdp-quote__name, .pdp .pdp-quote__name-text { text-align: left; color: var(--pdp-kit-num); } .pdp .pdp-quote__text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-kit__title, .pdp .pdp-kit-promo__title, .pdp .pdp-about__title, .pdp .pdp-reviews__title, .pdp .pdp-slider__title { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); color: var(--pdp-t-color-title); } .pdp .pdp-kit-promo__text { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp .pdp-kit-item__change { color: var(--pdp-t-color-80); } .pdp .pdp-kit-promo__discount { color: var(--pdp-t-color-green); } .pdp .pdp-about__tab { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); text-align: center; text-transform: uppercase; } .pdp .text-block p { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-reviews-summary__value, .pdp .pdp-reviews-summary__subtitle { color: var(--pdp-t-color-text); } .pdp .pdp-reviews-summary__max, .pdp .pdp-reviews-summary__sep { color: var(--pdp-t-color-80); } .pdp .pdp-reviews-summary__bar-label, .pdp .pdp-reviews-summary__size-label { color: var(--pdp-t-color-80); } .pdp .pdp-reviews-summary__bar-count { color: var(--pdp-t-color-text); } .pdp .pdp-reviews-summary__size-label { font-size: var(--pdp-t-body16-fs); line-height: var(--pdp-t-body16-lh); } .pdp .pdp-review__name { color: var(--pdp-t-color-80); } .pdp .pdp-review__variant { color: var(--pdp-t-color-80); } .pdp .pdp-review__text { color: var(--pdp-t-color-text); } .pdp .pdp-reviews__page { color: var(--pdp-t-color-80); } .pdp .pdp-card__title, .pdp .pdp-card__title a { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-uc-fs); font-weight: var(--pdp-t-uc-fw); line-height: var(--pdp-t-uc-lh); } .pdp-card__body{ gap: var(--gap-4) } .pdp .pdp-card__price-old { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono12-fs); font-weight: var(--pdp-t-mono16-fw); line-height: var(--pdp-t-mono12-lh); text-decoration: line-through; color: var(--pdp-t-color-66); } .pdp-slider .pdp__container { margin-top: 0; } } @media screen and (max-width: 1023px) { .pdp, #pdpSizeModal.pdp-size-modal { --pdp-fs-title-lg: min(26 / var(--vw-screen) * 100 * 1vw, 26px); --pdp-fs-title-md: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-fs-body: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-lh-body: 1.4; --pdp-fs-body-sm: min(12 / var(--vw-screen) * 100 * 1vw, 12px); --pdp-lh-body-sm: 1.4; --pdp-fs-emphasis: min(16 / var(--vw-screen) * 100 * 1vw, 16px); --pdp-fs-ui: min(14 / var(--vw-screen) * 100 * 1vw, 14px); --pdp-fs-caption: min(12 / var(--vw-screen) * 100 * 1vw, 12px); } } @media screen and (max-width: 574px) { .pdp, #pdpSizeModal.pdp-size-modal { --pdp-fs-title-lg: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-typo--emphasis{ font-size: 12px; } } .pdp__container { width: 100%; max-width: min(var(--layout-width), 1920px - var(--layout-margin)); margin-right: auto; margin-left: auto; box-sizing: border-box; } .pdp-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-5, 5px); padding: min(130 / var(--vw-screen) * 100 * 1vw, 130px) 0 30px; font-family: var(--font-secondary); font-size: min(12 / var(--vw-screen) * 100 * 1vw, 12px); line-height: min(20 / var(--vw-screen) * 100 * 1vw, 20px); } .pdp-breadcrumbs__item { color: var(--pdp-text-tertiary); text-decoration: none; } .pdp-breadcrumbs__item:hover { color: var(--pdp-text); } .pdp-breadcrumbs__item--current { color: var(--pdp-text); } .pdp-breadcrumbs__sep { color: var(--pdp-text-tertiary); } .pdp__hero { display: grid; grid-template-columns: minmax(0, var(--pdp-col-left-share)) minmax(0, 1fr); column-gap: var(--pdp-col-gap); align-items: start; margin-bottom: var(--pdp-gap-section); width: 100%; max-width: none; } .pdp__hero-left { display: flex; flex-direction: column; gap: var(--gap-40); width: 100%; min-width: 0; } .pdp__hero-right { width: 100%; min-width: 0; position: sticky; top: 99px; align-self: start; } .pdp-gallery { width: 100%; max-width: none; } .pdp-gallery > .pdp-gallery__slider { display: none; overflow: hidden; } .pdp-gallery__slider:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; } .pdp-gallery__desktop { display: flex; align-items: flex-start; gap: var(--gap-20); width: 100%; } .pdp-gallery__frame { display: flex; flex: 0 0 var(--pdp-gallery-thumb); flex-direction: column; gap: var(--gap-8); width: var(--pdp-gallery-thumb); height: min(747 / var(--vw-screen) * 100 * 1vw, 747px); } .pdp-gallery__thumbs { display: flex; flex-direction: column; gap: var(--gap-8); flex: 1 1 auto; order: 1; height: 100%; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .pdp-gallery__thumbs::-webkit-scrollbar { width: 0; height: 0; } .pdp-gallery__thumb { display: block; width: 100%; padding: var(--gap-4); border: 1px solid transparent; border-radius: var(--pdp-radius); background: transparent; cursor: pointer; } .pdp-gallery__thumb:hover { border-color: #16161626; } .pdp-gallery__thumb--active { border-color: var(--pdp-accent-select); } .pdp-gallery__thumb img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--pdp-radius); } .pdp-gallery__stage { flex: 1 1 auto; width: auto; min-width: 0; } .pdp-gallery__stage-open, .pdp-gallery__slide-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; } .pdp-gallery__slide-open { height: 100%; } .pdp-gallery__image { display: block; width: 100%; height: auto; min-height: min(747 / var(--vw-screen) * 100 * 1vw, 747px); aspect-ratio: 558 / 747; object-fit: cover; border-radius: var(--pdp-radius); background: var(--pdp-surface); } .pdp-gallery__video { margin-top: auto; } .pdp-gallery__thumbs-scroll { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: min(28 / var(--vw-screen) * 100 * 1vw, 28px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: transparent; cursor: pointer; order: 2; } .pdp-gallery__thumbs-scroll img { display: block; width: 24px; height: 24px; transform: rotate(90deg); } .pdp-gallery__thumbs-scroll.pdp-gallery__thumbs-scroll--up img { transform: rotate(-90deg); } .pdp-gallery__thumbs-scroll.pdp-gallery__thumbs-scroll--up { order: 0; } .pdp-gallery__thumbs-scroll[hidden] { display: none; } .pdp-gallery__video { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: min(52 / var(--vw-screen) * 100 * 1vw, 52px); border: 0; border-radius: var(--pdp-radius); background: rgba(0, 0, 0, 0.4); cursor: pointer; order: 3; } .pdp-gallery__video-icon { display: block; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); margin: auto; background: var(--c-white); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Quote + delivery */ .pdp-aside-blocks { display: flex; flex-direction: column; gap: var(--gap-20); width: 100%; max-width: none; } .pdp-quote { display: flex; background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-quote__photo { flex: 0 0 min(161 / var(--vw-screen) * 100 * 1vw, 161px); } .pdp-quote__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--pdp-radius); } .pdp-quote__content{ padding: 25px; } .pdp-quote__label { margin: 0 0 var(--gap-8); color: var(--pdp-text-muted); text-transform: uppercase; } .pdp-quote__name { margin: 0 0 var(--gap-16); font-family: var(--font-primary); font-size: min(24 / var(--vw-screen) * 100 * 1vw, 24px); font-weight: 800; line-height: 1; color: var(--pdp-expert); } .pdp-quote__icon{ margin-top: 20px; } .pdp-quote__text { margin: 0; } .pdp-delivery { padding: min(32 / var(--vw-screen) * 100 * 1vw, 32px); background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-delivery__inner { display: flex; flex-direction: column; gap: 20px; } .pdp-delivery__title { margin: 0; color: var(--pdp-header-label); text-transform: uppercase; } .pdp-delivery__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .pdp-delivery__item { display: flex; align-items: flex-start; gap: var(--gap-12); } .pdp-delivery__icon { flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } /* Product info */ .pdp-info { display: flex; flex-direction: column; gap: 20px; width: 100%; } .pdp-info__header { display: flex; flex-direction: column; gap: 8px; } .pdp-info__title { margin: 0; color: var(--pdp-title); } .pdp-info__title-muted { color: var(--pdp-text-muted); } .pdp-info__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-16); margin-top: 0; } .pdp-info__rating { display: flex; align-items: center; gap: var(--gap-4); margin: 0; padding: 0; border: 0; background: none; font-family: var(--font-primary); color: inherit; cursor: pointer; text-align: left; } .pdp-info__rating-star { flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-info__rating-sep { color: var(--pdp-text-muted); } .pdp-info__copy { display: inline-flex; align-items: center; gap: var(--gap-6); border: 0; padding: 0; background: none; font-family: var(--font-secondary); font-size: min(12 / var(--vw-screen) * 100 * 1vw, 12px); color: var(--pdp-text-muted); cursor: pointer; } .pdp-info__copy-text { text-decoration: underline; text-underline-offset: 2px; } .pdp-info__copy-icon { flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-info__suit { margin: 0; padding-top: 12px; } .pdp-info__suit a { color: var(--pdp-title); text-decoration: underline; } /* Specs grid */ .pdp-specs { padding: 20px; background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-specs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-20) min(24 / var(--vw-screen) * 100 * 1vw, 24px); margin-bottom: var(--gap-16); } .pdp-specs__item { display: flex; align-items: flex-start; gap: var(--gap-10); } .pdp-specs__icon { flex-shrink: 0; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-specs__body { display: flex; flex-direction: column; min-width: 0; } .pdp-specs__label { margin: 0; text-transform: uppercase; color: var(--pdp-text-muted); } .pdp-specs__value { margin: 0; } .pdp-specs__more { color: var(--pdp-text-muted); text-decoration: underline; font-weight: var(--pwd-fw-400);; } /* Variants */ .pdp-variants { display: flex; flex-direction: column; gap: var(--gap-24); overflow: visible; } .pdp-variants__group { display: flex; flex-direction: column; gap: 4px; overflow: visible; } .pdp-variants__row { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-16); } .pdp-variants__label { font-weight: 600; } .pdp-variants__guide { color: var(--pdp-text-muted); text-decoration: underline; font-weight: var(--pwd-fw-400); } .pdp-variants__group--kit { display: flex; flex-direction: column; gap: 8px; } .pdp-variants__group--kit .pdp-kit-item { width: 100%; } .pdp-variants__group--kit .pdp-solution-item__field { margin-top: 6px; } .pdp-variants__group--kit .pdp-solution-item__price { margin-top: 2px; } .pdp-variants__colors { display: flex; flex-wrap: wrap; gap: var(--gap-16); } .pdp-variants__colors.swiper{ margin-left: 0; } .pdp-color { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .pdp-color__input { position: absolute; opacity: 0; pointer-events: none; } .pdp-color__swatch { display: block; box-sizing: border-box; width: 101px; max-width: 100%; padding: 4px; border: 1px solid transparent; border-radius: var(--pdp-radius); } .pdp-color:hover .pdp-color__swatch { border-color: #16161626; } .pdp-color__img { display: block; width: 101px; height: 32px; max-width: 100%; object-fit: cover; border-radius: 1px; } .pdp-color__input:checked + .pdp-color__swatch { border-color: var(--pdp-accent-select); } .pdp-color__name { text-align: center; font-weight: var(--pdp-fw-ui); } /* dropdown-list — Figma 135:1274 */ .pdp-size-dropdown { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; } .pdp-size-dropdown__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-10); box-sizing: border-box; width: 100%; min-height: min(48 / var(--vw-screen) * 100 * 1vw, 48px); padding: 0 min(18 / var(--vw-screen) * 100 * 1vw, 18px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease; } .pdp-size-dropdown--selected .pdp-size-dropdown__trigger { border-color: var(--pdp-accent-select); } .pdp-size-dropdown__value { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--gap-4); min-width: 0; } .pdp-size-dropdown__value-stock { color: var(--pdp-kit-num); } .pdp-size-dropdown__value--placeholder { color: rgba(22, 22, 22, 0.4); } .pdp-size-dropdown__arrow, .pdp-kit-modal__model-arrow, .pdp-review-modal__dropdown-arrow, .pdp-gallery-lightbox__thumbs-more-arrow { flex-shrink: 0; width: min(10 / var(--vw-screen) * 100 * 1vw, 10px); height: min(6 / var(--vw-screen) * 100 * 1vw, 6px); color: var(--pdp-text); transition: transform 0.25s ease; } .pdp-size-dropdown--open .pdp-size-dropdown__arrow { transform: rotate(180deg); } .pdp-size-dropdown--open .pdp-size-dropdown__list { display: flex; } .pdp-size-dropdown__list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; display: none; flex-direction: column; width: 100%; margin: 0; padding: 0; border-radius: var(--pdp-radius); background: var(--pdp-page-bg); box-shadow: 0 4px 4px 0 #0000001a; overflow: hidden; } .pdp-size-dropdown__item { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-10); width: 100%; min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0 min(18 / var(--vw-screen) * 100 * 1vw, 18px); border: 0; background: var(--pdp-page-bg); color: var(--pdp-text); font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.25s ease; } .pdp-size-dropdown__item:not(.pdp-size-dropdown__item--disabled):hover { background: var(--pdp-surface); } .pdp-size-dropdown__item--checked { justify-content: space-between; } .pdp-size-dropdown__item--disabled { cursor: not-allowed; } .pdp-size-dropdown__item-body { display: inline-flex; align-items: center; gap: var(--gap-4); min-width: 0; } .pdp-size-dropdown__label { margin: 0; } .pdp-size-dropdown__item--disabled .pdp-size-dropdown__label { color: rgba(22, 22, 22, 0.4); text-decoration: line-through; } .pdp-size-dropdown__stock { color: var(--pdp-kit-num); } .pdp-size-dropdown__check { display: none; flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); color: var(--pdp-text); } .pdp-size-dropdown__item--checked .pdp-size-dropdown__check { display: block; } .pdp-variants__hint { margin: 0; color: var(--pdp-text-muted); } /* Visibility helpers */ .pdp-mob-only { display: none !important; } .pdp-desk-only { display: block; } .pdp-buy__row.pdp-desk-only { display: flex !important; } .pdp-about__tabs, .pdp-about__tab-panels { display: none; } @media screen and (min-width: 575px) { .pdp-mob-only { display: none !important; } .pdp-desk-only { display: block; } .pdp-buy__row.pdp-desk-only { display: flex !important; } .pdp-kit__list.swiper .swiper-wrapper { display: flex; flex-direction: column; gap: var(--gap-8); transform: none !important; } .pdp-kit__list.swiper .swiper-slide { width: 100%; height: auto; } .pdp-kit-promo__body { flex-direction: row; align-items: flex-start; } .pdp-kit-promo__actions { order: 1; flex: 1 1 0; } .pdp-kit-promo__prices { order: 2; flex: 0 0 auto; } } /* Buy block */ .pdp-buy { display: flex; flex-direction: column; gap: 16px; width: 100%; } .pdp-buy__row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%; } .pdp-buy__btn.btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-8); min-width: 0; min-height: 56px; padding: 0 15px; border: 0; border-radius: var(--pdp-radius); } .pdp-buy__btn-icon { flex-shrink: 0; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-buy__btn--secondary.btn { background-color: var(--pdp-surface); color: var(--pdp-t-color-80); } .pdp-buy__btn--primary.btn { background-color: var(--pdp-accent); color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--primary.btn .btn__text { color: var(--pdp-btn-on-inverse); } .pdp .pdp-kit-promo__btn--primary.btn { background-color: var(--pdp-accent); color: var(--pdp-btn-on-inverse); } .pdp .pdp-kit-promo__btn--primary.btn .btn__text { color: var(--pdp-btn-on-inverse); } .pdp .pdp-kit-promo__btn--secondary.btn { background-color: var(--pdp-text); color: var(--pdp-btn-on-inverse); } .pdp .pdp-kit-promo__btn--secondary.btn .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--primary.btn::after, .pdp-buy__btn--secondary.btn::after, .pdp-kit-promo__btn.btn::after, .pdp-kit-modal__btn--primary.btn::after, .pdp-kit-modal__btn--secondary.btn::after, .pdp-kit-modal__btn--cart.pdp-buy__btn.btn::after, .pdp-card__hover-cart.pdp-buy__btn.btn::after, .pdp-reviews-summary .pdp-reviews__submit.btn::after { display: none; } .pdp-buy__btn--primary.btn:hover, .pdp .pdp-kit-promo__btn--primary.btn:hover, .pdp-kit-modal__btn--primary.btn:hover, .pdp-kit-modal__btn--cart.pdp-buy__btn.btn:hover, .pdp-card__hover-cart.pdp-buy__btn.btn:hover { background-color: var(--pdp-cart-btn-hover); color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--primary.btn:hover .btn__text, .pdp .pdp-kit-promo__btn--primary.btn:hover .btn__text, .pdp-kit-modal__btn--primary.btn:hover .btn__text, .pdp-kit-modal__btn--cart.pdp-buy__btn.btn:hover .btn__text, .pdp-card__hover-cart.pdp-buy__btn.btn:hover .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--primary.btn:active, .pdp .pdp-kit-promo__btn--primary.btn:active, .pdp-kit-modal__btn--primary.btn:active, .pdp-kit-modal__btn--cart.pdp-buy__btn.btn:active, .pdp-card__hover-cart.pdp-buy__btn.btn:active { background-color: var(--pdp-cart-btn-active); color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--primary.btn:active .btn__text, .pdp .pdp-kit-promo__btn--primary.btn:active .btn__text, .pdp-kit-modal__btn--primary.btn:active .btn__text, .pdp-kit-modal__btn--cart.pdp-buy__btn.btn:active .btn__text, .pdp-card__hover-cart.pdp-buy__btn.btn:active .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-reviews-summary .pdp-reviews__submit.btn:hover { background-color: var(--pdp-accent); color: var(--pdp-btn-on-inverse); } .pdp-reviews-summary .pdp-reviews__submit.btn:hover .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-reviews-summary .pdp-reviews__submit.btn:active { background-color: var(--pdp-cart-btn-active); color: var(--pdp-btn-on-inverse); } .pdp-reviews-summary .pdp-reviews__submit.btn:active .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--secondary.btn:hover, .pdp-kit-modal__btn--secondary.btn:hover, .pdp .pdp-kit-promo__btn--secondary.btn:hover { background-color: var(--pdp-accent); color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--secondary.btn:hover .btn__text, .pdp-kit-modal__btn--secondary.btn:hover .btn__text, .pdp .pdp-kit-promo__btn--secondary.btn:hover .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--secondary.btn:active, .pdp-kit-modal__btn--secondary.btn:active, .pdp .pdp-kit-promo__btn--secondary.btn:active { background-color: var(--pdp-cart-btn-active); color: var(--pdp-btn-on-inverse); } .pdp-buy__btn--secondary.btn:active .btn__text, .pdp-kit-modal__btn--secondary.btn:active .btn__text, .pdp .pdp-kit-promo__btn--secondary.btn:active .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-buy__price-col { display: flex; flex: 0 0 auto; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-width: 140px; margin-left: auto; } .pdp-buy__badge { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 12px; border-radius: 12px; background: var(--pdp-badge-price); color: var(--pdp-badge-price-text); font-size: 14px; } .pdp-buy__badge-info { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: help; } .pdp-buy__badge-info:focus { outline: none; } .pdp-buy__badge-info-icon { display: block; flex-shrink: 0; width: min(10 / var(--vw-screen) * 100 * 1vw, 10px); height: min(10 / var(--vw-screen) * 100 * 1vw, 10px); } .pdp-buy__badge-tooltip { position: absolute; left: 50%; bottom: calc(100% + min(8 / var(--vw-screen) * 100 * 1vw, 8px)); z-index: 20; display: none; width: max-content; max-width: min(260 / var(--vw-screen) * 100 * 1vw, 260px); padding: min(12 / var(--vw-screen) * 100 * 1vw, 12px) min(16 / var(--vw-screen) * 100 * 1vw, 16px); border-radius: var(--pdp-radius); background: #161616; color: #fff; font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); text-align: left; white-space: normal; pointer-events: none; transform: translateX(-50%); } .pdp-buy__badge-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: min(6 / var(--vw-screen) * 100 * 1vw, 6px) solid transparent; border-top-color: #161616; } .pdp-buy__badge-info:hover .pdp-buy__badge-tooltip, .pdp-buy__badge-info:focus-visible .pdp-buy__badge-tooltip { display: block; } .pdp:has(.pdp-buy__badge-info:hover, .pdp-buy__badge-info:focus-visible) { overflow-x: clip; } .pdp-buy__badge-icon { flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-buy__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .pdp-buy__price-old { color: var(--pdp-text-muted); text-decoration: line-through; } .pdp-buy__price-top { display: flex; align-items: baseline; gap: 8px; } .pdp-buy__discount-badge { font-family: var(--pdp-font-secondary); font-size: 11px; font-weight: 500; color: #fff; background: var(--pdp-accent); border-radius: 3px; padding: 2px 6px; white-space: nowrap; } .pdp-buy__price { font-family: var(--font-secondary); font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .pdp-buy__installment { width: 100%; padding: 12px 16px; border: 1px solid rgba(22, 22, 22, 0.15); border-radius: var(--pdp-radius); box-sizing: border-box; } /* Kit */ .pdp-kit { margin-bottom: var(--pdp-gap-section); } .pdp-kit__title { margin: 0 0 var(--gap-24); color: var(--pdp-text); } .pdp-kit__layout { display: grid; grid-template-columns: minmax(0, var(--pdp-col-left-share)) minmax(0, 1fr); gap: var(--pdp-col-gap); align-items: start; width: 100%; max-width: none; } .pdp-kit__layout .swiper{ margin-left: 0; } .pdp-kit-promo { display: flex; flex-direction: column; gap: var(--gap-20); padding: min(32 / var(--vw-screen) * 100 * 1vw, 32px); background: var(--pdp-promo-bg); border-radius: var(--pdp-radius); position: sticky; top: 99px; align-self: start; } .pdp-kit-promo__intro { display: flex; flex-direction: column; gap: var(--gap-20); } .pdp-kit-promo__title { margin: 0; color: var(--pdp-title); } .pdp-kit-promo__text { margin: 0; } .pdp-kit-promo__body { display: flex; align-items: flex-start; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); } .pdp-kit-promo__actions { flex: 1 1 0; display: flex; flex-direction: column; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); min-width: 0; } .pdp-kit-promo__btn.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-8); width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); padding: 0 min(20 / var(--vw-screen) * 100 * 1vw, 20px); border: 0; border-radius: var(--pdp-radius); text-align: center; } .pdp-kit-promo__btn-icon { flex-shrink: 0; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-kit-promo__prices { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: var(--gap-4); } .pdp-kit-promo__prices-top { display: flex; align-items: center; gap: var(--gap-8); } .pdp-kit-promo__price-old { color: var(--pdp-text-muted); text-decoration: line-through; } .pdp-kit-promo__discount { padding: 2px 6px; border-radius: 12px; background: var(--pdp-badge-price); color: var(--pdp-badge-price-text); } .pdp-kit-promo__price { font-family: var(--font-secondary); font-size: min(24 / var(--vw-screen) * 100 * 1vw, 24px); line-height: 1.2; white-space: nowrap; } .pdp-kit__list { display: flex; flex-direction: column; gap: var(--gap-8); width: 100%; max-width: none; min-width: 0; } .pdp-kit-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--gap-12); row-gap: var(--gap-8); padding: min(10 / var(--vw-screen) * 100 * 1vw, 10px) min(12 / var(--vw-screen) * 100 * 1vw, 12px); background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-kit-item__header { display: contents; } .pdp-kit-item__num { grid-row: 1 / span 2; grid-column: 1; align-self: start; display: block; font-family: var(--font-primary); font-size: min(97 / var(--vw-screen) * 100 * 1vw, 97px); font-weight: 800; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; color: var(--pdp-kit-num); } .pdp-kit-item__head { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: var(--gap-4); min-width: 0; } .pdp-kit-item__product { grid-row: 2; grid-column: 2; display: flex; gap: var(--gap-16); min-width: 0; } .pdp-kit-item__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-12); } .pdp-kit-item__layer { margin: 0; } .pdp-kit-item__desc { margin: 0; color: var(--pdp-text-muted); } .pdp-kit-item__media { flex: 0 0 auto; } .pdp-kit-item__img { display: block; width: min(72 / var(--vw-screen) * 100 * 1vw, 72px); height: min(90 / var(--vw-screen) * 100 * 1vw, 90px); object-fit: cover; border-radius: var(--pdp-radius); background: #fff; } .pdp-kit-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap-4); min-width: 0; } .pdp-kit-item__name { margin: 0 0 var(--gap-4); color: var(--pdp-title); } .pdp-kit-item__meta { margin: 0; color: var(--pdp-text-muted); } .pdp-kit-item__change { display: inline-flex; align-self: flex-start; justify-content: center; width: max-content; max-width: 100%; margin-top: var(--gap-8); padding: 6px 10px; border: 0; border-radius: var(--pdp-radius); background-color: var(--pdp-kit-change-bg); color: var(--pdp-text); font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s ease; } .pdp-kit-item__change::after { display: none; } .pdp .pdp-kit-item__change:hover { background-color: var(--pdp-kit-change-bg-hover); } .pdp .pdp-kit-item__change:active { background-color: var(--pdp-kit-change-bg-active); } .pdp-kit-item__btn { margin-top: var(--gap-8); } .pdp-kit-item__viewing { display: inline-flex; align-items: center; gap: var(--gap-4); margin: 0; color: var(--pdp-text); white-space: nowrap; } .pdp-kit-item__viewing-icon { flex-shrink: 0; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-kit-item__viewing-mob { display: none; margin: min(12 / var(--vw-screen) * 100 * 1vw, 12px) 0 0; color: var(--pdp-text); text-align: center; } .pdp .pdp-kit-item__viewing-mob { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp-kit-item__btn.btn { background: #f5f5f5; color: rgba(22, 22, 22, 0.8); border: 0; } /* Модалка «Настроить комплект» — Figma 124:1267 */ .pdp-kit-modal { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); visibility: hidden; pointer-events: none; } .pdp-kit-modal--open { display: flex !important; visibility: visible; pointer-events: auto; } .pdp-kit-modal[hidden]:not(.pdp-kit-modal--open) { display: none !important; } .pdp-kit-modal__overlay { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.7); } .pdp-kit-modal__shell { position: relative; z-index: 1; display: flex; align-items: flex-start; width: min(1174px + 48px + 8px, 100%); max-width: 100%; max-height: calc(100dvh - 48px); } .pdp-kit-modal__dialog { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; width: min(1174px, 100%); max-height: calc(100dvh - 48px); padding: 40px; background: var(--c-white); border-radius: var(--pdp-radius); overflow: auto; } .pdp-kit-modal__close { flex-shrink: 0; position: static; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-kit-modal__inner { display: flex; flex-direction: column; gap: min(40 / var(--vw-screen) * 100 * 1vw, 40px); } .pdp-kit-modal__layers { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; column-gap: min(40 / var(--vw-screen) * 100 * 1vw, 40px); width: 100%; } .pdp-kit-modal__layer { display: flex; align-items: center; gap: 17px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } .pdp-kit-modal__layer-num { flex-shrink: 0; width: 75px; font-family: var(--font-primary); font-size: 100px; font-weight: 800; line-height: 0.88; color: rgba(222, 52, 29, 0.4); } .pdp-kit-modal__layer--active .pdp-kit-modal__layer-num { color: var(--pdp-kit-num); } .pdp-kit-modal__layer-text { display: flex; flex-direction: column; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); } .pdp-kit-modal__layer-title { margin: 0; color: rgba(22, 22, 22, 0.4); font-size: var(--ui-font-size-4xl); } .pdp-kit-modal__layer--active .pdp-kit-modal__layer-title, .pdp-kit-modal__layer--active .pdp-kit-modal__layer-desc { color: var(--pdp-text); } .pdp-kit-modal__layer-desc { margin: 0; color: rgba(22, 22, 22, 0.4); font-size: var(--ui-size-lg); } .pdp-kit-modal__layer-sep { display: block; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(82 / var(--vw-screen) * 100 * 1vw, 82px); margin: 0; padding: 0; border: 0; background: none; font-size: 0; line-height: 0; color: transparent; user-select: none; } .pdp-kit-modal__layer-sep::before { content: ""; display: block; width: 100%; height: 100%; background: var(--pdp-kit-sep-color, #f5f5f5); clip-path: polygon(0 0, 100% 50%, 0 100%); } .pdp-kit-modal__content { min-width: 0; } .pdp-kit-modal__pane { display: none; } .pdp-kit-modal__pane--active { display: block; } .pdp-kit-modal__pane-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: min(40 / var(--vw-screen) * 100 * 1vw, 40px); align-items: stretch; } .pdp-kit-modal__gallery-mob { display: none; } .pdp-kit-modal__gallery-frame { display: flex; gap: var(--gap-20); } .pdp-kit-modal__thumbs { display: flex; flex-direction: column; gap: var(--gap-8); width: var(--pdp-gallery-thumb); max-height: min(588 / var(--vw-screen) * 100 * 1vw, 588px); overflow-y: auto; } .pdp-kit-modal__thumb { display: block; width: 100%; padding: var(--gap-4); border: 1px solid transparent; border-radius: var(--pdp-radius); background: transparent; cursor: pointer; } .pdp-kit-modal__thumb--active { border-color: var(--pdp-accent-select); } .pdp-kit-modal__thumb img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--pdp-radius); } .pdp-kit-modal__stage { flex: 1; min-width: 0; } .pdp-kit-modal__image { display: block; width: 100%; max-width: min(439 / var(--vw-screen) * 100 * 1vw, 439px); height: auto; aspect-ratio: 439 / 588; object-fit: cover; border-radius: var(--pdp-radius); background: var(--pdp-surface); } .pdp-kit-modal__panel { display: flex; flex-direction: column; justify-content: space-between; gap: min(40 / var(--vw-screen) * 100 * 1vw, 40px); min-height: 100%; } .pdp-kit-modal__panel-top { display: flex; flex-direction: column; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); } .pdp-kit-modal__product-title { margin: 0; color: var(--pdp-title); } .pdp-kit-modal__product-accent { color: var(--pdp-text-muted); } .pdp-kit-modal__price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .pdp-kit-modal__price-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pdp-kit-modal__price-old { color: var(--pdp-text-muted); text-decoration: line-through; } .pdp-kit-modal__price-badge { padding: 0 6px; border-radius: 12px; background: #e8f5e9; color: #3a853e; } .pdp-kit-modal__price { margin: 0; font-family: var(--font-secondary); } .pdp-kit-modal__field { display: flex; flex-direction: column; gap: var(--gap-4); } .pdp-kit-modal__field-label { font-weight: 600; } .pdp-kit-modal__model { position: relative; width: 100%; } .pdp-kit-modal__model-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-10); width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); font-family: inherit; text-align: left; cursor: pointer; } .pdp-kit-modal__model-value { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pdp-kit-modal__model--open .pdp-kit-modal__model-arrow { transform: rotate(180deg); } .pdp-kit-modal__model-list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 5; display: none; flex-direction: column; width: 100%; padding: 4px 0; border-radius: var(--pdp-radius); background: var(--c-white); box-shadow: 0 8px 24px rgba(22, 22, 22, 0.12); } .pdp-kit-modal__model--open .pdp-kit-modal__model-list { display: flex; } .pdp-kit-modal__model-item { display: block; width: 100%; padding: 12px 18px; border: 0; background: transparent; color: var(--pdp-text); font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); font-style: normal; line-height: var(--pdp-t-body16-lh); text-align: left; cursor: pointer; } .pdp-kit-modal__model-item:hover, .pdp-kit-modal__model-item--checked { background: var(--pdp-surface); } .pdp-kit-modal__colors { display: flex; flex-wrap: wrap; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); } .pdp-kit-modal__color { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-4); cursor: pointer; } .pdp-kit-modal__color-input { position: absolute; opacity: 0; pointer-events: none; } .pdp-kit-modal__color-swatch { display: block; box-sizing: border-box; padding: var(--gap-4); border: 1px solid transparent; border-radius: var(--pdp-radius); } .pdp-kit-modal__color:hover .pdp-kit-modal__color-swatch { border-color: #16161626; } .pdp-kit-modal__color-input:checked + .pdp-kit-modal__color-swatch { border-color: var(--pdp-accent-select); } .pdp-kit-modal__color-name { text-align: center; font-weight: var(--pdp-fw-ui); } .pdp-kit-modal__sizes { display: flex; flex-wrap: wrap; gap: var(--gap-4); } .pdp-kit-modal__size { min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0 min(20 / var(--vw-screen) * 100 * 1vw, 20px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); font-style: normal; line-height: var(--pdp-t-body16-lh); cursor: pointer; } .pdp-kit-modal__size:not(:disabled):not(.pdp-kit-modal__size--active):hover { border-color: #16161626; } .pdp-kit-modal__size--active { border-color: var(--pdp-accent-select); } .pdp-kit-modal__size:disabled { color: rgba(22, 22, 22, 0.4); text-decoration: line-through; cursor: not-allowed; } .pdp-kit-modal__actions { display: flex; gap: var(--gap-10); } .pdp-kit-modal__btn.btn { flex: 1 1 0; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); border: 0; border-radius: var(--pdp-radius); justify-content: center; } .pdp-kit-modal__btn--secondary.btn { background: var(--pdp-surface); color: rgba(22, 22, 22, 0.8); } .pdp-kit-modal__btn--primary.btn { background: var(--pdp-accent); color: var(--c-white); } .pdp-kit-modal__btn--primary.btn .btn__text { color: var(--c-white); } .pdp-kit-modal__actions--cart { width: 100%; } .pdp-kit-modal__btn--cart.pdp-buy__btn.btn { flex: 1 1 100%; width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); } body.pdp-kit-modal-open, body.pdp-size-modal-open, body.pdp-cart-drawer-open { overflow: hidden; } .pdp-size-modal { position: fixed; inset: 0; z-index: 10060; display: none; align-items: center; justify-content: center; padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); visibility: hidden; pointer-events: none; } .pdp-size-modal--open { display: flex !important; visibility: visible; pointer-events: auto; } .pdp-size-modal[hidden]:not(.pdp-size-modal--open) { display: none !important; } .pdp-size-modal__overlay { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.7); } .pdp-size-modal__shell { position: relative; z-index: 1; display: flex; align-items: flex-start; width: min(520px + 48px + 8px, 100%); max-width: 100%; max-height: calc(100dvh - 48px); } .pdp-size-modal__dialog { flex: 1 1 auto; display: flex; flex-direction: column; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); width: min(520px, 100%); max-height: calc(100dvh - 48px); padding: min(32 / var(--vw-screen) * 100 * 1vw, 32px); background: var(--c-white); border-radius: var(--pdp-radius); overflow: auto; } .pdp-size-modal__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-size-modal__title { margin: 0; color: var(--pdp-title); } #pdpSizeModal.pdp-size-modal .pdp-size-modal__head { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__head-label { color: var(--pdp-text); } #pdpSizeModal.pdp-size-modal .pdp-size-modal__table-link { flex-shrink: 0; color: var(--pdp-text); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--pwd-fw-400); } #pdpSizeModal.pdp-size-modal .pdp-size-modal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__size { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: none; min-width: 0; height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0 min(8 / var(--vw-screen) * 100 * 1vw, 8px); margin: 0; border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); text-align: center; cursor: pointer; appearance: none; transition: background-color 0.25s ease, border-color 0.25s ease; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__size:not(.pdp-size-modal__size--disabled):hover { background: #ebebeb; border-color: #16161626; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__size--active { background: var(--c-white); border-color: var(--pdp-accent-select); } #pdpSizeModal.pdp-size-modal .pdp-size-modal__size--disabled { color: rgba(22, 22, 22, 0.35); cursor: not-allowed; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__size--disabled::after { content: ''; position: absolute; inset: 4px; background: linear-gradient( to top right, transparent calc(50% - 0.5px), rgba(22, 22, 22, 0.28) calc(50% - 0.5px), rgba(22, 22, 22, 0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); pointer-events: none; } .pdp-size-modal__submit.pdp-buy__btn.btn { width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); margin-top: min(4 / var(--vw-screen) * 100 * 1vw, 4px); } .pdp-size-modal__submit:disabled { opacity: 0.45; cursor: not-allowed; } /* About — ширина левой колонки как у hero (--pdp-col-left-share) */ .pdp-about { --pdp-about-gap-head-body: 10px; --pdp-about-gap-sections: 20px; --pdp-about-gap-kv-rows: 10px; box-sizing: border-box; width: var(--pdp-col-left-share); max-width: 100%; margin-bottom: var(--pdp-gap-section); } .pdp-about__title { margin: 0 0 var(--gap-20); color: var(--pdp-title); } .pdp-about__panel { display: flex; flex-direction: column; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); padding: min(32 / var(--vw-screen) * 100 * 1vw, 32px); background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-about__tabs { display: flex; flex-wrap: nowrap; gap: 20px; min-width: 0; /* иначе flex-ребёнок растягивается по контенту и overflow-x не срабатывает */ margin: 0 0 0; padding: 0; border-bottom: 1px solid rgba(22, 22, 22, 0.12); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-about__tabs::-webkit-scrollbar { display: none; } .pdp-about__tab { position: relative; flex-shrink: 0; padding: 0 0 4px; border: 0; background: none; color: #999; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.2; text-transform: uppercase; cursor: pointer; } .pdp-about__tab--active { color: #161616; font-weight: 700; } .pdp-about__tab--active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--pdp-accent-select); } .pdp-about__tab-panel[hidden] { display: none; } .pdp-variants__size-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--pdp-card-size-w); height: var(--pdp-card-size-h); padding: 0; border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); font-family: inherit; font-size: var(--pdp-card-size-fs); line-height: 1.2; cursor: pointer; } .pdp-variants__size-chip:not(.pdp-variants__size-chip--disabled):not(.pdp-variants__size-chip--active):hover { border-color: #16161626; } .pdp-variants__size-chip--active { border-color: var(--pdp-accent-select); background: var(--c-white); } .pdp-variants__size-chip--disabled { color: rgba(22, 22, 22, 0.35); text-decoration: line-through; cursor: not-allowed; } .pdp-variants__sizes.swiper { overflow: hidden; width: 100%; margin-left: 0; } .pdp-variants__sizes .swiper-slide { width: auto; height: auto; } .pdp-about__accordions { display: flex; flex-direction: column; gap: var(--pdp-about-gap-sections); } .pdp-accordion { border: 0; } .pdp-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); padding: 0; cursor: pointer; list-style: none; } .pdp-accordion__summary::-webkit-details-marker { display: none; } .pdp-accordion__label { flex: 1; color: var(--pdp-header-label); text-transform: uppercase; } .pdp-accordion__chevron { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: min(10 / var(--vw-screen) * 100 * 1vw, 10px); height: min(6 / var(--vw-screen) * 100 * 1vw, 6px); color: #161616; transition: transform 0.35s ease; } .pdp-accordion__chevron svg { display: block; width: 100%; height: 100%; } .pdp-accordion[open] .pdp-accordion__chevron, .pdp-accordion.pdp-accordion--open .pdp-accordion__chevron { transform: rotate(180deg); } .pdp-accordion__content { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .pdp-accordion__inner { min-height: 0; } .pdp-accordion__body { padding-top: var(--pdp-about-gap-head-body, 10px); } .pdp-accordion__body p { margin: 0 0 var(--gap-12); font-family: var(--pdp-font-primary); font-size: 16px; font-weight: var(--pwd-fw-400); } .pdp-accordion__body p:last-child { margin-bottom: 0; } .pdp-about__kv { margin: 0; } .pdp-about__kv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-12); align-items: start; } .pdp-about__kv-row + .pdp-about__kv-row { margin-top: var(--pdp-about-gap-kv-rows, 10px); } .pdp-about__kv-term { margin: 0; border-bottom: 1px solid rgba(22, 22, 22, 0.12); color: var(--pdp-text-muted); font-weight: var(--pwd-fw-400); } .pdp-about__kv-value { margin: 0; padding-bottom: var(--gap-8); color: var(--pdp-text); font-weight: var(--pwd-fw-400); } .pdp-about__list { margin: 0; padding: 0 0 0 1.15em; list-style: disc; } .pdp-about__list li { margin: 0 0 var(--pdp-about-gap-kv-rows, 10px); } .pdp-about__list li:last-child { margin-bottom: 0; } .pdp-about__text p { margin: 0; } .pdp .pdp-about__text, .pdp .pdp-about__text p { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body14-fs); font-weight: var(--pdp-t-body14-fw); line-height: var(--pdp-t-body14-lh); } .pdp-about__text p:last-child { margin-bottom: 0; } /* Reviews */ .pdp-reviews { margin-bottom: 80px; } .pdp-reviews__title { margin: 0 0 var(--gap-20); color: var(--pdp-title); } .pdp-reviews__layout { display: grid; grid-template-columns: minmax(0, var(--pdp-col-left-share)) minmax(0, var(--pdp-reviews-side-w)); column-gap: var(--pdp-col-gap); align-items: start; width: 100%; max-width: none; } .pdp-reviews__main { min-width: 0; } .pdp-reviews-summary { box-sizing: border-box; width: 100%; max-width: var(--pdp-reviews-side-w); display: flex; flex-direction: column; gap: 20px; min-height: 100%; } .pdp-reviews-summary .pdp-reviews__submit { width: 100%; margin-top: 20px; padding: min(15 / var(--vw-screen) * 100 * 1vw, 15px) min(20 / var(--vw-screen) * 100 * 1vw, 20px); background-color: var(--pdp-reviews-submit-bg); color: var(--pdp-btn-on-inverse); border: 0; justify-content: center; } .pdp-reviews-summary .pdp-reviews__submit .btn__text { color: var(--pdp-btn-on-inverse); } .pdp-reviews-summary__score { display: flex; align-items: center; gap: var(--gap-8); color: var(--pdp-title); } .pdp-reviews-summary__star { flex-shrink: 0; width: 14px; height: 13px; } .pdp-reviews-summary__bars { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 20px; border-top: 1px solid #1616161a; } .pdp-reviews-summary__bar-row { display: grid; grid-template-columns: min(72 / var(--vw-screen) * 100 * 1vw, 72px) 1fr min(24 / var(--vw-screen) * 100 * 1vw, 24px); align-items: center; gap: var(--gap-12); color: var(--pdp-text-muted); } .pdp-reviews-summary__size-bars { display: flex; flex-direction: column; gap: var(--gap-12); } .pdp-reviews-summary__size-row { display: flex; flex-direction: column; gap: var(--gap-8); color: var(--pdp-text-muted); } .pdp-reviews-summary__size-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-12); } .pdp-reviews-summary__size-label { flex: 1; min-width: 0; } .pdp-reviews-summary__size-value { flex-shrink: 0; color: var(--pdp-text); } .pdp-reviews-summary__size-row .pdp-reviews-summary__bar-track { width: 100%; } .pdp-reviews-summary__bar-track { display: block; height: min(8 / var(--vw-screen) * 100 * 1vw, 8px); background: rgba(22, 22, 22, 0.08); border-radius: var(--pdp-radius); overflow: hidden; } .pdp-reviews-summary__bar-fill { display: block; height: 100%; width: var(--pdp-bar, 0%); background: var(--pdp-accent); border-radius: inherit; } .pdp-reviews-summary__subtitle { margin: 0; padding-top: 20px; border-top: 1px solid #1616161a; color: var(--pdp-title); } .pdp-reviews__list { display: flex; flex-direction: column; gap: var(--gap-20); margin-bottom: var(--gap-24); } .pdp-review { padding: min(32 / var(--vw-screen) * 100 * 1vw, 32px); background: var(--pdp-surface); border-radius: var(--pdp-radius); } .pdp-review__head { margin-bottom: var(--gap-16); } .pdp-review__author { display: flex; align-items: center; gap: var(--gap-16); margin-bottom: var(--gap-8); } .pdp-review__name { color: var(--pdp-text-muted); } .pdp-review__stars { display: inline-flex; align-items: center; gap: 2px; } .pdp-review__star { flex-shrink: 0; width: 14px; height: 13px; } .pdp-review__star--empty { opacity: 0.2; } .pdp-review__variant { margin: 0; color: var(--pdp-text-muted); } .pdp-review__text { margin: 0; } .pdp-review__attach { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap-10); margin-top: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-review__attach-img { display: block; flex-shrink: 0; width: var(--pdp-review-photo-size); height: var(--pdp-review-photo-size); object-fit: cover; border-radius: var(--pdp-radius); } .pdp-review__attach-more { color: var(--pdp-text-tertiary); } .pdp-review__photos { display: flex; align-items: flex-end; gap: var(--gap-10); margin-top: var(--gap-16); } .pdp-review__photos.swiper .swiper-wrapper { display: flex; gap: var(--gap-10); transform: none !important; } .pdp-review__photos.swiper .swiper-slide { width: auto; height: auto; } .pdp-review__photo { width: var(--pdp-review-photo-size); height: var(--pdp-review-photo-size); background: #e4e4e4; border-radius: var(--pdp-radius); } .pdp-review__photo-label { color: var(--pdp-text-tertiary); } .pdp-reviews__pager { display: flex; align-items: center; justify-content: space-between; } .pdp-reviews__arrow, .pdp-slider__arrow { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background-color: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-nav__svg { display: block; width: 30%; height: auto; } .pdp-reviews__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: min(7 / var(--vw-screen) * 100 * 1vw, 7px); } .pdp-reviews__page { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 1px solid transparent; border-radius: var(--pdp-radius); background: none; font-family: var(--font-secondary); font-size: min(12 / var(--vw-screen) * 100 * 1vw, 12px); line-height: 1; color: var(--pdp-text-muted); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .pdp-reviews__page:hover, .pdp-reviews__page--active { border-color: #16161626; color: var(--pdp-text); } .pdp-reviews__page--ellipsis { border-color: transparent; color: var(--pdp-text-muted); cursor: default; pointer-events: none; } /* Sliders — карточки каталога */ .pdp-slider { padding: min(39 / var(--vw-screen) * 100 * 1vw, 39px) 0 min(56 / var(--vw-screen) * 100 * 1vw, 56px); background: var(--pdp-surface); } .pdp-slider--viewed { background: var(--pdp-page-bg); } .pdp-slider__title { margin: 0 0 var(--gap-40); color: var(--pdp-title); } .pdp-slider__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-20); align-items: stretch; } /* Product card — «Похожие» / «Вы смотрели» */ .pdp-card { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative; z-index: 0; --pdp-card-hover-scale-x: 1; --pdp-card-hover-scale-y: 1; } .pdp-card__media { position: relative; width: 100%; aspect-ratio: 315 / 422; border-radius: var(--pdp-radius); overflow: visible; background: var(--pdp-page-bg); transform-origin: center bottom; transition: transform 0.25s ease, box-shadow 0.25s ease; will-change: transform; z-index: 1; } .pdp-card__media-link { position: absolute; inset: 0; text-decoration: none; border-radius: inherit; overflow: hidden; } .pdp-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .pdp-card__segments { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .pdp-card__segment { flex: 1 1 0; height: 3px; border-radius: 0; background: #ffffff99; cursor: default; transition: background-color 0.2s ease; } .pdp-card__segment--active, .pdp-card__segment:hover { background: #ea001e; } .pdp-card:hover .pdp-card__segments, .pdp-card:focus-within .pdp-card__segments { opacity: 1; } .pdp-card__badges { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; } .pdp-card__badge { display: inline-block; padding: var(--gap-2) var(--gap-8); font-family: var(--font-secondary); font-size: min(12 / var(--vw-screen) * 100 * 1vw, 12px); font-weight: 600; line-height: 1.4; color: var(--c-white); text-transform: lowercase; border-radius: var(--pdp-radius); background: var(--pdp-card-badge-bg, var(--pdp-badge-hit)); } .pdp-card__badge--hit { --pdp-card-badge-bg: var(--pdp-badge-hit); } .pdp-card__badge--sale { --pdp-card-badge-bg: var(--pdp-badge-sale); } .pdp-card__badge--new { --pdp-card-badge-bg: var(--pdp-badge-new); } .pdp-card__body { position: relative; display: flex; flex-direction: column; gap: var(--gap-8); flex: 0 0 auto; padding: min(16 / var(--vw-screen) * 100 * 1vw, 16px) 0; } .pdp-card__hover { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.35s ease; } .pdp-card__hover-inner { display: flex; flex-direction: column; gap: min(16 / var(--vw-screen) * 100 * 1vw, 16px); min-height: 0; overflow: hidden; padding-top: 0; opacity: 0; transition: opacity 0.3s ease, padding-top 0.35s ease; background: transparent; } .pdp-card:hover .pdp-card__hover, .pdp-card:focus-within .pdp-card__hover { grid-template-rows: 1fr; } .pdp-card:hover .pdp-card__hover-inner, .pdp-card:focus-within .pdp-card__hover-inner { padding-bottom: min(16 / var(--vw-screen) * 100 * 1vw, 16px); opacity: 1; background: var(--pdp-page-bg); } .pdp-card:hover .pdp-card__body, .pdp-card:focus-within .pdp-card__body { background: var(--pdp-page-bg); box-shadow: -20px 0 0 var(--pdp-page-bg), 20px 0 0 var(--pdp-page-bg); } .pdp-card:hover .pdp-card__hover-inner, .pdp-card:focus-within .pdp-card__hover-inner { box-shadow: -20px 0 0 var(--pdp-page-bg), 20px 0 0 var(--pdp-page-bg); } .pdp-card__hover-colors.swiper, .pdp-card__hover-sizes.swiper { width: 100%; overflow: hidden; } .pdp-card__hover-slider-row { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 4px; align-items: center; position: relative; } .pdp-card__hover-nav { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; grid-column: 2 / 3; grid-row: 1; justify-self: end; } .pdp-card__hover-nav img { display: block; width: 16px; height: 16px; } .pdp-card__hover-nav--prev img { transform: rotate(180deg); } .pdp-card__hover-nav.swiper-button-disabled, .pdp-card__hover-nav.swiper-button-lock { visibility: hidden; pointer-events: none; } .pdp-card__hover-nav--hidden { visibility: hidden; pointer-events: none; } .pdp-card__hover-colors .swiper-slide { width: auto; height: auto; } .pdp-card__hover-sizes .swiper-slide { width: auto; height: auto; } .pdp-card__hover-color { position: relative; display: inline-flex; cursor: pointer; } .pdp-card__hover-color-input { position: absolute; opacity: 0; pointer-events: none; } .pdp-card__hover-color-swatch { display: block; box-sizing: border-box; width: var(--pdp-card-color-img-w); max-width: 100%; padding: min(4 / var(--vw-screen) * 100 * 1vw, 4px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--c-white); } .pdp-card__hover-color:hover .pdp-card__hover-color-swatch { border-color: #16161626; } .pdp-card__hover-color-img { display: block; width: var(--pdp-card-color-img-w); height: var(--pdp-card-color-img-h); max-width: 100%; object-fit: cover; border-radius: 1px; } .pdp-card__hover-color-input:checked + .pdp-card__hover-color-swatch { border-color: var(--pdp-accent-select); } .pdp-card__hover-size { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--pdp-card-size-w); height: var(--pdp-card-size-h); padding: 0; border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--pdp-surface); color: var(--pdp-text); font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); font-style: normal; line-height: var(--pdp-t-body16-lh); cursor: pointer; } .pdp-card__hover-size:not(:disabled):not(.pdp-card__hover-size--active):hover { border-color: #16161626; } .pdp-card__hover-size--active { border-color: var(--pdp-accent-select); } .pdp-card__hover-size--disabled { color: rgba(22, 22, 22, 0.35); text-decoration: line-through; cursor: not-allowed; } .pdp-card__hover-cart.pdp-buy__btn.btn { width: 100%; min-height: min(48 / var(--vw-screen) * 100 * 1vw, 48px); } .pdp-card:hover, .pdp-card:focus-within { z-index: 6; background: var(--pdp-page-bg); } @media (hover: hover) and (min-width: 575px) { .pdp-card:hover .pdp-card__media, .pdp-card:focus-within .pdp-card__media { transform: scaleX(var(--pdp-card-hover-scale-x)) scaleY(var(--pdp-card-hover-scale-y)); box-shadow: 0 -8px 16px 0 #0000001a; } } .pdp-card__title { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .pdp-card__title a { color: inherit; text-decoration: none; } .pdp-card__price-row { display: flex; align-items: baseline; gap: var(--gap-8); } .pdp-card__price-old { color: var(--pdp-text-tertiary); text-decoration: line-through; font-weight: var(--pwd-fw-400); } /* Page content offset under fixed header */ .page__content .pdp { width: 100%; max-width: none; margin: 0; padding-bottom: var(--margin-56); box-sizing: border-box; } @media screen and (min-width: 1441px) { .pdp { --pdp-col-gap: 92px; --pdp-gallery-thumb: 92px; --pdp-reviews-side-w: 335px; } } @media screen and (max-width: 1023px) { .pdp__hero { grid-template-columns: 1fr; max-width: 100%; } .pdp__hero-left, .pdp__hero-right, .pdp-gallery, .pdp-gallery__desktop { width: 100%; max-width: 100%; } .pdp__hero-right, .pdp-kit-promo { position: static; top: auto; } .pdp-gallery__stage { flex: 1 1 auto; width: 100%; } .pdp-aside-blocks, .pdp-kit__layout, .pdp-reviews__layout { grid-template-columns: 1fr; max-width: 100%; } .pdp-about { width: 100%; max-width: 100%; } .pdp-buy__row { flex-wrap: wrap; } .pdp-buy__price-col { margin-left: 0; width: 100%; } } .pdp-variants__colors.swiper .swiper-wrapper { display: flex; flex-wrap: wrap; gap: var(--gap-16); transform: none !important; } .pdp-variants__colors.swiper .swiper-slide { width: auto; height: auto; } /* Frame 313 — мобильная версия (375px, breakpoint сайта 574px) */ @media screen and (max-width: 574px) { .pdp[data-pdp-version], #pdpSizeModal.pdp-size-modal { --vw-screen: 375; --pdp-gallery-mob-h: 458px; --pdp-gallery-mob-ratio: 343 / 458; --pdp-card-slide-w: 280px; --pdp-mob-pad: var(--layout-margin); } .page__content .pdp { padding-bottom: calc(88px + var(--gap-32)); overflow-x: hidden; } .pdp-mob-only { display: flex !important; } .pdp-variants__sizes.pdp-mob-only.swiper { display: block !important; overflow: hidden; } .pdp-buy__row.pdp-desk-only, .pdp-size-dropdown.pdp-desk-only, .pdp-kit-modal__layers.pdp-desk-only, .pdp-kit-modal__gallery-frame.pdp-desk-only, .pdp-kit-modal__actions.pdp-desk-only, .pdp-kit-modal__close.pdp-desk-only{ display: none !important; } .pdp > .pdp__container { margin-top: 25%; display: flex; flex-direction: column; width: 100%; max-width: min(var(--layout-width), 1920px - var(--layout-margin)); margin-right: auto; margin-left: auto; box-sizing: border-box; overflow-x: visible; } .pdp-kit { overflow: visible; } .pdp-breadcrumbs { flex-wrap: nowrap; overflow: hidden; margin-right: calc(-1 * var(--pdp-mob-pad)); margin-left: calc(-1 * var(--pdp-mob-pad)); padding-top: 16px; padding-right: 0; padding-bottom: 12px; padding-left: var(--pdp-mob-pad); font-size: 12px; line-height: 20px; } .pdp-breadcrumbs__item, .pdp-breadcrumbs__sep { flex-shrink: 0; } .pdp-breadcrumbs__item--current { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; } .pdp__hero { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .pdp__hero-left { display: contents; } .pdp__hero-right { order: 3; width: 100%; } .pdp-gallery { order: 2; } .pdp-aside-blocks { order: 4; display: flex; flex-direction: column; gap: 20px; width: 100%; } .pdp-info { display: flex; flex-direction: column; gap: 20px; } .pdp-gallery { display: block; width: 100%; } .pdp-gallery__desktop { display: none; } .pdp-gallery > .pdp-gallery__slider { display: block; position: relative; width: 100%; overflow: hidden; } .pdp-gallery__slider.swiper { overflow: hidden; } .pdp-gallery__slide { height: auto; aspect-ratio: var(--pdp-gallery-mob-ratio); max-height: var(--pdp-gallery-mob-h); background: var(--pdp-surface); } .pdp-gallery__slide-open, .pdp-gallery__slide-open img { display: block; width: 100%; height: 100%; } .pdp-gallery__slide-open img { object-fit: cover; } .pdp-gallery__pagination.swiper-pagination-horizontal { position: absolute; right: 0; bottom: 0!important; left: 0; z-index: 3; display: flex; align-items: stretch; gap: 2px; width: 100% !important; height: auto; margin: 0; padding: 0; transform: none !important; gap: 0; } .pdp-gallery__pagination .swiper-pagination-bullet { flex: 1 1 0; width: auto !important; height: 4px; margin: 0 !important; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.45); opacity: 1; } .pdp-gallery__pagination .swiper-pagination-bullet-active { background: var(--pdp-accent-select); } .pdp-gallery__video--mob { position: absolute; left: var(--pdp-mob-pad); bottom: 16px; z-index: 2; width: 52px; height: 52px; display: none; } .pdp-info__header { display: flex; flex-direction: column; gap: 12px; order: 1; } .pdp-info__suit { order: 1; } .pdp-info__title { order: 2; } .pdp-info__meta { order: 3; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px 12px; } .pdp-info__rating { min-width: 0; } .pdp-info__copy { width: auto; justify-content: flex-end; justify-self: end; } .pdp-buy { display: flex; flex-direction: column; gap: 12px; order: 2; } .pdp-buy__price-col--mob { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin-left: 0; } .pdp-buy__price-col--mob .pdp-buy__prices { width: 100%; } .pdp-variants { order: 3; gap: 20px; width: 100%; } .pdp-specs { order: 4; padding: 20px; gap: 16px; width: 100%; box-sizing: border-box; } .pdp-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-16); } .pdp-variants__colors { margin-right: calc(-1 * var(--pdp-mob-pad)); padding-right: var(--pdp-mob-pad); } .pdp-variants__colors.swiper .swiper-wrapper { flex-wrap: nowrap; gap: 2px; } .pdp-variants__colors.swiper .swiper-slide { width: auto; } .pdp-color__img { width: 101px; height: 32px; } .pdp-about__tabs.pdp-mob-only { display: flex !important; box-sizing: border-box; width: calc(100% + 2 * var(--pdp-mob-pad)); max-width: 100vw; min-width: 0; margin-right: calc(-1 * var(--pdp-mob-pad)); margin-left: calc(-1 * var(--pdp-mob-pad)); padding-right: var(--pdp-mob-pad); padding-left: var(--pdp-mob-pad); } .pdp-about { overflow-x: visible; } .pdp-about__tab-panels.pdp-mob-only { display: block !important; padding-top: 10px; } .pdp-about__accordions.pdp-desk-only { display: none !important; } .pdp-buy__price { font-size: 24px; } .pdp-buy__installment { width: 100%; box-sizing: border-box; } .pdp-buy-bar.pdp-mob-only { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10050; display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 12px var(--pdp-mob-pad); background: var(--c-white); box-shadow: 0 -4px 24px rgba(22, 22, 22, 0.12); } .pdp-variants__sizes.pdp-mob-only { margin-right: calc(-1 * var(--pdp-mob-pad)); padding-right: var(--pdp-mob-pad); } .pdp-variants__sizes.pdp-mob-only.swiper .swiper-slide { width: auto !important; margin-right: 0 !important; } .pdp-variants__sizes.pdp-mob-only.swiper .swiper-slide:last-child { margin-right: 0 !important; } .pdp-variants__sizes .swiper-wrapper{ gap: 4px; } .pdp-buy-bar .pdp-buy__btn.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 calc(50% - 4px); width: calc(50% - 4px); min-width: 0; max-width: none; min-height: 56px; padding: 0 10px; } .pdp-buy-bar .pdp-buy__btn .btn__text { line-height: 1.2; } .pdp-buy-bar .pdp-buy__btn-icon { display: block; flex-shrink: 0; width: 24px; height: 24px; margin: 0; object-fit: contain; } body.pdp-size-modal-open .pdp-buy-bar, body.pdp-kit-modal-open .pdp-buy-bar, body.pdp-cart-drawer-open .pdp-buy-bar, body.pdp-gallery-lightbox-open .pdp-buy-bar { display: none; } .pdp-quote { padding: 8px; gap: var(--gap-16); } .pdp-quote__photo { flex-basis: auto; max-width: min(120 / var(--vw-screen) * 100 * 1vw, 120px); } .pdp-quote__content{ padding: 0; } .pdp-quote__name { margin-bottom: 12px; } .pdp-quote__icon { flex-shrink: 0; width: 21px; height: 15px; } .pdp-quote__photo img{ height: auto; } .pdp-delivery { padding: 16px; } .pdp-delivery__inner { gap: 20px; } .pdp-kit { margin-bottom: 40px; } .pdp-kit__title { margin-bottom: 16px; font-size: 20px; line-height: 1.2; } .pdp-kit__layout { display: flex; flex-direction: column; gap: 16px; overflow: visible; } .pdp-kit-promo { padding: 20px; gap: 20px; } .pdp-kit-promo__intro { gap: 12px; } .pdp-kit-promo__title { font-size: 20px; line-height: 1.2; } .pdp-kit-promo__body { flex-direction: column; align-items: stretch; gap: 16px; } .pdp-kit-promo__prices { order: 1; width: 100%; flex: none; } .pdp-kit-promo__actions { order: 2; width: 100%; flex: none; } .pdp-kit-promo__price { font-size: 24px; white-space: normal; } .pdp-kit__list, .pdp-kit__list.swiper { width: 100%; max-width: none; } .pdp-kit__list.swiper { overflow: visible !important; } .pdp-kit__list.swiper .swiper-wrapper { flex-direction: row; align-items: stretch; overflow: visible; transform: translate3d(0, 0, 0); } .pdp-kit__list.swiper .swiper-slide { width: 240px; height: auto; overflow: visible; box-sizing: border-box; } .pdp-kit-item { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 100%; padding: 16px; } .pdp-kit-item__header { display: flex; align-items: flex-start; gap: 12px; } .pdp-kit-item__num { flex-shrink: 0; font-size: 48px; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; } .pdp-kit-item__head { flex: 1 1 auto; min-width: 0; } .pdp-kit-item__product { display: flex; flex-direction: column; gap: 12px; } .pdp-kit-item__media { display: block; width: 100%; padding: 0; background: transparent; border-radius: var(--pdp-radius); overflow: hidden; aspect-ratio: 220 / 294; } .pdp-kit-item__img { display: block; width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; background: transparent; object-fit: cover; object-position: center; } .pdp-kit-item__body { gap: 4px; } .pdp-kit-item__change { align-self: center; width: max-content; margin-top: 12px; text-align: center; } .pdp-kit-item__viewing, .pdp-kit-item__viewing-icon { display: none !important; } .pdp-kit-item--viewing .pdp-kit-item__viewing-mob { display: block; } .pdp-cart-upsell-card__hover { display: none; margin-top: 0; } .pdp-cart-upsell-card__body { max-height: none; opacity: 1; visibility: visible; } .pdp-kit-modal { align-items: stretch; justify-content: flex-end; padding: 0; } .pdp-kit-modal__shell { display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100dvh; max-height: 100dvh; } .pdp-kit-modal__dialog { flex: 1 1 auto; min-height: 0; max-height: none; padding: 20px; padding-bottom: 16px; border-radius: 0; overflow-x: hidden; overflow-y: auto; } .pdp-kit-modal__footer { --pdp-kit-footer-btn-h: 48px; display: flex !important; flex-shrink: 0; align-items: stretch; gap: 8px; box-sizing: border-box; width: 100%; padding: 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--c-white); box-shadow: 0 -4px 24px rgba(22, 22, 22, 0.12); } .pdp-kit-modal__close--mob { flex: 0 0 var(--pdp-kit-footer-btn-h); box-sizing: border-box; width: var(--pdp-kit-footer-btn-h); min-width: var(--pdp-kit-footer-btn-h); height: var(--pdp-kit-footer-btn-h); min-height: var(--pdp-kit-footer-btn-h); padding: 0; align-self: auto; } .pdp-kit-modal__footer-steps { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; } .pdp-kit-modal__footer-step { display: none; flex: 1 1 auto; align-items: stretch; gap: 8px; min-width: 0; } .pdp-kit-modal__footer-step:not([hidden]) { display: flex; } .pdp-kit-modal__footer-step .pdp-kit-modal__btn.btn { flex: 1 1 0; box-sizing: border-box; width: auto; min-width: 0; height: var(--pdp-kit-footer-btn-h); min-height: var(--pdp-kit-footer-btn-h); padding-top: 0; padding-bottom: 0; } .pdp-kit-modal__footer-step--cart:not([hidden]) { display: flex; } .pdp-kit-modal__footer-step--cart .pdp-kit-modal__btn--cart.btn { flex: 1 1 auto; box-sizing: border-box; width: 100%; height: var(--pdp-kit-footer-btn-h); min-height: var(--pdp-kit-footer-btn-h); padding-top: 0; padding-bottom: 0; } .pdp-kit-modal__inner { gap: 16px; } .pdp-kit-modal__layers--mob { display: block !important; width: calc(100% + 40px); margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; overflow: hidden; } .pdp-kit-modal__layers--mob .swiper-wrapper { align-items: stretch; gap: 20px; } .pdp-kit-modal__layers--mob .swiper-slide { width: auto; height: auto; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer-row { display: flex; align-items: center; gap: 20px; width: max-content; max-width: 100%; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; padding: 0; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer-sep--mob { flex-shrink: 0; align-self: center; width: 20px; height: 36px; margin: 0; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer-num { width: auto; font-size: 52px; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer-title { font-size: 14px; line-height: 1.2; } .pdp-kit-modal__layers--mob .pdp-kit-modal__layer-desc { font-size: 12px; } .pdp-kit-modal__pane-grid { display: flex; flex-direction: column; gap: 16px; } .pdp-kit-modal__gallery-mob.pdp-mob-only { display: block !important; position: relative; width: 100%; overflow: hidden; } .pdp-kit-modal__gallery-slide { aspect-ratio: var(--pdp-gallery-mob-ratio); max-height: var(--pdp-gallery-mob-h); background: var(--pdp-surface); } .pdp-kit-modal__gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .pdp-kit-modal__pagination.swiper-pagination-horizontal { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: stretch; gap: 2px; width: 100% !important; height: auto; margin: 0; padding: 0; transform: none !important; } .pdp-kit-modal__pagination .swiper-pagination-bullet { flex: 1 1 0; width: auto !important; height: 4px; margin: 0 !important; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.45); opacity: 1; } .pdp-kit-modal__pagination .swiper-pagination-bullet-active { background: var(--pdp-kit-num); } .pdp-kit-modal__panel { min-height: 0; justify-content: flex-start; gap: 20px; } .pdp-kit-modal__panel-top { display: flex; flex-direction: column; gap: 16px; } .pdp-kit-modal__colors { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-kit-modal__colors::-webkit-scrollbar { display: none; } .pdp-kit-modal__color { flex-shrink: 0; } .pdp-kit-modal__sizes { flex-wrap: wrap; } .pdp-kit-modal__model-trigger { width: 100%; } .pdp-about, .pdp-reviews { max-width: none; } .pdp-reviews{ margin-bottom: 40px; } .pdp-slider--viewed{ margin-top: 40px; } .pdp-about__panel { overflow: visible; padding: 0; gap: var(--gap-16); background: var(--c-white); } .pdp-reviews__layout { grid-template-columns: 1fr; gap: var(--gap-24); } .pdp-reviews__layout { display: flex; flex-direction: column; gap: var(--gap-24); } .pdp-reviews-summary { order: 0; max-width: none; } .pdp-reviews__main { order: 1; width: 100%; } .pdp-reviews__pager { flex-wrap: nowrap; justify-content: space-between; gap: 8px; } .pdp-reviews__pages { flex: 1 1 auto; flex-wrap: nowrap; justify-content: center; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pdp-reviews-summary .pdp-reviews__submit { width: 100%; } .pdp-slider { padding: 0; overflow: hidden; background: var(--c-white); } .pdp-slider__title { margin-bottom: 16px; } .pdp-slider .pdp__container { margin-top: 0; overflow: visible; background-color: var(--c-white); } .pdp-slider__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-12); } .pdp-card__price-row{ flex-direction: column-reverse; gap: 0; } .pdp-slider .pdp-card__hover { display: none; } .pdp-slider .pdp-card:hover .pdp-card__segments, .pdp-slider .pdp-card:focus-within .pdp-card__segments { opacity: 0; pointer-events: none; } .pdp-slider .pdp-card:hover .pdp-card__body, .pdp-slider .pdp-card:focus-within .pdp-card__body { background: transparent; box-shadow: none; } .pdp-slider .pdp-card:hover .pdp-card__media, .pdp-slider .pdp-card:focus-within .pdp-card__media { transform: none; box-shadow: none; } .pdp-slider .pdp-card:hover, .pdp-slider .pdp-card:focus-within { z-index: 0; background: transparent; } .pdp-review__photos.swiper .swiper-wrapper { flex-wrap: nowrap; } .pdp-review__photos.swiper { overflow: visible; margin-right: calc(-1 * var(--pdp-mob-pad)); padding-right: var(--pdp-mob-pad); } .pdp-review { padding: 20px; } .pdp-review__photo-more { display: flex; align-items: flex-end; min-width: min(64 / var(--vw-screen) * 100 * 1vw, 64px); } .pdp-size-modal { padding: var(--pdp-mob-pad); } .pdp-size-modal__shell { flex-direction: column-reverse; width: 100%; } .pdp-size-modal__dialog { width: 100%; padding: 20px; } .pdp-size-modal__close { align-self: flex-end; width: 40px; height: 40px; } #pdpSizeModal.pdp-size-modal .pdp-size-modal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Cart drawer — панель справа */ .pdp-cart-drawer { position: fixed; inset: 0; z-index: 10070; display: none; visibility: hidden; pointer-events: none; } .pdp-cart-drawer--open { display: block !important; visibility: visible; pointer-events: auto; } .pdp-cart-drawer[hidden]:not(.pdp-cart-drawer--open) { display: none !important; } .pdp-cart-drawer__overlay { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.7); } .pdp-cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(520px, 100%); max-width: 100%; background: var(--c-white); box-shadow: -8px 0 32px rgba(22, 22, 22, 0.12); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .pdp-cart-drawer--open .pdp-cart-drawer__panel { transform: translateX(0); } .pdp-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: min(16 / var(--vw-screen) * 100 * 1vw, 16px); flex-shrink: 0; padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); border-bottom: 1px solid rgba(22, 22, 22, 0.12); } .pdp-cart-drawer__title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--pdp-title); } .pdp-cart-drawer__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--pdp-radius); color: var(--pdp-text); cursor: pointer; } .pdp-cart-drawer__body { flex: 1 1 auto; overflow: auto; padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); -webkit-overflow-scrolling: touch; } .pdp-cart-drawer__list { margin: 0; padding: 0; list-style: none; } .pdp-cart-drawer__item { display: flex; flex-direction: column; gap: 0; padding-bottom: min(24 / var(--vw-screen) * 100 * 1vw, 24px); margin-bottom: min(24 / var(--vw-screen) * 100 * 1vw, 24px); border-bottom: 1px solid rgba(22, 22, 22, 0.12); } .pdp-cart-drawer__item-card { display: flex; gap: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-cart-drawer__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .pdp-cart-drawer__media { flex-shrink: 0; display: block; width: min(92 / var(--vw-screen) * 100 * 1vw, 92px); text-decoration: none; } .pdp-cart-drawer__media img { display: block; width: 100%; height: auto; aspect-ratio: 92 / 123; object-fit: cover; border-radius: var(--pdp-radius); background: var(--pdp-surface); } .pdp-cart-drawer__details { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); } .pdp-cart-drawer__name { margin: 0; color: var(--pdp-text); text-decoration: none; } .pdp-cart-drawer__name:hover { text-decoration: underline; } .pdp-cart-drawer__line { margin: 0; color: var(--pdp-text); } .pdp-cart-drawer__price-old { text-decoration: line-through; } .pdp-cart-drawer__price { margin-top: min(4 / var(--vw-screen) * 100 * 1vw, 4px); } .pdp-cart-drawer__go-cart.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); margin-top: 30px; padding: 0 min(24 / var(--vw-screen) * 100 * 1vw, 24px); border: 0; border-radius: var(--pdp-radius); background: #f5f5f5; color: var(--pdp-text); text-decoration: none; cursor: pointer; } .pdp-cart-drawer__go-cart.btn:hover { background: #ebebeb; } .pdp-cart-drawer__empty { margin: min(24 / var(--vw-screen) * 100 * 1vw, 24px) 0; text-align: center; color: var(--pdp-text-tertiary); } /* Upsell — «Улучшить экипировку» */ .pdp-cart-drawer__upsell { margin-top: min(32 / var(--vw-screen) * 100 * 1vw, 32px); padding-top: min(24 / var(--vw-screen) * 100 * 1vw, 24px); border-top: 1px solid rgba(22, 22, 22, 0.12); } .pdp-cart-drawer__upsell-title { margin: 0 0 min(16 / var(--vw-screen) * 100 * 1vw, 16px); color: var(--pdp-title); } .pdp-cart-drawer__upsell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); /* при скролле видны 2 ряда целиком и половина следующего */ padding-bottom: min(140 / var(--vw-screen) * 100 * 1vw, 140px); } .pdp-cart-upsell-card { position: relative; z-index: 0; display: flex; flex-direction: column; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); min-width: 0; overflow: visible; } .pdp-cart-upsell-card--size-open { z-index: 2; } .pdp-cart-upsell-card__visual { position: relative; width: 100%; } .pdp-cart-upsell-card__media-wrap { width: 100%; aspect-ratio: 220 / 294; border-radius: var(--pdp-radius); overflow: hidden; background: var(--pdp-surface); } .pdp-cart-upsell-card__media { display: block; width: 100%; height: 100%; text-decoration: none; } .pdp-cart-upsell-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .pdp-cart-upsell-card__in-cart { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-8); min-height: min(48 / var(--vw-screen) * 100 * 1vw, 48px); padding: 0 min(12 / var(--vw-screen) * 100 * 1vw, 12px); background-color: var(--pdp-text); color: var(--pdp-btn-on-inverse); text-decoration: none; opacity: 0; transform: translateY(100%); transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .pdp-cart-upsell-card--in-cart .pdp-cart-upsell-card__in-cart { opacity: 1; transform: translateY(0); pointer-events: auto; } .pdp-cart-upsell-card__add-size { position: absolute; right: min(8 / var(--vw-screen) * 100 * 1vw, 8px); bottom: min(8 / var(--vw-screen) * 100 * 1vw, 8px); z-index: 3; display: none; align-items: center; justify-content: center; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background-color: var(--pdp-text); color: var(--pdp-btn-on-inverse); cursor: pointer; } .pdp-cart-upsell-card__add-size svg { display: block; width: min(16 / var(--vw-screen) * 100 * 1vw, 16px); height: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-cart-upsell-card--in-cart .pdp-cart-upsell-card__add-size { display: none !important; } .pdp-cart-upsell-card__in-cart-icon { flex-shrink: 0; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-cart-upsell-card__body { display: flex; flex-direction: column; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); max-height: 120px; overflow: hidden; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.55s cubic-bezier(0.4, 0, 0.2, 1), margin 0.55s cubic-bezier(0.4, 0, 0.2, 1), padding 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .pdp-cart-upsell-card__title { margin: 0; } .pdp-cart-upsell-card__title a { color: inherit; text-decoration: none; } .pdp-cart-upsell-card__title a:hover { text-decoration: underline; } .pdp-cart-upsell-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-cart-upsell-card__price-old { color: var(--pdp-text-tertiary); text-decoration: line-through; } .pdp-cart-upsell-card__price { color: var(--pdp-text); } .pdp-cart-upsell-card__hover { display: grid; grid-template-rows: 0fr; margin-top: calc(-1 * min(8 / var(--vw-screen) * 100 * 1vw, 8px)); transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .pdp-cart-upsell-card__hover-inner { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; transform: translateY(4px); } .pdp-cart-upsell-card__hover-head { display: flex; align-items: center; justify-content: space-between; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-cart-upsell-card__hover-label { color: var(--pdp-text); } .pdp-cart-upsell-card__hover-guide { flex-shrink: 0; color: var(--pdp-text); text-underline-offset: 2px; } .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell { width: 100%; } .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell .pdp-size-dropdown__trigger { min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0 min(12 / var(--vw-screen) * 100 * 1vw, 12px); border: 1px solid transparent; transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell.pdp-size-dropdown--open .pdp-size-dropdown__trigger, .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell.pdp-size-dropdown--selected .pdp-size-dropdown__trigger { border-color: var(--pdp-accent-select); } .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell .pdp-size-dropdown__list { max-height: min(200 / var(--vw-screen) * 100 * 1vw, 200px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .pdp-cart-upsell-card .pdp-size-dropdown--cart-upsell .pdp-size-dropdown__item { min-height: min(36 / var(--vw-screen) * 100 * 1vw, 36px); padding: 0 min(12 / var(--vw-screen) * 100 * 1vw, 12px); } @media (hover: hover) { .pdp-cart-upsell-card:hover .pdp-cart-upsell-card__img { transform: scale(1.03); } .pdp-cart-upsell-card:hover .pdp-cart-upsell-card__body, .pdp-cart-upsell-card:focus-within .pdp-cart-upsell-card__body, .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__body { max-height: 0; opacity: 0; visibility: hidden; margin: 0; padding: 0; } .pdp-cart-upsell-card:hover .pdp-cart-upsell-card__hover, .pdp-cart-upsell-card:focus-within .pdp-cart-upsell-card__hover, .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__hover { grid-template-rows: 1fr; } .pdp-cart-upsell-card:hover .pdp-cart-upsell-card__hover-inner, .pdp-cart-upsell-card:focus-within .pdp-cart-upsell-card__hover-inner, .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__hover-inner { overflow: visible; opacity: 1; transform: translateY(0); } } .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__body { max-height: 0; opacity: 0; visibility: hidden; margin: 0; padding: 0; } .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__hover { grid-template-rows: 1fr; } .pdp-cart-upsell-card--size-open .pdp-cart-upsell-card__hover-inner { overflow: visible; opacity: 1; transform: translateY(0); } @media screen and (max-width: 1023px) { .pdp-cart-upsell-card__add-size { display: inline-flex; } } @media (hover: hover) and (min-width: 1024px) { .pdp-cart-upsell-card__add-size { display: none !important; } } @media screen and (max-width: 574px) { .pdp-cart-drawer__panel { width: 100%; } .pdp-cart-drawer__head, .pdp-cart-drawer__body { padding-left: min(16 / var(--vw-screen) * 100 * 1vw, 16px); padding-right: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } } /* Gallery lightbox */ body.pdp-gallery-lightbox-open { overflow: hidden; } .pdp-gallery-lightbox { position: fixed; inset: 0; z-index: 10080; display: none; visibility: hidden; pointer-events: none; } .pdp-gallery-lightbox--open { display: block !important; visibility: visible; pointer-events: auto; } .pdp-gallery-lightbox[hidden]:not(.pdp-gallery-lightbox--open) { display: none !important; } .pdp-gallery-lightbox__overlay { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.72); backdrop-filter: blur(2px); } .pdp-gallery-lightbox__dialog { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100%; padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); pointer-events: none; } .pdp-gallery-lightbox__layout { display: flex; align-items: stretch; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); max-width: min(980px, calc(100vw - 48px)); width: 100%; pointer-events: auto; } .pdp-gallery-lightbox__sidebar { display: flex; flex: 0 0 min(92px, 6.3889vw); flex-direction: column; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); width: min(92px, 6.3889vw); min-width: 72px; } .pdp-gallery-lightbox__thumbs { display: flex; flex: 1 1 auto; flex-direction: column; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); max-height: min(520 / var(--vw-screen) * 100 * 1vw, 520px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } .pdp-gallery-lightbox__thumb { position: relative; display: block; flex-shrink: 0; width: 100%; padding: min(4 / var(--vw-screen) * 100 * 1vw, 4px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: transparent; cursor: pointer; } .pdp-gallery-lightbox__thumb--active { border-color: var(--pdp-accent-select); } .pdp-gallery-lightbox__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 84 / 112; object-fit: cover; border-radius: var(--pdp-radius); } .pdp-gallery-lightbox__thumb-play { position: absolute; inset: min(4 / var(--vw-screen) * 100 * 1vw, 4px); display: flex; align-items: center; justify-content: center; border-radius: var(--pdp-radius); background: rgba(0, 0, 0, 0.4); pointer-events: none; } .pdp-gallery-lightbox__thumb-play::after { content: ''; display: block; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); background: var(--c-white); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat; } .pdp-gallery-lightbox__thumbs-more { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--c-white); color: var(--pdp-text); cursor: pointer; } .pdp-gallery-lightbox__thumbs-more[hidden] { display: none; } .pdp-gallery-lightbox__stage { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; } .pdp-gallery-lightbox__stage-grid { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); row-gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); align-items: center; } .pdp-gallery-lightbox__viewport { position: relative; grid-column: 1; grid-row: 1 / -1; align-self: center; width: min(558px, calc(100vw - 92px - 80px)); max-width: 100%; aspect-ratio: 558 / 747; line-height: 0; overflow: hidden; border-radius: var(--pdp-radius); background: transparent; } .pdp-gallery-lightbox__viewport--zoomed { overflow: auto; cursor: grab; } .pdp-gallery-lightbox__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--pdp-radius); transform-origin: center center; transition: transform 0.2s ease; user-select: none; } .pdp-gallery-lightbox__controls { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; align-self: center; justify-content: space-between; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); min-height: 100%; } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__close { order: 1; } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__zoom { order: 2; } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__nav { order: 3; } .pdp-gallery-lightbox__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-gallery-lightbox__video-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(22, 22, 22, 0.2); } .pdp-gallery-lightbox__video-panel[hidden] { display: none; } .pdp-gallery-lightbox__video { display: block; width: 100%; object-fit: cover; border-radius: var(--pdp-radius); background: var(--pdp-text); } .pdp-gallery-lightbox__video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: min(72 / var(--vw-screen) * 100 * 1vw, 72px); height: min(72 / var(--vw-screen) * 100 * 1vw, 72px); padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); cursor: pointer; } .pdp-gallery-lightbox__video-play[hidden] { display: none; } .pdp-gallery-lightbox__video-play-icon { display: block; width: min(28 / var(--vw-screen) * 100 * 1vw, 28px); height: min(28 / var(--vw-screen) * 100 * 1vw, 28px); background: var(--c-white); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat; } .pdp-gallery-lightbox__zoom { display: flex; flex-direction: column; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-gallery-lightbox__nav { display: flex; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-gallery-lightbox__tool { display: inline-flex; align-items: center; justify-content: center; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--c-white); color: var(--pdp-text); cursor: pointer; } .pdp-gallery-lightbox__tool:hover { background: #f0f0f0; } .pdp-gallery-lightbox__tool:disabled { opacity: 0.45; cursor: not-allowed; } @media screen and (max-width: 574px) { .pdp-gallery-lightbox__dialog { padding: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-gallery-lightbox__layout { flex-direction: column; max-width: 100%; } .pdp-gallery-lightbox__sidebar { flex: 0 0 auto; flex-direction: row; align-items: center; width: 100%; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-gallery-lightbox__thumbs { flex: 1 1 auto; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; } .pdp-gallery-lightbox__thumb { width: min(64 / var(--vw-screen) * 100 * 1vw, 64px); } .pdp-gallery-lightbox__thumbs-more { width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); } .pdp-gallery-lightbox__thumb--video { flex-shrink: 0; width: min(64 / var(--vw-screen) * 100 * 1vw, 64px); } .pdp-gallery-lightbox__stage-grid { display: flex; flex-direction: column; align-items: stretch; gap: min(12 / var(--vw-screen) * 100 * 1vw, 12px); width: 100%; } .pdp-gallery-lightbox__viewport { width: 100%; max-width: 100%; } .pdp-gallery-lightbox__controls { flex-direction: row; justify-content: flex-start; width: 100%; min-height: 0; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__nav { order: 1; flex: 0 0 auto; } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__zoom { order: 2; flex: 1 1 auto; flex-direction: row; justify-content: center; } .pdp-gallery-lightbox__controls .pdp-gallery-lightbox__close { order: 3; flex: 0 0 auto; } .pdp-gallery-lightbox__image { width: 100%; max-width: 100%; max-height: min(458 / var(--vw-screen) * 100 * 1vw, 458px); } } /* Review form modal */ body.pdp-review-modal-open { overflow: hidden; } .pdp-review-modal { position: fixed; inset: 0; z-index: 10090; display: none; visibility: hidden; pointer-events: none; } .pdp-review-modal--open { display: flex !important; align-items: center; justify-content: center; visibility: visible; pointer-events: auto; } .pdp-review-modal[hidden]:not(.pdp-review-modal--open) { display: none !important; } .pdp-review-modal__overlay { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.72); } .pdp-review-modal__shell { position: relative; z-index: 1; display: flex; align-items: flex-start; width: min(600px, calc(100vw - 48px)); max-width: 100%; padding-right: min(48px, 12vw); } .pdp-review-modal__dialog { flex: 1 1 auto; min-width: 0; max-height: calc(100dvh - 48px); padding: min(40 / var(--vw-screen) * 100 * 1vw, 40px); overflow: auto; background: var(--c-white); border-radius: var(--pdp-radius); } .pdp-review-modal__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); margin-top: 0; padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-review-modal__form { display: flex; flex-direction: column; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); min-height: 0; } .pdp-review-modal__scroll { display: flex; flex-direction: column; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); min-height: 0; } .pdp-review-modal__footer { display: flex; align-items: stretch; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); flex-shrink: 0; } .pdp-review-modal__footer-close { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: min(40 / var(--vw-screen) * 100 * 1vw, 40px); height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: var(--pdp-text); color: var(--c-white); cursor: pointer; } .pdp-review-modal__footer .pdp-review-modal__submit { flex: 1 1 auto; min-width: 0; } .pdp-review-modal__success { display: flex; flex-direction: column; gap: min(24 / var(--vw-screen) * 100 * 1vw, 24px); min-height: 0; } .pdp-review-modal__footer--success .pdp-review-modal__success-close { flex: 1 1 auto; } .pdp-review-modal__head { display: flex; flex-direction: column; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); } .pdp-review-modal__title { margin: 0; font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-title24-fs); font-weight: var(--pdp-t-title24-fw); line-height: var(--pdp-t-title24-lh); color: var(--pdp-t-color-text); margin-bottom: 8px; } .pdp-review-modal__product { margin: 0; font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-emph16-fs); font-weight: var(--pdp-t-emph16-fw); line-height: var(--pdp-t-emph16-lh); color: var(--pdp-t-color-80); } .pdp-review-modal__field { display: flex; flex-direction: column; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-review-modal__field--half { min-width: 0; } .pdp-review-modal__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(16 / var(--vw-screen) * 100 * 1vw, 16px); } .pdp-review-modal__label { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); color: var(--pdp-t-color-text); } .pdp-review-modal__field--input { gap: 0; } .pdp-review-modal__input-box { display: flex; flex-direction: column; justify-content: center; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); box-sizing: border-box; width: 100%; min-height: min(48 / var(--vw-screen) * 100 * 1vw, 48px); padding: min(8 / var(--vw-screen) * 100 * 1vw, 8px) min(16 / var(--vw-screen) * 100 * 1vw, 16px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: #f5f5f5; transition: border-color 0.15s ease, background-color 0.15s ease; } .pdp-review-modal__input-box:hover:not(:focus-within) { border-color: #16161626; } .pdp-review-modal__input-box:focus-within { border-color: var(--pdp-accent-select); } .pdp-review-modal__input-box--valid, .pdp-review-modal__input-box--valid:hover, .pdp-review-modal__input-box--valid:focus-within { background: #f5f5f5; border-color: #1616164d; } .pdp-review-modal__input-box--invalid { background: #f9eaec; } .pdp-review-modal__input-box--invalid:focus-within { border-color: var(--pdp-accent-select); } .pdp-review-modal__input-row { display: flex; align-items: center; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); min-width: 0; } .pdp-review-modal__input-row .pdp-review-modal__input { flex: 1 1 auto; min-width: 0; } .pdp-review-modal__input-status { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: min(14 / var(--vw-screen) * 100 * 1vw, 14px); height: min(14 / var(--vw-screen) * 100 * 1vw, 14px); } .pdp-review-modal__input-box--valid .pdp-review-modal__input-status, .pdp-review-modal__input-box--invalid .pdp-review-modal__input-status { display: flex; } .pdp-review-modal__input-status-icon { display: none; flex-shrink: 0; } .pdp-review-modal__input-status-icon--valid { width: min(14 / var(--vw-screen) * 100 * 1vw, 14px); height: min(14 / var(--vw-screen) * 100 * 1vw, 14px); } .pdp-review-modal__input-status-icon--invalid { line-height: 0; } .pdp-review-modal__input-box--valid .pdp-review-modal__input-status-icon--valid { display: block; } .pdp-review-modal__input-box--invalid .pdp-review-modal__input-status-icon--invalid { display: block; } .pdp-review-modal__input-error { display: flex; align-items: center; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); margin: min(4 / var(--vw-screen) * 100 * 1vw, 4px) 0 0; } .pdp-review-modal__input-error[hidden] { display: none; } .pdp-review-modal__input-error-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: min(14 / var(--vw-screen) * 100 * 1vw, 14px); height: min(14 / var(--vw-screen) * 100 * 1vw, 14px); line-height: 0; } .pdp-review-modal__input-error-text { font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono12-fs); font-weight: 300; font-style: normal; line-height: min(20 / var(--vw-screen) * 100 * 1vw, 20px); letter-spacing: 0.01em; color: var(--pdp-t-color-80); } .pdp-review-modal__input-label { display: block; margin: 0; font-family: var(--pdp-t-mono-ff); font-size: var(--pdp-t-mono-label-fs); font-weight: var(--pdp-t-mono-label-fw); line-height: var(--pdp-t-mono-label-lh); color: var(--pdp-text); cursor: pointer; } .pdp-review-modal__required { color: var(--pdp-accent-select); } .pdp-review-modal__stars { display: flex; align-items: center; gap: min(4 / var(--vw-screen) * 100 * 1vw, 4px); } .pdp-review-modal__star { display: inline-flex; padding: 0; border: 0; background: transparent; cursor: pointer; } .pdp-review-modal__star-icon path { fill: #e4e4e4; transition: fill 0.15s ease; } .pdp-review-modal__star--active .pdp-review-modal__star-icon path, .pdp-review-modal__star:hover .pdp-review-modal__star-icon path, .pdp-review-modal__star:focus-visible .pdp-review-modal__star-icon path { fill: #bb0016; } .pdp-review-modal__dropdown { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; } .pdp-review-modal__dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); width: 100%; min-height: min(48 / var(--vw-screen) * 100 * 1vw, 48px); padding: 0 min(16 / var(--vw-screen) * 100 * 1vw, 16px); border: 0; border-radius: var(--pdp-radius); background: #f5f5f5; color: var(--pdp-text); font-family: inherit; text-align: left; cursor: pointer; } .pdp-review-modal__dropdown-value { display: inline-flex; align-items: center; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); flex: 1 1 auto; min-width: 0; font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); color: var(--pdp-t-color-text); } .pdp-review-modal__dropdown-value--placeholder { color: var(--pdp-t-color-66); } .pdp-review-modal__dropdown--open .pdp-review-modal__dropdown-arrow { transform: rotate(180deg); } .pdp-review-modal__dropdown--open .pdp-review-modal__dropdown-list { display: flex; } .pdp-review-modal__dropdown-list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 5; display: none; flex-direction: column; width: 100%; max-height: min(220 / var(--vw-screen) * 100 * 1vw, 220px); margin: 0; padding: 0; border-radius: var(--pdp-radius); background: var(--c-white); box-shadow: 0 8px 24px rgba(22, 22, 22, 0.12); overflow: auto; } .pdp-review-modal__dropdown-item { display: flex; align-items: center; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); width: 100%; min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: min(8 / var(--vw-screen) * 100 * 1vw, 8px) min(16 / var(--vw-screen) * 100 * 1vw, 16px); border: 0; background: var(--c-white); color: var(--pdp-text); text-align: left; cursor: pointer; transition: background-color 0.25s ease; } .pdp-review-modal__dropdown-item:hover, .pdp-review-modal__dropdown-item--checked { background: #f5f5f5; } .pdp-review-modal__dropdown-item--color { padding: min(8 / var(--vw-screen) * 100 * 1vw, 8px) min(12 / var(--vw-screen) * 100 * 1vw, 12px); } .pdp-review-modal__color-swatch { flex-shrink: 0; display: block; padding: min(4 / var(--vw-screen) * 100 * 1vw, 4px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: var(--c-white); } .pdp-review-modal__dropdown-item--color:hover .pdp-review-modal__color-swatch { border-color: #16161626; } .pdp-review-modal__dropdown-item--color.pdp-review-modal__dropdown-item--checked .pdp-review-modal__color-swatch { border-color: var(--pdp-accent-select); } .pdp-review-modal__color-swatch img { display: block; width: min(101 / var(--vw-screen) * 100 * 1vw, 101px); height: min(32 / var(--vw-screen) * 100 * 1vw, 32px); object-fit: cover; border-radius: 1px; } .pdp-review-modal__color-preview { flex-shrink: 0; display: block; width: min(101 / var(--vw-screen) * 100 * 1vw, 101px); height: min(32 / var(--vw-screen) * 100 * 1vw, 32px); object-fit: cover; border-radius: var(--pdp-radius); background: var(--c-white); } .pdp-review-modal__color-name { flex: 1 1 auto; min-width: 0; } .pdp-review-modal__fit { display: flex; flex-wrap: wrap; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); } .pdp-review-modal__fit-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); padding: 0 min(16 / var(--vw-screen) * 100 * 1vw, 16px); border: 1px solid transparent; border-radius: var(--pdp-radius); background: #f5f5f5; font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); color: var(--pdp-t-color-text); cursor: pointer; } .pdp-review-modal__fit-btn--active { background: var(--c-white); border-color: var(--pdp-accent-select); } .pdp-review-modal__upload { display: flex; align-items: center; justify-content: center; min-height: min(96 / var(--vw-screen) * 100 * 1vw, 96px); padding: min(24 / var(--vw-screen) * 100 * 1vw, 24px); border-radius: var(--pdp-radius); background: #f5f5f5; cursor: pointer; } .pdp-review-modal__upload-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .pdp-review-modal__upload-icon { display: block; flex-shrink: 0; width: min(24 / var(--vw-screen) * 100 * 1vw, 24px); height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-review-modal__upload-icon img { display: block; width: 100%; height: 100%; } .pdp-review-modal__files { display: flex; flex-wrap: wrap; gap: min(8 / var(--vw-screen) * 100 * 1vw, 8px); margin: 0; padding: 0; list-style: none; } .pdp-review-modal__files[hidden] { display: none; } .pdp-review-modal__file { position: relative; width: min(72 / var(--vw-screen) * 100 * 1vw, 72px); height: min(72 / var(--vw-screen) * 100 * 1vw, 72px); border-radius: var(--pdp-radius); overflow: hidden; background: #f5f5f5; } .pdp-review-modal__file img, .pdp-review-modal__file video { display: block; width: 100%; height: 100%; object-fit: cover; } .pdp-review-modal__file-badge { position: absolute; left: min(4 / var(--vw-screen) * 100 * 1vw, 4px); bottom: min(4 / var(--vw-screen) * 100 * 1vw, 4px); padding: 2px 4px; border-radius: var(--pdp-radius); background: rgba(0, 0, 0, 0.55); color: var(--c-white); font-size: min(10 / var(--vw-screen) * 100 * 1vw, 10px); line-height: 1.2; } .pdp-review-modal__file-remove { position: absolute; top: min(4 / var(--vw-screen) * 100 * 1vw, 4px); right: min(4 / var(--vw-screen) * 100 * 1vw, 4px); display: inline-flex; align-items: center; justify-content: center; width: min(20 / var(--vw-screen) * 100 * 1vw, 20px); height: min(20 / var(--vw-screen) * 100 * 1vw, 20px); padding: 0; border: 0; border-radius: var(--pdp-radius); background: rgba(22, 22, 22, 0.72); color: var(--c-white); cursor: pointer; } .pdp-review-modal__input { box-sizing: border-box; width: 100%; min-height: min(24 / var(--vw-screen) * 100 * 1vw, 24px); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--pdp-text); font-family: inherit; } .pdp-review-modal__input-box .pdp-review-modal__input { font-family: var(--pdp-t-flex-ff); font-size: var(--pdp-t-body16-fs); font-weight: var(--pdp-t-body16-fw); line-height: var(--pdp-t-body16-lh); color: var(--pdp-t-color-text); } .pdp-review-modal__input::placeholder { color: var(--pdp-t-color-66); } .pdp-review-modal__input:focus { outline: none; } .pdp-review-modal__policy { display: flex; align-items: flex-start; gap: min(10 / var(--vw-screen) * 100 * 1vw, 10px); cursor: pointer; } .pdp-review-modal__policy-input { flex-shrink: 0; width: min(18 / var(--vw-screen) * 100 * 1vw, 18px); height: min(18 / var(--vw-screen) * 100 * 1vw, 18px); margin-top: 2px; accent-color: var(--pdp-accent-select); } .pdp-review-modal__policy-text { color: var(--pdp-text-tertiary); } .pdp-review-modal__policy-text a { color: var(--pdp-text); } .pdp-review-modal .pdp-review-modal__submit.btn { width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); padding: 0 min(24 / var(--vw-screen) * 100 * 1vw, 24px); border: 0; border-radius: var(--pdp-radius); background-color: #de341d66; color: #fff; justify-content: center; cursor: not-allowed; transition: background-color 0.2s ease; } .pdp-review-modal .pdp-review-modal__submit.btn::after { display: none; } .pdp-review-modal .pdp-review-modal__submit.btn .btn__text { color: #fff; } .pdp-review-modal .pdp-review-modal__submit.btn:not(:disabled) { background-color: #de341d; cursor: pointer; } .pdp-review-modal .pdp-review-modal__submit.btn:not(:disabled):hover, .pdp-review-modal .pdp-review-modal__submit.btn:not(:disabled):hover .btn__text { background-color: #de341d; color: #fff; } .pdp-review-modal .pdp-review-modal__submit.btn:disabled { opacity: 1; } .pdp-review-modal__success[hidden] { display: none; } .pdp-review-modal__success .pdp-review-modal__scroll { gap: min(24 / var(--vw-screen) * 100 * 1vw, 24px); } .pdp-review-modal__success .pdp-review-modal__head { margin-bottom: 0; } .pdp-review-modal__success-banner { display: flex; align-items: center; justify-content: center; min-height: min(80 / var(--vw-screen) * 100 * 1vw, 80px); border-radius: var(--pdp-radius); background: #e8f5e9; } .pdp-review-modal__success-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } .pdp-review-modal__success-text { display: flex; flex-direction: column; gap: min(16 / var(--vw-screen) * 100 * 1vw, 16px); margin: 0; color: var(--pdp-t-color-text); } .pdp-review-modal__success-text p { margin: 0; } .pdp-review-modal .pdp-review-modal__success-close.btn { width: 100%; min-height: min(56 / var(--vw-screen) * 100 * 1vw, 56px); padding: 0 min(24 / var(--vw-screen) * 100 * 1vw, 24px); border: 0; border-radius: var(--pdp-radius); background-color: #de341d; color: #fff; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .pdp-review-modal .pdp-review-modal__success-close.btn::after { display: none; } .pdp-review-modal .pdp-review-modal__success-close.btn .btn__text { color: #fff; } .pdp-review-modal .pdp-review-modal__success-close.btn:hover, .pdp-review-modal .pdp-review-modal__success-close.btn:hover .btn__text { background-color: #de341d; color: #fff; } @media screen and (max-width: 574px) { .pdp-review-modal--open { align-items: stretch; justify-content: stretch; } .pdp-review-modal__overlay { display: none; } .pdp-review-modal__shell { width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; } .pdp-review-modal__dialog { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none; height: 100%; padding: 0; border-radius: 0; overflow: hidden; } .pdp-review-modal__close { display: none; } .pdp-review-modal__form, .pdp-review-modal__success { flex: 1 1 auto; min-height: 0; gap: 0; } .pdp-review-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: min(40 / var(--vw-screen) * 100 * 1vw, 40px) min(16 / var(--vw-screen) * 100 * 1vw, 16px) 0; -webkit-overflow-scrolling: touch; } .pdp-review-modal__success-banner{ min-height: min(340 / var(--vw-screen) * 100 * 1vw, 340px); } .pdp-typo--body { font-size: var(--pdp-t-body20-fs); } .pdp-review-modal__footer { padding: min(16 / var(--vw-screen) * 100 * 1vw, 16px); background: var(--c-white); box-shadow: 0 -1px 0 rgba(22, 22, 22, 0.08); } .pdp-review-modal__footer-close { display: inline-flex; } .pdp-review-modal__footer .pdp-review-modal__submit, .pdp-review-modal__footer--success .pdp-review-modal__success-close { min-height: min(40 / var(--vw-screen) * 100 * 1vw, 40px); } .pdp-review-modal__row { grid-template-columns: 1fr; gap: min(20 / var(--vw-screen) * 100 * 1vw, 20px); } .pdp-review-modal__star-icon { width: 28px; height: 28px; } } #pdpQuickOrderModal .contact-section__policy { display: flex; border: none; padding: 0; } #pdpQuickOrderModal .contact-section__policy .checkbox, #pdpQuickOrderModal .contact-section__policy .checkbox label { margin: 0; } #pdpQuickOrderModal .contact-section__policy .checkbox label p { padding: 0; margin-bottom: 0; } /* ==== Готовое решение (комплект) — выбор цвета/размера внутри карточки слоя ==== */ .pdp-solution-item__field { display: flex; flex-direction: column; gap: 4px; } .pdp-solution-item__field--disabled { opacity: 0.4; pointer-events: none; } .pdp-solution-item__field-label { color: var(--pdp-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; } .pdp-solution-item__colors { display: flex; gap: 16px; flex-wrap: wrap; } .pdp-solution-color .pdp-color__swatch { width: 72px; } .pdp-solution-color .pdp-color__img { width: 72px; height: 26px; } .pdp-solution-color--active .pdp-color__swatch { border-color: var(--pdp-accent); } .pdp-solution-item__sizes { display: flex; gap: 4px; flex-wrap: wrap; } .pdp-solution-size { font-family: var(--pdp-font-secondary); font-size: 11.5px; border: 1px solid rgba(22, 22, 22, 0.16); background: var(--pdp-page-bg); color: var(--pdp-text); padding: 3px 8px; border-radius: 2px; cursor: pointer; min-width: 28px; text-align: center; } .pdp-solution-size--active { border-color: var(--pdp-text); background: var(--pdp-text); color: var(--pdp-btn-on-inverse, #fff); } .pdp-solution-size:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } /* Карточки слоёв "В составе комплекта" переиспользуют готовый макет .pdp-kit-item (крупная цифра + серая карточка) — только добавляем отступ перед выбором цвета/размера, которого нет в исходном статичном прототипе. */ .pdp-kit-item__body .pdp-solution-item__field { margin-top: 8px; } .pdp-kit-item__body .pdp-solution-item__price { margin-top: 2px; } /* Текстовая "таблетка" цвета — для товаров без свойства-образца CAMOUFLAGE (цвет указан только в названии товара). Без квадрата-образца, только подпись. */ .pdp-solution-color--text { padding: 4px 10px; border: 1px solid rgba(22, 22, 22, 0.16); border-radius: 2px; cursor: pointer; background: var(--pdp-page-bg); } .pdp-solution-color--text.pdp-solution-color--active { border-color: var(--pdp-text); background: var(--pdp-text); } .pdp-solution-color--text.pdp-solution-color--active .pdp-solution-color__text-pill { color: var(--pdp-btn-on-inverse, #fff); } .pdp-solution-color__text-pill { color: var(--pdp-text); white-space: nowrap; } .pdp-solution { display: flex; flex-direction: column; gap: 20px; } .pdp-solution__group { display: flex; flex-direction: column; gap: 12px; } /* ==== Решение — редакционная страница по дизайну Figma (sln-*) ==== */ /* Значения (px/шрифты/цвета) взяты из Figma API — узел "1446" (780:2343), файл SWwDIuiL6Ed96XGk6XY0wE */ .sln { color: var(--pdp-text); font-family: var(--pdp-font-primary); } .sln__container { max-width: 1440px; margin: 0 auto; padding: 0 60px; } @media (max-width: 900px) { .sln__container { padding: 0 20px; } } /* ---- Hero: Rectangle 161 1440x590 ---- */ .sln-hero { position: relative; height: 590px; display: flex; align-items: flex-end; overflow: hidden; } .sln-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sln-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,8,.05) 0%, rgba(10,10,8,.08) 45%, rgba(10,10,8,.55) 100%); } .sln-hero .sln__container { position: relative; width: 100%; height: 100%; } .sln-breadcrumbs { position: absolute; top: 114px; left: 60px; display: flex; flex-wrap: wrap; gap: 5px; font-family: var(--pdp-font-secondary); font-size: 12px; font-weight: 300; letter-spacing: .01em; color: #fff; } .sln-breadcrumbs__item { color: #fff; text-decoration: none; } .sln-breadcrumbs__sep { color: #fff; } .sln-hero__content { position: absolute; top: 295px; left: 60px; width: 647px; max-width: calc(100% - 120px); display: flex; flex-direction: column; gap: 20px; } .sln-hero__title { font-weight: 900; font-size: 40px; line-height: 48px; margin: 0; color: #fff; text-wrap: balance; } .sln-hero__subtitle { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: #fff; margin: 0; } .sln-hero__btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 20px; background: var(--pdp-accent); color: #fff; border-radius: 2px; font-family: var(--pdp-font-secondary); font-weight: 700; font-size: 20px; text-decoration: none; transition: background .15s; } .sln-hero__btn:hover { background: var(--pdp-cart-btn-hover, #161616); } @media (max-width: 900px) { .sln-hero { height: auto; min-height: 460px; padding-bottom: 32px; } .sln-breadcrumbs { position: static; padding: 20px 20px 0; } .sln-hero__content { position: static; width: auto; margin: 32px 20px 0; } .sln-hero__title { font-size: 28px; line-height: 34px; } .sln-hero__btn { align-self: flex-start; font-size: 16px; height: 48px; } } .sln-section { padding: 56px 0; } .sln-section--grey { background: var(--pdp-surface); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(60px, calc((100vw - 1440px) / 2 + 60px)); padding-right: max(60px, calc((100vw - 1440px) / 2 + 60px)); box-sizing: border-box; } .sln-section__title { font-weight: 800; font-size: 32px; line-height: 32px; margin: 0 0 40px; color: var(--pdp-title); text-wrap: balance; } .sln-section__lead { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: var(--pdp-text); max-width: 780px; margin: -20px 0 32px; } /* ---- Как проходит охота: text col 670, aside 558 ---- */ .sln-article { display: grid; grid-template-columns: 670px 558px; gap: 40px; align-items: start; justify-content: space-between; } .sln-article__main { display: flex; flex-direction: column; gap: 20px; } .sln-expert { display: flex; align-items: stretch; background: var(--pdp-surface); border-radius: 2px; overflow: hidden; } .sln-expert__photo { width: 161px; flex: none; } .sln-expert__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sln-expert__info { padding: 25px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .sln-expert__label { font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: .01em; text-transform: uppercase; color: var(--pdp-text); margin: 0; } .sln-expert__name { font-weight: 800; font-size: 24px; line-height: 24px; color: var(--pdp-accent-select, var(--pdp-kit-num)); margin: 0; } .sln-expert__role { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: var(--pdp-text); margin: 4px 0 0; } .sln-article__text p { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: var(--pdp-text); margin: 0 0 20px; } .sln-article__text p:last-child { margin-bottom: 0; } .sln-profile { width: 558px; max-width: 100%; background: var(--pdp-surface); border-radius: 2px; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .sln-profile__title { font-family: var(--pdp-font-secondary); font-size: 14px; font-weight: 700; color: var(--pdp-text); margin: 0; } .sln-profile__grid { display: flex; gap: 40px; } .sln-profile__col { display: flex; flex-direction: column; gap: 16px; width: 239px; } .sln-profile__item { display: flex; gap: 10px; align-items: flex-start; } .sln-profile__icon { flex: none; width: 24px; height: 24px; color: var(--pdp-kit-num); } .sln-profile__label { font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: .01em; text-transform: uppercase; color: var(--pdp-text); margin: 0; } .sln-profile__value { font-size: 14px; line-height: 20px; letter-spacing: .02em; color: var(--pdp-text); margin: 2px 0 0; } @media (max-width: 1160px) { .sln-article { grid-template-columns: 1fr; } .sln-profile { width: 100%; } } @media (max-width: 560px) { .sln-profile__grid { flex-direction: column; gap: 16px; } .sln-profile__col { width: 100%; } .sln-expert { flex-direction: column; } .sln-expert__photo { width: 100%; height: 180px; } } /* ---- Основные проблемы охотника ---- */ .sln-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sln-problem__img { aspect-ratio: 427 / 251; border-radius: 2px; overflow: hidden; margin-bottom: 16px; } .sln-problem__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sln-problem__title { font-size: 24px; font-weight: 800; line-height: 24px; margin: 0 0 4px; color: var(--pdp-text); } .sln-problem__text { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: var(--pdp-text); margin: 0; } @media (max-width: 900px) { .sln-problems { grid-template-columns: 1fr; } } /* ---- Рекомендуем комплект: конструктор + фото ---- */ .sln-kit-layout { display: grid; grid-template-columns: 670px 558px; gap: 40px; align-items: start; justify-content: space-between; } .sln-kit-layout__photo { border-radius: 2px; overflow: hidden; } .sln-kit-layout__photo img { width: 100%; height: auto; display: block; } @media (max-width: 1160px) { .sln-kit-layout { grid-template-columns: 1fr; } .sln-kit-layout__photo { order: -1; max-width: 420px; margin: 0 auto 24px; } } /* ---- Гарантируем работу комплекта ---- */ .sln-guarantee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sln-guarantee__img { aspect-ratio: 427 / 251; border-radius: 2px; overflow: hidden; margin-bottom: 16px; } .sln-guarantee__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sln-guarantee__title { font-size: 24px; font-weight: 800; line-height: 24px; margin: 0 0 4px; color: var(--pdp-text); } .sln-guarantee__text { font-size: 16px; line-height: 24px; letter-spacing: .02em; color: var(--pdp-text); margin: 0; } @media (max-width: 900px) { .sln-guarantee { grid-template-columns: 1fr; } } /* ---- Витрины-ссылки: В составе комплекта / Может пригодиться ---- */ .sln-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sln-gallery__card { display: block; text-decoration: none; color: inherit; } .sln-gallery__img { aspect-ratio: 315 / 422; background: #fff; border-radius: 2px; overflow: hidden; margin-bottom: 16px; transition: opacity .15s; } .sln-gallery__card:hover .sln-gallery__img { opacity: .85; } .sln-gallery__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sln-gallery__name { font-weight: 900; font-size: 16px; line-height: 20px; letter-spacing: .01em; color: var(--pdp-text); margin: 0 0 8px; } .sln-gallery__price { font-family: var(--pdp-font-secondary); font-size: 16px; color: var(--pdp-text); margin: 0; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .sln-gallery { grid-template-columns: repeat(2, 1fr); } } /* ---- "N слоя работают вместе" — промо-блок конструктора (Frame 365) ---- */ .pdp-solution-promo { position: static; margin-top: 20px; padding: 32px; background: var(--pdp-promo-bg); border-radius: 2px; border-top: none; } .pdp-solution-promo__inner { display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .pdp-solution-promo__intro h3 { font-size: 32px; font-weight: 800; line-height: 32px; margin: 0 0 10px; color: var(--pdp-text); } .pdp-solution-promo__intro p { font-size: 20px; line-height: 28px; letter-spacing: .01em; color: var(--pdp-text); margin: 0; } .pdp-solution-promo__prices { flex-direction: row; align-items: baseline; gap: 10px; align-self: flex-start; } .pdp-solution-promo__price-top { gap: 8px; } .pdp-solution-promo__discount { background: transparent; color: var(--pdp-check); border-radius: 37px; padding: 2px 6px; background: #fff; font-family: var(--pdp-font-primary); font-weight: 500; } .pdp-solution-promo__price { font-size: 24px; font-weight: 700; } .pdp-solution-promo .pdp-buy__btn { width: 100%; height: 56px; font-size: 20px; } @media (min-width: 640px) { .pdp-solution-promo__inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } } @media (max-width: 900px) { .sln-section--grey { padding-left: 20px; padding-right: 20px; } } /* Ховер-раскрытие артикула/кнопки «Подробнее» на карточках товара в галереях решения. На исходных .product-card это раскрытие управляется Web Animations API, который инициализируется при сборке Swiper-слайдера и держит opacity через анимацию — её нельзя перебить даже inline style + !important. Здесь карточки лежат в обычной сетке (не Swiper), поэтому сделан независимый оверлей на чистом CSS :hover. */ .sln-card-media { position: relative; aspect-ratio: 315 / 422; border-radius: var(--pdp-radius, 2px); overflow: hidden; background: var(--pdp-surface, #f5f5f5); margin-bottom: 16px; } .sln-card-media .product-card__img-main { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .product-card:hover .sln-card-media .product-card__img-main { transform: scale(1.05); } .sln-card-wrap { position: relative; } /* position/top/left/width/height/opacity/z-index заданы через JS (см. script.js) — элемент переносится в document.body, чтобы не попадать под общую скролл-анимацию сайта, которая иначе блокирует его opacity. */ .sln-card-hover { align-items: flex-start; justify-content: space-between; padding: 12px 16px; color: var(--c-white, #fff); background: linear-gradient(180deg, rgba(22,22,22,.45) 0%, rgba(22,22,22,0) 40%, rgba(22,22,22,0) 100%); box-sizing: border-box; } .sln-card-hover .product-card__button { color: var(--c-black, #161616); } .pdp-gallery__stage-preorder { position: absolute; color: var(--pdp-btn-on-inverse); font-family: var(--pdp-t-mono-ff); background-color: var(--pdp-accent); font-size: 16px; font-weight: bold; padding: 5px 10px 5px 10px; left: 20px; top: 20px; z-index: 2; text-transform: uppercase; } .pdp-gallery__stage { position: relative; } .preorder-content { border: 1px solid var(--pdp-accent); padding: 30px; } .preorder-content__title { font-family: "Roboto Flex"; font-size: 14px; font-weight: bold; color: var(--pdp-accent); display: flex; align-items: center; margin-bottom: 15px; } .preorder-content ul { font-family: "Roboto Flex"; font-size: 14px; font-weight: 400; list-style-type: disc; padding-left: 15px; line-height: 20px; } /* End */ /* /local/templates/sinagear/components/bitrix/catalog.element/2026/style.css?1786522761155395 */