/* Start:/local/templates/krepco/components/bitrix/catalog/main/style.css?17909620304127*/
.grid{}
.grid .bx_content_section{
	margin-bottom: 15px;
}
.grid .bx_sidebar{
	margin-bottom: 15px;
}

/* grid2x1 */
.grid2x1{}
.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;}

/**
 * Индикатор загрузки на кнопке (BX.Krepco.Catalog.startButtonLoading / stopButtonLoading).
 *
 * Пока идёт запрос, содержимое кнопки уходит вверх и становится прозрачным, оставаясь в потоке,
 * поэтому ширина кнопки не меняется. На его месте волной подпрыгивают три точки и проходит мягкий блик.
 * Цвет точек и блика — исходный цвет текста кнопки (--btn-loader-color выставляет скрипт).
 * Блик рисуется внутри .btn-loader__dots, чтобы не занимать псевдоэлементы кнопки из вёрстки.
 */

.btn-loader {
    position: relative;
    overflow: hidden;
}

.btn-loader._loading {
    color: transparent !important;
    cursor: progress;
    transition: color 0.2s ease;
}

.btn-loader > :not(.btn-loader__dots) {
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.btn-loader._loading > :not(.btn-loader__dots) {
    opacity: 0;
    transform: translateY(-6px);
}

.btn-loader__dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--btn-loader-color, currentColor);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}

.btn-loader._loading .btn-loader__dots {
    opacity: 1;
    transform: translateY(0);
}

.btn-loader__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: btn-loader-dot 1.1s ease-in-out infinite;
}

.btn-loader__dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.btn-loader__dots i:nth-child(3) {
    animation-delay: 0.3s;
}

.btn-loader__dots::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, currentColor 28%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: btn-loader-shimmer 1.4s ease-in-out infinite;
}

@keyframes btn-loader-dot {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.75);
        opacity: 0.45;
    }

    40% {
        transform: translateY(-5px) scale(1);
        opacity: 1;
    }
}

@keyframes btn-loader-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-loader > :not(.btn-loader__dots),
    .btn-loader__dots {
        transition: none;
    }

    .btn-loader__dots i {
        animation: none;
        opacity: 0.8;
    }

    .btn-loader__dots::before {
        display: none;
    }
}

/* End */


/* Start:/local/templates/krepco/components/bitrix/catalog/main/bitrix/catalog.section.list/catalog_root/style.css?17909722181205*/
/**
 * Плитка разделов каталога: колонки одинаковой ширины и строки одинаковой высоты
 * независимо от длины названий.
 *
 * min-width: 0 — карточка с aspect-ratio не расширяет колонку из-за высокого содержимого.
 * grid-auto-rows: 1fr — все строки сетки по высоте самой высокой, карточки одного размера.
 * На десктопе название ограничено тремя строками, чтобы карточки оставались квадратными;
 * на мобильных действует ограничение в две строки из общих стилей.
 */

.section-catalog__grid {
    grid-auto-rows: 1fr;
}

.section-catalog__grid > .card-category {
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
}

@media (min-width: 768px) {
    .section-catalog__grid .card-category__title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* End */


/* Start:/local/templates/krepco/components/bitrix/catalog.item/krepco/style.css?17915477782898*/
/**
 * Карточка товара, вид «список» (card-product-full): кнопки «В корзину», «Заказать» и «В корзине»
 * одной ширины. Ширина задаётся переменной --card-full-action-width.
 * Только для широких экранов: до 1200px кнопки растягиваются на ширину блока по стилям вёрстки.
 */

@media (min-width: 1200px) {
    .card-product-full {
        --card-full-action-width: 130px;
    }

    .card-product-full__nav > .btn,
    .card-product-full__order {
        width: var(--card-full-action-width);
        flex-shrink: 0;
    }

    .card-product-full__order-btn {
        width: 100%;
    }
}

/**
 * Строка таблицы модификаций (section-info__table-product) и карточка блока «Точно понадобится»
 * (section-info__product): состояния, которых нет в вёрстке.
 *  - цена: _red — распродажа или скидка, _disabled — товар под заказ;
 *  - кнопка «В корзине» (_outline) в строке таблицы — основной цвет текста, как в остальных видах карточки;
 *  - срок поставки товара под заказ.
 */

.section-info__table-product-price._red,
.section-info__product-price._red {
    color: var(--red);
}

.section-info__table-product-price._disabled,
.section-info__product-price._disabled {
    color: var(--dusty);
}

/* Три класса: перебивают общее .btn._outline из стилей шаблона сайта независимо от порядка подключения. */
.btn.section-info__table-product-btn._outline {
    color: var(--primary, #eb6e03);
}

@media (hover: hover) {
    .btn.section-info__table-product-btn._outline:hover {
        color: #fff;
    }
}

.section-info__table-product-time,
.section-info__product-time {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--dusty);
}

.section-info__table-product-time {
    margin-top: 4px;
}

.section-info__product-time {
    margin-top: 6px;
    text-align: right;
}

/**
 * Блок «Точно понадобится» (section-info__product).
 *  - тело карточки на всю оставшуюся ширину, чтобы кнопка и поле количества стояли по правому краю
 *    при коротком названии;
 *  - «В корзину» и «Заказать» одной ширины.
 */

.section-info__product-body {
    flex: 1 1 auto;
    min-width: 0;
}

.section-info__product-bottom > .btn,
.section-info__product-bottom > .counter {
    margin-left: auto;
}

.section-info__product-btn {
    flex-shrink: 0;
    min-width: 120px;
}

/* End */
/* /local/templates/krepco/components/bitrix/catalog/main/style.css?17909620304127 */
/* /local/templates/krepco/components/bitrix/catalog/main/bitrix/catalog.section.list/catalog_root/style.css?17909722181205 */
/* /local/templates/krepco/components/bitrix/catalog.item/krepco/style.css?17915477782898 */