/* Start:/bitrix/templates/pravzhizn/components/bitrix/catalog/main/style.min.css?157017994113200*/ .wrapper-search-icon{margin-top:9px;margin-bottom:12px}.wrapper-search-icon input[type=text]{width:50%;border:1px solid #000;background:0 0;color:#929293;font-size:13px;height:35px;box-sizing:border-box;line-height:35px;padding:0 10px}.wrapper-search-icon button{height:35px;border-radius:0 6px 6px 0;margin-left:-1px;line-height:16px}.seo-h2{margin-top:40px}.catalog-categories{margin-left:-1%}.catalog-categories:after{content:'';display:block;clear:both}.catalog-category{display:inline-block;width:19%;margin:0 0 20px 1%;color:#555;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;float:left}.catalog-category-container{position:relative;overflow:hidden;height:200px}.catalog-category-container:before{display:none;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1}.catalog-category-container span{display:none;content:attr(data-count);font-size:24px;color:#fff;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.catalog-category:hover{text-decoration:none;color:#f95353}.catalog-category:hover .catalog-category-container span,.catalog-category:hover .catalog-category-container:before{display:block}.catalog-category-img{display:block;height:100%;width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.catalog-category-name{font-weight:700;display:block;margin-top:10px}@media only screen and (max-width:768px){.catalog-categories{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;justify-content:space-around;margin:0}.catalog-categories:after{content:none}.catalog-category{width:150px;float:none;margin:0 0 20px}}@media (max-width:1023px){.catalog-section-page .sidebar{display:none}}.catalog-section-page .sidebar{padding-top:20px;padding-bottom:20px}.catalog-section-page .container-new{display:flex;flex-wrap:wrap;justify-content:space-between}.catalog{width:100%;padding-bottom:80px}.catalog__title{display:block;color:#222}.catalog-banner,.catalog-collections,.catalog-popular,.catalog__more-link--about,.goods-slider{margin-bottom:28px}.catalog-banner--mob{display:flex}.catalog-banner--desk{display:none}.catalog-banner__item{position:relative;display:block;content:'';width:332px;height:190px;border-radius:4px}.catalog-banner__item img{border-radius:4px;width:100%;height:100%}.catalog-banner__item a{display:block;height:100%}.catalog-banner__item .catalog-banner__item-btn{display:flex;position:absolute;height:24px;width:100%;justify-content:space-between;bottom:15px;padding:0 20px;box-sizing:border-box}.catalog-filter,.catalog-filter__btn-wrapper,.goods-slider{position:relative}.catalog-popular__item,.goods-slider__item-wrapper{display:flex;flex-direction:column;border-radius:4px;box-sizing:border-box}.catalog-banner__item-btn a:hover{opacity:.7}.catalog-popular__item{width:164px;height:153px;padding:18px 30px 20px;align-items:center;text-align:center;background-color:#F8F8F8}.catalog-popular__item:hover{background-color:#E8E8E8}.catalog-popular__item:active{background-color:#E8E8E8;opacity:.7}.catalog-popular__item-img{min-height:80px;margin-bottom:11px}.catalog-popular__item img{max-width:92px;max-height:80px;width:auto!important}.catalog-popular__item span{font-family:MuseoSansCyrl-500;font-size:14px;line-height:16px;color:#222}.goods-slider__wrapper{margin-bottom:16px}.goods-slider__item-wrapper{justify-content:space-between;max-width:164px;min-height:384px;padding:12px;border:1px solid #ECECEC}.goods-slider--big .goods-slider__item-wrapper{max-width:332px;min-height:558px;padding:26px 20px}.goods-slider__item{display:block}.goods-slider__item:hover{text-decoration:none}.goods-slider__item-img{display:block;margin:0 auto 12px;max-width:140px;max-height:140px}.goods-slider--big .goods-slider__item-img{margin-bottom:16px;max-width:292px;max-height:292px}.goods-slider__item-text{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:8px}.goods-slider__item-name,.goods-slider__item-variants{display:inline-block;font-family:MuseoSansCyrl-500;line-height:18px;font-size:14px}.goods-slider__item-name{color:#222}.goods-slider__item-description{display:none}.goods-slider__item-variants{margin-top:4px;color:#999}.goods-slider--big .goods-slider__item-name,.goods-slider--big .goods-slider__price,.goods-slider__price{font-family:MuseoSansCyrl-700;color:#222}.goods-slider--big .goods-slider__item-name{font-size:17px;line-height:20px}.goods-slider__price-wrapper{min-height:42px}.goods-slider__price{display:block;font-size:17px;line-height:22px}.goods-slider--big .goods-slider__price{margin-bottom:0;font-size:25px;line-height:38px}.goods-slider__price-old{display:flex;align-items:center}.goods-slider__price-old span{display:inline-block;margin-right:6px;font-family:MuseoSansCyrl-500;font-size:14px;line-height:18px;text-decoration:line-through;color:#999}.goods-slider__buy-btn,.goods-slider__price-old i{display:inline-block;font-family:MuseoSansCyrl-700}.goods-slider--big .goods-slider__price-old span{font-size:17px;line-height:22px}.goods-slider__price-old i{width:38px;height:20px;font-size:11px;line-height:20px;color:#FFF;text-align:center;background-color:#3EC300;border-radius:2px}.goods-slider__buy-btn{padding:5px 11px;margin-top:16px;font-size:14px;line-height:18px;color:#EA543F;border:2px solid #EA543F;border-radius:4px;box-sizing:border-box}.catalog-collections__item-text b,.goods-slider--big .goods-slider__buy-btn{font-family:MuseoSansCyrl-700;font-size:17px;line-height:22px}.goods-slider--big .goods-slider__buy-btn{padding:11px 22px;margin-top:20px;color:#FFF;background-color:#EA543F}.catalog-collections__item{display:flex;align-items:center;padding:20px;max-width:332px;border-radius:4px;border:2px solid #FFCA3A}.catalog-collections__item-text b{display:inline-block;margin-bottom:4px;color:#222}.catalog-collections__item-text span{display:inline-block;margin-bottom:12px;font-family:MuseoSansCyrl-500;font-size:14px;line-height:18px;color:#222}.catalog-collections__item-img{max-width:84px}.catalog__more-link{font-family:MuseoSansCyrl-700;font-size:14px;line-height:18px;color:#4392F1}.catalog-about li,.catalog-about p,.catalog-help__item-link{font-family:MuseoSansCyrl-500;font-size:14px;line-height:18px}.catalog__more-link:hover{color:#4392F1;opacity:.7}.catalog__more-link:active{color:#4392F1;opacity:.3}.catalog-about{padding-right:20px;margin-bottom:15px;box-sizing:border-box}.catalog-about img{height:200px;margin-right:20px;margin-top:10px;float:left;clear:left}.catalog-about li,.catalog-about p{margin-bottom:12px;color:rgba(34,34,34,.8)}.catalog-about p:first-child img{margin-top:0}.catalog-about ul{padding-left:10px;display:inline-block}.catalog-about ul li{list-style:disc;display:list-item;margin-left:1em}.catalog-about ul li:last-child{margin-bottom:0}.catalog-about h3{padding-bottom:20px;margin-bottom:20px}.catalog-help{margin-bottom:30px}.catalog-help__list-item{margin-bottom:8px}.catalog-help__list .catalog-help__list-item:last-child{margin-bottom:0}.catalog-help__item-link{color:#999}.catalog-filter{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-bottom:25px}.catalog-filter__btn{display:block;width:28px;height:28px;font-size:0;background-size:21px;background-repeat:no-repeat;background-position:center;background-image:url(/bitrix/templates/pravzhizn/components/bitrix/catalog/main/../../../../images/svg/icon-sort-filter.svg)}.catalog-about__text h2,.catalog__title{margin-bottom:12px;font-family:MuseoSansCyrl-700;font-size:25px;line-height:32px}a.catalog__title{display:inline-block}a.catalog__title:hover{color:#4392F1}a.catalog__title:active{opacity:.5;color:#4392F1}.catalog-about__text a{display:inline-block;margin-bottom:12px;font-family:MuseoSansCyrl-500;font-size:14px;line-height:18px;color:rgba(67,146,241,.8)}@media (min-width:1024px){.catalog-section-page .catalog{padding-top:20px;width:75%;float:none}.catalog{padding-bottom:120px}.catalog-banner,.catalog-collections,.catalog-popular,.catalog__more-link--about,.goods-slider{margin-bottom:40px}.category-list .category-list__item{margin-bottom:20px}.category-list .category-list__item:last-child{margin-bottom:0}.category-list a{font-family:MuseoSansCyrl-700;font-size:17px;line-height:22px;color:#222}.category-list .category-count,.goods-slider__item-description,.sub-catalog-list a{font-family:MuseoSansCyrl-500}.category-list a:hover{opacity:.7;color:#222}.category-list a:active{opacity:.5;color:#222}.category-list .sub-catalog-list{padding-left:10px}.sub-catalog-list{padding-top:8px}.sub-catalog-list li{margin-bottom:8px}.sub-catalog-list li:last-child{margin-bottom:0}.sub-catalog-list a{font-size:14px;line-height:18px;color:rgba(34,34,34,.8)}.sub-catalog-list .category-list__item_child--all a{position:relative;color:#4392F1}.sub-catalog-list .category-list__item_child--all a::after{position:absolute;content:'';width:10px;height:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;left:90px;background-repeat:no-repeat;background-position:center;background-size:9px 5px;background-image:url(/bitrix/templates/pravzhizn/components/bitrix/catalog/main/../../../../images/svg/icon-arrow-bottom-blue.svg);transition:transform .2s}.sub-catalog-list .category-list__item_child--all a.opened::after{transform:rotate(180deg)}.category-list .category-count{font-size:11px;line-height:18px;color:#999}.catalog-popular__wrapper{width:100%;display:grid;grid-column-gap:12px;grid-row-gap:12px;grid-template-columns:repeat(3,1fr)}.catalog-popular__wrapper .catalog-popular__item{width:100%}.catalog-popular__item{padding:12px;max-height:134px}.catalog-popular__item-img{display:flex;align-items:center;min-height:80px}.catalog-popular__item img{max-width:96px;max-height:80px;width:auto}.catalog-popular__item span{font-size:17px;line-height:22px}.goods-slider--big .goods-slider__item{display:flex}.goods-slider__item-wrapper{max-width:236px;padding:20px}.goods-slider--big .goods-slider__item-wrapper{position:relative;max-height:380px;padding:20px 35px 20px 20px;max-width:none;min-height:auto}.goods-slider--big .goods-slider__img-wrapper{width:50%}.goods-slider--big .product-item__label--day{display:none}.goods-slider--big .product-item .image{width:auto;max-height:unset}.goods-slider__item-img{max-width:196px;max-height:196px;margin-bottom:16px}.goods-slider--big .goods-slider__item-img{width:auto;max-width:340px;max-height:340px}.goods-slider--big .goods-slider__text-wrapper{width:50%;padding-left:32px;box-sizing:border-box}.goods-slider--big .goods-slider__item-text{margin-bottom:16px}.goods-slider--big .goods-slider__item-name{margin-bottom:12px}.goods-slider__item-description{display:inline-block;font-size:14px;line-height:18px;color:#222}.goods-slider--big .goods-slider__price{font-size:31px}.goods-slider__buy-btn{padding:7px 19px}.goods-slider--big .goods-slider__buy-btn{position:absolute;left:calc(50% + 25px);bottom:20px;margin:0}.catalog-collections__item{max-width:360px;padding:22px 20px;box-sizing:border-box}.catalog-help__list{display:flex;flex-wrap:wrap}.catalog-help__list-item{width:33.33%}.catalog-select{width:100%;max-width:291px}.catalog-section-page .sidebar{width:25%;max-width:212px;box-sizing:border-box;float:none}#main .catalog-section-page #content{width:75%;float:none}#main .catalog-section-page .container-new--nosidebar #content{width:100%}.goods-slider .catalog__more-link{position:absolute;top:8px;right:0}.catalog-banner--mob{display:none}.catalog-banner--desk{display:flex}.catalog-banner__wrapper .catalog-banner__wrapper-col{display:flex;flex-direction:column;justify-content:space-between;margin-right:12px}.catalog-banner__wrapper .catalog-banner__wrapper-col:last-child{margin-right:0}.catalog-banner__item{width:236px;height:134px}.catalog-banner__item--big{width:484px;height:280px}.catalog-banner__wrapper{margin-left:12px;display:flex;width:calc(100% - 481px)}.catalog-banner__wrapper-row{display:flex;width:100%;margin-bottom:12px}.jsFixedWrap.fixed-sidebar{position:relative;justify-content:flex-end}.sidebar.fixed{position:fixed;top:0;left:20px;z-index:200;background-color:#FFF}.sidebar.fixed-bottom{position:absolute;bottom:0;top:auto}}@media (min-width:1024px) and (max-width:1259px){.catalog-section-page .container-new.container-new--catalog{padding-right:25px}}@media (min-width:1260px){.sidebar.fixed{left:140px}}@media (min-width:1600px){.catalog-section-page .sidebar{width:15%;max-width:none;padding-right:20px;padding-top:20px;box-sizing:border-box}#main .catalog-section-page .catalog{width:85%}.catalog-popular__wrapper .catalog-popular__item:nth-child(4n){margin-right:12px}.catalog-banner__item{width:215px;height:122px}.catalog-banner__item--big{width:442px;height:255px}.catalog-banner__wrapper{flex:1}.catalog-popular__item span{font-size:14px;line-height:18px}.catalog-popular__wrapper{grid-template-columns:repeat(4,1fr)}.sidebar.fixed{max-width:198px;margin-left:auto;margin-right:auto;left:-1122px;right:0}.sidebar.sidebar--wide.fixed{left:-1032px}} /* End */ /* Start:/bitrix/templates/pravzhizn/components/bitrix/breadcrumb/main/style.css?1791966286977*/ ul.breadcrumbs{ /*margin: 15px auto 0;*/ /*list-style: none;*/ } ul.breadcrumbs li{ display:inline-block; color: #7a7a7a; line-height: 18px; position:relative; font-size: 12px; } /*ul.breadcrumbs li a{*/ /*color: #000;*/ /*}*/ /*ul.breadcrumbs li:before{*/ /*content: '»';*/ /*display: inline-block;*/ /*color: #000;*/ /*font-size: 14px;*/ /*margin: 0 7px;*/ /*}*/ ul.breadcrumbs li:first-child:before{content:none;} /*NEW-STYLES*/ ul.breadcrumbs{ padding: 22px 0 4px; margin-bottom: 4px; list-style: none; } ul.breadcrumbs li a{ font-family: 'MuseoSansCyrl-500'; font-size: 13px; line-height: 16px; color: #999999; } ul.breadcrumbs li:before{ content: '-'; display: inline-block; color: #999999; font-size: 14px; margin: 0 7px; } @media (min-width: 769px) { ul.breadcrumbs { /*margin-top: 42px;*/ } ul.breadcrumbs li { font-size: 13px; line-height: 16px; } .wrapper-page-about-title ul.breadcrumbs { margin-bottom: 24px; } } /* End */ /* Start:/bitrix/templates/pravzhizn/components/bitrix/catalog.element/detail-v2/style.css?179196628664547*/ /* ============================================================ detail-v2 — эталонная карточка товара (shop v1.2). Задача Б24 8326. Скоуп: ВСЁ под корнем .pz-detail-v2 (защита каталога от утечек, память css-component-scoped-not-body). Автоподключается Битриксом. ТОКЕН-МОСТ: прототип (product.css/shop.css/v1-1.css) использует непрефиксированные токены (--primary, --r, --s-N, --font-serif и пр.). Здесь объявляем их алиасами на глобальные --pz-* (css/pz-tokens.css) — это позволяет копировать CSS прототипа блок-в-блок БЕЗ переименования переменных. Токены-алиасы наследуются вниз по дереву карточки. ============================================================ */ .pz-detail-v2 { /* --- families --- */ --font-serif: var(--pz-font-serif); --font-sans: var(--pz-font-sans); --font-quote: var(--pz-font-quote); /* --- brand --- */ --primary: var(--pz-primary); --primary-hover: var(--pz-primary-hover); --primary-press: var(--pz-primary-press); --primary-soft: var(--pz-primary-soft); --primary-soft-2: var(--pz-primary-soft-2); --accent: var(--pz-accent); --accent-hover: var(--pz-accent-hover); --accent-soft: var(--pz-accent-soft); --ink-strong: var(--pz-ink-strong); /* scripture-brass подавлен на карточках товара (README §85): в серый */ --scripture: var(--pz-text-3); --scripture-soft: var(--pz-surface-2); /* --- surfaces & text --- */ --bg: var(--pz-bg); --surface: var(--pz-surface); --surface-2: var(--pz-surface-2); --surface-3: var(--pz-surface-3); --text: var(--pz-text); --text-2: var(--pz-text-2); --text-3: var(--pz-text-3); --text-4: var(--pz-text-4); --on-primary: var(--pz-on-primary); --divider: var(--pz-divider); --divider-2: var(--pz-divider-2); /* --- feedback --- */ --success: var(--pz-success); --success-soft: var(--pz-success-soft); --error: var(--pz-error); --error-soft: var(--pz-error-soft); --warning: var(--pz-warning); --warning-soft: var(--pz-warning-soft); --info: var(--pz-info); --info-soft: var(--pz-info-soft); --mark: var(--pz-mark); /* --- radii --- */ --r-xs: var(--pz-r-xs); --r-sm: var(--pz-r-sm); --r: var(--pz-r); --r-lg: var(--pz-r-lg); --r-xl: var(--pz-r-xl); --r-pill: var(--pz-r-pill); /* --- spacing --- */ --s-1: var(--pz-s-1); --s-2: var(--pz-s-2); --s-3: var(--pz-s-3); --s-4: var(--pz-s-4); --s-5: var(--pz-s-5); --s-6: var(--pz-s-6); --s-7: var(--pz-s-7); --s-8: var(--pz-s-8); --s-9: var(--pz-s-9); --s-10: var(--pz-s-10); --s-12: var(--pz-s-12); /* --- shadows / motion --- */ --sh-xs: var(--pz-sh-xs); --sh-sm: var(--pz-sh-sm); --sh-md: var(--pz-sh-md); --sh-lg: var(--pz-sh-lg); --motion: var(--pz-motion); /* базовая типографика карточки (scoped, не глобально) */ font-family: var(--font-sans); font-size: 18px; line-height: 1.65; color: var(--text); } .pz-detail-v2 *, .pz-detail-v2 *::before, .pz-detail-v2 *::after { box-sizing: border-box; } .pz-detail-v2 h1, .pz-detail-v2 h2, .pz-detail-v2 h3, .pz-detail-v2 h4 { font-family: var(--font-serif); color: var(--text); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } .pz-detail-v2 h3 { font-weight: 500; } .pz-detail-v2 p { margin: 0; } .pz-detail-v2 a { color: var(--primary); text-decoration: none; } .pz-detail-v2 a:hover { text-decoration: underline; text-underline-offset: 3px; } .pz-detail-v2 img { max-width: 100%; display: block; } /* ---- Примитивы дизайн-системы (из blog-theme.css, scoped) ---- */ .pz-detail-v2 .pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1; padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: all .16s var(--motion); white-space: nowrap; } .pz-detail-v2 .pz-btn svg { width: 18px; height: 18px; } .pz-detail-v2 .pz-btn--primary { background: var(--primary); color: var(--on-primary); } .pz-detail-v2 .pz-btn--primary:hover { background: var(--primary-hover); text-decoration: none; } .pz-detail-v2 .pz-btn--primary:active { background: var(--primary-press); transform: translateY(1px); } .pz-detail-v2 .pz-btn--accent { background: var(--accent); color: #fff; } .pz-detail-v2 .pz-btn--accent:hover { background: var(--accent-hover); text-decoration: none; } .pz-detail-v2 .pz-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--divider-2); } .pz-detail-v2 .pz-btn--secondary:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } .pz-detail-v2 .pz-btn--ghost { background: transparent; color: var(--primary); padding: 10px 12px; } .pz-detail-v2 .pz-btn--ghost:hover { background: var(--primary-soft); text-decoration: none; } .pz-detail-v2 .pz-btn--sm { padding: 9px 14px; font-size: 14px; border-radius: var(--r-sm); } .pz-detail-v2 .pz-btn--lg { padding: 16px 28px; font-size: 18px; } .pz-detail-v2 .pz-btn--block { display: flex; width: 100%; } /* line-иконки: глобальный svg{fill:currentColor} каталога забивает stroke-иконки */ .pz-detail-v2 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ ПЕРВЫЙ ЭКРАН (чанк 2-4): галерея + панель покупки. Значения из product.css/shop.css/v1-1.css + инлайн ultracode. ============================================================ */ /* ---- Сетка ---- */ .pz-detail-v2 .pz-pdp__grid { display: grid; grid-template-columns: minmax(0,500px) minmax(0,1fr); gap: 0 44px; align-items: start; margin-top: 18px; } .pz-detail-v2 .pz-pdp__below { margin-top: var(--s-8); display: flex; flex-direction: column; } /* ---- Галерея ---- */ .pz-detail-v2 .pz-gallery { position: sticky; top: 86px; } .pz-detail-v2 .pz-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--divider); background: var(--surface); position: relative; } .pz-detail-v2 .pz-cover .pz-gallery__main[data-gallery-zoom] { cursor: zoom-in; } .pz-detail-v2 .pz-cover .pz-gallery__main[data-gallery-zoom] .pz-gallery__nav { cursor: pointer; } /* базовый примитив .pz-ph (из blog-components.css) - контейнер фото/плейсхолдера, тянется на весь родитель (это и не давало галерее правильно вписывать фото) */ .pz-detail-v2 .pz-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--surface-3); color: var(--text-4); position: relative; } .pz-detail-v2 .pz-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Товарные фото галереи вписываем целиком (contain), поля белые - как в макете */ .pz-detail-v2 .pz-gallery .pz-ph { background: #fff; } .pz-detail-v2 .pz-gallery .pz-ph img { object-fit: contain; } .pz-detail-v2 .pz-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); box-shadow: var(--sh-md); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 3; } .pz-detail-v2 .pz-gallery__nav:hover { background: #fff; } .pz-detail-v2 .pz-gallery__nav svg { width: 20px; height: 20px; } .pz-detail-v2 .pz-gallery__nav--prev { left: 10px; } .pz-detail-v2 .pz-gallery__nav--next { right: 10px; } .pz-detail-v2 .pz-gallery__counter { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); z-index: 3; } .pz-detail-v2 .pz-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } .pz-detail-v2 .pz-gallery__thumb { width: 76px; height: 76px; flex: none; border-radius: var(--r); overflow: hidden; border: 1px solid var(--divider); background: var(--surface); cursor: pointer; transition: border-color .15s; position: relative; } .pz-detail-v2 .pz-gallery__thumb.is-active { border-color: var(--primary); } .pz-detail-v2 .pz-gallery__all { margin-top: 12px; width: 100%; justify-content: center; } /* ---- Лайтбокс ---- */ .pz-detail-v2 .pz-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); } .pz-detail-v2 .pz-lightbox.is-open { display: flex; } .pz-detail-v2 .pz-lightbox__stage { display: flex; align-items: center; justify-content: center; } .pz-detail-v2 .pz-lightbox__stage .pz-ph { width: auto; height: auto; max-width: 90vw; max-height: 90vh; background: none; } .pz-detail-v2 .pz-lightbox__stage .pz-ph img { width: auto; height: auto; max-width: 90vw; max-height: 90vh; object-fit: contain; } .pz-detail-v2 .pz-lightbox__close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pz-detail-v2 .pz-lightbox__close svg { width: 20px; height: 20px; } .pz-detail-v2 .pz-lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pz-detail-v2 .pz-lightbox__arrow--prev { left: 20px; } .pz-detail-v2 .pz-lightbox__arrow--next { right: 20px; } .pz-detail-v2 .pz-lightbox__arrow svg { width: 22px; height: 22px; } .pz-detail-v2 .pz-lightbox__counter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.12); padding: 5px 12px; border-radius: var(--r-pill); } /* ---- Панель покупки ---- */ .pz-detail-v2 .pz-buy__title { font-family: var(--font-serif); font-size: 31px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } .pz-detail-v2 .pz-buy__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: 13.5px; color: var(--text-3); } .pz-detail-v2 .pz-buy__meta > :last-child:not(.pz-buy__art):not(.pz-buy__coll) { margin-left: auto; font-weight: 700; } .pz-detail-v2 .pz-buy__art { color: var(--text-3); display: inline-flex; align-items: center; } .pz-detail-v2 .pz-buy__coll { color: var(--text-3); } .pz-detail-v2 .pz-buy__coll a { color: var(--primary); font-weight: 600; } .pz-detail-v2 .pz-buy__art .pz-copybtn { vertical-align: baseline; } .pz-detail-v2 .pz-copybtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--divider-2); border-radius: var(--r-xs); background: var(--surface); padding: 0; margin-left: 4px; cursor: pointer; color: var(--text-3); vertical-align: -6px; transition: border-color .15s, color .15s, background .15s; } .pz-detail-v2 .pz-copybtn svg { width: 14px; height: 14px; } .pz-detail-v2 .pz-copybtn__msg { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--text); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-xs); opacity: 0; pointer-events: none; transition: opacity .15s; } .pz-detail-v2 .pz-copybtn.is-copied .pz-copybtn__msg { opacity: 1; } .pz-detail-v2 .pz-copybtn:hover { border-color: var(--primary); color: var(--primary); } .pz-detail-v2 .pz-copybtn.is-copied { border-color: var(--success); background: var(--success-soft); color: var(--success); } .pz-detail-v2 .pz-prodreviews { margin-top: 10px; } .pz-detail-v2 .pz-buy__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .pz-detail-v2 .pz-buy__rating:hover { text-decoration: underline; text-underline-offset: 3px; } .pz-detail-v2 .pz-buy__rating .stars { color: #E8A23D; letter-spacing: 1px; } /* ---- Цена ---- */ .pz-detail-v2 .pz-priceswap { border: 1px solid var(--divider); border-radius: var(--r-lg); padding: 18px 20px; background: var(--surface); } .pz-detail-v2 .pz-priceblock { display: none; } .pz-detail-v2 .pz-priceblock.is-on { display: block; } .pz-detail-v2 .pz-price-row { display: flex; gap: 14px; align-items: stretch; } .pz-detail-v2 .pz-price-row > .pz-pricecol { flex: 1; min-width: 0; } .pz-detail-v2 .pz-priceblock__now { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pz-detail-v2 .pz-priceblock__big { font-family: var(--font-sans); font-weight: 700; font-size: 34px; color: var(--text); letter-spacing: -.01em; } .pz-detail-v2 .pz-priceblock__old { font-size: 18px; color: var(--text-3); text-decoration: line-through; font-weight: 600; } .pz-detail-v2 .pz-priceblock__save { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--success); background: var(--success-soft); padding: 4px 10px; border-radius: var(--r-xs); } .pz-detail-v2 .pz-priceblock__sub { font-size: 13px; color: var(--text-3); margin-top: 6px; } .pz-detail-v2 .pz-wholehint { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--divider-2); border-radius: var(--r); padding: 9px 13px; } .pz-detail-v2 .pz-wholehint svg { width: 16px; height: 16px; color: var(--text-3); } .pz-detail-v2 .pz-wholehint a { color: var(--text-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .pz-detail-v2 .pz-cashback { flex: none; width: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 10px 8px; border: 1px solid var(--divider); border-radius: var(--r); background: var(--surface); } .pz-detail-v2 .pz-cashback svg { width: 18px; height: 18px; color: var(--text-2); margin-bottom: 2px; } .pz-detail-v2 .pz-cashback__val { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.1; } .pz-detail-v2 .pz-cashback__lbl { font-size: 12px; font-weight: 500; color: var(--text-2); } .pz-detail-v2 .pz-cashback__note { font-size: 10.5px; font-weight: 300; color: var(--text-3); margin-top: 1px; } /* ---- CTA ---- */ .pz-detail-v2 .pz-buy__cta { display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; margin: 20px 0 8px; } .pz-detail-v2 .pz-buy__cta > .pz-btn { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; } .pz-detail-v2 .pz-buy__cta > .pz-iconbtn-lg, .pz-detail-v2 .pz-buy__cta > .pz-share { flex: 0 0 auto; margin: 0; } .pz-detail-v2 .pz-iconbtn-lg { width: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--divider-2); border-radius: var(--r); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s; } .pz-detail-v2 .pz-iconbtn-lg:hover { border-color: var(--primary); color: var(--primary); } .pz-detail-v2 .pz-iconbtn-lg svg { width: 22px; height: 22px; } .pz-detail-v2 .pz-iconbtn-lg.is-active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .pz-detail-v2 .pz-share { position: relative; display: flex; align-items: stretch; } .pz-detail-v2 .pz-share > .pz-iconbtn-lg { height: auto; } .pz-detail-v2 .pz-share__menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; min-width: 216px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 6px; } .pz-detail-v2 .pz-share__menu[hidden] { display: none; } .pz-detail-v2 .pz-share__it { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--r); padding: 9px 11px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; } .pz-detail-v2 .pz-share__it:hover { background: var(--surface-2); } .pz-detail-v2 .pz-share__it svg { width: 18px; height: 18px; flex: none; color: var(--text-3); } .pz-detail-v2 .pz-share__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; } .pz-detail-v2 .pz-favnote { display: none; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); } .pz-detail-v2 .pz-favnote.is-on { display: flex; } .pz-detail-v2 .pz-favnote svg { width: 16px; height: 16px; flex: none; color: var(--primary); } .pz-detail-v2 .pz-favnote a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } /* ---- Доставка ---- */ .pz-detail-v2 .pz-buy__ship { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--divider); } .pz-detail-v2 .pz-buy__shipit { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); } .pz-detail-v2 .pz-buy__shipit svg { width: 17px; height: 17px; flex: none; color: var(--text-3); margin-top: 1px; } .pz-detail-v2 .pz-buy__shipit b { color: var(--text); font-weight: 700; } .pz-detail-v2 .pz-buy__carriers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pz-detail-v2 .pz-dlogo { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 8px; border-radius: var(--r-sm); font-weight: 700; font-size: 13px; letter-spacing: .01em; min-width: 0; background: var(--surface); border: 1.5px solid currentColor; } .pz-detail-v2 .pz-dlogo--ozon { color: #005BFF; } .pz-detail-v2 .pz-dlogo--cdek { color: #1AB248; } .pz-detail-v2 .pz-dlogo--post5 { color: #E2231A; } /* ---- Sticky-бар (мобайл) ---- */ .pz-detail-v2 .pz-pdp-sticky { display: none; } /* ============================================================ Адаптив ============================================================ */ @media (max-width: 980px) { .pz-detail-v2 .pz-pdp__grid { grid-template-columns: minmax(0,1fr); gap: 28px; } .pz-detail-v2 .pz-gallery { position: static; } } @media (max-width: 760px) { .pz-detail-v2 .pz-pdp__grid { margin-top: 10px; gap: 16px; } } @media (max-width: 560px) { /* Порядок панели покупки на мобиле (как прототип): цена и CTA поднимаются над честным блоком и рейтингом - иначе .pz-bless (высокий) и .pz-prodreviews уводят цену/"В корзину" далеко вниз. DOM и десктоп не трогаем, только order. */ .pz-detail-v2 .pz-buy { display: flex; flex-direction: column; } .pz-detail-v2 .pz-buy > .pz-buy__title { order: 1; } .pz-detail-v2 .pz-buy > .pz-buy__meta { order: 2; } .pz-detail-v2 .pz-buy > .pz-priceswap { order: 3; } .pz-detail-v2 .pz-buy > .pz-buy__cta { order: 4; } .pz-detail-v2 .pz-buy > .pz-favnote { order: 4; } .pz-detail-v2 .pz-buy > .pz-bless { order: 5; } .pz-detail-v2 .pz-buy > .pz-prodreviews { order: 6; } .pz-detail-v2 .pz-buy > .pz-buy__ship { order: 7; } /* Опт-хинт в мобильном стеке стоит прямо над "В корзину" - гасим карточку-рамку до приглушённой строки, чтобы не конкурировала с основным CTA (как прототип). */ .pz-detail-v2 .pz-wholehint { display: block; background: none; border: none; padding: 0; margin: 8px 0 14px; font-size: 12.5px; font-weight: 400; color: var(--text-3); } .pz-detail-v2 .pz-wholehint svg { display: none; } .pz-detail-v2 .pz-buy__title { font-size: 22px; line-height: 1.22; } .pz-detail-v2 .pz-gallery__thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; margin-top: 8px; gap: 8px; } .pz-detail-v2 .pz-gallery__thumb { width: 56px; height: 56px; } .pz-detail-v2 .pz-gallery__thumb.is-active { border-width: 2px; } .pz-detail-v2 .pz-price-row { flex-wrap: wrap; } .pz-detail-v2 .pz-cashback { width: 100%; } .pz-detail-v2 .pz-buy__cta { flex-wrap: wrap; } /* 1:1 с макетом (ultracode @560): ОБЕ текстовые кнопки на всю ширину, каждая своим рядом; иконки избранного и шаринга встают вместе в последний ряд. Раньше 100% был только на primary - "Купить в один клик" оставался в ряду и выдавливал шаринг на 3-ю строку. */ .pz-detail-v2 .pz-buy__cta > .pz-btn { flex-basis: 100%; } /* «Купить в один клик» (secondary) не на всю ширину, а flex:1 в одном ряду с иконками ♡/шаринг (правка Кости из ultracode-макета). order не задаём - в нашей вёрстке его нет. */ .pz-detail-v2 .pz-buy__cta > .pz-btn--secondary { flex: 1; min-width: 0; width: auto; } .pz-detail-v2 .pz-buy__shipit { font-size: 15px; } .pz-detail-v2 .pz-copybtn { width: 40px; height: 44px; } .pz-detail-v2 .pz-pdp-sticky { position: sticky; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--divider); padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); margin: 16px -18px 0; } .pz-detail-v2 .pz-pdp-sticky .pz-btn { width: 100%; justify-content: center; } .pz-detail-v2 .pz-lightbox__arrow { width: 44px; height: 44px; } .pz-detail-v2 .pz-lightbox__arrow--prev { left: 8px; z-index: 1; } .pz-detail-v2 .pz-lightbox__arrow--next { right: 8px; } .pz-detail-v2 .pz-lightbox__close { width: 44px; height: 44px; z-index: 1; } } /* ============================================================ НИЗ КАРТОЧКИ (чанк 5): описание, характеристики, раскрывашки, подарки, Q&A ============================================================ */ .pz-detail-v2 .pz-psec { margin-top: 44px; } .pz-detail-v2 .pz-psec__h { font-family: var(--font-serif); font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; } .pz-detail-v2 .pz-psec__s { font-size: 15px; color: var(--text-2); font-weight: 300; margin-bottom: 18px; } .pz-detail-v2 .pz-secbody { font-size: 15px; line-height: 1.65; color: var(--text-2); font-weight: 300; text-wrap: pretty; margin-top: 12px; } .pz-detail-v2 .pz-secbody p { margin: 0 0 10px; } .pz-detail-v2 .pz-secbody p:last-child { margin-bottom: 0; } .pz-detail-v2 .pz-secbody b, .pz-detail-v2 .pz-secbody strong { color: var(--text); font-weight: 700; } .pz-detail-v2 .pz-secbody blockquote { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--text); border-left: 3px solid var(--scripture); padding: 4px 0 4px 18px; margin: 16px 0; line-height: 1.5; } .pz-detail-v2 .pz-secbody blockquote cite { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); font-weight: 700; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; } .pz-detail-v2 .pz-secbody ul { margin: 12px 0; padding-left: 20px; } .pz-detail-v2 .pz-secbody li { margin: 0 0 8px; } .pz-detail-v2 .pz-secbody a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .pz-detail-v2 .pz-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; font-size: 15px; line-height: 1.6; color: var(--text-2); font-weight: 300; } .pz-detail-v2 .pz-desc p { margin: 0 0 10px; } .pz-detail-v2 .pz-desc p:last-child { margin-bottom: 0; } .pz-detail-v2 .pz-desc.is-open { -webkit-line-clamp: unset; display: block; } .pz-detail-v2 .pz-desc__more { background: none; border: none; color: var(--primary); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 0 0; } /* базовая таблица .pz-tiers (product.css) - используется и опт-лесенкой, и .pz-specs__table */ .pz-detail-v2 .pz-tiers { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; } .pz-detail-v2 .pz-tiers th, .pz-detail-v2 .pz-tiers td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--divider); } .pz-detail-v2 .pz-tiers th { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); } .pz-detail-v2 .pz-tiers td { font-weight: 600; color: var(--text); } .pz-detail-v2 .pz-tiers tr.is-cur td { background: var(--primary-soft); } .pz-detail-v2 .pz-tiers td .save { color: var(--success); font-weight: 700; } .pz-detail-v2 .pz-tiers tr:last-child td { border-bottom: none; } .pz-detail-v2 .pz-specs { margin: 18px 0; border: 1px solid var(--divider); border-radius: var(--r-lg); padding: 4px 16px; background: var(--surface); } .pz-detail-v2 .pz-specs__sum { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; } .pz-detail-v2 .pz-specs__sum::-webkit-details-marker { display: none; } .pz-detail-v2 .pz-specs__sum:hover { color: var(--primary); } .pz-detail-v2 .pz-specs__chev { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform .2s var(--motion); transform: rotate(90deg); } .pz-detail-v2 .pz-specs[open] .pz-specs__chev { transform: rotate(-90deg); } .pz-detail-v2 .pz-specs__table { margin: 0 0 14px; } .pz-detail-v2 .pz-specs__table td:first-child { color: var(--text-3); width: 45%; } .pz-detail-v2 .pz-psec-toggle > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; } .pz-detail-v2 .pz-psec-toggle > summary::-webkit-details-marker { display: none; } .pz-detail-v2 .pz-psec-toggle > summary:hover { color: var(--primary); } .pz-detail-v2 .pz-psec-toggle__chev { display: inline-flex; flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--text-3); transition: transform .2s var(--motion); transform: rotate(90deg); } .pz-detail-v2 .pz-psec-toggle[open] .pz-psec-toggle__chev { transform: rotate(-90deg); } .pz-detail-v2 .pz-eeat { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .pz-detail-v2 .pz-eeat__it { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--text-2); font-weight: 300; line-height: 1.5; } .pz-detail-v2 .pz-eeat__ic { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; } .pz-detail-v2 .pz-eeat__ic svg { width: 15px; height: 15px; } .pz-detail-v2 .pz-eeat__it b { color: var(--text); font-weight: 700; } .pz-detail-v2 .pz-honest__scripture { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--text); border-left: 3px solid var(--scripture); padding: 4px 0 4px 18px; margin: 16px 0; line-height: 1.5; display: flex; flex-direction: column; text-wrap: pretty; } .pz-detail-v2 .pz-honest__scripture cite { display: block; font-style: normal; font-size: 11.5px; color: var(--scripture); font-weight: 700; order: -1; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; } .pz-detail-v2 .pz-giftrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .pz-detail-v2 .pz-perk { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--divider); border-radius: var(--r-lg); padding: 15px 18px; background: var(--surface); text-decoration: none; } .pz-detail-v2 .pz-perk__photo { width: 104px; height: 104px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: #fff; } .pz-detail-v2 .pz-perk__photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .pz-detail-v2 .pz-perk__photo .pz-ph { background: var(--surface-2); } .pz-detail-v2 .pz-perk__photo .pz-ph svg { width: 32px; height: 32px; color: var(--text-3); } .pz-detail-v2 .pz-perk__t { font-size: 14.5px; font-weight: 700; color: var(--text); } .pz-detail-v2 .pz-perk__d { font-size: 13px; color: var(--text-2); font-weight: 300; margin-top: 3px; line-height: 1.4; } .pz-detail-v2 .pz-perk__scope { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: 7px; } .pz-detail-v2 .pz-perk__scope--universal { background: var(--surface-2); color: var(--text-2); } .pz-detail-v2 .pz-perk__scope--collection { background: var(--primary-soft); color: var(--primary); } .pz-detail-v2 .pz-qa { border: 1px solid var(--divider); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .pz-detail-v2 .pz-qa__it + .pz-qa__it { border-top: 1px solid var(--divider); } .pz-detail-v2 .pz-qa__q { display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; } .pz-detail-v2 .pz-qa__q::-webkit-details-marker { display: none; } .pz-detail-v2 .pz-qa__q:hover { color: var(--primary); } .pz-detail-v2 .pz-qa__chev { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform .2s var(--motion); transform: rotate(90deg); } .pz-detail-v2 .pz-qa__it[open] .pz-qa__chev { transform: rotate(-90deg); } .pz-detail-v2 .pz-qa__a { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); font-weight: 300; text-wrap: pretty; } .pz-detail-v2 .pz-qa__a a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .pz-detail-v2 .pz-qa__a p { margin: 0 0 10px; } .pz-detail-v2 .pz-qa__a p:last-child { margin-bottom: 0; } .pz-detail-v2 .pz-qa__a .pz-honest__scripture { margin: 10px 0; } /* «Как освятить» - карточки шагов (product.css) */ .pz-detail-v2 .pz-howto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .pz-detail-v2 .pz-howto__it { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--divider); border-radius: var(--r-lg); padding: 18px 20px; background: var(--surface); } .pz-detail-v2 .pz-howto__n { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .pz-detail-v2 .pz-howto__t { font-size: 15px; font-weight: 700; color: var(--text); } .pz-detail-v2 .pz-howto__d { font-size: 13.5px; color: var(--text-2); font-weight: 300; line-height: 1.5; margin-top: 4px; } .pz-detail-v2 .pz-howto__d b { color: var(--text); font-weight: 700; } @media (max-width: 620px) { .pz-detail-v2 .pz-howto { grid-template-columns: 1fr; } } @media (max-width: 900px) { .pz-detail-v2 .pz-perk__photo { width: 70px; height: 70px; } } @media (max-width: 700px) { .pz-detail-v2 .pz-giftrow { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pz-detail-v2 .pz-tiers th, .pz-detail-v2 .pz-tiers td { padding: 8px 6px; font-size: 13px; } .pz-detail-v2 .pz-qa__q { font-size: 14.5px; padding: 13px 14px; gap: 10px; } .pz-detail-v2 .pz-qa__a { padding: 0 14px 14px; font-size: 14px; } } /* ============================================================ ЧАНК 6 (Б24 8326): слайдеры "Эта серия" / "часто покупают" + промо-баннер. CSS прототипа (blog-components/shop/inline) scoped под .pz-detail-v2 через токен-мост. ============================================================ */ /* --- "Эта серия": сетка .pz-grid--4 + карточка .pz-prodcard --- */ .pz-detail-v2 .pz-grid { display: grid; gap: 18px; } .pz-detail-v2 .pz-grid--4 { grid-template-columns: repeat(4, 1fr); } .pz-detail-v2 .pz-grid--3 { grid-template-columns: repeat(3, 1fr); } .pz-detail-v2 .pz-prodcard { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .pz-detail-v2 .pz-prodcard[hidden] { display: none; } /* [hidden] иначе перебивается display:flex выше */ .pz-detail-v2 .pz-prodcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .pz-detail-v2 .pz-prodcard__media { position: relative; aspect-ratio: 1; background: var(--surface-2); } .pz-detail-v2 .pz-prodcard__media .pz-ph { width: 100%; height: 100%; } .pz-detail-v2 .pz-prodcard__media img { width: 100%; height: 100%; object-fit: cover; } .pz-detail-v2 .pz-prodcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pz-detail-v2 .pz-prodcard__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); font-family: var(--font-sans); } .pz-detail-v2 .pz-prodcard__name a { color: inherit; text-decoration: none; } .pz-detail-v2 .pz-prodcard__name a:hover { color: var(--primary); } .pz-detail-v2 .pz-prodcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pz-detail-v2 .pz-prodcard__cart { width: 38px; height: 38px; flex: none; padding: 0; justify-content: center; } .pz-detail-v2 .pz-prodcard__cart svg { width: 18px; height: 18px; margin: 0; } .pz-detail-v2 .pz-price { font-family: var(--font-sans); font-weight: 800; font-size: 22px; color: var(--text); white-space: nowrap; } .pz-detail-v2 .pz-prodcard .pz-price { font-size: 18px; } /* --- "Часто покупают": лента .pz-rel / .pz-relcard --- */ .pz-detail-v2 .pz-rel { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .pz-detail-v2 .pz-rel::-webkit-scrollbar { height: 6px; } .pz-detail-v2 .pz-rel::-webkit-scrollbar-thumb { background: var(--divider-2); border-radius: 3px; } .pz-detail-v2 .pz-relcard { flex: 1 0 208px; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--divider); border-radius: var(--r-lg); background: var(--surface); padding: 12px; text-decoration: none; transition: border-color .15s var(--motion); } .pz-detail-v2 .pz-relcard:hover { border-color: var(--primary); } .pz-detail-v2 .pz-relcard__media { display: block; flex: none; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: #fff; } .pz-detail-v2 .pz-relcard__media.pz-ph { height: auto; } .pz-detail-v2 .pz-relcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pz-detail-v2 .pz-relcard__name { flex: none; height: 37px; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--text); } .pz-detail-v2 .pz-relcard__name a { color: inherit; text-decoration: none; } .pz-detail-v2 .pz-relcard__name a:hover { color: var(--primary); } .pz-detail-v2 .pz-relcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pz-detail-v2 .pz-relcard__price { flex: none; font-size: 16px; font-weight: 800; color: var(--text); } .pz-detail-v2 .pz-relcard__cart { width: 38px; height: 38px; flex: none; padding: 0; justify-content: center; } .pz-detail-v2 .pz-relcard__cart svg { width: 18px; height: 18px; margin: 0; } /* --- плейсхолдеры под товаром: серый по умолчанию, белый под реальным фото --- */ .pz-detail-v2 .pz-pdp__below .pz-ph { background: var(--surface-2) !important; } .pz-detail-v2 .pz-prodcard__media .pz-ph:has(img), .pz-detail-v2 .pz-relcard__media:has(img) { background: #fff !important; } .pz-detail-v2 .pz-prodcard__media .pz-ph img { width: 100%; height: 100%; object-fit: contain; display: block; } /* --- "Загрузить ещё" --- */ .pz-detail-v2 .pz-loadmore { text-align: center; margin-top: 20px; } .pz-detail-v2 .pz-loadmore__done { font-size: 13px; color: var(--text-3); font-weight: 300; margin: 0; } /* Сетки "Эта серия" (--4) / "встречается" (--3) держат 4/3 колонки до 600px (как макет blog-components.css), ниже - вертикальный список горизонтальных карточек. Промежуточные 980->3 / 760->2 убраны. Промо-баннер перенесён в подвал (pz-shell.css); его стили здесь удалены как мёртвый код. */ /* "Эта серия"/"встречается" -> вертикальный список горизонтальных карточек с 600px (макет) */ @media (max-width: 600px) { .pz-detail-v2 .pz-grid--4, .pz-detail-v2 .pz-grid--3 { grid-template-columns: 1fr; } .pz-detail-v2 .pz-grid--4 .pz-prodcard, .pz-detail-v2 .pz-grid--3 .pz-prodcard { flex-direction: row; align-items: stretch; } .pz-detail-v2 .pz-grid--4 .pz-prodcard__media, .pz-detail-v2 .pz-grid--3 .pz-prodcard__media { width: 104px; flex: none; aspect-ratio: 1; } .pz-detail-v2 .pz-grid--4 .pz-prodcard__body, .pz-detail-v2 .pz-grid--3 .pz-prodcard__body { padding: 12px 14px; } } @media (max-width: 560px) { .pz-detail-v2 .pz-relcard { flex: 0 0 168px; } /* Как макет (ultracode): на <=560 "Эта серия"/"встречается" -> горизонтальный скролл-ряд карточек по 168px (после вертикального списка на <=600). */ .pz-detail-v2 .pz-pdp__below .pz-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 4px; } .pz-detail-v2 .pz-pdp__below .pz-prodcard { flex: 0 0 168px; flex-direction: column; } .pz-detail-v2 .pz-pdp__below .pz-prodcard__media { width: 100%; } } /* ============================================================ ЧАНК 7 (Б24 8326): блок отзывов о товаре (#reviews). Маркетплейс-бейджи нейтрально-серые (решение Ольги P5-2/P5-3: ToS площадок запрещают намёк на партнёрство фирменными цветами); коралл только для "Сайт". ============================================================ */ .pz-detail-v2 .pz-revcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pz-detail-v2 .pz-revcard { border: 1px solid var(--divider); border-radius: var(--r-lg); padding: 16px 18px; background: var(--surface); } .pz-detail-v2 .pz-revcard__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pz-detail-v2 .pz-revcard__badge { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-xs); } .pz-detail-v2 .pz-revcard__badge--site { background: var(--primary); color: #fff; } .pz-detail-v2 .pz-revcard__badge--ozon, .pz-detail-v2 .pz-revcard__badge--wb { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--divider); } .pz-detail-v2 .pz-revcard__stars { color: #E8A53D; font-size: 13px; letter-spacing: -1px; } .pz-detail-v2 .pz-revcard__name { font-size: 13.5px; font-weight: 700; color: var(--text); } .pz-detail-v2 .pz-revcard__date { font-size: 12px; color: var(--text-3); margin-left: auto; } .pz-detail-v2 .pz-revcard__text { font-size: 14px; color: var(--text-2); font-weight: 300; line-height: 1.55; margin-top: 8px; } .pz-detail-v2 .pz-revall { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--primary); font-weight: 600; text-decoration: none; } .pz-detail-v2 .pz-revall:hover { text-decoration: underline; } .pz-detail-v2 .pz-revnote { font-size: 13px; color: var(--text-3); font-weight: 300; margin-top: 14px; } @media (max-width: 700px) { .pz-detail-v2 .pz-revcards { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pz-detail-v2 .pz-revcards { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 4px; } .pz-detail-v2 .pz-revcard { flex: 0 0 82%; max-width: 320px; } } /* ============================================================ Первый экран - блок доверия .pz-bless--split (был пропущен в чанках 2-4). Слева "Производство освящено", справа статы магазина (из Option). ============================================================ */ .pz-detail-v2 .pz-bless { margin: 18px 0; border: 1px solid color-mix(in srgb, var(--success) 32%, transparent); background: var(--success-soft); border-radius: var(--r-lg); padding: 16px 18px; display: flex; gap: 14px; } .pz-detail-v2 .pz-bless__ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); color: var(--success); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); } .pz-detail-v2 .pz-bless__ic svg { width: 23px; height: 23px; } .pz-detail-v2 .pz-bless__b { min-width: 0; } .pz-detail-v2 .pz-bless__t { font-size: 15.5px; font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .pz-detail-v2 .pz-bless__d { font-size: 13.5px; color: var(--text-2); font-weight: 300; line-height: 1.5; margin-top: 4px; } .pz-detail-v2 .pz-bless__d a { color: var(--success); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pz-detail-v2 .pz-bless--split { display: flex; align-items: stretch; gap: 0; padding: 0; background: var(--surface); border-color: var(--divider); overflow: hidden; } .pz-detail-v2 .pz-bless--split .pz-bless__half { padding: 16px 18px; } .pz-detail-v2 .pz-bless--split .pz-bless__half:first-child { flex: 1.3; display: flex; gap: 14px; background: var(--success-soft); } .pz-detail-v2 .pz-bless__stats { flex: 1; border-left: 1px solid var(--divider); display: flex; flex-direction: column; justify-content: center; gap: 9px; } .pz-detail-v2 .pz-bless__stat { display: flex; align-items: center; gap: 10px; } .pz-detail-v2 .pz-bless__static { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; } .pz-detail-v2 .pz-bless__static svg { width: 14px; height: 14px; } .pz-detail-v2 .pz-bless__statl { flex: 1; font-size: 12.5px; color: var(--text-2); } .pz-detail-v2 .pz-bless__statv { font-family: var(--font-serif); font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; } .pz-detail-v2 .pz-bless__statlink { display: block; font-size: 12px; color: var(--success); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-top: 3px; padding-left: 36px; } @media (max-width: 700px) { .pz-detail-v2 .pz-bless--split { flex-direction: column; } .pz-detail-v2 .pz-bless__stats { border-left: 0; border-top: 1px solid var(--divider); padding-top: 14px; } } /* ============================================================ Аудит инлайн-