/* Start:/local/templates/main/components/bitrix/catalog/.default/style.min.css?1783547636959*/
.grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 15px;border-bottom:2px solid #d9dee6;color:#000}body.bx-theme-blue .catalog-block-header{border-color:#006cc0}body.bx-theme-green .catalog-block-header{border-color:#63aa28}body.bx-theme-red .catalog-block-header{border-color:#da3737}body.bx-theme-yellow .catalog-block-header{border-color:#f4b236}
/* End */
/* Start:/local/templates/main/components/bitrix/catalog.element/custom/style.css?178354763627022*/
/* Sidebar */
.product-item-detail-info-section { padding: 0 20px; }
@media (max-width: 992px) {
.product-item-detail-info-section { padding: 0; }
}
.product-item-detail-info-container {
margin-bottom: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.product-item-detail-info-container-title {
margin-bottom: 3px;
color: #000;
font-weight: var(--ui-font-weight-bold);
font-size: 13px;
}
.product-item-detail-pay-block {
position: relative;
margin-bottom: 15px;
padding: 20px 20px 0;
border: 1px solid #e4e4e4;
border-radius: 3px;
background-color: #fff;
}
.bx-retina .product-item-detail-pay-block { border-width: .5px; }
/*Compare*/
.product-item-detail-compare-container {
position: relative;
margin: 0 -20px;
padding: 4px 15px;
min-height: 30px;
border-top: 1px solid #e4e4e4;
background: #f3f3f3;
box-shadow: inset 0 1px 1px 0 #eee;
color: #4e4e4e;
vertical-align: middle;
font-size: 12px;
line-height: 20px;
}
.product-item-detail-compare .checkbox {
margin: 0;
padding: 0;
}
/* Price */
.product-item-detail-price-current {
color: #d0021b;
white-space: nowrap;
font-weight: var(--ui-font-weight-bold);
font-size: 30px;
line-height: 33px;
transition: font-size 200ms ease;
}
.product-item-detail-price-old {
color: #bdbdbd;
text-decoration: line-through;
white-space: nowrap;
font-weight: var(--ui-font-weight-bold);
font-size: 14px;
line-height: 17px;
}
/* SCU */
.product-item-scu-container { padding: 0 0 2px; }
.product-item-scu-container-title {
color: #333;
font-size: 12px;
}
.product-item-scu-block { }
.product-item-scu-list { margin: 0; }
.product-item-scu-item-list {
overflow: hidden;
margin: 0 0 0 -2px;
padding: 0;
list-style: none;
}
.product-item-scu-item-color-container,
.product-item-scu-item-text-container {
display: inline-block;
box-sizing: border-box;
padding: 5px 3px;
max-width: 100%;
vertical-align: middle;
}
.product-item-scu-item-text-container { min-width: 48px; }
.product-item-scu-item-color-container {
max-width: 38px;
width: 25%;
}
.product-item-scu-item-color-block {
position: relative;
padding-top: unset;
outline: 1px solid #c0cfda;
cursor: pointer;
}
.bx-no-touch .product-item-scu-item-color-block { transition: outline 200ms ease; }
.bx-retina .product-item-scu-item-color-block { outline-width: .5px; }
.product-item-scu-item-color-container.selected .product-item-scu-item-color-block { outline-width: 2px; }
.bx-retina .product-item-scu-item.selected .product-item-scu-item-color-block { outline-width: 1px; }
.product-item-scu-item-color {
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.product-item-scu-item-text-block {
position: relative;
padding: 0 5px;
outline: 1px solid #c0cfda;
cursor: pointer;
}
.bx-no-touch .product-item-scu-item-text-block { transition: outline 300ms ease; }
.bx-retina .product-item-scu-item-text-block { outline-width: .5px; }
.product-item-scu-item-text-container.selected .product-item-scu-item-text-block { outline-width: 2px; }
.bx-retina .product-item-scu-item.selected .product-item-scu-item-text-block { outline-width: 1px; }
.product-item-scu-item-text {
overflow: hidden;
max-width: 100%;
vertical-align: middle;
text-align: center;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
line-height: 18px;
}
.product-item-scu-item-color-container.notallowed .product-item-scu-item-color-block,
.product-item-scu-item-text-container.notallowed .product-item-scu-item-text-block {
position: relative;
overflow: hidden;
outline-color: #a9adb4 !important;
}
.product-item-scu-item-color-container.notallowed .product-item-scu-item-color-block:after,
.product-item-scu-item-text-container.notallowed .product-item-scu-item-text-block:after {
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background: rgba(255, 255, 255, 0.75) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI2IDI2Ij4gIDxwYXRoIGZpbGw9IiNBOUFEQjQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjM5MjEyNjgsMTMuMjMyMzAyOSBMMjUuOTkyLDEuNDE4IEwyNC42LDAgTDEyLjk5OTk5NTYsMTEuODE0NDM2NCBMMS40LDAgTDAuMDA5LDEuNDE5IEwxMS42MDc4Njg3LDEzLjIzMjI5NzUgTDAuNDczLDI0LjU3MyBMMS44NjUsMjUuOTkxIEwxMi45OTk5OTkzLDE0LjY1MDE2NDUgTDI0LjEzNCwyNS45OSBMMjUuNTI2LDI0LjU3MiBMMTQuMzkyMTI2OCwxMy4yMzIzMDI5IFoiLz48L3N2Zz4=) no-repeat center;
background-size: 80% 80%;
content: "";
}
.product-item-selected-scu-container { word-spacing: 1px }
.product-item-selected-scu {
display: inline-block;
overflow: hidden;
padding: 0 5px;
min-width: 22px;
height: 22px;
outline: 1px solid #c0cfda;
vertical-align: middle;
text-align: center;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
line-height: 22px;
}
.bx-retina .product-item-selected-scu { outline-width: .5px; }
.product-item-selected-scu-color {
background-position: center;
background-size: 20px 20px;
background-repeat: no-repeat;
}
/*Amount*/
.product-item-amount {
padding: 0 0 2px;
text-align: center;
}
.product-item-amount-field-container { }
.product-item-amount-field-btn-plus,
.product-item-amount-field-btn-minus {
position: relative;
display: inline-block;
min-width: 22px;
height: 22px;
border-radius: 2px;
background-color: #f2f2f2;
color: #fff;
vertical-align: middle;
text-align: center;
cursor: pointer;
transition: background 300ms ease, opacity 300ms ease;
}
.bx-retina .product-item-amount-field-btn-plus,
.bx-retina .product-item-amount-field-btn-minus { border-width: .5px; }
.product-item-amount-field-btn-plus:hover,
.product-item-amount-field-btn-minus:hover { background: #d3d3d3; }
.product-item-amount-field-btn-plus:after,
.product-item-amount-field-btn-minus:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
opacity: .8;
transition: opacity 300ms ease, background 300ms ease;
}
.product-item-amount-field-btn-disabled.product-item-amount-field-btn-plus:after,
.product-item-amount-field-btn-disabled.product-item-amount-field-btn-minus:after {
opacity: .3 !important;
cursor: default;
}
.product-item-amount-field-btn-disabled.product-item-amount-field-btn-plus:hover,
.product-item-amount-field-btn-disabled.product-item-amount-field-btn-minus:hover { background-color: #f2f2f2; }
.product-item-amount-field-btn-minus:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
opacity: .8;
transition: opacity 300ms ease;
}
.product-item-amount-field-btn-plus:after {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4gIDxwYXRoIGZpbGw9IiM1MjVDNjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE4LDEyIEwxOCwwIEwxMiwwIEwxMiwxMiBMMCwxMiBMMCwxOCBMMTIsMTggTDEyLDMwIEwxOCwzMCBMMTgsMTggTDMwLDE4IEwzMCwxMiBMMTgsMTIgWiIvPjwvc3ZnPg==) no-repeat center;
background-size: 10px;
}
.product-item-amount-field-btn-minus:after {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4gIDxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSI2IiB5PSIxMiIgZmlsbD0iIzUyNUM2OCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) no-repeat center;
background-size: 10px;
}
.product-item-amount-field-btn-plus:hover:after,
.product-item-amount-field-btn-minus:hover:after { opacity: 1; }
.product-item-amount-field {
display: inline-block;
padding: 0;
max-width: 50px;
width: auto;
height: 22px;
border: 1px solid transparent;
border-radius: 2px;
background: transparent !important;
color: #000;
vertical-align: middle;
text-align: center;
font-weight: var(--ui-font-weight-bold);
font-size: 19px;
line-height: 22px;
transition: border 300ms ease;
}
.bx-retina .product-item-amount-field { border-width: .5px; }
.product-item-amount-field:focus { outline: none !important; }
.bx-no-touch input.product-item-amount-field::-webkit-outer-spin-button,
.bx-no-touch input.product-item-amount-field::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.product-item-amount-description-container {
color: #a5a5a5;
white-space: nowrap;
font-size: 12px;
}
.product-item-amount-description-container strong {
color: #333;
white-space: nowrap;
}
.product-item-amount-label-container {
margin: 5px 0;
color: #a5a5a5;
font-weight: var(--ui-font-weight-bold);
font-size: 12px;
}
/**/
.product-item-quantity {
color: #333;
font-weight: normal;
font-size: 12px;
}
/*Buy button*/
.btn.product-item-detail-buy-button {
position: relative;
display: block;
margin: 0 auto 20px;
max-width: 250px;
width: 100%;
height: 50px;
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.product-item-detail-short-card-btn .btn.product-item-detail-buy-button { margin: 0; }
.btn.product-item-detail-buy-button span {
position: absolute;
top: 50%;
right: 0;
left: 0;
display: inline-block;
min-height: 16px;
max-width: 100%;
white-space: normal;
line-height: 16px;
transform: translateY(-50%);
}
.btn-link.product-item-detail-buy-button { height: 25px; }
/* Slider */
.product-item-detail-slider-container {
position: relative;
max-width: 100%;
background: transparent;
transition: background 800ms ease;
}
.product-item-detail-slider-block {
position: relative;
box-sizing: border-box;
padding-top: 56.25%;
height: 0;
}
.product-item-detail-slider-block.product-item-detail-slider-block-square { padding-top: 100%; }
.product-item-detail-slider-images-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.product-item-detail-slider-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity: 0;
transition: opacity 250ms linear;
}
.product-item-detail-slider-image.active {
z-index: 10;
opacity: 1;
}
.product-item-detail-slider-image img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
outline: 1px solid transparent;
background-position: center;
background-repeat: no-repeat;
transition: background-size 450ms ease, width 450ms ease, height 450ms ease, outline 450ms ease;
transform: translateY(-50%) translateX(-50%);
}
.product-item-detail-slider-progress-bar {
position: absolute;
bottom: 0;
left: 0;
z-index: 180;
height: 3px;
}
/*Slider Controls*/
.product-item-detail-slider-controls-block {
padding: 10px 0;
text-align: center;
}
.product-item-detail-slider-controls-image {
position: relative;
display: inline-block;
overflow: hidden;
width: 65px;
height: 65px;
outline: 1px solid #c0cfda;
background-color: #fff;
text-align: center;
cursor: pointer;
}
.bx-retina .product-item-detail-slider-controls-image { outline-width: .5px; }
.bx-no-retina .product-item-detail-slider-controls-image.active { outline-width: 2px; }
.bx-retina .product-item-detail-slider-controls-image.active { outline-width: 1px; }
.product-item-detail-slider-controls-image img {
position: absolute;
top: 50%;
left: 50%;
max-width: 65px;
max-height: 65px;
width: auto;
height: auto;
transform: translateY(-50%) translateX(-50%);
}
.product-item-detail-slider-left,
.product-item-detail-slider-right {
position: absolute;
top: 0;
bottom: 0;
z-index: 111;
display: block;
width: 25%;
background: rgba(255, 255, 255, 0) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2230%22%20viewBox%3D%220%200%2016%2030%22%3E%3Cpolygon%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20points%3D%2216%2050%202%2036%2016%2022%2015%2021%201%2035%200%2036%201%2037%2015%2051%22%20transform%3D%22translate(0%20-21)%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
opacity: .57;
cursor: pointer;
transition: all 300ms ease;
}
.product-item-detail-slider-left { left: 0; }
.product-item-detail-slider-right {
right: 0;
transform: rotate(180deg);
}
.product-item-detail-slider-left:hover,
.product-item-detail-slider-right:hover {
background-color: rgba(255, 255, 255, .4);
opacity: .8;
}
.product-item-detail-slider-close { display: none; }
.product-item-detail-slider-container.popup .product-item-detail-slider-close {
position: absolute;
top: 4px;
right: 110px;
bottom: 0;
z-index: 150;
display: block;
width: 50px;
height: 50px;
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpolygon%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20points%3D%2216%2015.1%208.944%208%2016%201%2015.006%200%208.05%207%20.994%200%200%201%207.056%208%200%2015.1%20.994%2016%208.05%209%2015.006%2016%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
opacity: .27;
cursor: pointer;
transition: all 300ms ease;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-close:hover { opacity: 1; }
.product-item-detail-slider-container.popup .product-item-detail-slider-right { right: 105px; }
/*magnified*/
.product-item-detail-slider-container.magnified .product-item-detail-slider-image { z-index: 100; }
.product-item-detail-slider-container.magnified .product-item-detail-slider-image img { outline-color: #ddd; }
.product-item-detail-slider-container.magnified .product-item-detail-slider-left,
.product-item-detail-slider-container.magnified .product-item-detail-slider-right { z-index: 50; }
.product-item-detail-slider-container.magnified .product-item-label-text,
.product-item-detail-slider-container.magnified .product-item-label-ring { opacity: 0; }
/* >>> popup*/
.product-item-detail-slider-container.popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
background: #fff;
animation-name: imgPopupShow;
animation-duration: 300ms;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-images-container { right: 105px; }
.product-item-detail-slider-container.popup .product-item-detail-slider-block {
padding-top: 0;
height: 100vh;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-image {
position: absolute;
top: 50%;
left: 50%;
max-height: 100vh;
width: calc(100% - 150px);
transform: translateY(-50%) translateX(-50%);
}
@-webkit-keyframes imgPopupShow {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes imgPopupShow {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes imgPopupShow {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes imgPopupShow {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes imgPopupShow {
from { opacity: 0; }
to { opacity: 1; }
}
.product-item-detail-slider-container.popup .product-item-detail-slider-image img {
max-width: 100%;
max-height: 90vh;
width: auto;
cursor: default
}
.product-item-detail-slider-container.popup .product-item-detail-slider-controls-block {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 20px;
border-left: 1px solid #d3d3d3;
background-color: #fff;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-controls-image {
display: block;
margin-bottom: 20px;
}
/* Slider Mobile*/
@media (max-width: 767px) {
.product-item-detail-slider-container.popup .product-item-detail-slider-images-container { right: 0; }
.product-item-detail-slider-container.popup .product-item-detail-slider-block {
padding-top: 0;
height: calc(100vh - 111px);
}
.product-item-detail-slider-container.popup .product-item-detail-slider-image { width: 90%; }
.product-item-detail-slider-container.popup .product-item-detail-slider-image img {
max-width: 100%;
max-height: calc(100vh - 115px);
width: auto;
cursor: default;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-controls-block {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
overflow-x: auto;
max-height: 111px;
border-top: 1px solid #d3d3d3;
border-left: none;
white-space: nowrap;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-controls-image {
display: inline-block;
margin-bottom: 0;
}
.product-item-detail-slider-container.popup .product-item-detail-slider-close {
right: 10px;
z-index: 200;
}
.product-item-detail-slider-left,
.product-item-detail-slider-right { max-width: 75px; }
.product-item-detail-slider-container.popup .product-item-detail-slider-right { right: 0; }
}
/*Label*/
.product-item-label-text,
.product-item-label-ring {
position: absolute;
z-index: 190;
opacity: 1;
transition: opacity 450ms ease;
}
.product-item-label-text span,
.product-item-label-ring {
display: inline-block;
clear: both;
margin-bottom: 2px;
background: #f42c2c;
color: #fff;
vertical-align: middle;
text-align: center;
transition: all 250ms ease;
}
.bx-red .product-item-label-text span,
.bx-red .product-item-label-ring { background-color: #fba90c; }
.product-item-label-text > div,
.product-item-label-ring > div { line-height: 0; }
.product-item-detail-slider-container.popup .product-item-label-text,
.product-item-detail-slider-container.popup .product-item-label-ring { display: none; }
/* TEXT */
.product-item-label-text span {
padding: 2px 5px;
vertical-align: middle;
font-weight: var(--ui-font-weight-bold);
}
.product-item-label-text.product-item-label-small span {
margin-bottom: 1px;
padding: 2px 7px;
font-weight: normal;
font-size: 13px;
line-height: 14px;
}
.product-item-label-text.product-item-label-big span {
padding: 4px 10px;
font-size: 13px;
line-height: 17px;
}
@media (max-width: 767px) {
.product-item-label-text > div { line-height: 0; }
.product-item-label-text.product-item-label-small span,
.product-item-scalable-card.hover .product-item-label-text.product-item-label-small span {
margin-bottom: 1px;
padding: 2px 7px;
font-size: 10px;
line-height: 14px;
}
.product-item-big-card .product-item-label-text.product-item-label-small span,
.product-item-label-text.product-item-label-big span,
.product-item-scalable-card.hover .product-item-label-text.product-item-label-big span {
margin-bottom: 1px;
padding: 3px 12px;
font-size: 14px;
line-height: 16px;
}
.product-item-big-card .product-item-label-text.product-item-label-big span {
padding: 3px 12px;
font-size: 20px;
line-height: 25px;
}
}
/*RING*/
.product-item-label-ring {
box-sizing: border-box;
border-radius: 50%;
font-weight: var(--ui-font-weight-bold);
}
.product-item-label-ring.product-item-label-small {
width: 40px;
height: 40px;
font-size: 14px;
line-height: 40px;
}
.product-item-label-ring.product-item-label-big {
width: 50px;
height: 50px;
font-size: 18px;
line-height: 50px;
}
@media (max-width: 767px) {
.product-item-label-ring.product-item-label-small,
.product-item-scalable-card.hover .product-item-label-ring.product-item-label-small {
width: 20px;
height: 20px;
font-size: 13px;
line-height: 20px;
}
.product-item-big-card .product-item-label-ring.product-item-label-small,
.product-item-label-ring.product-item-label-big,
.product-item-scalable-card.hover .product-item-label-ring.product-item-label-big {
width: 35px;
height: 35px;
font-size: 12px;
line-height: 35px;
}
.product-item-big-card .product-item-label-ring.product-item-label-big {
width: 70px;
height: 70px;
font-size: 24px;
line-height: 70px;
}
}
.product-item-label-top { top: -5px; }
.product-item-label-center {
left: 50%;
transform: translateX(-50%);
}
.product-item-label-center > div { text-align: center; }
.product-item-label-left { left: -5px; }
.product-item-label-left > div { text-align: left; }
.product-item-label-bottom { bottom: -5px; }
.product-item-label-middle {
top: 50%;
transform: translateY(-50%);
}
.product-item-label-right { right: -5px; }
.product-item-label-right > div { text-align: right; }
.product-item-label-center.product-item-label-middle { transform: translateY(-50%) translateX(-50%); }
/* Tabs */
.product-item-detail-tabs-container {
min-height: 60px;
border-bottom: 1px solid #ededed;
background: #fff;
}
.product-item-detail-tabs-list {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.product-item-detail-tabs-list:after {
display: table;
clear: both;
content: "";
}
.product-item-detail-tab {
float: left;
min-height: 60px;
}
.product-item-detail-tab-link {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 10px 25px;
height: 60px;
color: #039be5;
vertical-align: middle;
text-transform: uppercase;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
font-weight: var(--ui-font-weight-bold);
font-size: 13px;
line-height: 45px;
transition: all 250ms ease;
}
.product-item-detail-tab-link:hover,
.product-item-detail-tab.active .product-item-detail-tab-link { color: #000; }
.product-item-detail-tab-link:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 0;
background: #1485ce;
content: "";
transition: all 250ms ease;
}
.product-item-detail-tab-link:hover:after,
.product-item-detail-tab.active .product-item-detail-tab-link:after { height: 3px; }
.product-item-detail-tab-link:active:after { height: 6px; }
.product-item-detail-tab-content { padding: 25px 0; }
@media (max-width: 991px) {
.product-item-detail-tabs-container { display: none !important; }
.product-item-detail-tab-content { display: block !important; }
}
/*Tab fixed*/
.product-item-detail-tabs-container-fixed {
position: fixed;
top: -100px;
right: 0;
left: 0;
z-index: 1000;
background-color: #fff;
box-shadow: 0 4px 14px 0 rgba(32, 54, 74, .23);
transition: top 350ms linear;
}
.product-item-detail-tabs-container-fixed {
min-height: 45px;
background: #fff;
}
.product-item-detail-tabs-container-fixed.active {
top: 0;
opacity: 1;
}
.product-item-detail-tabs-container-fixed .product-item-detail-tabs-list {
margin: 0 auto;
max-width: 1048px;
}
.product-item-detail-tabs-container-fixed .product-item-detail-tab { min-height: 45px; }
.product-item-detail-tabs-container-fixed .product-item-detail-tab-link {
padding: 10px 25px;
height: 45px;
line-height: 25px;
}
.bx-touch .product-item-detail-tabs-container-fixed { display: none !important; }
/*Small Card*/
.product-item-detail-short-card-fixed {
position: fixed;
top: -85px;
right: 0;
left: 0;
z-index: 1010;
box-sizing: border-box;
padding: 7px 0 8px;
height: 85px;
background-color: #fff;
box-shadow: 0 4px 14px 0 rgba(32, 54, 74, .23);
transition: top 220ms linear;
}
.product-item-detail-short-card-fixed.active {
top: 0;
opacity: 1;
}
.product-item-detail-short-card-fixed.active + .product-item-detail-tabs-container-fixed.active { top: 85px; }
.bx-touch .product-item-detail-short-card-fixed { display: none !important; }
.product-item-detail-short-card-fixed .product-item-detail-short-card-content-container {
margin: 0 auto;
max-width: 1048px;
}
.product-item-detail-short-card-content-container table {
min-width: 100%;
border-collapse: collapse;
}
.product-item-detail-short-card-image {
padding-right: 15px;
width: 80px;
vertical-align: middle;
text-align: left;
}
.product-item-detail-short-card-image img {
max-width: none;
height: 65px;
}
.product-item-detail-short-title-container { max-width: 650px }
.product-item-detail-short-title-text {
display: block;
color: #000;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 16px;
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
}
.product-item-detail-short-card-price {
padding: 0 10px;
vertical-align: middle;
text-align: right;
}
.product-item-detail-short-card-btn {
padding-left: 10px;
min-width: 120px;
}
/*Properties */
.product-item-detail-tab-content { display: none; }
.product-item-detail-tab-content.active { display: block; }
.product-item-detail-tab-content h3 {
margin-bottom: 10px;
font-weight: var(--ui-font-weight-bold);
font-size: 14px;
}
.product-item-detail-properties {
display: block;
overflow: hidden;
margin: 0;
max-width: 560px;
color: #a5a5a5;
font-size: 12px;
}
.product-item-detail-properties dl { clear: both; }
.product-item-detail-properties dt {
float: left;
clear: both;
font-weight: normal;
}
.product-item-detail-properties dd {
float: right;
margin-bottom: 3px;
margin-left: 5px;
color: #000;
}
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type='number'] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }
.overlay-video {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.overlay-video.active {
display: flex;
opacity: 1;
}
.overlay-video-popup {
background: #000;
padding: 0;
border-radius: 12px;
max-width: 80%;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.overlay-video.active .overlay-video-popup {
transform: scale(1);
opacity: 1;
}
.overlay-video-popup video {
width: 100%;
height: auto;
border-radius: 12px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.overlay-video-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: white;
cursor: pointer;
z-index: 1001;
}
.overlay-video-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: white;
cursor: pointer;
z-index: 1001;
}
.product__img-wrapper {
position: relative;
}
.product__video-button {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
padding: 5px;
background: var(--secondary-text-grey);
border-radius: 8px 0 0 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.product__video-button circle,
.product__video-button path{
stroke: #000000;
transition: stroke 0.3s ease;
}
.product__video-button--main,
.product__video-button--slider {
display: none;
}
@media (min-width: 768px) {
.overlay-video-popup {
height: 80vh;
width: auto;
aspect-ratio: 9/16;
}
}
@media (min-width: 1066px) {
.product__video-button--main {
display: flex;
}
}
@media (max-width: 1065px) {
.product__video-button--slider {
display: flex;
}
}
@media (min-width: 745px) and (max-width: 1055px) {
.product__video-button--slider {
top: 16px;
}
}
/* End */
/* Start:/local/templates/main/css/pages/product-v3.css?178354763470180*/
/* Product page v3 — pixel-perfect port of Figma node 10102:2153.
Scoped to desktop (>=1066px); mobile keeps current styles.
!important is used where it is necessary to win against
- inline styles set by main.bundle.js on (re)load,
- rules in the main minified style.css that ship later in the cascade. */
:root {
--sure-accent: #e6420c;
--sure-rosi-border: #e3e3e3;
/* Lucide chevron-down (Figma "Medium" component, 16x16, stroke #130F0F) */
--pdp-chev-down: url("data:image/svg+xml;utf8,");
--pdp-chev-down-grey: url("data:image/svg+xml;utf8,");
}
/* Bitrix dd-list JS animates `max-height` AND `margin-bottom` together —
it sets inline `margin-bottom: 32px` when an accordion opens (animated
from 0 → 32). We want zero margin so the open content sits flush
against the next divider. Beats inline via !important (inline is
non-important, so external !important wins). Applies on every
viewport because the JS doesn't care about breakpoints. */
.product__content .product__buy-sizes.dd-list-content,
.product__content .product__info-content {
margin: 0 !important;
}
/* Sticky-bottom cart panel target — mobile-only. Hide on every viewport
by default; the mobile media query below re-enables it. Display:none
keeps it out of the desktop grid entirely. */
.product__basket-actions-sticky {
display: none;
}
/* === Desktop layout (Figma 1600 wide: 16 pad + 116 thumbs + 16 + 908 images + 544 panel) === */
@media (min-width: 1066px) {
/* Main container — CSS Grid with left column (gallery + carousels
auto-stack via row auto-flow) and right column (sticky product
info spans every row so it stays visible while the user scrolls
past the carousels). DOM stays in natural order
(gallery → content → recommended[…]); grid placement does the
column-swap without JS, so there is no first-paint shift.
!important on display beats the inline `display: grid;
grid-template-columns` set by main.bundle.js. */
.container.product__container {
display: grid !important;
/* !important beats inline `grid-template-columns: 1fr 1fr 1fr`
and `gap: 16px` that main.bundle.js + style.css write onto
the container. Right column = min(512, 33% of container)
with a 320 px floor — hits exactly 512 at the 1600 px
container cap (≈ 32.6 %) and scales down on narrower
desktops. */
grid-template-columns: minmax(0, 1fr) clamp(320px, 33%, 512px) !important;
/* row-gap stays 0 — spacing between gallery and carousels is
done via margin on .product__recommended below. Reason:
.product__content spans many implicit rows (so its sticky
containing block covers the full left column); a non-zero
row-gap would multiply across all those rows and inflate
the container height by ~15000 px. */
column-gap: 16px !important;
row-gap: 0 !important;
padding: 0 16px !important;
align-items: start;
box-sizing: border-box;
}
.container.product__container > .product__gallery-area {
grid-column: 1;
min-width: 0;
}
.container.product__container > .product__recommended {
grid-column: 1;
min-width: 0;
/* Figma 10102:2168 — 52 px vertical gap between gallery and
the first carousel, and between successive carousels. */
margin-top: 52px;
}
.container.product__container > .product__content {
grid-column: 2;
/* Span every implicit row so the sticky panel's containing
block covers the full left-column height (gallery +
carousels) — otherwise sticky would release once the user
scrolled past row 1. */
grid-row: 1 / span 999;
}
.container.product__container > .product__main-image,
.container.product__container > .product__swiper {
display: none !important;
}
/* Gallery area: thumbs (116) + 16 gap + main (908). Flex so thumbs can be
sticky inside this taller container (covers lookbook height ~ 700+ vs row). */
.product__gallery-area {
display: flex;
gap: 16px;
/* `stretch` (default) makes the thumb strip column match the
main photo column's height so both sides terminate flush. */
align-items: stretch;
width: 100%;
}
/* ----- Thumb strip — 116 wide, full height of the main photo column.
3 thumbs visible at once, each sized to (column_height - gaps) / 3
so the strip matches the main photos baseline-to-baseline.
Active indicator (Line 29) is a 1px black vertical line on the LEFT
of the active thumb. ----- */
.product__lookbook {
/* 32 px top padding mirrors .product__lookbook-main so the
first thumb aligns with the top of the first main photo. */
padding-top: 32px;
display: flex;
flex-direction: column;
flex: 0 0 116px;
min-width: 116px;
}
/* Strip scroll-snap was removed because it fought with programmatic
scrollTop assignments from the arrow buttons (both `mandatory` and
`proximity` modes snapped the strip back to 0). Arrow navigation aligns
to thumb boundaries via JS math; wheel/touchpad scrolls freely. */
.product__lookbook-thumbs {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
list-style: none;
/* Fill the lookbook column (whose height matches the main
photo column via flex `align-items: stretch`). flex: 1 1 0
gives this strip zero natural size so the row height is
driven by the main photo column, not the (huge) full thumb
list — then the strip stretches to fill the resolved row. */
flex: 1 1 0;
min-height: 0;
overflow: hidden;
scroll-behavior: smooth;
overscroll-behavior: contain;
scrollbar-width: none;
}
.product__lookbook-thumbs.--scrollable {
overflow-y: auto;
}
.product__lookbook-thumbs > * {
flex-shrink: 0;
}
.product__lookbook-thumbs::-webkit-scrollbar { display: none; }
/* Custom always-visible scrollbar overlay (Figma 10102:2199 «Line 29») —
absolute-positioned 1 px grey track on the LEFT side of the strip with a
black thumb whose height + position are driven by JS based on scrollTop. */
.product__lookbook-scrollbar {
position: absolute;
left: 0;
/* Offset by the lookbook's padding-top so the rail starts
level with the first thumb (not above it, level with the
lookbook column's top edge). */
top: 32px;
width: 1px;
height: calc(100% - 32px);
background: var(--grey-color);
z-index: 1;
pointer-events: none;
}
.product__lookbook-scrollbar-thumb {
position: absolute;
left: 0;
top: 0;
width: 1px;
background: var(--main-color);
height: 48px;
will-change: transform, height;
}
/* Scroll arrows (Figma 10102:2197) — overlay on top/bottom-center of the strip,
positioned over the 1st/5th visible thumb. */
.product__lookbook { position: relative; }
.product__lookbook-scroll {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--main-white-color);
border: 1px solid var(--grey-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 2;
transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.product__lookbook-scroll svg {
width: 12px;
height: 12px;
color: var(--main-color);
}
.product__lookbook-scroll:hover:not(:disabled) {
border-color: var(--main-color);
}
.product__lookbook-scroll:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: 2px;
}
.product__lookbook-scroll--up {
/* 32px = .product__lookbook padding-top (см. строку 113), +16px чтобы
кнопка стояла внутри полосы миниатюр симметрично нижней
(.product__lookbook-scroll--down → bottom: 16px). */
top: 48px;
transform: translateX(-50%) rotate(180deg);
}
.product__lookbook-scroll--up:hover:not(:disabled) {
transform: translateX(-50%) rotate(180deg) scale(1.08);
}
.product__lookbook-scroll--down {
bottom: 16px;
}
.product__lookbook-scroll--down:hover:not(:disabled) {
transform: translateX(-50%) scale(1.08);
}
.product__lookbook-scroll:disabled {
opacity: 0;
pointer-events: none;
}
.product__lookbook-thumb {
width: 108px;
/* Small desktop (1066–1199): 3 thumbs fill the strip.
Each = (strip_height − 2×8 px gap) / 3. The 5-thumb variant
kicks in at min-width: 1200 (see media query below). */
flex: 0 0 calc((100% - 16px) / 3);
background-color: var(--light-grey);
overflow: hidden;
cursor: pointer;
position: relative;
transition: opacity .2s ease;
border: 0;
padding: 0;
margin: 0 0 0 8px;
}
.product__lookbook-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* `--active` is tracked in JS for arrow navigation but intentionally has
no visual indicator (per latest design decision). All thumbs render the
same regardless of active state. */
.product__lookbook-thumb:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: 2px;
}
.product__lookbook-thumbs:focus-visible {
outline: none;
}
.product__lookbook-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding-top: 32px;
flex: 1 1 908px;
min-width: 0;
}
.product__lookbook-main .product__lookbook-cell {
aspect-ratio: 446 / 709;
background-color: var(--light-grey);
position: relative;
overflow: hidden;
}
.product__lookbook-main .product__lookbook-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product__lookbook-cell--full {
grid-column: 1 / -1;
}
/* Video play button (Figma 10102:2156): 32x32 white circle with grey border,
top-left of poster cell. Logic is shared with the total-look popup video
button via data-action="tl-video-open" (see js/pages/total-look.js). */
.product__lookbook-play {
position: absolute;
left: 16px;
top: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--main-white-color);
border: 1px solid var(--grey-color);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: transform .2s ease;
}
.product__lookbook-play svg {
width: 12px;
height: 12px;
margin-left: 1px; /* optical centering of the triangle */
}
.product__lookbook-play:hover {
transform: scale(1.05);
}
/* Chevron-down indicator below thumbs strip — appears when there are more thumbs
to scroll to (Figma 10102:2197). */
.product__lookbook-thumbs-more {
align-self: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--main-white-color);
border: 1px solid var(--grey-color);
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
flex-shrink: 0;
}
.product__lookbook-thumbs-more svg {
width: 12px;
height: 12px;
color: var(--main-color);
}
/* "Купить весь образ" overlay on the first lookbook cell — Figma 10102:2159.
Pinned bottom-left at x=16/y=bottom-16, with user icon + text. */
.product__lookbook-buy-look {
position: absolute;
left: 16px;
bottom: 16px;
background: var(--main-white-color);
color: var(--main-color);
border: 0;
padding: 8px 16px;
border-radius: 999px;
font: 500 14px/1 NunitoSans, sans-serif;
cursor: pointer;
white-space: nowrap;
z-index: 2;
box-shadow: 0 2px 12px rgba(19, 15, 15, .08);
transition: opacity .2s ease, transform .2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
}
.product__lookbook-buy-look svg {
width: 16px;
height: 16px;
color: var(--main-color);
flex-shrink: 0;
}
.product__lookbook-buy-look:hover {
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(19, 15, 15, .12);
}
/* ----- Right control panel — sticky inside the flex container.
Sized to 512px (Figma product control width); align-self: start
so its long accordion bodies don't stretch the flex row. ----- */
.product__content {
padding: 32px 0 0 0 !important;
position: sticky !important;
top: var(--header-height-desktop, 82px) !important;
flex: 0 0 512px;
max-width: 512px;
width: 100% !important;
background: var(--main-white-color);
align-self: flex-start;
z-index: 1;
}
.product__content > .product__path,
.product__content > .product__path-min,
.product__content > .product__scrollbar {
display: none !important;
}
/* Title row: title left, share+heart right. Gap-16 to article per Figma 10102:2206. */
.product__content .product__header-wrapper {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 12px !important;
margin: 0 0 16px !important;
}
.product__content .product__header {
font: 500 18px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
letter-spacing: 0 !important;
margin: 0;
flex: 1;
min-width: 0;
}
.product__content .product__header-icons {
display: flex !important;
gap: 12px !important;
align-items: center !important;
width: auto !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.product__content .product__header-icon {
width: 20px !important;
height: 20px !important;
padding: 0;
background: none;
border: 0;
display: flex !important;
align-items: center;
justify-content: center;
}
.product__content .product__header-icon svg {
width: 20px;
height: 20px;
}
/* yashare button — we'd ideally render our own minimal share icon. Hide its widget. */
.product__content .product__header-icons .ya-share2 {
display: none !important;
}
/* Info-top: article (small grey), price (18 medium), 4-pay chip, color label, swatches */
.product__content .product__info-top {
margin-top: 0 !important;
display: flex;
flex-direction: column;
}
.product__content .product__article-wrapper {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
margin: 0 0 16px !important;
}
.product__content .product__article {
color: inherit;
}
.product__content .product__price {
font: 500 18px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
margin: 0 0 4px !important;
/* display:flex on the wrapper collapses whitespace text nodes between the
hidden meta tags and the price , which were creating phantom 16 px
line-boxes and inflating outer height to 37 px instead of ~21 px. */
display: flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
padding: 0 !important;
}
.product__content .product__price .product__price-new {
display: inline !important;
font: inherit !important;
color: inherit !important;
}
.product__content .product__price .product__price-old {
display: none !important;
}
.product__content .product__price-new {
font-weight: 500;
font-size: 18px;
}
.product__content .product-divide-price {
margin: 0 0 21px !important;
padding: 0;
}
.product__content .product-divide-price-inner {
display: inline-flex !important;
align-items: center;
gap: 4px;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
cursor: pointer;
background: none !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.product__content .product-divide-content {
white-space: nowrap;
}
.product__content .product-divide-content span {
font-weight: 400;
}
.product__content .product-divide-price-arrow {
width: 16px;
height: 16px;
background: none !important;
position: relative;
flex-shrink: 0;
margin-left: 0;
}
/* nuke the original two-line "arrow" pseudos (template_styles.css line 1754) */
.product__content .product-divide-price-arrow::before,
.product__content .product-divide-price-arrow::after {
background: none !important;
background-color: transparent !important;
border-radius: 0 !important;
transform: none !important;
right: auto !important;
top: 50% !important;
left: auto !important;
width: 0 !important;
height: 0 !important;
content: "" !important;
transition: none !important;
border: 0 !important;
}
/* Right-pointing chevron (chevron-down rotated -90) for the 4-pay chip arrow. */
.product__content .product-divide-price-arrow::after {
position: absolute;
right: 0 !important;
top: 50% !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
background: var(--pdp-chev-down-grey) no-repeat center / 16px !important;
transform: rotate(-90deg) !important;
}
/* Color label + 24px swatches */
.product__content .product__color-wrapper {
font: 500 14px / 1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
margin: 0 0 8px !important;
}
.product__content .product__color {
font-weight: inherit;
/* Figma 10102:2224 — "Цвет: черный" sentence case, no transform. */
text-transform: none;
}
.product__content .product-card__colors.--big {
gap: 8px !important;
margin: 0 0 24px !important;
align-items: center !important;
padding: 2px 0 !important; /* leave room for the active ring outset */
}
.product__content .product-card__colors.--big .product-card__color {
width: 24px !important;
height: 24px !important;
flex-shrink: 0;
padding: 2px;
margin: 0 !important;
border-radius: 50% !important;
overflow: hidden;
position: relative;
/* background: var(--light-grey); */
}
.product__content .product-card__colors.--big .product-card__color img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
border-radius: 50%;
}
/* Active swatch — Figma 10102:2226: 1 px stroke #D3D3D3 around the circle.
Inner image has 2 px padding (см. .product-card__color rule above) so
there's visible breathing room between border and color image. */
.product__content .product-card__color.--active {
border: 1px solid #D3D3D3 !important;
box-shadow: none !important;
}
.product__content .product-card__colors.--big .product-card__color:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: 2px;
}
.product__content .product__side-panel-open-btn:focus-visible,
.product__content .product__info-btn:focus-visible,
.product__content .product__buy-up-text:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: 4px;
}
/* "Замеры изделия" accordion row */
.product__content .product__side-panel-open-btn {
width: 100% !important;
background: none !important;
border: 0 !important;
border-top: 1px solid var(--grey-color) !important;
padding: 24px 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
font: 500 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
text-align: left;
position: relative;
/* Figma 10102:2236 — full row is 64px tall (24 + 16 line-box + 24). */
min-height: 64px;
box-sizing: border-box;
}
.product__content .product__side-panel-open-btn::before,
.product__content .product__side-panel-open-btn::after {
content: "" !important;
background: none !important;
border-radius: 0 !important;
position: absolute;
}
.product__content .product__side-panel-open-btn::before {
display: none !important;
}
.product__content .product__side-panel-open-btn::after {
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border: 0 !important;
background: var(--pdp-chev-down) no-repeat center / 16px !important;
/* Figma 10102:2237 — chevron points right (rotated -90deg) because the
row opens a side panel, not an inline accordion. */
transform: rotate(-90deg) !important;
transition: transform .15s ease !important;
}
.product__content .product__side-panel-open-btn.--active::after {
transform: rotate(90deg) !important;
}
/* Override legacy global .side-panel-open-btn__text rule from style.css that
forces 12px uppercase and draws its own chevron via ::before/::after. */
.product__content .side-panel-open-btn__text {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color) !important;
text-transform: none !important;
text-align: left;
letter-spacing: normal !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
.product__content .side-panel-open-btn__text::before,
.product__content .side-panel-open-btn__text::after {
display: none !important;
content: none !important;
}
/* Buy block container */
.product__content .product__buy-block.dd-list-wrapper {
margin: 0 !important;
}
.product__content .product__buy-block.dd-list-wrapper::before,
.product__content .product__buy-block.dd-list-wrapper::after {
display: none !important;
}
/* Size accordion title */
.product__content .product__buy-up-text.dd-list-tittle {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
text-transform: none !important;
color: var(--main-color);
padding: 24px 0 !important;
border-top: 1px solid var(--grey-color) !important;
position: relative;
margin: 0 !important;
}
.product__content .product__buy-up-text.dd-list-tittle::before {
display: none !important;
}
.product__content .product__buy-up-text.dd-list-tittle::after {
background: var(--pdp-chev-down) no-repeat center / 16px !important;
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border-radius: 0 !important;
border: 0 !important;
transform: none !important;
transition: transform .15s ease !important;
}
.product__content .product__buy-up-text.dd-list-tittle.--active::after {
transform: rotate(180deg) !important;
margin-top: -8px;
}
/* Sizes list — Figma 10102:3284 (mobile) / desktop: vertical rows
(size label left, stock-status text right). Full-width rows with
1px bottom dividers, no chip borders. */
.product__content .sku-sizes-list {
display: flex !important;
flex-direction: column;
gap: 0;
padding: 0 0 16px !important;
margin: 0;
list-style: none;
width: 100%;
}
.product__content .product__buy-size-btn {
width: 100% !important;
height: auto !important;
min-height: 40px;
border: 0 !important;
border-top: 1px solid var(--grey-color) !important;
margin: 0 !important;
background: transparent !important;
color: var(--main-color);
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
transition: opacity .2s ease;
padding: 12px 0 !important;
position: relative;
text-align: left;
}
.product__content .sku-sizes-list .product__buy-size-btn:first-child {
border-top: 0 !important;
}
.product__content .product__buy-size-btn::before,
.product__content .product__buy-size-btn::after {
display: none !important;
content: none !important;
}
.product__content .product__buy-size-btn:hover:not([data-active=disabled]) {
background: transparent !important;
color: var(--main-color) !important;
opacity: .7;
}
.product__content .product__buy-size-btn.selected,
.product__content .product__buy-size-btn.--active {
background: transparent !important;
color: var(--main-color) !important;
font-weight: 500 !important;
}
.product__content .product__buy-size-btn[data-active=disabled] {
color: var(--chips-unselected) !important;
background: transparent !important;
cursor: default;
}
.product__content .product__buy-size {
font-size: 14px;
text-transform: uppercase;
font-weight: inherit;
letter-spacing: 0.03em;
}
.product__content .product__buy-size-count {
display: inline-block !important;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey);
text-transform: lowercase;
}
/* Add-to-cart chocolate button + inline price.
Don't touch `display` here — Bitrix toggles bloombox-* siblings via inline
style="display:none". Instead use display via a tighter selector below. */
.product__content .product__buy-open-btn,
.product__content .product__buy-open-btn.product-item-detail-buy-button {
background: var(--chocolate-color) !important;
color: var(--main-white-color) !important;
height: auto !important;
padding: 20px 24px !important;
margin: 0 !important;
border-radius: 2px !important;
text-transform: none !important;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
align-items: center;
justify-content: center;
gap: 4px;
border: 0 !important;
cursor: pointer;
width: 100% !important;
transition: opacity .2s ease;
overflow: visible !important;
background-image: none !important;
}
/* Inline flex layout for the visible button (no !important on display). */
.product__content .product__buy-open-btn.js-open-sizes,
.product__content .product__buy-open-btn:not([style]) {
display: flex;
}
.product__content .product__buy-open-btn:hover {
opacity: .9;
}
.product__content .product__buy-open-btn-text {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
text-transform: none !important;
opacity: 1 !important;
font-size: 14px !important;
}
.product__content .product__buy-open-btn-price {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
margin-left: 4px !important;
color: var(--main-white-color);
}
/* "Купить в образе со скидкой -X %" link */
.product__content .product__buy-look-link {
display: block !important;
text-align: center;
font: 400 14px / 1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
text-decoration: underline;
letter-spacing: 0.03em;
margin: 16px auto 13px !important;
cursor: pointer;
background: none !important;
border: 0 !important;
padding: 8px 0 !important;
width: auto;
}
.product__content .product__buy-look-link:hover {
opacity: .8;
}
/* Description-block accordions — top + bottom border. */
.product__content .product__info-block.dd-list-wrapper {
position: relative;
margin: 0 !important;
}
.product__content .product__info-block.dd-list-wrapper::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: var(--grey-color) !important;
z-index: 0;
}
.product__content .product__info-block.dd-list-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
top: auto;
background: var(--grey-color) !important;
z-index: 0;
}
.product__content .product__info-block.dd-list-wrapper + .product__info-block.dd-list-wrapper::before {
display: none !important;
}
.product__content .product__info-btn.dd-list-tittle {
font: 400 14px/normal NunitoSans, sans-serif !important;
text-transform: none !important;
padding: 16px 0 !important;
color: var(--main-color);
position: relative;
margin: 0 !important;
min-height: 48px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.product__content .product__info-btn.dd-list-tittle::before {
display: none !important;
}
.product__content .product__info-btn.dd-list-tittle::after {
background: var(--pdp-chev-down) no-repeat center / 16px !important;
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border-radius: 0 !important;
border: 0 !important;
transform: none !important;
transition: transform .15s ease !important;
}
.product__content .product__info-btn.dd-list-tittle.--active::after {
transform: rotate(180deg) !important;
margin-top: -8px;
}
/* Accordion body: 14px Regular, secondary-text grey, 1.5 line height per Figma
(body paragraphs inside Описание / Состав / Уход / Доставка).
box-sizing:border-box so the inherited `max-height:0` from .dd-list-content
collapses the entire element (including padding) when closed — otherwise
the bottom padding would still show. */
.product__content .product__info-content {
font: 400 14px/1.5 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
/* Normalised paragraphs + bullet list inside an opened accordion (see
the JS in template.php that converts legacy
-separated text). */
.product__content .product__info-content p {
margin: 0 0 8px !important;
padding: 0;
}
.product__content .product__info-content p:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content ul {
list-style: none !important;
margin: 8px 0 !important;
padding: 0 !important;
}
.product__content .product__info-content ul:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content li {
position: relative;
margin: 0 0 6px !important;
padding: 0 0 0 16px !important;
list-style: none !important;
}
.product__content .product__info-content li:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: inherit;
font-weight: inherit;
}
/* Bottom padding only when the accordion is opened (JS adds --active to title). */
.product__content .product__info-btn.dd-list-tittle.--active + .product__info-content {
padding: 0 0 16px !important;
}
/* Bitrix DETAIL_TEXT often ends with stray trailing
tags (legacy
editor output) that leave a phantom blank line under the body and
inflate the visual gap to the next accordion title. Collapse them. */
.product__content .product__info-content > br:last-child {
display: none;
}
.product__content .product__info-content > br + br {
display: none;
}
.product__content .product__info-content p {
margin: 0 0 8px !important;
}
.product__content .product__info-content p:last-child {
margin-bottom: 0 !important;
}
/* The original style.css uses .--list-type with bullet pseudo-elements that
were tuned for the legacy uppercase 12px text. Reset for the new design. */
.product__content .product__info-content.--list-type {
display: block !important;
gap: 0 !important;
}
.product__content .product__info-content.--list-type br + br {
display: none;
}
/* ----- Bottom carousels — "Завершить образ" / "Вам может понравиться".
Both now use the popup-cards / bloombox-popup template (same as the
total-look popup), wrapped in .product__recommended.
Figma 10102:2168 — 1040 wide, 52 px vertical gap to gallery and between
carousels, 24 px title→slider, 16 px card gap. ----- */
.product__recommended {
width: 100%;
margin: 0;
}
/* Horizontal margins zeroed; vertical spacing (52 px gap to
gallery / between carousels) comes from `margin-top: 52px` set
earlier in this stylesheet on the same selector — keep it so
legacy `.product__recommended { margin: ... }` rules from
style.css don't bleed through. */
.container.product__container > .product__recommended {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
/* Figma 10102:2153 — 40 px of WHITE space below the last carousel,
then the grey footer background. The footer is white with 75 px own
padding-top; the grey `.footer__background` lives inside. Override
footer padding to exactly 40 px on PDP so the visible white gap
between carousel and grey footer area matches Figma.
`~` (general sibling) because .product__side-panel sits between MAIN
and FOOTER. */
main.product ~ .footer {
padding-top: 40px;
}
}
/* === Mid/wide desktop variant (≥1200 px). Above this width the
thumb strip shows 5 thumbs (per Figma 10102:2191) instead of the
3-thumb fit used on narrower desktops. Each thumb takes
(strip_height − 4×8 px gap) / 5. === */
@media (min-width: 1200px) {
.container.product__container > .product__gallery-area .product__lookbook-thumb {
flex: 0 0 calc((100% - 32px) / 5);
}
}
/* === Mobile (<1066px) — Figma node 10102:2566 (iPhone 375 CATALOG).
The v3 lookbook is desktop-only; on mobile .product__swiper handles photo
display. Typography/spacing rules below mirror Figma mobile mockup
(16px gutter, 14px secondary text, 16px headings, 64px-tall accordion
rows, etc.). !important is used selectively to win against the legacy
minified style.css that ships later in the cascade and against inline
styles set by main.bundle.js on resize. === */
@media (max-width: 1065px) {
.product__gallery-area {
display: none !important;
}
/* ----- Container: full-width, no horizontal padding (sections pad themselves).
Keep display from main.bundle.js — overriding to `block` breaks
sticky positioning on .product__swiper. */
.container.product__container {
padding: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
/* ----- Gallery (mobile swiper) — Figma 10102:2570: 375×581 image area
with bottom row (16px from edge) holding play button (left) and
"Купить весь образ" button (right). The swiper picks up `position:
sticky; top: 56px` from somewhere in the legacy stack — kill it on
mobile so the gallery scrolls away naturally, and absolute children
(video + buy-look) anchor relative to its actual box, not its
sticky-fixed position. ----- */
.product__swiper {
position: relative !important;
top: auto !important;
margin: 0 !important;
}
/* Pagination scrollbar under the gallery — Figma 10102:2575/2576:
1px grey track + 1px dark thumb whose width equals (1 / slidesCount)
of the full track. Swiper.js updates the thumb's inline transform
and width on slide change since the gallery has `scrollbar` enabled. */
.product__swiper .product__scrollbar.swiper-scrollbar {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
height: 1px !important;
background: var(--grey-color) !important;
border-radius: 0 !important;
margin: 0 !important;
z-index: 4;
}
.product__swiper .product__scrollbar.swiper-scrollbar .swiper-scrollbar-drag {
background: var(--main-color) !important;
border-radius: 0 !important;
height: 1px !important;
top: 0 !important;
}
/* Video play button — Figma 10102:2587: 32×32 white circle with grey
border, bottom-left, lucide/play icon 12×12 centred. The legacy SVG
in the template draws its own outer circle stroke — hide it so only
the play triangle shows. */
.product__swiper .product__video-button.product__video-button--slider {
top: auto !important;
right: auto !important;
bottom: 16px !important;
left: 16px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
background: var(--main-white-color) !important;
border: 1px solid var(--grey-color) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 3;
}
.product__swiper .product__video-button--slider svg {
width: 12px;
height: 12px;
}
.product__swiper .product__video-button--slider svg circle {
display: none;
}
.product__swiper .product__video-button--slider svg path {
stroke: var(--main-color);
stroke-width: 8;
fill: var(--main-color);
}
/* "Купить весь образ" overlay — Figma 10102:2590: bottom-right pill,
white bg, 1px grey border, image icon + label. Rendered only when
the product has an associated look (PHP `$hasLook`). */
.product__swiper-buy-look {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 16px;
background: var(--main-white-color);
color: var(--main-color);
border: 1px solid var(--grey-color);
border-radius: 300px;
font: 400 14px/1.15 NunitoSans, sans-serif;
letter-spacing: 0.03em;
cursor: pointer;
white-space: nowrap;
}
.product__swiper-buy-look svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ----- Product content panel (title, info, accordion) ----- */
.product__content {
padding: 24px 16px 0 !important;
margin: 0 !important;
background: var(--main-white-color);
}
.product__content > .product__path,
.product__content > .product__path-min,
.product__content > .product__scrollbar {
display: none !important;
}
/* Title row: title left, share+heart icons right. Gap-16 to article below. */
.product__content .product__header-wrapper {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 12px !important;
margin: 0 0 16px !important;
padding: 0 !important;
border: 0 !important;
}
.product__content .product__header {
font: 500 16px/1.25 NunitoSans, sans-serif !important;
color: var(--main-color);
letter-spacing: 0 !important;
margin: 0 !important;
flex: 1;
min-width: 0;
text-transform: none;
}
.product__content .product__header-icons {
display: flex !important;
gap: 12px !important;
align-items: center !important;
width: auto !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.product__content .product__header-icon {
width: 20px !important;
height: 20px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.product__content .product__header-icon svg {
width: 20px;
height: 20px;
}
.product__content .product__header-icons .ya-share2 {
display: none !important;
}
/* Info-top stack: article (small grey), price (16 medium), 4-pay row,
color label, swatches. */
.product__content .product__info-top {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
display: flex;
flex-direction: column;
}
.product__content .product__article-wrapper {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
margin: 0 0 16px !important;
}
.product__content .product__article {
color: inherit;
}
.product__content .product__price {
font: 500 16px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
margin: 0 0 8px !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
}
.product__content .product__price .product__price-new {
display: inline !important;
font: inherit !important;
color: inherit !important;
font-size: 16px !important;
font-weight: 500 !important;
}
.product__content .product__price .product__price-old {
display: none !important;
}
/* 4-pay chip */
.product__content .product-divide-price {
margin: 0 0 24px !important;
padding: 0;
}
.product__content .product-divide-price-inner {
display: inline-flex !important;
align-items: center;
gap: 4px;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
cursor: pointer;
background: none !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.product__content .product-divide-content { white-space: nowrap; }
.product__content .product-divide-content span { font-weight: 400; }
.product__content .product-divide-price-arrow {
width: 16px;
height: 16px;
background: none !important;
position: relative;
flex-shrink: 0;
margin-left: 0;
}
.product__content .product-divide-price-arrow::before,
.product__content .product-divide-price-arrow::after {
background: none !important;
background-color: transparent !important;
border-radius: 0 !important;
transform: none !important;
right: auto !important;
top: 50% !important;
left: auto !important;
width: 0 !important;
height: 0 !important;
content: "" !important;
border: 0 !important;
transition: none !important;
}
.product__content .product-divide-price-arrow::after {
position: absolute;
right: 0 !important;
top: 50% !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
background: var(--pdp-chev-down-grey) no-repeat center / 16px !important;
transform: rotate(-90deg) !important;
}
/* Color label + 24px swatches */
.product__content .product__color-wrapper {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
margin: 0 0 16px !important;
}
.product__content .product__color {
font-weight: inherit;
text-transform: none;
}
.product__content .product-card__colors.--big {
display: flex !important;
gap: 8px !important;
margin: 0 0 24px !important;
align-items: center !important;
padding: 2px 0 !important;
flex-wrap: wrap;
}
.product__content .product-card__colors.--big .product-card__color {
width: 24px !important;
height: 24px !important;
flex-shrink: 0;
padding: 2px;
margin: 0 !important;
border-radius: 50% !important;
overflow: hidden;
position: relative;
}
.product__content .product-card__colors.--big .product-card__color img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
border-radius: 50%;
}
.product__content .product-card__color.--active {
border: 1px solid var(--grey-color) !important;
box-shadow: none !important;
}
/* "Замеры изделия" — 64px row with top border + right chevron */
.product__content .product__side-panel-open-btn {
width: 100% !important;
background: none !important;
border: 0 !important;
border-top: 1px solid var(--grey-color) !important;
padding: 24px 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
text-align: left;
position: relative;
min-height: 64px;
box-sizing: border-box;
}
.product__content .product__side-panel-open-btn::before,
.product__content .product__side-panel-open-btn::after {
content: "" !important;
background: none !important;
border-radius: 0 !important;
position: absolute;
}
.product__content .product__side-panel-open-btn::before { display: none !important; }
.product__content .product__side-panel-open-btn::after {
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border: 0 !important;
background: var(--pdp-chev-down) no-repeat center / 16px !important;
transform: rotate(-90deg) !important;
transition: transform .15s ease !important;
}
.product__content .product__side-panel-open-btn.--active::after {
transform: rotate(90deg) !important;
}
.product__content .side-panel-open-btn__text {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color) !important;
text-transform: none !important;
text-align: left;
letter-spacing: normal !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
}
.product__content .side-panel-open-btn__text::before,
.product__content .side-panel-open-btn__text::after {
display: none !important;
content: none !important;
}
/* Buy block container — no extra outer borders, lets size accordion own its border. */
.product__content .product__buy-block.dd-list-wrapper {
margin: 0 !important;
}
.product__content .product__buy-block.dd-list-wrapper::before,
.product__content .product__buy-block.dd-list-wrapper::after {
display: none !important;
}
/* "Выберите размер" — must look identical to the accordion rows
below (Описание/Состав/Доставка). Same font, padding, min-height,
border treatment so it doesn't stand out as a separate section. */
.product__content .product__buy-up-text.dd-list-tittle {
font: 400 14px/normal NunitoSans, sans-serif !important;
text-transform: none !important;
color: var(--main-color);
padding: 16px 0 !important;
border-top: 1px solid var(--grey-color) !important;
position: relative;
margin: 0 !important;
min-height: 48px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.product__content .product__buy-up-text.dd-list-tittle::before { display: none !important; }
.product__content .product__buy-up-text.dd-list-tittle::after {
background: var(--pdp-chev-down) no-repeat center / 16px !important;
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border-radius: 0 !important;
border: 0 !important;
transform: none !important;
transition: transform .15s ease !important;
}
.product__content .product__buy-up-text.dd-list-tittle.--active::after {
transform: rotate(180deg) !important;
margin-top: -8px;
}
/* Sizes list — same as desktop (vertical rows). The desktop rules
above already cover this; mobile inherits. Explicit overrides
below ensure mobile-specific tuning sticks. */
.product__content .sku-sizes-list {
display: flex !important;
flex-direction: column;
gap: 0;
padding: 0 0 16px !important;
margin: 0;
list-style: none;
width: 100%;
}
.product__content .product__buy-size-btn {
width: 100% !important;
height: auto !important;
min-height: 40px;
border: 0 !important;
border-top: 1px solid var(--grey-color) !important;
margin: 0 !important;
background: transparent !important;
color: var(--main-color);
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
padding: 12px 0 !important;
position: relative;
text-align: left;
}
.product__content .sku-sizes-list .product__buy-size-btn:first-child {
border-top: 0 !important;
}
.product__content .product__buy-size-btn::before,
.product__content .product__buy-size-btn::after {
display: none !important;
content: none !important;
}
.product__content .product__buy-size-btn:hover:not([data-active=disabled]) {
background: transparent !important;
color: var(--main-color) !important;
opacity: .7;
}
.product__content .product__buy-size-btn.selected,
.product__content .product__buy-size-btn.--active {
background: transparent !important;
color: var(--main-color) !important;
font-weight: 500 !important;
}
.product__content .product__buy-size-btn[data-active=disabled] {
color: var(--chips-unselected) !important;
background: transparent !important;
cursor: default;
}
.product__content .product__buy-size {
font-size: 14px;
text-transform: uppercase;
font-weight: inherit;
letter-spacing: 0.03em;
}
.product__content .product__buy-size-count {
display: inline-block !important;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey);
text-transform: lowercase;
}
/* Inline cart/look buttons are hidden on mobile — the sticky bottom
bar is the single primary CTA per the variant used on PDP. The
inline container stays in DOM (display:none, not removed) so the
cloning JS can still read its innerHTML and forward synthetic
clicks to the original buttons (Bitrix `.js-open-sizes`,
`.js-buy-btn` jQuery handlers stay bound to the originals). */
.product__content .product__basket-actions {
display: none !important;
}
/* Sticky-duplicate of the buy actions — Figma 10102:3283 (total-look
detail). On mobile we want BOTH: inline buttons stay where they
are in the flow AND a fixed-bottom mirror is always reachable.
The sticky container is populated by JS that clones the inline
buttons and forwards clicks back to the originals (so Bitrix
cart/buy-look handlers fire on a single source of truth). */
.product__basket-actions-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: var(--main-white-color);
padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--grey-color);
box-shadow: 0 -2px 16px rgba(19, 15, 15, .04);
display: flex;
flex-direction: column;
gap: 0;
}
.product__basket-actions-sticky:empty {
display: none;
}
.product__basket-actions-sticky .product__buy-open-btn,
.product__basket-actions-sticky .product__buy-open-btn.product-item-detail-buy-button {
background: var(--chocolate-color) !important;
color: var(--main-white-color) !important;
height: auto !important;
padding: 16px 24px !important;
margin: 0 !important;
border-radius: 2px !important;
text-transform: none !important;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
align-items: center;
justify-content: center;
gap: 4px;
border: 0 !important;
cursor: pointer;
width: 100% !important;
background-image: none !important;
}
.product__basket-actions-sticky .product__buy-open-btn.js-open-sizes,
.product__basket-actions-sticky .product__buy-open-btn:not([style*="display:none"]) {
display: flex;
}
.product__basket-actions-sticky .product__buy-open-btn-text {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
text-transform: none !important;
opacity: 1 !important;
}
.product__basket-actions-sticky .product__buy-open-btn-price {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
margin-left: 4px !important;
color: var(--main-white-color);
}
.product__basket-actions-sticky .product__buy-look-link {
display: block !important;
text-align: center;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
text-decoration: underline;
letter-spacing: 0.03em;
margin: 0 auto !important;
cursor: pointer;
background: none !important;
border: 0 !important;
padding: 12px 0 0 !important;
width: auto;
}
/* Add-to-cart chocolate button — 16px vertical padding for mobile (vs 20px desktop) */
.product__content .product__buy-open-btn,
.product__content .product__buy-open-btn.product-item-detail-buy-button {
background: var(--chocolate-color) !important;
color: var(--main-white-color) !important;
height: auto !important;
padding: 16px 24px !important;
margin: 0 !important;
border-radius: 2px !important;
text-transform: none !important;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
align-items: center;
justify-content: center;
gap: 4px;
border: 0 !important;
cursor: pointer;
width: 100% !important;
transition: opacity .2s ease;
overflow: visible !important;
background-image: none !important;
}
.product__content .product__buy-open-btn.js-open-sizes,
.product__content .product__buy-open-btn:not([style]) {
display: flex;
}
.product__content .product__buy-open-btn-text {
font: 400 14px/1.15 NunitoSans, sans-serif !important;
text-transform: none !important;
opacity: 1 !important;
font-size: 14px !important;
}
.product__content .product__buy-open-btn-price {
font: 500 14px/1.15 NunitoSans, sans-serif !important;
margin-left: 4px !important;
color: var(--main-white-color);
}
/* "Купить в образе со скидкой -X %" link — centered, underlined, 16px above */
.product__content .product__buy-look-link {
display: block !important;
text-align: center;
font: 400 14px/1.15 NunitoSans, sans-serif !important;
color: var(--main-color);
text-decoration: underline;
letter-spacing: 0.03em;
margin: 16px auto 0 !important;
cursor: pointer;
background: none !important;
border: 0 !important;
padding: 16px 0 8px !important;
width: auto;
}
/* Accordion blocks — top + bottom 1px borders, 64px-tall titles, chevron toggle.
No margin-top — the first info-block sits flush against the size
selector above (its 1px border doubles as the separator), so the
four rows (Выберите размер / Описание / Состав / Доставка) read as
a single accordion group per Figma 10102:2600. */
.product__content .product__info-block.dd-list-wrapper {
position: relative;
margin: 0 !important;
}
.product__content .product__info-block.dd-list-wrapper::before,
.product__content .product__info-block.dd-list-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: var(--grey-color) !important;
z-index: 0;
}
.product__content .product__info-block.dd-list-wrapper::before { top: 0; }
.product__content .product__info-block.dd-list-wrapper::after { bottom: 0; top: auto; }
.product__content .product__info-block.dd-list-wrapper + .product__info-block.dd-list-wrapper::before {
display: none !important;
}
.product__content .product__info-btn.dd-list-tittle {
font: 400 14px/normal NunitoSans, sans-serif !important;
text-transform: none !important;
padding: 16px 0 !important;
color: var(--main-color);
position: relative;
margin: 0 !important;
min-height: 48px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.product__content .product__info-btn.dd-list-tittle::before { display: none !important; }
.product__content .product__info-btn.dd-list-tittle::after {
background: var(--pdp-chev-down) no-repeat center / 16px !important;
right: 0 !important;
top: 50% !important;
left: auto !important;
margin-top: -8px;
width: 16px !important;
height: 16px !important;
border-radius: 0 !important;
border: 0 !important;
transform: none !important;
transition: transform .15s ease !important;
}
.product__content .product__info-btn.dd-list-tittle.--active::after {
transform: rotate(180deg) !important;
margin-top: -8px;
}
/* Accordion body — compact mobile spacing: open content sits flush
under the title and gets a slim 12 px bottom pad before the next
block's divider. */
.product__content .product__info-content {
font: 400 14px/1.5 NunitoSans, sans-serif !important;
color: var(--secondary-text-grey) !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
/* Normalised paragraphs + bullet list inside an opened accordion (see
the JS in template.php that converts legacy
-separated text). */
.product__content .product__info-content p {
margin: 0 0 8px !important;
padding: 0;
}
.product__content .product__info-content p:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content ul {
list-style: none !important;
margin: 8px 0 !important;
padding: 0 !important;
}
.product__content .product__info-content ul:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content li {
position: relative;
margin: 0 0 6px !important;
padding: 0 0 0 16px !important;
list-style: none !important;
}
.product__content .product__info-content li:last-child {
margin-bottom: 0 !important;
}
.product__content .product__info-content li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: inherit;
font-weight: inherit;
}
.product__content .product__info-btn.dd-list-tittle.--active + .product__info-content {
padding: 0 0 16px !important;
}
.product__content .product__info-content p { margin: 0 0 8px !important; }
.product__content .product__info-content p:last-child { margin-bottom: 0 !important; }
.product__content .product__info-content.--list-type {
display: block !important;
gap: 0 !important;
}
.product__content .product__info-content.--list-type br + br { display: none; }
/* ----- Bottom carousels — "Завершить образ" / "Аксессуары" /
"Вам может понравиться". Each one is full-width with 16px gutters,
36px above (top gap from previous block) and 36px between. ----- */
.product__recommended {
margin: 36px 0 0 !important;
padding: 0 16px !important;
width: 100%;
max-width: none !important;
}
.product__recommended + .product__recommended {
margin-top: 36px !important;
}
.product__recommended .popup-cards__title,
.product__recommended .bloom-box-popup__category-title {
font: 500 16px/normal NunitoSans, sans-serif !important;
color: var(--main-color);
margin: 0 0 24px !important;
padding: 0 !important;
text-transform: none;
}
/* Ensure the swiper inside the carousel runs edge-to-edge (no extra padding) */
.product__recommended .bloom-box-popup__category-swiper {
margin: 0;
}
}
/* === Tablet (744-1065px) — single-column layout: gallery on top
full-width, product info below, inline cart buttons visible, no
sticky bottom bar. Without these overrides Bitrix's inline
`grid-template-columns: 1fr 1fr` from main.bundle.js draws a tight
2-column grid that mobile styles aren't designed for, and the legacy
.product__swiper renders all 18 slides stacked vertically because the
Swiper.js init runs in a too-narrow column. Boundary matches
Bitrix's 744+ swiper-grid breakpoint and our JS swap range. === */
@media (min-width: 744px) and (max-width: 1065px) {
/* Reset container to plain block flow — kills the inline grid. */
.container.product__container {
display: block !important;
grid-template-columns: none !important;
padding: 0 16px !important;
max-width: 100% !important;
}
/* Gallery — hide desktop lookbook (designed for ≥1066) AND the
legacy `.product__main-image` (which Bitrix renders ~656px tall
even with the `--none` state class on tablet widths, containing
phantom pagination dots). Use the legacy .product__swiper. At
tablet widths Bitrix's main.bundle.js enables the Swiper.js Grid
module (`swiper-grid swiper-grid-column`) which stacks all slides
vertically — we kill that with CSS below. */
.container.product__container > .product__gallery-area,
.container.product__container > .product__main-image {
display: none !important;
}
.product__swiper {
margin: 0 !important;
max-width: 100%;
max-height: 80vh;
overflow: hidden !important;
}
.product__swiper .swiper-wrapper {
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 80vh !important;
max-height: 80vh !important;
}
.product__swiper .swiper-slide {
flex-shrink: 0 !important;
width: 100% !important;
height: 80vh !important;
margin: 0 !important;
}
.product__swiper .swiper-slide .product__img-wrapper,
.product__swiper .swiper-slide a {
display: block;
width: 100%;
height: 100%;
}
.product__swiper .swiper-slide img.product__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Pagination dots from Bitrix's grid swiper config render vertically
on the left — hide them; the .product__scrollbar we moved into the
swiper covers the same job horizontally under the photo. */
.product__swiper .product__pagination,
.product__swiper .swiper-pagination {
display: none !important;
}
/* Scrollbar on tablet — sits at the very bottom inside the swiper
(was previously pushed -8px below with overflow:visible on the
swiper, but that broke horizontal slide clipping because the
wrap is only one slide wide and adjacent slides need .swiper's
overflow:hidden to clip cleanly). Base .swiper-scrollbar rule
hides it; only max-width:744px overrides to visible — explicitly
show it on tablet too. */
.product__swiper .product__scrollbar.swiper-scrollbar {
visibility: visible !important;
bottom: 0 !important;
height: 4px !important;
background: var(--grey-color) !important;
border-radius: 2px !important;
}
.product__swiper .product__scrollbar.swiper-scrollbar .swiper-scrollbar-drag {
height: 4px !important;
background: var(--main-color) !important;
border-radius: 2px !important;
}
/* Product info: block flow below the gallery, padded for breathing room. */
.product__content {
padding: 32px 0 0 !important;
margin: 0 !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
background: var(--main-white-color);
}
/* Show inline cart + look-link as on desktop, hide the mobile sticky bar. */
.product__content .product__basket-actions {
display: flex !important;
flex-direction: column;
gap: 0;
margin: 0;
}
.product__basket-actions-sticky {
display: none !important;
}
/* main.product padding-bottom — reset (no sticky bar to clear). */
main.product {
padding-bottom: 0;
}
/* Carousels — full content width with 16px gutters. */
.product__recommended {
margin: 36px 0 0 !important;
padding: 0 !important;
max-width: none !important;
}
}
/* Success state for add-to-cart button */
.product__buy-open-btn.--success {
pointer-events: none;
}
.product__buy-open-btn.--success .product__buy-open-btn-price {
display: none !important;
}
.product__buy-open-btn.--success .product__buy-open-btn-text {
width: 100%;
text-align: center;
}
/* Success state for catalog list cards */
.product-card-addcart--success .product-card-addcart__overflow {
pointer-events: none;
}
.product-card-addcart--success .product-card-addcart__plus {
opacity: 0 !important;
}
/* End */
/* Start:/local/templates/main/css/components/popup-cards.css?17835476341960*/
.popup-cards {
display: flex;
flex-direction: column;
gap: 24px;
}
.popup-cards__slider {
position: relative;
}
.popup-cards .bloom-box-popup__category-title {
margin: 0 0 24px;
width: 100%;
padding-right: 64px;
font-family: 'Nunito Sans', NunitoSans, serif;
font-weight: 500;
font-size: 18px;
line-height: normal;
color: #130F0F;
}
.popup-cards .bloom-box-popup__category-slider {
position: relative;
}
.popup-cards .bloom-box-popup__category-swiper {
overflow: hidden;
}
.popup-cards .swiper-blog-products {
position: relative;
}
.popup-cards .swiper-blog-products-nav {
position: static;
}
.popup-cards .swiper-blog-products-nav .swiper__btn-prev-wrapper,
.popup-cards .swiper-blog-products-nav .swiper__btn-next-wrapper {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
outline: none;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-cards .swiper-blog-products-nav .swiper__btn-prev-wrapper {
left: 16px;
right: auto;
}
.popup-cards .swiper-blog-products-nav .swiper__btn-next-wrapper {
right: 16px;
left: auto;
}
.popup-cards .swiper-blog-products-nav .swiper__btn-prev-wrapper.swiper-button-disabled,
.popup-cards .swiper-blog-products-nav .swiper__btn-next-wrapper.swiper-button-disabled {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.popup-cards .swiper-blog-products__scrollbar {
display: none !important;
}
.popup-cards .product-card__content {
padding-bottom: 0;
}
.popup-cards--look {
/* модификатор для total-look попапа: место под точечные подстройки */
}
@media (max-width: 767px) {
.popup-cards .bloom-box-popup__category-title {
font-size: 16px;
}
.popup-cards .swiper-blog-products-nav {
display: none;
}
}
/* End */
/* Start:/local/components/sure/pdp.look.drawer/templates/.default/style.css?17835476332291*/
/* ===========================================================================
sure:pdp.look.drawer — обёртка правого слайд-аута на PDP.
Стили самой панели подтягиваются из компонента sure:look.buy.panel.
Figma 10102:2309 (544×984).
=========================================================================== */
.pdp-look-drawer {
position: fixed;
inset: 0;
z-index: 1000;
display: block;
pointer-events: none;
visibility: hidden;
}
.pdp-look-drawer.--active {
pointer-events: auto;
visibility: visible;
}
.pdp-look-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(19, 15, 15, 0.4);
opacity: 0;
transition: opacity 0.3s ease;
}
.pdp-look-drawer.--active .pdp-look-drawer__overlay {
opacity: 1;
}
.pdp-look-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 544px;
max-width: 100vw;
background: #FFFFFF;
box-shadow: -10px 0 40px rgba(19, 15, 15, 0.08);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pdp-look-drawer.--active .pdp-look-drawer__panel {
transform: translateX(0);
}
/* Внутренний LookBuyPanel с собственным скроллом по списку и нужными
паддингами под формат drawer-а. */
.pdp-look-drawer__panel .look-buy-panel {
padding: 40px 32px 24px;
height: 100%;
}
.pdp-look-drawer__panel .look-buy-panel__header,
.pdp-look-drawer__panel .look-buy-panel__subtitle {
margin-bottom: 24px;
}
.pdp-look-drawer__panel .look-buy-panel__items {
overflow-y: auto;
overscroll-behavior: contain;
margin: 0 -32px;
padding: 0 32px;
}
@media (max-width: 600px) {
.pdp-look-drawer__panel {
width: 100%;
}
.pdp-look-drawer__panel .look-buy-panel {
padding: 24px 16px 16px;
}
.pdp-look-drawer__panel .look-buy-panel__items {
margin: 0 -16px;
padding: 0 16px;
}
.pdp-look-drawer__panel .look-buy-panel__title {
font-size: 24px;
}
.pdp-look-drawer__panel .look-buy-panel__subtitle {
font-size: 16px;
}
}
/* End */
/* Start:/local/components/sure/look.buy.panel/templates/.default/style.css?17835476337360*/
/* ===========================================================================
sure:look.buy.panel — общий компонент "Купить весь образ".
Стили только для содержимого панели; обёртка/позиционирование задаётся
контейнером, в котором панель отрисована (попап, drawer, секция).
=========================================================================== */
.look-buy-panel {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
box-sizing: border-box;
font-family: 'Nunito Sans', NunitoSans, sans-serif;
color: #130F0F;
}
/* Header */
.look-buy-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 40px;
flex-shrink: 0;
}
.look-buy-panel__title {
font-weight: 500;
font-size: 28px;
line-height: 100%;
color: #291A13;
margin: 0;
transition: opacity 0.25s ease;
}
.look-buy-panel__title.--fading { opacity: 0; }
.look-buy-panel__close {
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
color: #130F0F;
line-height: 0;
}
.look-buy-panel__subtitle {
font-weight: 500;
font-size: 18px;
line-height: 125%;
color: #130F0F;
margin: 0 0 40px;
flex-shrink: 0;
}
/* Items */
.look-buy-panel__items {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.look-buy-panel__item {
display: grid;
grid-template-columns: 83px 1fr;
gap: 12px;
padding: 24px 0;
border-bottom: 1px solid #D3D3D3;
}
.look-buy-panel__item:first-child { padding-top: 0; }
.look-buy-panel__item:last-child { border-bottom: 0; }
.look-buy-panel__item-img {
display: block;
background: var(--light-grey, #ECE7E1);
aspect-ratio: 83 / 120;
overflow: hidden;
text-decoration: none;
}
.look-buy-panel__item-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.look-buy-panel__item-info {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.look-buy-panel__item-top {
display: flex;
flex-direction: column;
gap: 16px;
}
.look-buy-panel__item-bottom {
display: flex;
flex-direction: column;
gap: 8px;
}
.look-buy-panel__item-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.look-buy-panel__item-name {
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: #130F0F;
text-decoration: none;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.look-buy-panel__item-prices {
flex-shrink: 0;
font-size: 14px;
white-space: nowrap;
}
.look-buy-panel__price-old {
font-weight: 400;
font-size: 12px;
line-height: 100%;
text-decoration: line-through;
color: #A6A6A6;
}
.look-buy-panel__price-new {
font-weight: 400;
font-size: 14px;
line-height: 100%;
color: #130F0F;
}
.look-buy-panel__item-color {
font-weight: 400;
font-size: 14px;
line-height: 100%;
color: #130F0F;
}
.look-buy-panel__item-color span {
font-weight: 400;
color: #8A8A8A;
}
.look-buy-panel__item-sizes-label {
font-weight: 400;
font-size: 14px;
line-height: 100%;
color: #130F0F;
margin-top: 4px;
transition: color 0.2s ease;
}
.look-buy-panel__item-sizes-label.--invalid {
color: #E6420C;
}
.look-buy-panel__item-sizes {
display: flex;
gap: 0;
}
.look-buy-panel__size {
min-width: 48px;
width: auto;
padding: 0 20px;
height: 36px;
border: 0.5px solid #D3D3D3;
background: #FFFFFF;
font-family: inherit;
font-weight: 400;
font-size: 12px;
line-height: 100%;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
color: #291A13;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.look-buy-panel__size.--active,
.look-buy-panel__size:not(.look-buy-panel__size--unavailable):hover {
background: #291A13;
border-color: #291A13;
color: #FFFFFF;
}
.look-buy-panel__size--unavailable {
color: #A6A6A6;
cursor: not-allowed;
}
.look-buy-panel__size--locked {
pointer-events: none;
}
/* Summary */
.look-buy-panel__summary {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 24px;
border-top: 1px solid #D3D3D3;
flex-shrink: 0;
}
.look-buy-panel__summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
}
.look-buy-panel__summary-label {
font-weight: 500;
font-size: 14px;
line-height: 100%;
color: #130F0F;
}
.look-buy-panel__summary-value--accent {
font-weight: 500;
font-size: 14px;
line-height: 100%;
text-align: right;
color: #E6420C;
}
.look-buy-panel__summary-row--total {
font-size: 20px;
font-weight: 500;
margin-top: 4px;
}
.look-buy-panel__total-label,
.look-buy-panel__total-value {
font-weight: 500;
font-size: 24px;
line-height: 100%;
color: #130F0F;
}
.look-buy-panel__total-value {
color: #291A13;
text-align: right;
}
/* Buy */
.look-buy-panel__buy-wrap {
margin-top: 16px;
height: 48px;
min-height: 48px;
flex-shrink: 0;
}
.look-buy-panel__buy {
width: 100%;
height: 100%;
background: #291A13;
color: #FFFFFF;
border: 0;
border-radius: 2px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.25s ease, background-color 0.2s ease;
}
.look-buy-panel__buy-text {
text-align: center;
}
.look-buy-panel__buy.--fading { opacity: 0; }
.look-buy-panel__buy-label {
font-weight: 400;
font-size: 14px;
line-height: 115%;
letter-spacing: 0.03em;
text-align: center;
color: #FFFFFF;
}
.look-buy-panel__buy-old {
font-weight: 400;
font-size: 12px;
line-height: 115%;
text-align: center;
text-decoration: line-through;
color: #A6A6A6;
}
.look-buy-panel__buy-new {
font-weight: 400;
font-size: 14px;
line-height: 115%;
text-align: center;
color: #FFFFFF;
}
/* Validation toast (singleton) */
.look-buy-panel__toast {
position: fixed;
top: env(safe-area-inset-top);
left: 0;
right: 0;
height: 48px;
background: #FFFFFF;
color: #FFFFFF;
font-family: 'Nunito Sans', NunitoSans, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0.03em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
opacity: 0;
transform: translateY(calc(-100% - env(safe-area-inset-top)));
transition: background-color 0s 0s, opacity 0.3s ease-out, transform 0.3s ease-out;
pointer-events: none;
}
.look-buy-panel__toast.--visible {
transform: translateY(0);
opacity: 1;
background: #E6420C;
transition: background-color 0s 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out;
}
/* End */
/* /local/templates/main/components/bitrix/catalog/.default/style.min.css?1783547636959 */
/* /local/templates/main/components/bitrix/catalog.element/custom/style.css?178354763627022 */
/* /local/templates/main/css/pages/product-v3.css?178354763470180 */
/* /local/templates/main/css/components/popup-cards.css?17835476341960 */
/* /local/components/sure/pdp.look.drawer/templates/.default/style.css?17835476332291 */
/* /local/components/sure/look.buy.panel/templates/.default/style.css?17835476337360 */