/* Start:/local/templates/aspro_optimus/components/bitrix/catalog.element/cc_product/style.css?178914597467400*/
/* ═══════════════════════════════════════════════════════════════════
   CarboCarbo — карточка товара. Этап 4 дизайн-системы, 10.09.2026.
   Шаблон cc_product = копия main_dev_2 (логика цен, предложений, корзины нетронута),
   раскладка — по макету Дизайн/Дизайн-система/макет-карточки.html:
     галерея | панель покупки 372px → характеристики → вкладки → «Категория» → подборки.
   Файл подключается Битриксом автоматически как style.css шаблона; 22 КБ прежних
   «UX»-патчей main_dev_2 к этому шаблону не относятся. Токены --cc-* — в css/custom.css.
   Селекторы с .catalog_detail нужны против общих правил темы в template_styles.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Порядок крупных блоков ─── */
.catalog_detail .item_main_info{border:0 !important;margin:0 !important;padding:0 !important} /* рамка темы вокруг всего блока */
.catalog_detail{display:flex;flex-direction:column}
.catalog_detail > .item_main_info{order:1}
.catalog_detail > .cc-specs{order:2}
.catalog_detail > .tabs_section{order:3}
.catalog_detail > .section-relink{order:4}
.catalog_detail > .gifts,.catalog_detail > .clearfix,.catalog_detail > .clearleft{order:5}

/* ─── Сетка карточки: галерея | панель покупки ─── */
.catalog_detail .item_main_info .detailed-presentation{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:32px;align-items:start;margin:0;padding:0}
.catalog_detail .detailed-presentation .box-img{grid-column:1;grid-row:1;position:relative;width:auto;float:none;margin:0;padding:0;min-width:0}
.catalog_detail .detailed-presentation .js-box-buy--source{grid-column:2;grid-row:1;position:sticky;top:96px;width:auto;float:none;margin:0;min-width:0}
.catalog_detail .detailed-presentation .js-box-social-proof--source,
.catalog_detail .detailed-presentation .js-box-buy--duplicate,
.catalog_detail .detailed-presentation .js-box-social-proof--duplicate,
.catalog_detail .detailed-presentation .js-box-share-socialnetworks--duplicate,
.catalog_detail .detailed-presentation > .clearfix{display:none}

/* ─── Галерея: миниатюры слева столбиком, основное фото 4:3 в рамке ─── */
.catalog_detail .box-img .item_slider{display:flex;gap:12px;align-items:flex-start;width:auto;margin:0;padding:0;float:none;position:static}
.catalog_detail .box-img .item_slider .slides{flex:1 1 auto;min-width:0;width:auto !important;max-width:none !important;margin:0;padding:0;border:1px solid var(--cc-line);border-radius:var(--cc-radius-card);aspect-ratio:4/3;overflow:hidden;background:#fff;position:relative;height:auto}
.catalog_detail .box-img .item_slider .slides ul{margin:0;padding:0;list-style:none;height:100%}
.catalog_detail .box-img .item_slider .slides li{height:100% !important;width:100% !important;max-width:none !important;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;margin:0;text-align:center}
.catalog_detail .box-img .item_slider .slides li a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.catalog_detail .box-img .item_slider .slides img{width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0}
.catalog_detail .box-img .item_slider .wrapp_thumbs{order:-1;flex:0 0 72px;width:72px;margin:0;padding:0;float:none}
.catalog_detail .box-img .item_slider .wrapp_thumbs .sliders,.catalog_detail .box-img .item_slider .thumbs{max-width:none !important;width:72px;margin:0;padding:0}
.catalog_detail .box-img .item_slider .thumbs ul{display:flex;flex-direction:column;gap:8px;margin:0 !important;padding:0;list-style:none;width:auto !important;transform:none !important;left:0 !important;position:static}
.catalog_detail .box-img .item_slider .thumbs li{width:72px !important;height:72px !important;margin:0 !important;padding:0;border:1px solid var(--cc-line);border-radius:var(--cc-radius-btn);overflow:hidden;cursor:pointer;background:#fff;box-sizing:border-box;float:none;display:block;position:static}
.catalog_detail .box-img .item_slider .thumbs li.current{border-color:var(--cc-accent);box-shadow:inset 0 0 0 .5px var(--cc-accent)}
.catalog_detail .box-img .item_slider .thumbs li .cnt,.catalog_detail .box-img .item_slider .thumbs li > span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border:0;background:none}
.catalog_detail .box-img .item_slider .thumbs li img{width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:cover;display:block;border-radius:6px}
/* тема: .item_slider .slides li img, .thumbs li img {position:absolute;inset:0;margin:auto} — при static-ячейках все картинки
   съезжали в одну точку предка; возвращаем в поток */
.catalog_detail .item_main_info .box-img .item_slider .slides li img,.catalog_detail .item_main_info .box-img .item_slider .thumbs li img{position:static !important;inset:auto !important;margin:0 !important;border:0}
/* маркер списка темы ul li::before — оранжевая точка на каждой миниатюре */
.catalog_detail .box-img .item_slider .thumbs li::before,.catalog_detail .box-img .item_slider .slides li::before{content:none !important;display:none !important}
.catalog_detail .box-img .item_slider .thumbs_navigation,.catalog_detail .box-img .item_slider .flex-direction-nav{display:none !important}
/* Правила темы, которые раньше перекрывал style.css main_dev_2 (постраничная склейка идёт раньше стилей темы,
   при равной специфичности тема побеждает): .item_slider{width:50%;padding:29px 56px;float:left},
   .slides{max-width:340px;height:340px;line-height:337px}, li{position:absolute;height:340px;display:none} */
.catalog_detail .item_main_info .box-img .item_slider{width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important;float:none !important;text-align:left}
.catalog_detail .item_main_info .box-img .item_slider .slides{height:auto !important;line-height:normal !important;margin:0 !important;max-width:none !important;width:auto !important;box-sizing:border-box}
.catalog_detail .item_main_info .box-img .item_slider .slides .offers_img,.catalog_detail .item_main_info .box-img .item_slider .slides ul{width:100% !important;height:100% !important;margin:0 !important;padding:0 !important}
.catalog_detail .item_main_info .box-img .item_slider .slides li{position:static !important;line-height:normal !important;height:100% !important;width:100% !important;display:none !important;padding:0 !important} /* фото вплотную к рамке, как в макете */
.catalog_detail .item_main_info .box-img .item_slider .slides li.current{display:flex !important}
.catalog_detail .item_main_info .box-img .item_slider .thumbs{max-width:none !important;margin:0 !important}
/* метки «хит / новинка / акция» — поверх основного фото, правее столбика миниатюр */
.catalog_detail .box-img .stickers{position:absolute;left:12px;top:12px;z-index:3;margin:0}
.catalog_detail .box-img:has(.wrapp_thumbs) .stickers{left:96px}

/* ─── Панель покупки ─── */
.catalog_detail .box-buy{border:1px solid var(--cc-line);border-radius:var(--cc-radius-card);padding:22px 24px;background:#fff;display:flex;flex-direction:column;width:auto;margin:0;float:none;box-sizing:border-box}
.catalog_detail .box-buy .middle_info{display:flex;flex-direction:column;margin:0;padding:0;width:auto;border:0;background:none}
.catalog_detail .box-buy .cc-buy__stock{order:1;margin:0 0 12px}
.catalog_detail .box-buy .prices_block{order:2;margin:0 0 6px;padding:0;width:auto}
.catalog_detail .box-buy .cc-buy__hints{order:3;margin:12px 0 18px}
.catalog_detail .box-buy .buy_block{order:4;margin:0;padding:0}
.catalog_detail .box-buy .counter_wrapp.fix-price-pos,.catalog_detail .box-buy .offer_buy_block{order:5;margin:0;padding:0;width:auto}
.catalog_detail .box-buy .print-total-price{order:6}
.catalog_detail .box-buy .wrapp_one_click{order:7;margin:10px 0 0}
.catalog_detail .box-buy .stock_board{margin:14px 0 0}

/* наличие */
.catalog_detail .box-buy .cc-buy__stock .item-stock{margin:0;padding:0;font:500 14px/1.3 var(--cc-font);color:#1c6b2e;display:flex;align-items:center;gap:6px;background:none;border:0}
.catalog_detail .box-buy .cc-buy__stock .item-stock .icon{display:none}
.catalog_detail .box-buy .cc-buy__stock .item-stock .value{color:inherit;font:inherit;padding:0;margin:0}
.catalog_detail .box-buy .cc-buy__stock .item-stock .value::before{content:"✓ "}
.catalog_detail .box-buy .cc-buy__stock .item-stock.no .value::before,.catalog_detail .box-buy .cc-buy__stock .item-stock.order .value::before{content:""}

/* цена */
.catalog_detail .box-buy .prices_block .cost.prices{display:block;margin:0;padding:0;float:none;width:auto}
.catalog_detail .box-buy .prices_block .price{font:700 32px/1 var(--cc-font);color:var(--cc-ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin:0;padding:0;display:block;float:none;background:none;white-space:normal}
.catalog_detail .box-buy .prices_block .price .values_wrapper,.catalog_detail .box-buy .prices_block .price .price_value{font:inherit;color:inherit;letter-spacing:inherit}
.catalog_detail .box-buy .prices_block .price .price_currency{font:700 22px/1 var(--cc-font);color:inherit;margin-left:2px}
.catalog_detail .box-buy .prices_block .price .price_measure{font:400 16px/1 var(--cc-font);color:var(--cc-ink-soft);margin-left:6px;letter-spacing:0;text-transform:none}
.catalog_detail .box-buy .prices_block .offers_price_wrapper,.catalog_detail .box-buy .prices_block .offers_price{display:block;margin:0;padding:0;float:none;width:auto}
.catalog_detail .box-buy .prices_block .price.discount,.catalog_detail .box-buy .prices_block del.old-price{font:400 14px/1 var(--cc-font);color:var(--cc-ink-muted);text-decoration:line-through;margin:6px 0 0;letter-spacing:0}
.catalog_detail .box-buy .prices_block .price.discount *{font:inherit;color:inherit}
.catalog_detail .box-buy .prices_block .sale_block{display:none !important}

/* условия («Специальная цена при оптовой сделке», «НДС») — были в средней колонке */
/* по правке 10.09: заметнее — плашкой с заливкой внутри панели, шрифт 13px */
.catalog_detail .box-buy .cc-buy__hints .item{margin:0;padding:10px 14px;background:var(--cc-bg-soft);border:0;border-radius:var(--cc-radius-btn);width:auto;display:block;box-sizing:border-box}
.catalog_detail .box-buy .cc-buy__hints .pad-ico{display:none}
.catalog_detail .box-buy .cc-buy__hints ul.text{list-style:none !important;padding:0 !important;margin:0 !important;font:400 13px/1.5 var(--cc-font);color:var(--cc-ink-soft)}
.catalog_detail .box-buy .cc-buy__hints li{margin:0 0 4px;padding:0 0 0 13px;position:relative;line-height:1.5}
.catalog_detail .box-buy .cc-buy__hints li:last-child{margin-bottom:0}
.catalog_detail .box-buy .cc-buy__hints li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--cc-accent)}
.catalog_detail .box-buy .cc-buy__hints strong{font-weight:500;color:var(--cc-ink)}

/* выбор предложения: «Тип плетения», «Ширина», «Как продаём» — плашки в ряд */
.catalog_detail .box-buy .sku_props,.catalog_detail .box-buy .bx_catalog_item_scu{margin:0;padding:0;width:auto;border:0;background:none}
.catalog_detail .box-buy .bx_item_detail_size{margin:0 0 18px;padding:0;width:auto;float:none;border:0}
.catalog_detail .box-buy .bx_item_section_name{display:block;font:500 12px/1.3 var(--cc-font);letter-spacing:.05em;text-transform:uppercase;color:var(--cc-ink-soft);margin:0 0 8px;padding:0}
/* у свойства «Метры² / Рулон» имя пустое (пробелы) — заголовок скрывает скрипт в template.php */
.catalog_detail .box-buy .bx_size_scroller_container{height:auto !important;overflow:visible;margin:0;padding:0;border:0;width:auto}
.catalog_detail .box-buy .bx_size{height:auto;overflow:visible;margin:0;padding:0;width:auto !important;position:static;border:0}
.catalog_detail .box-buy .bx_size ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 !important;padding:0;width:auto !important;left:0 !important;transform:none !important;position:static}
.catalog_detail .box-buy .bx_size li{flex:1 1 auto;min-width:0;max-width:100%;overflow:visible !important;text-align:center;border:1px solid var(--cc-line);border-radius:var(--cc-radius-btn);padding:11px 8px;font:500 14px/1.2 var(--cc-font);color:var(--cc-ink);cursor:pointer;background:#fff;position:relative;margin:0 !important;height:auto;width:auto;box-sizing:border-box;float:none;display:block;box-shadow:none}
.catalog_detail .box-buy .bx_size li i{display:none}
.catalog_detail .box-buy .bx_size li .cnt{display:block;padding:0;margin:0;border:0;background:none;font:inherit;color:var(--cc-ink) !important;height:auto;line-height:inherit;white-space:nowrap;overflow:visible !important;text-overflow:clip !important;max-width:none !important;width:auto !important} /* длинные значения («1000×500×100») не режем — плашка растёт, ряд переносится */
.catalog_detail .box-buy .bx_size li:hover{border-color:var(--cc-accent)}
.catalog_detail .box-buy .bx_size li.active{border-color:var(--cc-accent);box-shadow:inset 0 0 0 .5px var(--cc-accent);background:var(--cc-bg-accent)}
.catalog_detail .box-buy .bx_size li.missing{opacity:.5;border-style:dashed}
.catalog_detail .box-buy .bx_size li.missing.active{opacity:1;border-style:solid}

/* количество + «В корзину» в одну строку */
.catalog_detail .box-buy .counter_wrapp{display:flex;gap:10px;align-items:stretch;margin:0;padding:0;width:auto;flex-wrap:wrap;float:none}
.catalog_detail .box-buy .counter_block{display:flex;flex:0 0 132px;width:132px;height:46px;border:1px solid var(--cc-line);border-radius:var(--cc-radius-btn);overflow:hidden;margin:0;padding:0;background:#fff;box-sizing:border-box;float:none;position:static}
.catalog_detail .box-buy .counter_block .minus,.catalog_detail .box-buy .counter_block .plus{flex:0 0 40px;width:40px;height:100%;display:flex;align-items:center;justify-content:center;background:var(--cc-bg-soft);color:var(--cc-ink);font:400 18px/1 var(--cc-font);cursor:pointer;border:0;margin:0;padding:0;box-sizing:border-box;position:static}
/* тема дорисовывает знак псевдоэлементом, в разметке он уже есть текстом — иначе «+ +» */
.catalog_detail .box-buy .counter_block .minus::before,.catalog_detail .box-buy .counter_block .minus::after,.catalog_detail .box-buy .counter_block .plus::before,.catalog_detail .box-buy .counter_block .plus::after{content:none !important;display:none !important}
.catalog_detail .box-buy .counter_block .minus:hover,.catalog_detail .box-buy .counter_block .plus:hover{background:var(--cc-bg-line);color:var(--cc-accent-hover)}
.catalog_detail .box-buy .counter_block input.text{flex:1 1 auto;width:0;min-width:0;height:100%;border:0;text-align:center;font:500 16px/44px var(--cc-font);color:var(--cc-ink);outline:none;background:#fff;padding:0;margin:0;box-shadow:none;border-radius:0;font-variant-numeric:tabular-nums}
.catalog_detail .box-buy .button_block{flex:1 1 140px;display:block;margin:0;padding:0;width:auto;float:none;min-width:0}
.catalog_detail .box-buy .button_block .button{display:flex !important;width:100%;height:46px;align-items:center;justify-content:center;gap:9px;margin:0;padding:0 16px;box-sizing:border-box;font:700 15px/1 var(--cc-font);border-radius:var(--cc-radius-btn);text-align:center;white-space:nowrap;line-height:1}
/* тема переключает «В корзину» / «В корзине» инлайновым display:none — !important выше не должен его перебивать */
.catalog_detail .box-buy .button_block .button[style*="display: none"],.catalog_detail .box-buy .button_block .button[style*="display:none"]{display:none !important}
.catalog_detail .box-buy .button_block .button i{display:none}
.catalog_detail .box-buy .button_block .button span{font:inherit;color:inherit;padding:0;margin:0;line-height:inherit}
.catalog_detail .box-buy .button_block .in-cart{background:#1c6b2e;border-color:#1c6b2e;color:#fff}
.catalog_detail .box-buy .button_block .to-order,.catalog_detail .box-buy .button_block .to-subscribe{font-size:14px;color:var(--cc-accent-hover);border:1.5px solid var(--cc-accent);background:#fff}
/* подпись под «Под заказ» («Наши менеджеры свяжутся…») */
.catalog_detail .box-buy .button_block .more_text{font:400 12px/1.45 var(--cc-font);color:var(--cc-ink-muted);margin:8px 0 0;padding:0;text-align:left}

/* итог за введённое количество (рисует setPriceItemDev из script.js) */
.catalog_detail .box-buy .total_summ{border-top:1px solid var(--cc-line);margin:18px 0 0;padding:14px 0 0;font:400 14px/1.4 var(--cc-font);color:var(--cc-ink-soft);background:none;width:auto;text-align:left;border-radius:0}
.catalog_detail .box-buy .total_summ div{padding:0;margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:none}
.catalog_detail .box-buy .total_summ span{color:var(--cc-ink);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}

/* «Отложить» — контурная кнопка; «Сравнить» снято (механизм не работает, решение 07.09) */
/* отсутствующий товар (кнопка «Под заказ») отложить нельзя — тема отвечала окном ошибки «Товар отсутствует» (решение пользователя 10.09) */
.catalog_detail .box-buy:has(.button_block .to-order) .line-remember-product{display:none !important}
.catalog_detail .box-buy .line-remember-product{display:flex;gap:10px;margin:12px 0 0;padding:0;border:0;width:auto;background:none}
.catalog_detail .box-buy .compare_item{display:none !important}
.catalog_detail .box-buy .wish_item.text{display:flex !important;flex:1 1 auto;justify-content:center;align-items:center;border:1.5px solid var(--cc-accent);border-radius:var(--cc-radius-btn);padding:11px 10px;font:500 14px/1 var(--cc-font);color:var(--cc-accent-hover);cursor:pointer;background:#fff;margin:0;width:auto;height:auto;transition:background .15s;box-sizing:border-box}
.catalog_detail .box-buy .wish_item.text:hover{background:var(--cc-bg-accent)}
.catalog_detail .box-buy .wish_item.text .value{align-items:center;gap:8px;padding:0;margin:0;font:inherit;color:inherit;height:auto;line-height:inherit;background:none;border:0}
.catalog_detail .box-buy .wish_item.text .value i{display:none}
.catalog_detail .box-buy .wish_item.text .value::before{content:"";display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-right:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8.2a4.2 4.2 0 0 1 7.5 2.3c0 5.4-7.5 10-7.5 10z'/></svg>") center/18px 18px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8.2a4.2 4.2 0 0 1 7.5 2.3c0 5.4-7.5 10-7.5 10z'/></svg>") center/18px 18px no-repeat}
.catalog_detail .box-buy .wish_item.text .value.added::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8.2a4.2 4.2 0 0 1 7.5 2.3c0 5.4-7.5 10-7.5 10z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8.2a4.2 4.2 0 0 1 7.5 2.3c0 5.4-7.5 10-7.5 10z'/></svg>")}
.catalog_detail .box-buy .wish_item.text.added{background:var(--cc-bg-accent)}

/* текст-анонс под сеткой */
/* вставка «Как заказать отрез» (roll_calc.php) — под сеткой карточки, в тонах системы */
.catalog_detail .item_main_info .rc-box{margin:24px 0 0;padding:18px 22px;background:var(--cc-bg-soft);border-left:3px solid var(--cc-accent);border-radius:var(--cc-radius-box);font:400 14px/1.55 var(--cc-font);color:var(--cc-ink-soft)}
.catalog_detail .item_main_info .rc-box .rc-t{font:700 15px/1.3 var(--cc-font-head);color:var(--cc-ink);letter-spacing:-0.01em;margin:0 0 8px}
.catalog_detail .item_main_info .rc-box p,.catalog_detail .item_main_info .rc-box .rc-lead{color:var(--cc-ink-soft);font-size:14px}
.catalog_detail .item_main_info .rc-box .rc-w,.catalog_detail .item_main_info .rc-box .rc-lead b{color:var(--cc-ink)}
.catalog_detail .item_main_info .rc-box .rc-f input{border:1px solid var(--cc-line);border-radius:var(--cc-radius-btn);padding:10px 12px;font:500 15px/1.2 var(--cc-font);color:var(--cc-ink)}
.catalog_detail .item_main_info .rc-box .rc-f input:focus{border-color:var(--cc-accent)}
.catalog_detail .item_main_info .rc-box .rc-f input[readonly]{background:var(--cc-bg-line);border-color:var(--cc-line)}
.catalog_detail .item_main_info .rc-box .rc-f label{color:var(--cc-ink-soft);font-size:12px}
.catalog_detail .item_main_info .top_info{margin:22px 0 0;padding:0}
.catalog_detail .item_main_info .top_info .preview_text{font:400 15px/1.6 var(--cc-font);color:var(--cc-ink-soft);max-width:78ch;margin:0}

/* ─── Характеристики под карточкой ─── */
.catalog_detail .cc-specs{padding:28px 0 8px;margin:0}
.catalog_detail .cc-specs__title{font:700 22px/1.3 var(--cc-font-head);letter-spacing:-0.015em;color:var(--cc-ink);margin:0 0 12px}
.catalog_detail .cc-specs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;max-width:900px;margin:0;padding:0}
.catalog_detail .cc-specs__row{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--cc-line);font:400 14px/1.4 var(--cc-font);margin:0}
.catalog_detail .cc-specs__row dt{color:var(--cc-ink-soft);margin:0;flex:0 1 auto;font-weight:400}
.catalog_detail .cc-specs__row i{flex:1 1 auto;border-bottom:1px dotted var(--cc-line);min-width:12px;transform:translateY(-3px)}
.catalog_detail .cc-specs__row dd{color:var(--cc-ink);font-weight:500;margin:0;text-align:right;font-variant-numeric:tabular-nums;flex:0 1 auto}
.catalog_detail .cc-specs__row--hid{display:none}
.catalog_detail .cc-specs--open .cc-specs__row--hid{display:flex}
.catalog_detail .cc-specs__toggle{margin-top:16px}
.catalog_detail .cc-specs__toggle .t-less{display:none}
.catalog_detail .cc-specs--open .cc-specs__toggle .t-more{display:none}
.catalog_detail .cc-specs--open .cc-specs__toggle .t-less{display:inline}
.catalog_detail .cc-specs__offer{max-width:900px;margin:0;font-size:14px}
.catalog_detail .cc-specs__offer:empty{display:none}
.catalog_detail .cc-specs__offer td{padding:10px 0;border-bottom:1px solid var(--cc-line)}
.catalog_detail .cc-specs__offer td.char_name{color:var(--cc-ink-soft);padding-right:16px}
.catalog_detail .cc-specs__offer td.char_value{color:var(--cc-ink);font-weight:500;text-align:right}

/* ─── Вкладки: подчёркивание вместо табличных ярлыков ─── */
.catalog_detail .tabs_section{margin:14px 0 0;padding:0}
.catalog_detail .tabs_section .tabs-head{display:flex;gap:2px;border:0;border-bottom:1px solid var(--cc-line);margin:0;padding:0;list-style:none;background:none;overflow-x:auto;height:auto;border-radius:0;box-shadow:none}
.catalog_detail .tabs_section .tabs-head li{margin:0 0 -1px;padding:14px 18px;border:0;border-bottom:3px solid transparent;background:none;border-radius:0;cursor:pointer;float:none;height:auto;line-height:1;white-space:nowrap;box-shadow:none;position:static}
.catalog_detail .tabs_section .tabs-head li span{font:500 14px/1 var(--cc-font);color:var(--cc-ink-soft);padding:0;margin:0;background:none;text-transform:none;letter-spacing:0;border:0;display:inline}
.catalog_detail .tabs_section .tabs-head li:hover span{color:var(--cc-accent-hover)}
.catalog_detail .tabs_section .tabs-head li.current{border-bottom-color:var(--cc-accent);background:none}
.catalog_detail .tabs_section .tabs-head li.current span{color:var(--cc-ink)}
.catalog_detail .tabs_section .tabs-head li .count{display:none}
.catalog_detail .tabs_section .tabs-body{margin:0;padding:24px 0 0;list-style:none;border:0;background:none;box-shadow:none}
.catalog_detail .tabs_section .tabs-body > li{padding:0;margin:0;border:0;background:none}
.catalog_detail .tabs_section .detail_text{font:400 15px/1.65 var(--cc-font);color:var(--cc-ink-soft)} /* без max-width: таблицы описания — во всю ширину (правка пользователя 10.09) */
.catalog_detail .tabs_section .detail_text table{width:100%;max-width:none}
.catalog_detail .tabs_section .detail_text p{margin:0 0 1em}
.catalog_detail .tabs_section .detail_text h2,.catalog_detail .tabs_section .detail_text h3,.catalog_detail .tabs_section .detail_text h4{font-family:var(--cc-font-head);color:var(--cc-ink);letter-spacing:-0.01em}
.catalog_detail .tabs_section .product_deliver_tab{font:400 15px/1.6 var(--cc-font);color:var(--cc-ink-soft)}
.catalog_detail .tabs_section .product_deliver_tab a{color:var(--cc-accent-hover);text-decoration:underline;text-underline-offset:3px}

/* Описания товаров сгенерированы по одному шаблону инлайновыми стилями (div с border-left:3px solid #fa6b00 и фоном
   #fff8f0, заголовки span color:#fa6b00, шапки таблиц td background-color:#f7941d). Ловим их по значению атрибута style
   и приводим к виду вставки «Как заказать» — без правки описаний в каждой карточке (просьба пользователя 10.09). */
.catalog_detail .detail_text div[style*="border-left: 3px solid"],.catalog_detail .detail_text div[style*="border-left:3px solid"]{
  background:var(--cc-bg-soft) !important;border-left:3px solid var(--cc-accent) !important;border-radius:var(--cc-radius-box) !important;
  padding:18px 22px !important;margin:0 0 18px !important;color:var(--cc-ink-soft);font-size:14px;line-height:1.55}
/* специфичность (0,5,2): правило этапа 1 body span:not(.fa):not([class^=fa-])…{font-family:inherit !important} даёт (0,4,2) */
body .catalog_detail .tabs_section .tabs-body .detail_text span[style*="color: #fa6b00"],body .catalog_detail .tabs_section .tabs-body .detail_text span[style*="color:#fa6b00"]{
  display:block;color:var(--cc-accent-hover) !important;font:700 14px/1.3 var(--cc-font-head);font-family:var(--cc-font-head) !important;letter-spacing:.04em;margin:24px 0 10px} /* !important: custom.css этапа 1 ставит span{font-family:inherit !important} */
.catalog_detail .detail_text span[style*="#fa6b00"] + br{display:none}
.catalog_detail .detail_text > span[style*="#fa6b00"]:first-child{margin-top:0}
.catalog_detail .detail_text td[style*="background-color: #f7941d"],.catalog_detail .detail_text td[style*="background-color:#f7941d"]{
  background:var(--cc-bg-muted) !important;color:var(--cc-ink) !important;font-weight:600;border-bottom:2px solid var(--cc-accent) !important}
.catalog_detail .detail_text table.table-bordered{border-collapse:collapse;margin:0 0 18px}
.catalog_detail .detail_text table.table-bordered td{border:1px solid var(--cc-line);padding:9px 12px;font-size:14px;vertical-align:top}

/* документы — строки с типом и весом */
.catalog_detail .cc-docs{display:grid;gap:10px;max-width:560px}
.catalog_detail .cc-doc{display:flex;align-items:center;gap:14px;border:1px solid var(--cc-line);border-radius:var(--cc-radius-box);padding:14px 16px;background:#fff;text-decoration:none;color:inherit;transition:border-color .12s}
.catalog_detail .cc-doc:hover{border-color:var(--cc-accent)}
.catalog_detail .cc-doc__ico{width:36px;height:44px;flex:0 0 auto;border-radius:4px;background:var(--cc-bg-line);display:flex;align-items:center;justify-content:center;font:700 9px/1 var(--cc-font);color:#a32020;letter-spacing:.02em}
.catalog_detail .cc-doc__txt{display:block;min-width:0}
.catalog_detail .cc-doc__name{font:500 14px/1.35 var(--cc-font);color:var(--cc-ink);display:block}
.catalog_detail .cc-doc__meta{font:400 12px/1.3 var(--cc-font);color:var(--cc-ink-soft);margin-top:3px;display:block}

/* «Категория: …» — мелкой строкой под вкладками */
.catalog_detail .section-relink{margin:22px 0 0;padding:0;font:400 12px/1.5 var(--cc-font);color:var(--cc-ink-muted)}
.catalog_detail .section-relink p{margin:0}
.catalog_detail .section-relink a{color:var(--cc-accent-hover);text-decoration:underline;text-underline-offset:2px}

/* ─── Подборки «С этим товаром покупают» (обёртка .cc-band в element.php, стили вкладок — cc-home.css) ─── */
.cc-prod-band{margin-top:10px}
.cc-prod-band .tab_slider_wrapp .top_blocks{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-prod-band .tab_slider_wrapp .top_blocks .slider_navigation{margin:0}

/* ─── Планшет ─── */
@media (max-width:900px){
  .catalog_detail .item_main_info .detailed-presentation{grid-template-columns:minmax(0,1fr);gap:22px}
  .catalog_detail .detailed-presentation .js-box-buy--source{grid-column:1;grid-row:2;position:static}
  .catalog_detail .cc-specs__list{grid-template-columns:minmax(0,1fr)}
}

/* ═══ Телефон ═══ */
@media (max-width:767px){
  .catalog_detail .item_main_info .box-img .item_slider{flex-direction:column;gap:10px;align-items:stretch}
  .catalog_detail .item_main_info .box-img .item_slider .slides{width:100% !important;padding:0 !important}
  /* тема при ≤600px прячет миниатюры и ставит слайду 260px с отступами — возвращаем */
  .catalog_detail .item_main_info .box-img .item_slider .thumbs,.catalog_detail .item_main_info .box-img .item_slider .wrapp_thumbs{display:block !important}
  .catalog_detail .box-img .item_slider .wrapp_thumbs{order:2;flex:none;width:auto}
  .catalog_detail .box-img .item_slider .wrapp_thumbs .sliders,.catalog_detail .box-img .item_slider .thumbs{width:auto}
  .catalog_detail .box-img .item_slider .thumbs ul{flex-direction:row;flex-wrap:wrap}
  .catalog_detail .box-img .item_slider .thumbs li{width:64px;height:64px}
  .catalog_detail .box-img .stickers,.catalog_detail .box-img:has(.wrapp_thumbs) .stickers{left:12px}
  .catalog_detail .box-buy{padding:18px 16px}
  .catalog_detail .box-buy .prices_block .price{font-size:28px}
  .catalog_detail .box-buy .counter_block{flex:1 1 100%;width:auto}
  .catalog_detail .box-buy .button_block{flex:1 1 100%}
  .catalog_detail .cc-specs{padding-top:22px}
  .catalog_detail .cc-specs__title{font-size:18px}
  .catalog_detail .tabs_section .tabs-head li{padding:12px 14px}
  .catalog_detail .tabs_section .tabs-body{padding-top:18px}
}

/* Правка 5м (10.09): подпись под кнопкой «Под заказ» убрана — кнопка и так открывает окно с формой заявки */
.catalog_detail .box-buy .button_block .to-order + .more_text,
.catalog_detail .box-buy .more_text,
.catalog_detail .box-buy .button_block .more_text{display:none !important}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5р (11.09.2026)

   1. МИНИАТЮРЫ ДОП. ФОТО превращались в полоски (пример — код 7460, 4 фото).
      Тема держит ленту миниатюр горизонтальной: #thumbs{height:54px;width:256px}.
      Дизайн-система развернула ленту вертикально (flex-direction:column), и четыре
      миниатюры делили те же 54px по высоте — по 13px на каждую. Снимаем жёсткий размер
      контейнера и задаём размер самим миниатюрам. */
.catalog_detail .box-img .item_slider .thumbs,
.catalog_detail .item_slider #thumbs{height:auto !important;width:auto !important;overflow:visible !important;white-space:normal !important}
.catalog_detail .box-img .item_slider .thumbs li,
.catalog_detail .item_slider .thumbs .slides_block li{flex:0 0 auto;width:72px;height:72px}
.catalog_detail .box-img .item_slider .thumbs li img{width:100%;height:100%;object-fit:cover;display:block}

/* 2. ПОДПИСЬ ПОД «ПОД ЗАКАЗ» («Наши менеджеры обязательно свяжутся…») — она приходит из настройки
      модуля EXPRESSION_ORDER_TEXT и выводится под кнопкой во всех видах, не только в карточке. */
.button_block .more_text,.catalog_detail .more_text,.cc-catalog .more_text{display:none !important}

/* 3. «РАНЕЕ ВЫ СМОТРЕЛИ» — было 6 узких блоков по 136px, длинные названия ломались по слогам.
      Делаем 5 в ряд во всю ширину страницы. */
.viewed_block .item_block{width:19.4% !important;max-width:none !important;vertical-align:top}
.viewed_block .item_block .item{width:auto !important;max-width:none}
.viewed_block .item_block .item .item-title,
.viewed_block .item_block .item .name{hyphens:none;word-break:normal;overflow-wrap:break-word}

/* 4. «С ЭТИМ ТОВАРОМ ПОКУПАЮТ» и «ПОХОЖИЕ ТОВАРЫ» — одинаковая высота карточек в ряду. */
.similar_products_wrapp .catalog_item_wrapp,
.similar_products_wrapp .item_block,
.best_block .catalog_item_wrapp{height:auto}
.similar_products_wrapp .flex-viewport ul.slides,
.similar_products_wrapp .catalog_block{display:flex;align-items:stretch}
.similar_products_wrapp .catalog_block > *,
.similar_products_wrapp .flex-viewport ul.slides > li{display:flex;flex-direction:column}
.similar_products_wrapp .catalog_item,
.similar_products_wrapp .flex-viewport ul.slides > li .catalog_item{height:100%;display:flex;flex-direction:column}
.similar_products_wrapp .catalog_item .item_info{flex:1 1 auto;display:flex;flex-direction:column}
.similar_products_wrapp .catalog_item .item_info .cost.prices{margin-top:auto}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5т (11.09.2026)

   1. «РАНЕЕ ВЫ СМОТРЕЛИ» ЛОЖИЛСЯ ПОВЕРХ «С ЭТИМ ТОВАРОМ ПОКУПАЮТ». Причина найдена:
      у темы содержимое вкладок (ul.tabs_content > li.tab) позиционировано АБСОЛЮТНО, а высоту
      контейнеру проставляет её скрипт. Наше правило height:auto (нужное на главной) высоту снимало,
      и раз все дети абсолютные — контейнер схлопывался в ноль: следующий блок вставал прямо под
      полосой вкладок, а карточки рисовались поверх него. Возвращаем активной вкладке обычный поток —
      скрытые вкладки места не занимают (у темы они display:none), высота считается сама. */
.cc-prod-band .tabs_content{height:auto !important}
.cc-prod-band .tabs_content > li.tab{position:static !important}

/* 2. ФИКСИРОВАННАЯ ВЫСОТА КАРТОЧЕК в «С этим товаром покупают» и «Похожих товарах»
      (было 348 и 388 px вперемешку). Название режется двумя строками, цена прижата к низу. */
/* Специфичность 0,3,0: правило блока на главной (.cc-band--hits .catalog_item{height:auto !important})
   имеет такой же вес 0,2,0 и стоит в каскаде позже, поэтому высоту забирало себе. */
.cc-band--hits.cc-prod-band .catalog_item{box-sizing:border-box;display:flex;flex-direction:column;
      padding:20px 12px 10px !important;overflow:visible !important}
.cc-prod-band .catalog_item .item-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
      overflow:hidden;min-height:0;height:auto !important;max-height:none !important}
.cc-prod-band .catalog_item .cost,.cc-prod-band .catalog_item .prices{margin-top:auto}

/* 3. ЛЕНТА МИНИАТЮР: больше шести фото — прокрутка вместо бесконечного столбца.
      Шесть миниатюр по 72px с отступами по 8px = 472px, дальше лента прокручивается. */
.catalog_detail .box-img .item_slider .thumbs,
.catalog_detail .item_slider #thumbs{max-height:472px !important;overflow-y:auto !important;overflow-x:hidden !important;
      scrollbar-width:thin;scrollbar-color:var(--cc-line) transparent}
.catalog_detail .box-img .item_slider .thumbs::-webkit-scrollbar{width:6px}
.catalog_detail .box-img .item_slider .thumbs::-webkit-scrollbar-thumb{background:var(--cc-line);border-radius:3px}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5у (11.09.2026)

   1. КАРТОЧКИ В «С ЭТИМ ТОВАРОМ ПОКУПАЮТ» / «ПОХОЖИХ ТОВАРАХ» не меняют размер при наведении —
      только контур становится оранжевым. Тема на наведении добавляла карточке тень, снимала цвет
      рамки, разворачивала блок кнопки (margin 11px + height:auto) и растягивала item_info,
      из-за чего карточка «прыгала». Значок «Сравнить», всплывавший поверх фото, убран. */
.cc-prod-band .catalog_item,.viewed_block .item{transition:border-color .15s ease}
.cc-prod-band .catalog_item:hover,.viewed_block .item:hover{box-shadow:none !important;
      outline:2px solid var(--cc-accent);outline-offset:0;border-color:var(--cc-line) !important}
.cc-band--hits.cc-prod-band .catalog_item .item_info,.cc-band--hits.cc-prod-band .catalog_item:hover .item_info{height:auto !important}
.cc-prod-band .catalog_item .footer_button{opacity:1 !important;visibility:visible !important;height:auto !important}
.cc-prod-band .catalog_item:hover .footer_button{margin:auto 0 0 !important}
.cc-prod-band .catalog_item img,.cc-prod-band .catalog_item:hover img{transform:none !important}
.cc-prod-band .compare_item_button,.cc-prod-band .compare_item,
.viewed_block .compare_item_button,.viewed_block .compare_item{display:none !important}

/* 2. Полоса прокрутки ленты миниатюр больше не наезжает на фото — ей отведено собственное место. */
/* Замерено: полоса прокрутки занимает 10px и ложилась прямо на миниатюры (правый край миниатюры 205px
   при правом крае ленты 205px). Даём ленте собственную ширину под полосу: миниатюра 72px + 20px. */
.catalog_detail .box-img .item_slider .thumbs,
.catalog_detail .item_slider #thumbs{width:92px !important;box-sizing:border-box !important;padding-right:14px !important;
      scrollbar-gutter:stable}

/* 3. ТАБЛИЦЫ: ширина колонок по содержимому. У темы table-layout:fixed — колонки делились поровну
      независимо от текста, и колонка с длинным описанием вытягивалась вниз на десяток строк,
      пока соседняя пустовала. На узких экранах широкая таблица прокручивается вбок. */
.catalog_detail table,.detail_text table,.tabs_content table,.catalog_detail .props_list{table-layout:auto !important}
.catalog_detail table td,.catalog_detail table th,.detail_text table td,.detail_text table th,
.tabs_content table td,.tabs_content table th{width:auto !important}

@media (max-width:767px){
  /* 4. название товара по центру карточки */
  body.detail_page h1,.catalog_detail .item-title,.catalog_detail .top_info h1{text-align:center}
  /* 5. блоки рекомендаций — лента по две карточки в ширину экрана с прокруткой вбок */
  .cc-prod-band ul.tabs_content > li.tab > ul{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;
        gap:10px;margin:0;padding:0 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  /* display:flex — карточка на телефоне тоже раскладывается колонкой, иначе наличие и кнопка
     не прижимаются к низу и у части товаров (например, код 1643) кнопка стоит выше остальных */
  .cc-prod-band ul.tabs_content > li.tab > ul > li{flex:0 0 calc(50% - 5px) !important;width:calc(50% - 5px) !important;
        max-width:none !important;margin:0 !important;display:flex !important;flex-direction:column !important;
        scroll-snap-align:start}
  /* на телефоне слайдера нет — ленту рисуем сами, поэтому высоту карточке задаёт содержимое
     (на десктопе её выставляет сам слайдер, там height не трогаем) */
  .cc-band--hits.cc-prod-band .catalog_item{height:auto !important}
  .viewed_block .outer_wrap{overflow:visible !important}
  .viewed_block .rows_block{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:10px;
        padding:0 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .viewed_block .rows_block > .item_block{flex:0 0 calc(50% - 5px) !important;width:calc(50% - 5px) !important;
        max-width:none !important;margin:0 !important;scroll-snap-align:start}
  .viewed_block .rows_block > .item_block .item{width:auto !important;max-width:none !important}
  /* широкие таблицы из описания прокручиваются, а не ломают вёрстку */
  /* прокручивается ТОЛЬКО таблица: делаем её отдельным блоком со своей прокруткой,
     текст описания при этом остаётся на месте (проверено на 375px: у текста прокрутки нет,
     у таблицы содержимое 481px в окне 309px) */
  .detail_text{overflow-x:visible !important}
  .detail_text table{display:block !important;width:100% !important;min-width:0 !important;
        overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .detail_text table tbody{display:table;width:100%;min-width:480px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5х (11.09.2026)

   1. ЧИСЛА В ТАБЛИЦАХ разрывались по символам («250» переносилось как «25» и «0»): у ячеек стоит
      word-break:break-word, и в узкой колонке браузер рвёт слово посреди. Запрещаем разрыв внутри
      слова — колонка вместо этого станет чуть шире. */
.catalog_detail table td,.catalog_detail table th,.detail_text table td,.detail_text table th,
.tabs_content table td,.tabs_content table th,.catalog_detail .props_list td{
      word-break:normal !important;overflow-wrap:normal !important;hyphens:none}

/* 2. КАРТОЧКИ В «С ЭТИМ ТОВАРОМ ПОКУПАЮТ» И «ПОХОЖИХ ТОВАРАХ» — как в «Ранее вы смотрели».
      Было: место под фото 136×170 (портретное), картинка 136×136 прижата к верху, снизу пустая
      полоса 34px. Стало: квадратное место под фото, картинка по центру и по ширине карточки. */
.cc-band--hits.cc-prod-band .catalog_item .image_wrapper_block,
.cc-band--hits.cc-prod-band .catalog_item .thumb{width:100% !important;max-width:none !important;height:auto !important;
      aspect-ratio:1/1;display:flex !important;align-items:center;justify-content:center;margin:0 auto 10px !important;
      overflow:hidden}
.cc-band--hits.cc-prod-band .catalog_item .thumb img{width:100% !important;height:auto !important;max-height:100% !important;
      margin:0 auto !important;display:block;object-fit:contain}
/* название и кнопка — по центру карточки */
.cc-band--hits.cc-prod-band .catalog_item .item_info,
.cc-band--hits.cc-prod-band .catalog_item .item-title,
.cc-band--hits.cc-prod-band .catalog_item .footer_button{text-align:center}
.cc-band--hits.cc-prod-band .catalog_item .footer_button .button,
.cc-band--hits.cc-prod-band .catalog_item .footer_button a{margin-left:auto;margin-right:auto}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5ч (11.09.2026) — карточки в блоках рекомендаций, доведено до конца.

   ЧТО БЫЛО НЕ ТАК У МЕНЯ РАНЬШЕ. Карточка в этих блоках — это <li> слайдера, и высоту
   ему выставляет сам слайдер инлайном (height:366px, одинаково всем в ряду). Мой фикс
   height:400px эту высоту перебивал: получалось выше содержимого — отсюда пустое место
   под кнопкой; overflow:hidden срезал бейдж; обрезка названия двумя строками рубила
   длинные наименования. Теперь высоту задаёт слайдер (ряд и так выровнен), а внутри
   карточка разложена колонкой: наличие и кнопка прижаты к низу, пустоты под кнопкой нет. */
.cc-band--hits.cc-prod-band .catalog_item .item_info{flex:1 1 auto;display:flex;flex-direction:column;width:100%}
.cc-band--hits.cc-prod-band .catalog_item .item-stock{margin-top:auto}
.cc-band--hits.cc-prod-band .catalog_item .buttons_block,
.cc-band--hits.cc-prod-band .catalog_item .footer_button{margin-top:8px !important;margin-bottom:0 !important}
/* бейдж не обрезается */
.cc-band--hits.cc-prod-band .catalog_item .stickers{z-index:2}

/* ЛЕНТА МИНИАТЮР: собственная ширина под полосу прокрутки нужна только на десктопе.
   На телефоне лента у темы выкладывается мозаикой в несколько столбцов — правка 5у
   ломала её в вертикальный столбец, возвращаем как было. */
@media (max-width: 767px){
  .catalog_detail .box-img .item_slider .thumbs,
  .catalog_detail .item_slider #thumbs{width:auto !important;max-height:none !important;padding-right:0 !important;
        overflow:visible !important}
  .catalog_detail .box-img .item_slider .thumbs ul,
  .catalog_detail .item_slider .thumbs .slides_block{display:flex !important;flex-flow:row wrap !important;gap:8px}
  .catalog_detail .box-img .item_slider .thumbs li{width:64px;height:64px}
}

/* Правка 5ч: блок описания под вкладками тема сужает до 90% правилом
   ul.tabs_content.tabs-body{width:90% !important} в медиазапросе до 1304px. Из-за этого текст
   и таблица упирались слева в поле 15px, а справа оставалось 49px — вёрстка выглядела съехавшей.
   Возвращаем полную ширину: поля становятся одинаковыми с обеих сторон. */
@media (max-width: 1304px){
  .catalog_detail .tabs_section ul.tabs_content.tabs-body{width:100% !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5ш (11.09.2026) — блок «С этим товаром покупают» / «Похожие товары», разбор до конца.

   ТРИ ПРИЧИНЫ, КОТОРЫЕ Я РАНЬШЕ НЕ ВИДЕЛ:
   а) у ленты слайдера был снят overflow — дорожка шириной 9280px торчала наружу, и страница
      получала горизонтальную полосу прокрутки во всю ширину. Она появлялась и исчезала
      при наведении — отсюда «прыжки» всей страницы, а не карточки;
   б) слайдер ставит карточке ИНЛАЙНОВЫЙ display:block, поэтому моя колоночная раскладка
      не включалась вовсе: блок с наличием и кнопкой не прижимался к низу, а карточки
      оставались разной высоты (высота шла от длины названия);
   в) бейдж лежит внутри блока фото, которому я в правке 5у поставил overflow:hidden, —
      он и срезал «акцию» и «в пути».

   Замерено после правки: горизонтальной прокрутки нет (1425px при окне 1440px),
   все карточки ряда 348px, нижние края кнопок совпадают, наличие в 14px над кнопкой. */
.cc-prod-band .flex-viewport{overflow:hidden !important}
.cc-prod-band .tabs_slider{display:flex !important;align-items:stretch !important}
.cc-prod-band .tabs_slider > .catalog_item{float:none !important;height:auto !important}
.cc-band--hits.cc-prod-band .catalog_item{display:flex !important;flex-direction:column !important}
.cc-band--hits.cc-prod-band .catalog_item .item_info{flex:1 1 auto !important}
.cc-band--hits.cc-prod-band .catalog_item .item-title{display:-webkit-box !important;-webkit-box-orient:vertical;
      -webkit-line-clamp:3;overflow:hidden;flex:1 1 auto !important}
/* наличие и кнопка идут вместе и прижаты к нижней грани */
.cc-band--hits.cc-prod-band .catalog_item .item-stock{margin-top:0 !important;margin-bottom:6px !important}
.cc-band--hits.cc-prod-band .catalog_item .cost.prices{margin-top:0 !important}
.cc-band--hits.cc-prod-band .catalog_item .cost.prices:empty{display:none !important}
/* бейдж не срезается */
.cc-band--hits.cc-prod-band .catalog_item .thumb,
.cc-band--hits.cc-prod-band .catalog_item .image_wrapper_block{overflow:visible !important}
/* подсветка внутренней тенью: в отличие от обводки она не выходит за карточку и не может
   породить горизонтальную прокрутку */
.cc-prod-band .catalog_item:hover,.viewed_block .item:hover{outline:none !important;
      box-shadow:inset 0 0 0 2px var(--cc-accent) !important}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5щ (11.09.2026)

   1. ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА ВЕРНУЛАСЬ — из-за той же ловушки со специфичностью, что и раньше:
      правило блока на главной (.cc-band--hits .flex-viewport{overflow:visible}) весит столько же,
      сколько моё .cc-prod-band .flex-viewport, и стоит в каскаде позже. Усиливаем до 0,3,0.
      Именно эта прокрутка и давала скачок страницы при отведении курсора вправо от крайней карточки. */
.cc-band--hits.cc-prod-band .flex-viewport{overflow:hidden !important}

/* 2. СКРУГЛЁННЫЕ РАМКИ у карточек всех трёх блоков. */
.cc-band--hits.cc-prod-band .catalog_item,
.viewed_block .item_block .item{border-radius:12px !important}
.cc-band--hits.cc-prod-band .catalog_item:hover,
.viewed_block .item_block .item:hover{border-radius:12px !important}

/* Правка 5ю (11.09.2026): бейдж у крайней левой карточки обрезался. Тема сажает его на left:-24px,
   то есть он выступает за левый край карточки на 11px, а окно слайдера (которому мы вернули
   overflow:hidden, чтобы убрать горизонтальную прокрутку страницы) начинается ровно по краю
   первой карточки — выступ и срезался. Ставим бейдж внутрь карточки. */
.cc-band--hits.cc-prod-band .catalog_item .stickers{left:0 !important;top:4px !important}

/* ══════════════════════════════════════════════════════════════════════════════
   Правка 5я (11.09.2026): ВСТАВКИ В ОПИСАНИЯХ ОБРАЗЦОВ были не в цветах сайта.
   В описания этих товаров вёрстка вставлена вручную, с жёстко прописанными цветами:
   рамка и подложка акции — прежний оранжевый #fa6b00 (фирменный сейчас #f28c1e),
   плашка «Важно» — янтарная пара #FFF7ED / #FDBA74 с коричневым текстом #92400E.
   Переписывать описания у полусотни товаров не нужно: перекрашиваем по значению
   инлайнового стиля. Если в описании появится ещё один такой блок, он подхватится сам.
   Логотип в подвале и прочие оранжевые вне описания не затрагиваются — правило
   действует только внутри .detail_text карточки товара. */
.catalog_detail .detail_text [style*="background: #fa6b00" i],
.catalog_detail .detail_text [style*="background:#fa6b00" i]{background:var(--cc-accent) !important}
.catalog_detail .detail_text [style*="solid #fa6b00" i]{border-color:var(--cc-accent) !important}
.catalog_detail .detail_text [style^="color: #fa6b00" i],
.catalog_detail .detail_text [style*="; color: #fa6b00" i]{color:var(--cc-accent) !important}
.catalog_detail .detail_text [style*="#FFF7ED" i]{background:var(--cc-bg-soft) !important;
      border-color:var(--cc-line) !important;color:var(--cc-ink-soft) !important}

/* Правка 6в (11.09.2026): кнопка покупки, когда выбранный вариант заказать нельзя
   (например, рулон 100 м² при остатке 5 м²). Серая, без наведения, курсор обычный —
   видно, что нажимать нечего; клик перехватывает script.js, чтобы не всплывала ошибка корзины. */
.catalog_detail .box-buy .to-cart.cc-nostock{background:var(--cc-bg-line) !important;color:var(--cc-ink-muted) !important;
      border-color:var(--cc-line) !important;box-shadow:none !important;cursor:default;opacity:1}
.catalog_detail .box-buy .to-cart.cc-nostock:hover{background:var(--cc-bg-line) !important;color:var(--cc-ink-muted) !important}
.catalog_detail .box-buy .to-cart.cc-nostock svg{opacity:.5}

/* ═══ ПРАВКА 6г (11.09.2026): на телефоне в карточке товара пропала кнопка «В корзину» ═══
   Причина. Адаптив карточки у темы сделан переносом HTML, а не стилями: функция
   transferBlockShareSocialnetworks() в script.js при ширине окна ≤580px забирает содержимое
   панели покупки из .js-box-buy--source и кладёт его в .js-box-buy--duplicate — пустой div,
   который лежит внутри .box-img сразу под слайдером. Дизайн-система (правило в начале файла,
   рядом с сеткой «галерея | панель покупки») прятала duplicate безусловно, чтобы он не мешал
   на десктопе. В итоге на телефоне панель уезжала в скрытый контейнер: ни цены, ни счётчика,
   ни кнопки. На планшете (581–767px) блок остаётся в source, поэтому там всё было видно —
   и поломка выглядела «только в мобильной версии».
   Решение. Показываем тот контейнер, в котором блок реально лежит, а пустой прячем по :empty.
   Правило работает на любой ширине и переживает переносы при повороте экрана. */
.catalog_detail .detailed-presentation .js-box-buy--duplicate{display:block;width:auto;min-width:0;margin:18px 0 0;padding:0;float:none}
.catalog_detail .detailed-presentation .js-box-buy--source:empty,
.catalog_detail .detailed-presentation .js-box-buy--duplicate:empty{display:none}

/* ═══ ПРАВКА 6д (11.09.2026): значок корзины в кнопке «В корзину» — рядом с надписью и на одной линии ═══
   Что было. Тема класса .w_icons рисует значок псевдоэлементом ::before, поставленным абсолютно
   у левого края кнопки, и резервирует под него padding-left:46px. Значок мы прятали, а резерв
   оставался: надпись из-за него сидела не по центру кнопки, а со сдвигом вправо ~15px, и сам
   значок (там, где тема его показывала) висел отдельно у края, а не при тексте.
   Что стало. Резерв снимаем (padding:0 16px), псевдоэлемент гасим совсем, а значок возвращаем
   на штатный пустой <i></i> внутри кнопки — разметку темы не меняем. Тележка 18×18 нарисована
   SVG прямо в стиле: отдельного файла и лишнего запроса нет. Цвет берётся из текста кнопки
   (mask + currentColor): на оранжевой «В корзину» и зелёной «В корзине» — белый, на погашенной
   правкой 6в — серый, отдельных правил не нужно. Раскладку задаёт сама кнопка — она flex
   с align-items:center и gap:9px (строка 128), поэтому значок и надпись идут одной группой
   по центру и ровно по средней линии; одинаково на десктопе и на телефоне.
   Кнопкам «Под заказ» и «Уведомить о поступлении» значок не даём — корзины там нет, но центровку
   они получают ту же. @supports — страховка: браузер без mask просто не покажет значок,
   цветного квадрата вместо него не будет. */
.catalog_detail .box-buy .button_block .button.w_icons{padding:0 16px}
.catalog_detail .box-buy .button_block .button.w_icons::before{content:none;display:none}
@supports ((-webkit-mask-image:url("/local/templates/aspro_optimus/components/bitrix/catalog.element/cc_product/)) or (mask-image:url("))){
  .catalog_detail .box-buy .button_block .to-cart i,
  .catalog_detail .box-buy .button_block .in-cart i{display:block;flex:0 0 auto;width:18px;height:18px;
        margin:0;padding:0;border:0;font-size:0;line-height:0;background-image:none;background-color:currentColor;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.6h2.1l2.2 10.4a1.7 1.7 0 0 0 1.7 1.35h7.7a1.7 1.7 0 0 0 1.66-1.32L19.4 7.6H6.2'/%3E%3Ccircle cx='9.7' cy='19.3' r='1.5'/%3E%3Ccircle cx='16.9' cy='19.3' r='1.5'/%3E%3C/svg%3E") no-repeat center/100% 100%;
                mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.6h2.1l2.2 10.4a1.7 1.7 0 0 0 1.7 1.35h7.7a1.7 1.7 0 0 0 1.66-1.32L19.4 7.6H6.2'/%3E%3Ccircle cx='9.7' cy='19.3' r='1.5'/%3E%3Ccircle cx='16.9' cy='19.3' r='1.5'/%3E%3C/svg%3E") no-repeat center/100% 100%}
}

/* ═══ ПРАВКА 6е (11.09.2026): состояние «В корзине» перестраивало блок покупки ═══
   Что было. После добавления в корзину скрипт темы ставит полю количества инлайновый
   display:none и вешает на обёртку кнопки класс wide. Поле исчезало, и блок покупки
   перекраивался: на телефоне (поле и кнопка стоят друг под другом) высота падала со 102px
   до 46px — вся страница ниже подпрыгивала на 56px; на десктопе кнопка съезжала влево
   на место поля и вырастала с 552px до 706px. Отсюда ощущение «кнопка другой ширины,
   стиль прыгает». Инлайновый display наши стили не перебивали: без !important он сильнее
   любого правила из файла.
   Что стало. Поле количества остаётся на месте и просто гаснет (прозрачность .55, клики
   не проходят) — ровно так, как уже сделано в видах «список» и «таблица» каталога.
   Геометрия обоих состояний совпадает до пикселя, меняются только цвет и надпись кнопки.
   Класс wide специально не глушим: наше правило .button_block (строка 127) и так задаёт
   ширину, при видимом поле wide ничего не меняет — проверено на 375px и 1280px.
   Заодно снят margin-right:12px, который тема даёт полю через .catalog_detail .counter_wrapp
   .counter_block: у нашего правила была та же специфичность, но оно стоит раньше в общей
   склейке и проигрывало. На телефоне из-за него поле было на 12px уже кнопки, на десктопе
   зазор выходил 22px вместо 10px. Селектор удлинён на .counter_wrapp — этого хватает,
   !important не нужен. */
.catalog_detail .box-buy .counter_wrapp .counter_block{margin:0}
.catalog_detail .box-buy .counter_wrapp .counter_block[style*="display: none"],
.catalog_detail .box-buy .counter_wrapp .counter_block[style*="display:none"]{display:flex !important}
.catalog_detail .box-buy .counter_wrapp:has(.in-cart:not([style*="none"])) .counter_block{pointer-events:none;opacity:.55}

/* End */
/* /local/templates/aspro_optimus/components/bitrix/catalog.element/cc_product/style.css?178914597467400 */