/**
 * plg_system_zrmobile 1.3.2 — мобильный и планшетный вид zol-rybka.com
 * Автор: Claude (Anthropic). 04.09.2026
 *
 * Всё внутри @media (max-width: 991px): вид на компьютере не меняется.
 *
 * Почему правок так много: шаблон goldenfish собран на Bootstrap 3.3.2, а
 * разметку колонок Helix3 отдаёт по правилам Bootstrap 4 (col-5, col-md-3,
 * d-none). Ни одного из этих классов в Bootstrap 3 нет, поэтому на всём, что
 * уже 992px, сетки просто не существует — блоки встают друг под друга во всю
 * ширину. Отсюда и «ужасный айпад»: там ровно та же беда, что на телефоне.
 */

/* ================================================================== */
/*  ТЕЛЕФОН И ПЛАНШЕТ  (всё, что уже 992px)                           */
/* ================================================================== */
@media (max-width: 991px) {

/* ------------------------------------------------------------------ */
/*  Общее                                                              */
/* ------------------------------------------------------------------ */
html, body { overflow-x: hidden; }

body { padding-bottom: 62px; }          /* место под нижнюю панель */
body.zrm-no-tabs { padding-bottom: 0; }

/* .row в Bootstrap 3 имеет поля -15px, а колонок с padding на узком
   экране нет — из-за этого страница шире экрана на 30px */
#sp-page-title .row,
#sp-main-body .row,
#sp-bottom .row,
#sp-footer .row,
#sp-header .row { margin-left: 0; margin-right: 0; }

#sp-left, #sp-right,
#sp-logo, #sp-header-right, #sp-cart,
#sp-bottom1, #sp-bottom2, #sp-bottom3, #sp-footer1, #sp-footer2 {
	padding-left: 0;
	padding-right: 0;
	float: none;
	width: auto;
}

/* У #sp-title и #sp-component поля по 15px не убираем: внутри них живут
   строки SP Page Builder с margin: 0 -15px, и без этих полей страница
   становится шире экрана на 30px. */
#sp-title, #sp-component { float: none; width: auto; }

/* ------------------------------------------------------------------ */
/*  SP Page Builder (главная собрана им)                               */
/*                                                                     */
/*  Свои классы sppb-col-sm-* он включает с 768px, а сдвиги            */
/*  col-sm-push-*/col-sm-pull-* берёт из Bootstrap 3 — на планшете      */
/*  колонка «уезжала» на четверть экрана вправо.                       */
/* ------------------------------------------------------------------ */
.sppb-row { margin-left: 0 !important; margin-right: 0 !important; }

[class*="col-sm-push-"],
[class*="col-sm-pull-"],
[class*="col-md-push-"],
[class*="col-md-pull-"] { left: auto !important; right: auto !important; }

[class*="sppb-col-sm-"],
[class*="sppb-col-md-"],
[class*="sppb-col-lg-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	flex-basis: 100% !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	box-sizing: border-box;
}

/* ...кроме одинаковых плиток: баннеры разделов свёрстаны по три в ряд
   (sppb-col-sm-4), и вытягивать их в колонну не нужно */
.sppb-row > [class*="sppb-col-sm-4"],
.sppb-row > [class*="sppb-col-sm-6"] {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.sppb-row > [class*="sppb-col-sm-4"] .sppb-addon-single-image-container img,
.sppb-row > [class*="sppb-col-sm-6"] .sppb-addon-single-image-container img {
	width: 100%;
	height: auto;
}

.sppb-row-container { padding-left: 0 !important; padding-right: 0 !important; }
.sppb-addon-wrapper img, .sppb-addon img { max-width: 100%; height: auto; }

.sp-column img, .jshop img, .sppb-addon img { max-width: 100%; height: auto; }

#sp-main-body { padding: 12px 0 20px; }

/* ------------------------------------------------------------------ */
/*  Шапка: логотип, телефон и «гамбургер» одной полосой                */
/*  (блоки переставляет скрипт, здесь только вид)                      */
/* ------------------------------------------------------------------ */
#sp-top-bar { display: none !important; }

#zrm-head {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	background: #fff;
	border-bottom: 1px solid #e9e9ec;
	box-sizing: border-box;
}

#zrm-head .zrm-logo { flex: 0 0 auto; display: block; line-height: 0; }
#zrm-head .zrm-logo h1 { display: block; margin: 0; line-height: 0; }
/* в шаблоне логотип продублирован трижды (обычный, ретина, для xs) и
   разведён классами hidden-xs/visible-xs, которых на планшете нет —
   поэтому показываем ровно первую картинку */
#zrm-head .zrm-logo img { display: none !important; }
#zrm-head .zrm-logo img:first-of-type {
	display: inline-block !important;
	height: 38px;
	width: auto;
	max-height: 38px;
}

#zrm-head .zrm-phone {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
#zrm-head .zrm-phone .custom { display: inline; padding: 0; margin: 0; }
#zrm-head .zrm-phone a { font-size: 15px; font-weight: 600; }
#zrm-head .zrm-phone i { margin-right: 4px; }

#zrm-head #offcanvas-toggler {
	flex: 0 0 auto;
	display: block;
	font-size: 22px;
	line-height: 1;
	padding: 8px 2px 8px 8px;
	color: #333;
}

/* шапку шаблона прячем — её содержимое переехало */
#sp-header { display: none !important; }

/* ------------------------------------------------------------------ */
/*  Поиск отдельной строкой под шапкой                                 */
/* ------------------------------------------------------------------ */
#zrm-search { padding: 10px 12px; background: #fff; border-bottom: 1px solid #f0f0f2; }

#zrm-search .sp-module,
#zrm-search .sp-module-content { margin: 0; padding: 0; }

/* «Расширенный поиск» на телефоне не нужен */
#zrm-search .sp-module-content > .col-md-3 { display: none; }
#zrm-search .sp-module-content > .col-md-9 { width: 100%; padding: 0; }

#zrm-search form[name="searchForm"] { display: flex; gap: 8px; margin: 0; }

#zrm-search #jshop_search {
	float: none !important;
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 42px;
	box-sizing: border-box;
	padding: 0 12px;
	/* 16px, иначе Safari на айфоне увеличивает страницу при фокусе */
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#zrm-search input[type="submit"] {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px;
	font-size: 14px;
	line-height: 1;
	min-height: 0;
	border-radius: 6px;
}

/* плашка корзины в шапке больше не нужна — она в нижней панели */
#sp-cart { display: none !important; }

/* ------------------------------------------------------------------ */
/*  Заголовок страницы: было 30px отступа сверху плюс 30px поля        */
/* ------------------------------------------------------------------ */
#sp-page-title { margin-top: 0 !important; padding: 0 !important; }

/* блок-предупреждение на главной был обёрнут в 30px полей модуля плюс
   30px полей самого блока — текст оставался на 250px из 390 */
#sp-title .sp-module { padding: 10px 12px !important; }
#sp-title .sppb-addon,
#sp-title .sppb-section,
#sp-title .sppb-row-container,
#sp-title .sppb-column,
#sp-title [class*="sppb-col-"] { padding: 0 !important; }
#sp-title .sppb-row { margin: 0 !important; }
#sp-title .sppb-addon-content,
#sp-title .sppb-addon-content span { font-size: 13px !important; line-height: 1.45; }

#sp-page-title .sp-page-title {
	margin: 10px 0 0 !important;
	padding: 14px 16px !important;
	background-size: cover;
}

#sp-page-title .sp-page-title h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; }
#sp-page-title .sp-page-title .breadcrumb { margin: 0; padding: 0; font-size: 12px; background: none; }

/* предупреждение об обработке заказов скрипт оставляет только на главной
   и в корзине */
.zrm-notice {
	margin: 0 0 12px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #555;
	background: #fff8e6;
	border: 1px solid #f2e2bb;
	border-radius: 6px;
}
.zrm-notice p, .zrm-notice span, .zrm-notice div { font-size: inherit !important; }
/* блок приходит из SP Page Builder со своими полями в 30px */
.zrm-notice * { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
.zrm-notice br { display: block; }

/* распорки SP Page Builder по 50px — пять штук только на главной */
.addon-root-empty-space,
.addon-root-empty-space > div,
.sppb-empty-space {
	height: 16px !important;
	min-height: 0 !important;
}

/* подпись слайда: 30px полей внутри 370px экрана */
.sppb-carousel-pro-text { padding: 14px !important; }
.sppb-carousel-item-inner { padding: 12px !important; }
.sppb-carousel-pro-text h2,
.sppb-carousel-pro-text h3 { margin: 0 0 6px; }

/* ------------------------------------------------------------------ */
/*  Боковая колонка                                                    */
/* ------------------------------------------------------------------ */
/* дерево категорий на телефоне — это сотня ссылок перед товарами;
   для навигации есть «гамбургер» и нижняя панель */
#sp-left { display: none !important; }

#sp-main-body > .container > .row {
	display: flex;
	flex-direction: column;
}

/* у .row в Bootstrap 3 есть ::before/::after — в гриде и во flex они
   становятся полноценными ячейками, и первая колонка уезжала пустой */
#sp-main-body > .container > .row::before,
#sp-main-body > .container > .row::after,
#sp-bottom > .container > .row::before,
#sp-bottom > .container > .row::after,
#sp-footer > .container > .row::before,
#sp-footer > .container > .row::after,
#comjshop form[name="product"]::before,
#comjshop form[name="product"]::after { content: none !important; display: none !important; }
#sp-main-body > .container > .row > #sp-component { order: 1; }
#sp-main-body > .container > .row > #sp-right     { order: 2; }

/* ------------------------------------------------------------------ */
/*  Сетки товаров и подкатегорий                                       */
/*                                                                     */
/*  .row-fluid/.span4 — это Bootstrap 2. Раскладываем в грид через     */
/*  display:contents, но тогда ячейками становятся и <div class=       */
/*  "clearfix"> в конце каждой строки, и псевдоэлементы ::before/      */
/*  ::after самой строки — отсюда были дыры в сетке.                   */
/* ------------------------------------------------------------------ */
#comjshop_list_product,
.jshop.list_category,
.jshop.list_related {
	display: grid;
	gap: 10px;
}

#comjshop_list_product > .row-fluid,
.jshop.list_category > .row-fluid,
.jshop.list_related > .row-fluid { display: contents; }

#comjshop_list_product > .row-fluid > .clearfix,
#comjshop_list_product > .row-fluid > .clear,
.jshop.list_category > .row-fluid > .clearfix,
.jshop.list_category > .row-fluid > .clear,
.jshop.list_related > .row-fluid > .clearfix,
.jshop.list_related > .row-fluid > .clear { display: none !important; }

#comjshop_list_product > .row-fluid::before,
#comjshop_list_product > .row-fluid::after,
.jshop.list_category > .row-fluid::before,
.jshop.list_category > .row-fluid::after,
.jshop.list_related > .row-fluid::before,
.jshop.list_related > .row-fluid::after { content: none !important; display: none !important; }

#comjshop_list_product > .row-fluid > [class*="span"],
.jshop.list_category > .row-fluid > [class*="span"],
.jshop.list_related > .row-fluid > [class*="span"],
.jshop.list_related > [class*="span"] {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
}

/* --- карточка товара в списке ------------------------------------- */
#comjshop_list_product .product,
.jshop.list_related .product {
	height: auto !important;
	display: flex;
	flex-direction: column;
	padding: 8px;
	box-sizing: border-box;
}

#comjshop_list_product .product .oiproduct,
.jshop.list_related .product .oiproduct { margin-top: auto; }

.jshop_list_product .product .name,
#comjshop_list_product .product .name a,
.jshop.list_related .product .name a {
	font-size: 13px !important;
	line-height: 1.25;
	word-break: break-word;
}

#comjshop_list_product .jshop_price span,
.jshop.list_related .jshop_price span { font-size: 15px; }

/* звёзды и «Отзывов (0)» ничего не сообщают — отзывов на сайте нет */
#comjshop_list_product .review_mark,
#comjshop_list_product .count_commentar,
.jshop.list_related .review_mark,
.jshop.list_related .count_commentar,
.jshop.list_related .manufacturer_name,
#comjshop_list_product .manufacturer_name { display: none; }

#comjshop_list_product .buttons .btn,
#comjshop_list_product .button_detail,
.jshop.list_related .buttons .btn,
.jshop.list_related .button_detail {
	display: block;
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	font-size: 12px !important;
	line-height: 1.2 !important;
	padding: 9px 8px !important;
	height: auto !important;
	min-height: 0;
	border-radius: 18px;
}

.related_header { margin: 16px 0 8px !important; font-size: 16px; }

/* --- подкатегории (бренды) ---------------------------------------- */
.jshop.list_category > .row-fluid > [class*="span"] {
	padding: 8px 6px !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jshop.list_category .image {
	width: 100%;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jshop.list_category .image img {
	max-width: 100%;
	max-height: 52px;
	width: auto;
	height: auto;
	margin: 0;
	display: block;
}

.jshop.list_category .category_name { margin-top: 6px; }
.jshop.list_category .category_name a {
	font-size: 11px;
	line-height: 1.2;
	display: block;
	text-align: center;
	word-break: break-word;
}
.jshop.list_category .category_short_description { display: none; }

/* --- модули «Популярные товары» и «Акции» --------------------------- */
/*  Внутри у них .block_item с классом col-md-4, а col-md-* в Bootstrap 3
    включается только с 992px — на планшете и телефоне карточки вставали
    во всю ширину по 650px высотой.                                     */
.bestseller_products,
.label_products,
.latest_products {
	display: grid;
	gap: 10px;
}

.bestseller_products > .clear,
.label_products > .clear,
.latest_products > .clear { display: none !important; }

.bestseller_products > .block_item,
.label_products > .block_item,
.latest_products > .block_item {
	width: auto !important;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
	padding: 8px !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
}

.bestseller_products .block_item .buttons,
.label_products .block_item .buttons,
.latest_products .block_item .buttons { margin-top: auto; }

.bestseller_products .block_item .description,
.label_products .block_item .description,
.latest_products .block_item .description { display: none; }

.bestseller_products .block_item .name a,
.label_products .block_item .name a,
.latest_products .block_item .name a { font-size: 13px; line-height: 1.25; }

.bestseller_products .block_item .jshop_price,
.label_products .block_item .jshop_price,
.latest_products .block_item .jshop_price { font-size: 15px; }

.bestseller_products .block_item .button_detail,
.label_products .block_item .button_detail,
.latest_products .block_item .button_detail {
	display: block;
	text-align: center;
	font-size: 12px;
	padding: 8px 6px;
}

.bestseller_products .image img,
.label_products .image img,
.latest_products .image img { max-width: 100%; height: auto; margin: 0 auto; display: block; }

/* --- «Недавно смотрели» ------------------------------------------- */
/*  Карточки помечены col-md-6, а col-md-* в Bootstrap 3 работает с 992px —
    на планшете «Недавно смотрели» занимало 1140px по одной карточке в ряд. */
.last_seen_products {
	display: grid;
	gap: 10px;
}

.last_seen_products > .block_item {
	width: auto !important;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
	padding: 8px !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
}

.last_seen_products .item_image img { max-width: 100%; height: auto; margin: 0 auto; display: block; }
.last_seen_products .item_name a { font-size: 12px; line-height: 1.25; }
.last_seen_products .item_price { font-size: 14px; }
.last_seen_products .item_detal { margin-top: auto; }
.last_seen_products .review_mark,
.last_seen_products .count_commentar,
.last_seen_products .manufacturer_name { display: none; }

/* --- список категорий в блоке страницы ---------------------------- */
/*  По умолчанию скрипт прячет этот блок (над ним те же разделы
    картинками). Если его вернуть настройкой — раскладка на случай. */
.sppb-addon-content > .jshop_menu_level_0,
.sppb-addon-content > .jshop_menu_level_0_a,
.sppb-addon-content > .jshop_menu_level_1,
.sppb-addon-content > .jshop_menu_level_1_a {
	display: inline-block;
	width: 32.5%;
	vertical-align: top;
	box-sizing: border-box;
	padding-right: 8px;
}

.sppb-addon-content > [class*="jshop_menu_level_"] a { font-size: 13px; line-height: 1.35; }

/* заголовок блока должен занимать всю строку, иначе первая ссылка
   встаёт рядом с ним */
.sppb-addon-content > .sppb-addon-title { display: block; width: 100%; }

/* --- парные баннеры (их складывает скрипт) ------------------------- */
.zrm-img-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.zrm-img-row > .sppb-addon-wrapper {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
}

/* контейнер картинки у SP Page Builder — inline-block, из-за чего плитка
   не занимала всю свою половину строки */
.zrm-img-row .sppb-addon,
.zrm-img-row .sppb-addon-content,
.zrm-img-row .sppb-addon-single-image-container,
.zrm-img-row > .sppb-addon-wrapper > div {
	display: block;
	width: 100%;
}

.zrm-img-row img { max-width: 100%; height: auto; display: block; }

/* --- плитки «Доставка» и «Обратный звонок» ------------------------- */
.zrm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 96px;
	padding: 14px 10px;
	background: #fff;
	border: 1px solid #ececed;
	border-radius: 8px;
	color: #333;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

.zrm-tile:hover, .zrm-tile:focus { color: #e8393c; text-decoration: none; border-color: #e8393c; }

.zrm-tile-ic {
	width: 30px;
	height: 30px;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.zrm-tile-text { font-size: 13px; line-height: 1.25; font-weight: 600; }

/* ------------------------------------------------------------------ */
/*  Фильтр и сортировка                                                */
/* ------------------------------------------------------------------ */
#sort_count input[type="text"],
#sort_count select { max-width: 100%; box-sizing: border-box; height: 40px; font-size: 16px; }

/* ------------------------------------------------------------------ */
/*  Страница товара                                                    */
/* ------------------------------------------------------------------ */
#comjshop.productfull { padding: 12px !important; }
#comjshop .bg-grey { padding: 8px !important; }

/* сначала товар и покупка, описание — ниже */
#comjshop form[name="product"] { display: flex; flex-direction: column; }
#comjshop form[name="product"] > .bg-grey { order: 1; }
#comjshop form[name="product"] > .prod_description,
#comjshop form[name="product"] > .jshop_prod_description { order: 2; }
#comjshop form[name="product"] > .button_back { order: 3; }

/* название товара продублировано подписью под фотографией */
#comjshop .image_middle .imagename { display: none; }

/* пустой рейтинг из пяти серых звёзд ничего не сообщает */
#comjshop form[name="product"] > div[style*="height:22px"] { display: none; }
#comjshop .review_mark { display: none; }

/* производитель уже есть в названии; ссылку-логотип оставляем, но мелкой */
#comjshop > form .manufacturer_name { display: none; }
#comjshop .manufacturer_logo { margin: 6px 0 0; }
#comjshop .manufacturer_logo img { max-height: 30px; width: auto; }

/* призыв зарегистрироваться ради отзыва занимал целый экран */
#comjshop .review_header { margin: 14px 0 6px; }
#comjshop .review_header h3 { font-size: 16px; }
#comjshop a.btn > .review_text_not_login { font-size: 12px; line-height: 1.3; }
/* :has() поддерживают не все телефоны — цепляемся за соседа */
#comjshop .review_header + a.btn {
	display: inline-block;
	width: auto;
	padding: 8px 14px !important;
	font-size: 12px;
	min-height: 0;
	border-radius: 18px;
}
#comjshop .review_header + a.btn .review_text_not_login { font-style: normal; }

/* слово «Описание» ничего не добавляет */
#comjshop .prod_description { display: none; }

/* описание было 14px — на телефоне это мелко */
#comjshop .jshop_prod_description,
#comjshop .jshop_prod_description div,
#comjshop .jshop_prod_description p,
#comjshop .jshop_prod_description span { font-size: 15px !important; line-height: 1.55; }

/* в описаниях зашит inline-стиль text-align: justify — на узкой колонке
   он растягивает слова и рвёт строки «реками» */
#comjshop .jshop_prod_description,
#comjshop .jshop_prod_description * { text-align: left !important; }
#comjshop .jshop_prod_description table,
#comjshop .jshop_prod_description table * { text-align: inherit !important; }
#comjshop .jshop_prod_description table { font-size: 13px !important; }

.productfull .row-fluid [class*="span"] {
	width: 100% !important;
	margin-left: 0 !important;
	float: none !important;
}

.productfull .image_middle img { max-width: 100%; height: auto; }

.jshop .description table,
.productfull .description table,
#comjshop .jshop_prod_description table { display: block; max-width: 100%; overflow-x: auto; }

/* кнопки соцсетей: Facebook и Twitter из России не открываются и просто
   держат соединение; оставляем только «ВКонтакте» */
#comjshop .facebook-like-button,
#comjshop .facebook-share,
#comjshop .tweet-button { display: none !important; }

/* «Назад» */
#comjshop .button_back { margin: 14px 0 0; }
#comjshop .button_back input {
	display: inline-block;
	width: auto;
	min-width: 140px;
	height: 40px;
	line-height: 1;
	padding: 0 20px !important;
	font-size: 14px;
	border-radius: 20px;
}

/* ------------------------------------------------------------------ */
/*  Варианты товара (расцветки) — одной строкой                        */
/* ------------------------------------------------------------------ */
#newAttr table.jshop.cart,
#newAttr table.jshop.cart tbody { display: block; width: 100%; }

#newAttr table.jshop.cart tr {
	display: flex;
	align-items: center;
	gap: 8px;
	/* в шаблоне у строк этой таблицы margin-bottom: 20px */
	margin: 0 !important;
	padding: 5px 2px;
	border-bottom: 1px solid #eee;
}

#newAttr table.jshop.cart td,
#newAttr table.jshop.cart th {
	display: block;
	border: 0;
	padding: 0;
	text-align: left !important;
	background: none;
}

#newAttr table.jshop.cart tr:first-child th {
	font-size: 10px;
	color: #999;
	font-weight: 400;
	text-transform: lowercase;
}

#newAttr .td_product_image,
#newAttr table.jshop.cart tr > th:first-child { flex: 0 0 42px; }

#newAttr .td_product_image .product_attribute_image { margin: 0; }
#newAttr .td_product_image img,
#newAttr img.img_attrib_column {
	width: 42px;
	height: 42px;
	object-fit: contain;
	display: block;
	margin: 0;
}

#newAttr .td_attr {
	flex: 1 1 auto;
	/* без минимума колонка схлопывалась до 14px и «203» вставало столбиком */
	min-width: 3.5em;
	font-size: 13px;
	line-height: 1.25;
	word-break: normal;
	overflow-wrap: break-word;
}

#newAttr .td_product_ean,
#newAttr .td_product_old_price { flex: 0 0 auto; font-size: 11px; color: #888; }

#newAttr .td_price { flex: 0 0 auto; }
/* в шаблоне у .prod_price padding: 20px и шрифт 22px */
#newAttr .td_price .prod_price { margin: 0; padding: 0; font-size: 14px; line-height: 1.25; }
#newAttr .td_price .prod_price span { font-size: 14px; font-weight: 700; white-space: nowrap; }
#newAttr .td_price .taxinfo,
#newAttr .td_price .plusshippinginfo,
#newAttr .td_price .reward_price { display: none; }

/* плюс и минус убираем — количество меняется в корзине */
#newAttr .prod_qty_input { flex: 0 0 44px; }
#newAttr .prod_qty_input input[type="button"] { display: none !important; }
#newAttr .prod_qty_input input[type="text"] {
	width: 44px !important;
	height: 38px;
	padding: 0 !important;
	margin: 0;
	text-align: center;
	font-size: 15px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#newAttr .buttons { flex: 0 0 auto; }

/* «В корзину» — значком; у <input type=submit> нет ::after,
   поэтому значок задаём фоном */
#newAttr .buttons input[type="submit"][value="В корзину"] {
	width: 44px;
	height: 38px;
	padding: 0 !important;
	min-height: 0;
	font-size: 0 !important;
	color: transparent;
	border-radius: 8px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* «Предзаказ» оставляем словом — иначе покупатель не поймёт,
   что товара нет в наличии */
#newAttr .buttons input[type="submit"][value="Предзаказ"] {
	height: 38px;
	min-height: 0;
	padding: 0 9px !important;
	font-size: 10px !important;
	line-height: 38px;
	border-radius: 8px;
	background-color: #f0ad4e;
	border-color: #f0ad4e;
	white-space: nowrap;
}

#newAttr .prod_qty_input .qty_unit { display: none; }

/* длинные списки расцветок сворачивает скрипт */
#newAttr table.jshop.cart tr.zrm-var-hidden { display: none !important; }

.zrm-var-more {
	display: block;
	width: 100%;
	margin: 10px 0 4px;
	padding: 11px 12px;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	color: #e8393c;
	background: #fff;
	border: 1px solid #e8393c;
	border-radius: 20px;
	cursor: pointer;
	-webkit-appearance: none;
}
.zrm-var-more:active { background: #fdeaea; }

/* ------------------------------------------------------------------ */
/*  Корзина                                                            */
/* ------------------------------------------------------------------ */
.view-cart .btn, #comjshop .btn { white-space: normal; }

/* Строка корзины — шесть ячеек таблицы, которые шаблон просто ставит
   друг под друга: получалась карточка в пол-экрана на каждый товар.
   Собираем компактную карточку: картинка слева, справа название,
   цена, количество и сумма. */
#comjshop form[name="updateCart"] > table.jshop.cart,
#comjshop form[name="updateCart"] > table.jshop.cart > tbody { display: block; width: 100%; }

/* строка заголовков не нужна */
#comjshop table.jshop.cart > tbody > tr:first-child,
#comjshop table.jshop.cart > tr:first-child { display: none; }

#comjshop tr.jshop_prod_cart {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"img name  del"
		"img price price"
		"img qty   sum";
	gap: 4px 10px;
	align-items: center;
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
}

#comjshop tr.jshop_prod_cart > td {
	display: block;
	border: 0;
	padding: 0;
	text-align: left !important;
	background: none;
}

/* подписи «Наименование», «Цена за единицу» и прочие в карточке лишние */
#comjshop tr.jshop_prod_cart .mobile-cart { display: none !important; }

#comjshop tr.jshop_prod_cart .jshop_img_description_center { grid-area: img; }
#comjshop tr.jshop_prod_cart .jshop_img_description_center img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	display: block;
}

#comjshop tr.jshop_prod_cart .product_name { grid-area: name; }
#comjshop tr.jshop_prod_cart .product_name a { font-size: 13px; line-height: 1.25; font-weight: 600; }
#comjshop tr.jshop_prod_cart .jshop_code_prod,
#comjshop tr.jshop_prod_cart .manufacturer { display: none; }
#comjshop tr.jshop_prod_cart .list_attribute p { margin: 2px 0 0; font-size: 12px; color: #777; font-style: normal; }

#comjshop tr.jshop_prod_cart .single_price { grid-area: price; font-size: 12px; color: #777; }
#comjshop tr.jshop_prod_cart .total_price {
	grid-area: sum;
	font-size: 15px;
	font-weight: 700;
	text-align: right !important;
	white-space: nowrap;
}

#comjshop tr.jshop_prod_cart .quantity { grid-area: qty; }
#comjshop tr.jshop_prod_cart .quantity .data {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

#comjshop tr.jshop_prod_cart .quantity input[type="button"] {
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0 !important;
	font-size: 16px;
	line-height: 1;
	border-radius: 15px;
	border: 0;
	background: #f2f2f4;
	color: #333;
}

#comjshop tr.jshop_prod_cart .quantity input[type="text"] {
	width: 42px;
	height: 30px;
	padding: 0 !important;
	margin: 0;
	text-align: center;
	font-size: 15px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#comjshop tr.jshop_prod_cart .cart_reload { flex: 0 0 100%; }
#comjshop tr.jshop_prod_cart .cart_reload_btn {
	font-size: 12px;
	color: #e8393c;
	cursor: pointer;
	text-decoration: underline;
}

#comjshop tr.jshop_prod_cart .remove { grid-area: del; align-self: start; }
#comjshop tr.jshop_prod_cart .remove img { width: 18px; height: 18px; opacity: .5; }
#comjshop tr.jshop_prod_cart .remove .btn,
#comjshop tr.jshop_prod_cart .remove a.button-img {
	display: inline-block;
	min-height: 0;
	padding: 2px !important;
	background: none;
	border: 0;
	font-size: 0;
}

/* Итого / Доставка / Всего к оплате */
#comjshop table.jshop_subtotal { width: 100%; display: table; margin: 6px 0 12px; }
#comjshop table.jshop_subtotal td { padding: 3px 0; font-size: 14px; }
#comjshop table.jshop_subtotal td.name { text-align: left; }
#comjshop table.jshop_subtotal td.value { text-align: right; white-space: nowrap; }
#comjshop table.jshop_subtotal tr.total td { font-size: 16px; font-weight: 700; }

/* ------------------------------------------------------------------ */
/*  Оформление заказа                                                  */
/* ------------------------------------------------------------------ */
/* шаблон верстает форму «в две колонки»: подпись справа, поле слева —
   на телефоне поля уезжали за край экрана */
#comjshop .form-horizontal .control-group { margin: 0 0 12px; }

#comjshop .form-horizontal .control-label,
#comjshop .form-horizontal .control-label.name {
	float: none !important;
	width: auto !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	display: block;
	text-align: left !important;
	font-size: 13px;
	line-height: 1.3;
	color: #555;
}

#comjshop .form-horizontal .controls {
	margin-left: 0 !important;
	float: none !important;
	width: auto !important;
}

#comjshop .form-horizontal input[type="text"],
#comjshop .form-horizontal input[type="email"],
#comjshop .form-horizontal input[type="tel"],
#comjshop .form-horizontal input[type="password"],
#comjshop .form-horizontal select,
#comjshop .form-horizontal textarea,
#comjshop .pfinish_comment_block textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	height: 44px;
	padding: 0 12px;
	/* 16px, иначе Safari увеличивает страницу при фокусе */
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#comjshop .form-horizontal textarea,
#comjshop .pfinish_comment_block textarea {
	height: auto;
	min-height: 90px;
	padding: 10px 12px;
	line-height: 1.4;
}

#comjshop .form-horizontal .btn,
#comjshop .box_button .btn,
#comjshop input[name="finish_registration"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 15px;
	padding: 13px 16px;
}

/* шаги оформления: пять ячеек таблицы вставали в столбик и съедали
   120px над формой */
#comjshop table.jshop_order_step,
#comjshop table.jshop_order_step > tbody,
#comjshop table.jshop_order_step > tbody > tr,
#comjshop table.jshop_order_step > tr {
	display: block;
	width: 100%;
}

#comjshop table.jshop_order_step > tbody > tr,
#comjshop table.jshop_order_step > tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 10px;
	padding: 8px 6px;
}

#comjshop td.jshop_order_step {
	display: inline-block;
	width: auto;
	padding: 0;
	border: 0;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
}

/* кнопки шагов «Далее» — во всю ширину, как главное действие */
body.zr-checkout #comjshop input[type="submit"],
body.zr-checkout #comjshop .box_button .btn,
#comjshop input[name="finish_registration"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 12px 0 0;
	font-size: 15px;
	padding: 13px 16px;
}

/* согласие с правилами: в шаблоне это красная плашка с огромным
   чекбоксом и текстом, который в неё не влезает */
#comjshop .row_agb,
#comjshop .row_no_return {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0;
	padding: 12px;
	background: #fafafa !important;
	border: 1px solid #eee;
	border-radius: 8px;
	color: #333 !important;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

#comjshop .row_agb input[type="checkbox"],
#comjshop .row_no_return input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	-webkit-appearance: checkbox;
	appearance: checkbox;
}

#comjshop .row_agb a.policy { color: #e8393c; text-decoration: underline; }

#comjshop .pfinish_comment_block .name { margin: 12px 0 6px; font-size: 13px; color: #555; text-align: left; }

/* сводка заказа перед подтверждением */
#comjshop .pfinish_adress_block,
#comjshop .pfinish_info_block { font-size: 13px; line-height: 1.5; text-align: left; }

/* «Вернуться в магазин» и «Оформить заказ» разъезжались по краям;
   главная кнопка должна быть сверху и во всю ширину */
#comjshop .cart_buttons #checkout {
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
}

#comjshop .cart_buttons #checkout > .clearfix { display: none; }

#comjshop .cart_buttons .td_1,
#comjshop .cart_buttons .td_2 {
	float: none !important;
	width: 100%;
	margin: 0;
}

#comjshop .cart_buttons .td_1 .btn,
#comjshop .cart_buttons .td_2 .btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0;
}

#comjshop .cart_buttons .td_2 .btn { font-size: 15px; padding: 13px 16px; }

/* второстепенное действие делаем спокойнее */
#comjshop .cart_buttons .td_1 .btn {
	background: #fff;
	color: #e8393c;
	border: 1px solid #e8393c;
	font-size: 13px;
	padding: 10px 16px;
}

body.zr-cart #comjshop .discount_code input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	height: 42px;
	font-size: 16px;
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/*  Кнопки крупнее: в шаблоне на узких экранах у них шрифт 8,5px       */
/* ------------------------------------------------------------------ */
.btn, .button {
	font-size: 13px;
	line-height: 1.3;
	min-height: 40px;
	padding: 10px 16px;
	border-radius: 20px;
}
.btn-xs { min-height: 34px; padding: 7px 12px; font-size: 13px; }

/* ------------------------------------------------------------------ */
/*  Подвал: три колонки в одну строку вместо трёх экранов              */
/* ------------------------------------------------------------------ */
#sp-bottom { padding: 16px 0 8px; }
#sp-bottom > .container { padding-left: 10px; padding-right: 10px; }

#sp-bottom > .container > .row {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1.15fr;
	gap: 10px;
	align-items: start;
}

#sp-bottom .sp-module { margin: 0; }
#sp-bottom .sp-module-title {
	margin: 0 0 8px;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
	word-break: normal;
	overflow-wrap: normal;
}
#sp-bottom .sp-module-content,
#sp-bottom .nav.menu li a,
#sp-bottom .custom { font-size: 12px; line-height: 1.45; }
#sp-bottom .nav.menu li { margin: 0; }
#sp-bottom .nav.menu li a { padding: 4px 0; display: block; }

/* в модуле контактов зашит inline-стиль margin-top:-65px, а под ним
   спрятанное через visibility:hidden название на две строки, которое
   всё равно занимает место */
#sp-bottom2 .custom > div[itemscope] { margin-top: 0 !important; }
#sp-bottom2 [itemprop="name"][style*="visibility"] { display: none !important; }
#sp-bottom .custom i { margin-right: 4px; }

#sp-footer { padding: 12px 0; }
#sp-footer > .container > .row { display: flex; flex-direction: column; gap: 6px; }
#sp-footer, #sp-footer a { font-size: 11px; line-height: 1.4; }

/* ------------------------------------------------------------------ */
/*  Нижняя панель                                                      */
/* ------------------------------------------------------------------ */
#zrm-tabs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	background: #fff;
	border-top: 1px solid #e5e5e8;
	box-shadow: 0 -2px 10px rgba(0,0,0,.06);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

#zrm-tabs a {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 7px 2px 6px;
	font-size: 10px;
	line-height: 1.1;
	color: #444;
	text-decoration: none;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

#zrm-tabs a:hover, #zrm-tabs a:focus { color: #e8393c; text-decoration: none; }
#zrm-tabs a.zrm-active { color: #e8393c; }

#zrm-tabs .zrm-ic {
	width: 23px;
	height: 23px;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#zrm-tabs .zrm-badge {
	position: absolute;
	top: 3px;
	left: 50%;
	margin-left: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #e8393c;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	box-sizing: border-box;
}
#zrm-tabs .zrm-badge.zrm-empty { display: none; }

/* полосу cookie поднимаем над панелью */
#zrcookie { bottom: 62px !important; }

}   /* конец max-width: 991px */


/* ================================================================== */
/*  ПЛАНШЕТ  (576 - 991)                                              */
/* ================================================================== */
@media (min-width: 576px) and (max-width: 991px) {
	#comjshop_list_product { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jshop.list_related     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jshop.list_category    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.bestseller_products,
	.label_products,
	.latest_products,
	.last_seen_products     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	#zrm-head .zrm-logo img:first-of-type { height: 44px; max-height: 44px; }

	.sppb-row > [class*="sppb-col-sm-4"] {
		width: 33.3333% !important;
		max-width: 33.3333% !important;
		flex: 0 0 33.3333% !important;
		flex-basis: 33.3333% !important;
	}

	.sppb-row > [class*="sppb-col-sm-6"] {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
		flex-basis: 50% !important;
	}
	#zrm-head .zrm-phone a { font-size: 17px; }

	#comjshop.productfull { padding: 18px !important; }

	#newAttr .td_attr { font-size: 14px; }

	/* на планшете строка расцветки шириной в экран смотрится пустой —
	   ставим по две в ряд */
	#newAttr table.jshop.cart tbody {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}

	#newAttr table.jshop.cart tr:first-child { display: none; }
}

/* ================================================================== */
/*  ТЕЛЕФОН  (до 575)                                                 */
/* ================================================================== */
@media (max-width: 575px) {
	#comjshop_list_product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jshop.list_related     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jshop.list_category    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bestseller_products,
	.label_products,
	.latest_products,
	.last_seen_products     { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* на телефоне колонки SP Page Builder оставляем во всю ширину:
	   баннеры разделов читаются крупно, а подпись слайдера свёрстана
	   как sppb-col-sm-6 sppb-col-xs-12 и при 50% превращалась в
	   колонку из отдельных слов */
	[class*="sppb-col-xs-12"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		flex-basis: 100% !important;
	}

	/* сверхширокие полоски-баннеры (1141x90 и подобные) сжимаются
	   в 29px по высоте — разобрать на них нечего */
	.zrm-ultrawide { display: none !important; }
}

/* ------------------------------------------------------------------ */
/*  Карточка товара, корзина и оформление — во всю ширину               */
/*                                                                     */
/*  .container даёт 15px полей, #sp-component — ещё 15px, плюс 12px     */
/*  внутри самой карточки: из 390px белому блоку оставалось 330, а по   */
/*  краям висели серые полосы. Страниц магазина это не касается —       */
/*  внутри них нет строк SP Page Builder, ради которых поля нужны.      */
/* ------------------------------------------------------------------ */
@media (max-width: 575px) {
	body.zr-product #sp-main-body > .container,
	body.zr-cart    #sp-main-body > .container,
	body.zr-checkout #sp-main-body > .container {
		padding-left: 0;
		padding-right: 0;
	}

	body.zr-product #sp-component,
	body.zr-cart    #sp-component,
	body.zr-checkout #sp-component {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.zr-product #comjshop.productfull,
	body.zr-cart    #comjshop,
	body.zr-checkout #comjshop { border-radius: 0; }

	/* заголовок страницы выравниваем с карточкой, иначе он остаётся
	   в рамке, а всё под ним — во всю ширину */
	body.zr-product #sp-page-title .sp-page-title,
	body.zr-cart    #sp-page-title .sp-page-title,
	body.zr-checkout #sp-page-title .sp-page-title { margin-left: 0; margin-right: 0; }

	body.zr-product #sp-page-title > .row,
	body.zr-cart    #sp-page-title > .row,
	body.zr-checkout #sp-page-title > .row { padding: 0; }
}

@media (max-width: 359px) {
	#comjshop_list_product,
	.jshop.list_related,
	.bestseller_products,
	.label_products,
	.latest_products,
	.last_seen_products  { grid-template-columns: minmax(0, 1fr); }

	.sppb-addon-content > [class*="jshop_menu_level_"] { width: 49%; }
	.jshop.list_category { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#newAttr .prod_qty_input { display: none; }
	#zrm-head .zrm-phone a { font-size: 13px; }
}