/* ИВАТА — каталог на оформлении комплекта, перекрашенный в палитру темы.

   Разметку catalog.tpl (91 КБ, полторы сотни секций) на этом заходе не трогаем:
   переписывать её целиком долго и рискованно. Вместо этого перекрываем стили
   комплекта — каталог, карточка товара и корзина получают палитру, кнопки,
   карточки и типографику Иваты. Классы ниже — из разметки комплекта.

   Когда дойдут руки до самой разметки, этот файл сократится до нуля. */

/* ---------- общая обёртка внутренней страницы ---------- */
.iv-page{max-width:var(--cont);margin:0 auto;padding:0 20px 20px}
.iv-page h1{font-size:clamp(26px,3.2vw,38px);margin:18px 0 22px;letter-spacing:-.02em}

/* ---------- хлебные крошки каталога ---------- */
.iv-page .inner-pathway,.iv-page #inner-pathway{font-size:13.5px;color:var(--muted);padding:16px 0 4px}
.iv-page .inner-pathway a{color:var(--muted)}
.iv-page .inner-pathway a:hover{color:var(--green)}
.iv-page .inner-pathway-separator{color:#B6BEB0;margin:0 6px}

/* ---------- боковая колонка каталога ---------- */
.iv-page .catalog-cat-sidebar-sorting,
.iv-page #filter_left,
.iv-page .catalog-cat-sidebar-categories,
.iv-page #catalog-cat-sidebar-scroll>ul{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	padding:18px;margin-bottom:16px;box-shadow:none
}
.iv-page .catalog-cat-sidebar-extra{border:0;padding:0;margin:0;background:none}
.iv-page .catalog-cat-sidebar-buttons{display:flex;gap:10px;margin-top:16px}
.iv-page .catalog-cat-sidebar-buttons .catalog-cat-sidebar-button{flex:1;text-align:center}
.iv-page .catalog-cat-sidebar-button-1{
	background:#fff;color:var(--ink-2);border-color:var(--line)
}
.iv-page .catalog-cat-sidebar-button-1:hover{border-color:var(--green);color:var(--green);background:#fff}
.iv-page .catalog-cat-sidebar-sorting ul li{margin-bottom:2px}
.iv-page .catalog-cat-sidebar-sorting ul li.active>a{color:var(--green);font-weight:500}
.iv-page .catalog-cat-sidebar-title{
	font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
	font-weight:700;margin-bottom:12px
}
.iv-page .catalog-cat-sidebar-categories ul{margin:0;padding:0;list-style:none}
.iv-page .catalog-cat-sidebar-categories li{margin:0;border:0;background:none}
.iv-page .catalog-cat-sidebar-categories li a{
	display:block;padding:9px 12px;border-radius:9px;font-size:15px;color:var(--ink-2);
	border:0;background:none;text-decoration:none
}
.iv-page .catalog-cat-sidebar-categories li a:hover{background:var(--green-bg);color:var(--green)}
.iv-page .catalog-cat-sidebar-categories li.active>a{
	background:var(--green);color:#fff;font-weight:500
}
.iv-page .catalog-cat-sidebar-categories li.catalog-cat-sidebar-extra>a{color:var(--orange);font-weight:500}
.iv-page .catalog-cat-sidebar-categories li.catalog-cat-sidebar-extra>a:hover{
	background:#FFF4E6;color:var(--orange-d)
}

/* ---------- кнопки комплекта ---------- */
.iv-page .default_button,
.iv-page .catalog-cat-sidebar-button,
.iv-page input[type="submit"],
.iv-page button.default_button{
	background:var(--green);color:#fff;border:1px solid var(--green);border-radius:var(--radius-s);
	padding:11px 20px;font-size:15px;font-weight:500;cursor:pointer;transition:.15s
}
.iv-page .default_button:hover,
.iv-page .catalog-cat-sidebar-button:hover,
.iv-page input[type="submit"]:hover{background:var(--green-d);border-color:var(--green-d)}
.iv-page .catalog-cat-sidebar-button.reset,
.iv-page .default_button.grey{background:#fff;color:var(--ink-2);border-color:var(--line)}
.iv-page .catalog-cat-sidebar-button.reset:hover{border-color:var(--green);color:var(--green)}

/* ---------- сортировка ---------- */
.iv-page #catalog-cat-sorting{margin:0 0 20px;font-size:14.5px;color:var(--muted)}
.iv-page .catalog_sorter{color:var(--ink-2);margin-right:18px}
.iv-page .catalog_sorter:hover,.iv-page .catalog_sorter.active{color:var(--green)}

/* ---------- карточка товара в списке ----------
   Только в списках: на странице товара те же классы используются
   в другой раскладке, и общий отступ там ломает шапку карточки. */
.iv-page #catalog-cat-list .catalog-list-one,
.iv-page .catalog-other .catalog-list-one,
.iv-page .slide-list .catalog-list-one{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;
	transition:.15s ease
}
.iv-page #catalog-cat-list .catalog-list-one:hover{border-color:var(--green);box-shadow:var(--shadow)}
.iv-page .catalog-list-one-img,
.iv-page .catalog-list-one-img-a img{border-radius:var(--radius-s);background:var(--green-bg2)}
/* Место под картинку резервируем заранее: без этого карточка «прыгает»,
   когда фотография догружается, и в Core Web Vitals растёт CLS.
   Работает и с заглушкой, и с настоящим фото любых пропорций. */
.iv-page .catalog-list-one-img-a{display:block;aspect-ratio:1/1}
.iv-page .catalog-list-one-img-a img{width:100%;height:100%;object-fit:contain}
/* То же для плиток разделов на /catalog. */
.iv-page .cats-on-main-item-img{display:block;aspect-ratio:1/1}
.iv-page .cats-on-main-item-img img{width:100%;height:100%;object-fit:contain}
.iv-page .catalog-list-one-articul{font-size:12.5px;color:var(--muted);margin-top:12px}
.iv-page .catalog-list-one-title{font-size:15px;font-weight:500;line-height:1.35;margin-top:4px}
.iv-page .catalog-list-one-title a:hover{color:var(--green)}
.iv-page .catalog-list-one-price,
.iv-page .catalog-list-one-price-init{
	font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:10px
}
.iv-page .catalog-list-one-price small,
.iv-page .catalog-list-one-price span.unit{font-size:14px;font-weight:500;color:var(--muted)}

/* метки на карточке */
.iv-page .catalog-list-one-hit,
.iv-page .catalog-list-one-new,
.iv-page .catalog-list-one-sale{
	font-size:11.5px;font-weight:700;color:#fff;padding:4px 9px;border-radius:6px;
	letter-spacing:.02em;background:var(--orange);border:0
}
.iv-page .catalog-list-one-new{background:var(--green-l);color:#2B3F04}
.iv-page .catalog-list-one-sale{background:#D3342A}

/* кнопка «в корзину» */
.iv-page .catalog-list-one-add-button,
.iv-page .catalog-list-one-add-button-ok{
	background:var(--green);color:#fff;border-color:var(--green);box-shadow:none
}
.iv-page .catalog-list-one-add-button:hover,
.iv-page .catalog-list-one-add-button-ok:hover{background:var(--green-d);border-color:var(--green-d)}
.iv-page .catalog-list-one-add-panel-amount{
	border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:#fff
}
.iv-page .catalog-list-one-add-panel-amount-minus,
.iv-page .catalog-list-one-add-panel-amount-plus{color:var(--ink-2);background:#fff}
.iv-page .catalog-list-one-add-panel-amount-minus:hover,
.iv-page .catalog-list-one-add-panel-amount-plus:hover{background:var(--green-bg);color:var(--green)}
.iv-page .catalog-list-one-wish svg,.iv-page .addwish_ico_list{color:#B6BEB0}
.iv-page .catalog-list-one-wish:hover svg{color:var(--green)}

/* ---------- страница товара ----------
   Раскладку не трогаем — только цвета и типографику. Отступы и позиционирование
   здесь держит оформление комплекта, и вмешательство ломает шапку карточки. */
.iv-page .one-info-block-title{font-weight:700;letter-spacing:-.01em}
.iv-page .catalog-one-description-field{font-size:15px;color:var(--ink-2)}
.iv-page .catalog-one-description-field b,
.iv-page .catalog-one-description-field strong{color:var(--ink);font-weight:500}

/* ---------- корзина и оформление ---------- */
.iv-page .basket-popup-title{font-size:19px;font-weight:700;letter-spacing:-.01em}
.iv-page table.basket,.iv-page .basket-content table{width:100%;border-collapse:collapse}
.iv-page .basket-content th{
	background:var(--green-bg);font-size:13px;text-transform:uppercase;letter-spacing:.04em;
	color:var(--muted);padding:10px 12px;text-align:left
}
.iv-page .basket-content td{border-bottom:1px solid var(--line-2);padding:12px}

/* ---------- поля ввода ---------- */
.iv-page input[type="text"],.iv-page input[type="tel"],.iv-page input[type="email"],
.iv-page input[type="number"],.iv-page input[type="search"],.iv-page textarea,.iv-page select{
	border:1px solid var(--line);border-radius:var(--radius-s);padding:11px 13px;font:inherit;
	background:#fff;outline:none;color:var(--ink)
}
.iv-page input:focus,.iv-page textarea:focus,.iv-page select:focus{border-color:var(--green)}

/* ---------- кнопки количества в корзине ----------
   Разметка комплекта: два отдельных <a> с картинками plus.gif и minus.gif
   без единого правила оформления. Картинки 48×48 ложились друг на друга
   и выглядели сломанными — это и было замечание «кнопки ± поломались».
   Картинки убираем совсем, рисуем знаки символами. */
.iv-page .catalog_basket_change{display:flex;align-items:center;gap:8px;justify-content:center}
.iv-page .catalog_basket_change_left_value{
	min-width:42px;height:34px;line-height:34px;text-align:center;
	border:1px solid var(--line);border-radius:var(--radius-s);background:#fff;font-weight:500
}
.iv-page .catalog_basket_change_right{display:flex;flex-direction:column;gap:3px}
.iv-page .catalog_basket_change_up,.iv-page .catalog_basket_change_down{
	width:26px;height:16px;display:flex;align-items:center;justify-content:center;
	border:1px solid var(--line);border-radius:4px;background:#fff;
	color:var(--ink-2);font-size:13px;line-height:1;text-decoration:none
}
.iv-page .catalog_basket_change_up:hover,.iv-page .catalog_basket_change_down:hover{
	border-color:var(--green);color:var(--green);background:var(--green-bg)
}
.iv-page .catalog_basket_change_up img,.iv-page .catalog_basket_change_down img{display:none}
.iv-page .catalog_basket_change_up::after{content:"+"}
.iv-page .catalog_basket_change_down::after{content:"\2212"}

/* ---------- стрелка направления у сортировки ----------
   В комплекте правила написаны только для .catalog_sorter, а в боковой
   колонке раздела список лежит в .catalog-cat-sidebar-sorting: стрелки
   не было вовсе, и со стороны казалось, что клик ничего не меняет. */
.iv-page .catalog-cat-sidebar-sorting ul li{position:relative;padding-right:18px}
.iv-page .catalog-cat-sidebar-sorting ul li .sorter_order_ASC,
.iv-page .catalog-cat-sidebar-sorting ul li .sorter_order_DESC{
	border:4px solid transparent;position:absolute;right:4px;opacity:.45
}
.iv-page .catalog-cat-sidebar-sorting ul li.active .sorter_order_ASC,
.iv-page .catalog-cat-sidebar-sorting ul li.active .sorter_order_DESC{opacity:1;color:var(--green)}
.iv-page .catalog-cat-sidebar-sorting ul li .sorter_order_ASC{border-top-color:currentColor;top:10px}
.iv-page .catalog-cat-sidebar-sorting ul li .sorter_order_DESC{border-bottom-color:currentColor;top:5px}

/* ---------- окно «Заказать звонок» ---------- */
.iv-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.iv-modal__back{position:absolute;inset:0;background:rgba(23,30,18,.55)}
.iv-modal__box{
	position:relative;background:#fff;border-radius:var(--radius);max-width:420px;width:100%;
	padding:26px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.25);max-height:90vh;overflow:auto
}
.iv-modal__x{
	position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;
	color:var(--muted);cursor:pointer;padding:4px 8px
}
.iv-modal__x:hover{color:var(--ink)}
.iv-modal .frm{background:none;padding:0;box-shadow:none}
.iv-modal .frm h3{margin:0 0 6px;font-size:21px;letter-spacing:-.01em}
.iv-modal .frm p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
html.iv-modal-open{overflow:hidden}

/* ловушка для роботов: человек поля не видит */
.frm__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* сообщение формы */
.frm__msg{margin-top:12px;font-size:14.5px;line-height:1.45}
.frm__msg.is-ok{color:var(--green)}
.frm__msg.is-err{color:#C0392B}
.cta .frm__msg.is-ok,.cta .frm__msg{color:#E4EFCE}

/* ---------- кнопки комплекта: размер задаёт содержимое ----------
   Из старой темы они приходят с жёсткими размерами: у .continue_buy
   height:24px и width:200px. Наши отступы ложатся поверх, и надпись
   «Продолжить покупки» вылезала за край кнопки. */
.iv-page .default_button,
.iv-page .continue_buy,
.iv-page .continue,
.iv-page .catalog_send_button input{
	height:auto;width:auto;min-width:0;line-height:1.3;display:inline-block;
	font-family:inherit;font-size:15px;font-weight:500;
	border-radius:var(--radius-s);margin:14px 0 0
}

/* ---------- сортировка над списком товаров ----------
   В комплекте у каждой ссылки один и тот же рисунок-стрелка фоном,
   независимо от направления, а направление лежит рядом — в пустом
   <span class="sorter_order_ASC|DESC">, для которого правил нет.
   Отсюда и замечание «сортировки не меняют иконку по клику».
   Рисунок убираем, треугольник рисуем из span. */
.iv-page #catalog-cat-sorting ul li{position:relative;padding-right:14px}
.iv-page #catalog-cat-sorting ul li a{background-image:none;padding-right:4px;margin-right:10px}
.iv-page #catalog-cat-sorting ul li.active a{color:var(--green);font-weight:500}
.iv-page #catalog-cat-sorting ul li .sorter_order_ASC,
.iv-page #catalog-cat-sorting ul li .sorter_order_DESC{
	border:4px solid transparent;position:absolute;right:10px;opacity:.4;color:var(--ink-2)
}
.iv-page #catalog-cat-sorting ul li.active .sorter_order_ASC,
.iv-page #catalog-cat-sorting ul li.active .sorter_order_DESC{opacity:1;color:var(--green)}
.iv-page #catalog-cat-sorting ul li .sorter_order_ASC{border-bottom-color:currentColor;top:2px}
.iv-page #catalog-cat-sorting ul li .sorter_order_DESC{border-top-color:currentColor;top:8px}

/* Плитки каталога внутри Главной. Оформление каталога написано
   от .iv-page, а Главная в этот контейнер не завёрнута, поэтому
   класс добавляется прямо на блок плиток, а модификатор снимает
   отступы и ограничение ширины страницы. */
.iv-page.iv-page--inline{max-width:none;margin:0;padding:0}