/*
 * molliss.ru — оформление публичных страниц: главная, раздел каталога, товар, корзина, 404
 * (21.10.2026). Без Bootstrap и темы-шаблона: свои стили, сначала для телефона, затем шире
 * (640, 768, 992, 1200px). Цвета — по прежнему сайту: красный логотипа и графит.
 * Кабинеты, панель и витрины продавцов живут на своих шаблонах и этот файл не подключают.
 */

/* ---- Шрифт Roboto (лежит на сайте, Apache 2.0) ---- */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto/roboto-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto/roboto-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/roboto/roboto-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/roboto/roboto-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto/roboto-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto/roboto-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--red: #d0342a;          /* кнопки, цены, активное: белый текст на нём — 5:1 */
	--red-dark: #ad281f;
	--red-bright: #e83f33;   /* цвет прежнего сайта — только для полос и меток, не для мелкого текста */
	--red-soft: #fdeceb;
	--ink: #202326;          /* графит: шапка-полоса, подвал, заголовки */
	--ink-2: #2d3236;
	--text: #24292e;
	--muted: #5d646b;
	--line: #e2e5e8;
	--soft: #f4f5f6;
	--on-dark: #c8cdd2;
	--ok: #1e7b45;
	--warn-bg: #fff6e0;
	--warn: #7a5200;
	--radius: 10px;
	--shadow: 0 6px 20px rgba(32, 35, 38, .10);
}

/* ---- Основа ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font: 400 16px/1.5 Roboto, "Segoe UI", Arial, sans-serif;
}
img { max-width: 100%; height: auto; border: 0; }
picture { display: contents; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(208, 52, 42, .45); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-size: 24px; font-weight: 500; margin: 0 0 .5em; }
h2 { font-size: 21px; font-weight: 500; margin: 1.4em 0 .6em; }
h3 { font-size: 17px; font-weight: 500; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* ---- Кнопки и поля ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 2px solid var(--red);
	border-radius: 8px;
	background: var(--red);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; text-decoration: none; }
.btn--outline { background: #fff; color: var(--red); }
.btn--outline:hover { background: var(--red-soft); color: var(--red-dark); }
.btn--ghost { border-color: var(--line); background: #fff; color: var(--text); }
.btn--ghost:hover { border-color: var(--muted); background: var(--soft); color: var(--text); }
.btn--sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.btn--wide { display: flex; width: 100%; }

.field, .form-control {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid #c9cfd5;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
}
.field:focus, .form-control:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(208, 52, 42, .15); }
select.field, select.form-control {
	appearance: none;
	padding-right: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d646b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.form-group { margin: 0; }

.alert { margin: 16px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--soft); }
.alert--warn { background: var(--warn-bg); color: var(--warn); }
.alert--info { background: #eef4fb; color: #1d4a78; }
.alert .ico { margin-right: 6px; }

.badge {
	display: inline-block;
	min-width: 28px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--soft);
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
}

/* ---- Шапка ---- */
.topbar { display: none; background: var(--ink); color: var(--on-dark); font-size: 14px; }
.topbar__inner { display: flex; align-items: center; gap: 24px; min-height: 40px; }
.topbar__item { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); white-space: nowrap; }
a.topbar__item:hover { color: #fff; text-decoration: none; }
.topbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); }
.topbar__links a:hover { color: #fff; text-decoration: none; }

.usermenu { position: relative; }
.usermenu summary { display: inline-flex; align-items: center; gap: 6px; color: #fff; cursor: pointer; list-style: none; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu__list {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--shadow);
	list-style: none;
}
.usermenu__list a { display: block; padding: 8px 16px; color: var(--text) !important; }
.usermenu__list a:hover { background: var(--soft); text-decoration: none; }

.header { position: relative; z-index: 20; }
.header__main { background: #fff; border-bottom: 1px solid var(--line); }
.header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px 8px;
	padding-top: 10px;
	padding-bottom: 12px;
}
.brand { display: block; line-height: 0; }
.brand img { display: block; width: 150px; height: auto; }
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.icon-btn .ico { width: 24px; height: 24px; }

.search { position: relative; grid-column: 1 / -1; grid-row: 2; margin: 0; }
.search__ico { position: absolute; top: 50%; left: 14px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search__input {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 44px;
	border: 1px solid #c9cfd5;
	border-radius: 8px;
	background: var(--soft);
	font-size: 16px;
}
.search__input:focus { border-color: var(--red); outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(208, 52, 42, .15); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
.search-result {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 70vh;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--shadow);
	list-style: none;
}
.search-result a { display: block; padding: 10px 16px; color: var(--text); line-height: 1.35; }
.search-result a:hover, .search-result a:focus { background: var(--soft); text-decoration: none; outline: none; }
.search-result b { color: var(--ink); }
.search-result .text-muted { color: var(--muted); }
.search-result .fa { display: none; }

/* Каталог: на телефоне — выезжающая панель, с 992px — полоса под шапкой */
.catnav {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	width: min(320px, 86vw);
	overflow-y: auto;
	background: #fff;
	box-shadow: var(--shadow);
	transform: translateX(-105%);
	transition: transform .2s ease;
	visibility: hidden;
}
.catnav.is-open { transform: none; visibility: visible; }
.catnav__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.catnav > .container { padding: 0; }
.catnav__list { margin: 0; padding: 8px 0; list-style: none; }
.catnav__link { display: block; padding: 12px 20px; color: var(--ink); font-weight: 500; }
.catnav__link:hover { background: var(--soft); color: var(--red); text-decoration: none; }
.catnav__extra { margin: 0; padding: 8px 0 16px; border-top: 1px solid var(--line); list-style: none; }
.catnav__extra a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--muted); }
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(20, 22, 24, .45); }

/* ---- Хлебные крошки ---- */
.crumbs { padding-top: 12px; padding-bottom: 4px; font-size: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.crumbs__sep { color: #a6adb4; }
.crumbs__current { color: var(--text); }
@media (max-width: 767.98px) {
	/* На телефоне последняя крошка повторяет заголовок страницы */
	.crumbs li:last-child:not(:first-child) { display: none; }
	.crumbs li:nth-last-child(2) .crumbs__sep { display: none; }
}
.crumbs .ico { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- Разделы страницы ---- */
.page { padding-bottom: 32px; }
.section { margin: 32px 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.section__title { position: relative; margin: 0; padding-left: 14px; font-size: 22px; font-weight: 500; }
.section__title::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: 4px; border-radius: 2px; background: var(--red-bright); }

/* Вкладки на главной */
.tabs__list { display: flex; gap: 6px; margin: 0; padding: 0 0 2px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
	flex: none;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
	white-space: nowrap;
}
.tabs__tab:hover { border-color: var(--muted); }
.tabs__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.tabs__panel { margin-top: 14px; }

/* ---- Карточки товаров ---- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.grid > li { display: flex; min-width: 0; }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	transition: box-shadow .15s, border-color .15s;
}
.card:hover { border-color: #cfd4d9; box-shadow: var(--shadow); }
.card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 10px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__label, .card__badge, .card__photos {
	position: absolute;
	z-index: 1;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}
.card__label { top: 8px; right: 8px; background: var(--red); color: #fff; }
.card__badge { top: 8px; left: 8px; background: var(--ink); color: #fff; }
.card__photos { right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .92); color: var(--muted); }
.card__photos .ico { width: 14px; height: 14px; }
.card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.card__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.card__title:hover { color: var(--red); text-decoration: none; }
.card__price { margin-top: auto; color: var(--ink); font-size: 16px; font-weight: 700; }
.card__price span { color: var(--muted); font-size: 13px; font-weight: 400; }
.card__btn { align-self: flex-start; }

/* Лента карточек с прокруткой вбок: новинки, хиты, похожие товары */
.strip { position: relative; }
.strip__list {
	display: grid;
	grid-auto-columns: minmax(160px, 46%);
	grid-auto-flow: column;
	gap: 12px;
	margin: 0;
	padding: 2px 2px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	list-style: none;
}
.strip__list > li { display: flex; min-width: 0; scroll-snap-align: start; }
.strip__nav { display: none; gap: 6px; }
.strip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
}
.strip__btn:hover:not(:disabled) { border-color: var(--ink); }
.strip__btn:disabled { opacity: .35; cursor: default; }

/* ---- Главная: витрина из трёх фото ---- */
.hero { display: grid; grid-auto-columns: 86%; grid-auto-flow: column; gap: 12px; margin: 16px 0 0; padding: 0 0 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.hero::-webkit-scrollbar { display: none; }
.hero__item { position: relative; min-height: 0; scroll-snap-align: start; }
.hero__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--soft); color: #fff; }
.hero__link img { display: block; width: 100%; height: 100%; aspect-ratio: 865 / 460; object-fit: cover; transition: transform .4s ease; }
.hero__link:hover img { transform: scale(1.03); }
.hero__link:hover { color: #fff; text-decoration: none; }
.hero__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 40px 16px 14px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 100%);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
}
.hero__caption .ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--red); }

.adv { margin: 20px 0 0; }

/* Преимущества */
.service { margin: 28px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
.service__item { display: flex; align-items: flex-start; gap: 10px; }
.service__ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red-soft); color: var(--red); }
.service__ico .ico { width: 20px; height: 20px; }
.service__title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
.service__text { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---- Раздел каталога ---- */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.catalog__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 12px; }
.catalog__head h1 { margin: 0; }
.catalog__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.filters-open { display: inline-flex; }

.sorter { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-x: auto; font-size: 14px; scrollbar-width: none; }
.sorter::-webkit-scrollbar { display: none; }
.sorter__label { flex: none; color: var(--muted); }
.sorter a { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); white-space: nowrap; }
.sorter a:hover { border-color: var(--muted); text-decoration: none; }
.sorter a.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid #f2c2be;
	border-radius: 999px;
	background: var(--red-soft);
	color: var(--red-dark);
	font-size: 14px;
	cursor: pointer;
}
.chip:hover { border-color: var(--red); }
.chip .ico { width: 14px; height: 14px; }
.chip--all { border-color: var(--line); background: #fff; color: var(--text); }

.empty { padding: 40px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* Боковая колонка: разделы и фильтры. На телефоне — панель по кнопке «Фильтры» */
.side {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	width: min(360px, 92vw);
	overflow-y: auto;
	background: #fff;
	box-shadow: var(--shadow);
	transform: translateX(105%);
	transition: transform .2s ease;
	visibility: hidden;
}
.side.is-open { transform: none; visibility: visible; }
.side__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); background: #fff; font-size: 18px; font-weight: 500; }
.side__body { padding: 12px 16px 24px; }
.side-block { margin: 0 0 18px; }
.side-block__title { margin: 0 0 10px; font-size: 17px; font-weight: 500; }

.subcats { margin: 0; padding: 0; list-style: none; }
.subcats a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: 15px; line-height: 1.35; }
.subcats a:hover { background: var(--soft); color: var(--red); text-decoration: none; }
.subcats__count { flex: none; color: var(--muted); font-size: 13px; }

.filter { border-top: 1px solid var(--line); }
.filter summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary .ico { color: var(--muted); transition: transform .15s; }
.filter[open] summary .ico { transform: rotate(180deg); }
.filter.is-selected summary { color: var(--red); }
.filter__body { padding: 0 2px 14px; }
.btn-set-filters { margin-top: 14px; }
.checks { max-height: 290px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.35; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.check__count { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 13px; }
.check.is-disabled { color: #9aa1a8; cursor: default; }

.range__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.range__field { position: relative; display: flex; align-items: center; }
.range__field span { position: absolute; left: 10px; color: var(--muted); font-size: 14px; pointer-events: none; }
.range__field input { padding-left: 34px; padding-right: 30px; font-size: 15px; }
.range__clear { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.range__clear:hover { background: var(--soft); color: var(--ink); }
.range__clear .ico { width: 14px; height: 14px; }
.range__track { position: relative; height: 28px; margin: 8px 4px 0; }
.range__track::before { content: ""; position: absolute; top: 12px; right: 0; left: 0; height: 4px; border-radius: 2px; background: var(--line); }
.range__fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--red); }
.range__track input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; appearance: none; }
.range__track input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; border: 3px solid var(--red); border-radius: 50%; background: #fff; cursor: pointer; pointer-events: auto; appearance: none; }
.range__track input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--red); border-radius: 50%; background: #fff; cursor: pointer; pointer-events: auto; }
.range__track input[type="range"]::-moz-range-track { background: none; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
.pager a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--text);
}
.pager a:hover { border-color: var(--ink); text-decoration: none; }
.pager a.active { border-color: var(--red); background: var(--red); color: #fff; }

/* ---- Товар ---- */
.product__top { display: grid; grid-template-areas: "head" "gallery" "info"; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.product__head { grid-area: head; }
.gallery { grid-area: gallery; }
.product__info { grid-area: info; min-width: 0; }
.product__title { margin: 0 0 8px; font-size: 22px; }
.product__seller { margin: 0; color: var(--muted); font-size: 15px; }

.gallery { min-width: 0; }
.gallery__main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.gallery__slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px; border: 0; background: none; cursor: zoom-in; }
.gallery__slide img, .gallery__variety { width: 100%; height: 100%; object-fit: contain; }
.gallery__variety { padding: 12px; }
.gallery__zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.gallery__thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 2px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
	flex: none;
	width: 68px;
	height: 68px;
	padding: 4px;
	border: 2px solid var(--line);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb:hover { border-color: #b9c0c7; }
.gallery__thumb.is-active { border-color: var(--red); }

.buy { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.price-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.price-box__value { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.2; }
.price-box__unit { color: var(--muted); font-size: 16px; font-weight: 400; }
.stock { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; }
.stock--in { color: var(--ok); }
.stock--order { color: var(--muted); }

.opts { border-top: 1px solid var(--line); }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.opt-row:last-child { border-bottom: 0; }
.opt-row__name { color: var(--muted); font-size: 14px; }
.varieties-row { align-items: start !important; }
.varieties-row .opt-row__name { padding-top: 9px; }
.opt-row__value { min-width: 0; }
.opt-row__value ul { margin: 0; padding: 0; list-style: none; }
.discounts li { padding: 2px 0; }
.discounts .badge { margin-right: 6px; background: var(--red-soft); color: var(--red-dark); }
.hint { color: var(--muted); }
.hint-link { padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none; color: var(--red); cursor: pointer; }
.opt-total { color: var(--ink); font-size: 20px; font-weight: 700; }
.opt-total .hint { font-size: 15px; font-weight: 400; }

.options-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	padding: 6px 12px;
	border: 2px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--text);
	font-size: 15px;
	line-height: 1.25;
	cursor: pointer;
}
.opt:hover { border-color: #b9c0c7; }
.opt.is-active { border-color: var(--red); background: var(--red-soft); color: var(--red-dark); }
.opt.is-disabled { border-style: dashed; color: #a2a9b0; }
.opt--image { width: 64px; height: 64px; padding: 4px; }
.opt--image img { width: 100%; height: 100%; object-fit: contain; }
.opt-warn { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 14px; }

.qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qty__box { display: inline-flex; border: 1px solid #c9cfd5; border-radius: 8px; overflow: hidden; }
.qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--soft); cursor: pointer; }
.qty__btn:hover:not(:disabled) { background: var(--line); }
.qty__btn:disabled { color: #b0b6bc; cursor: default; }
.qty__input { width: 64px; height: 44px; border: 0; border-right: 1px solid #c9cfd5; border-left: 1px solid #c9cfd5; text-align: center; font-size: 16px; }
.qty__input:focus { outline: none; background: #fffdf4; }
.qty__stock { color: var(--muted); font-size: 14px; }

.contact-box { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--soft); }
.contact-box__title { margin: 0 0 4px; color: var(--ink); font-size: 16px; font-weight: 500; }
.contact-box__text { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.contact-box__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.product__section { margin: 32px 0 0; }
.rte { max-width: 900px; overflow-wrap: break-word; }
.rte h2 { font-size: 19px; }
.rte h3 { font-size: 17px; }
.rte img { height: auto; }
.rte table { display: block; max-width: 100%; margin: 0 0 1em; overflow-x: auto; border-collapse: collapse; }
.rte td, .rte th { padding: 6px 8px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: normal; }
.rte ul, .rte ol { padding-left: 1.3em; }
.table-scroll { max-width: 100%; overflow-x: auto; }

.specs { width: 100%; max-width: 900px; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs thead th { color: var(--muted); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.specs__group td { padding-top: 16px; background: none; color: var(--ink); font-weight: 700; }
.specs td:first-child { width: 45%; color: var(--muted); }

.store-info { margin: 32px 0 0; padding: 20px 16px; border-radius: var(--radius); background: var(--soft); }
.store-info h2 { margin-top: 0; }
.store-info__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kv { width: 100%; border-collapse: collapse; font-size: 15px; }
.kv caption { padding: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.kv th, .kv td { padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.kv th { width: 34%; color: var(--muted); font-weight: 400; }
.kv td small { color: var(--muted); }
.hours th { width: auto; }
.hours .off { color: var(--muted); }
.hours .no-lunch { color: var(--ok); }

/* Окно просмотра фото */
.viewer { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.viewer::backdrop { background: rgba(15, 17, 19, .94); }
.viewer__img { position: absolute; inset: 56px 12px 56px; display: flex; align-items: center; justify-content: center; }
.viewer__img img { max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff; object-fit: contain; }
.viewer__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.viewer__btn:hover { background: rgba(255, 255, 255, .25); }
.viewer__btn .ico { width: 26px; height: 26px; }
.viewer__close { top: 6px; right: 6px; }
.viewer__prev { top: 50%; left: 6px; transform: translateY(-50%); }
.viewer__next { top: 50%; right: 6px; transform: translateY(-50%); }
.viewer__count { position: absolute; bottom: 16px; left: 50%; font-size: 14px; transform: translateX(-50%); }

/* ---- 404 ---- */
.error-page { max-width: 640px; margin: 40px auto; padding: 0 16px; text-align: center; }
.error-page__code { display: block; color: var(--red-bright); font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.error-page__title { margin: 16px 0 6px; font-size: 24px; }

/* ---- Подвал ---- */
.footer { margin-top: 40px; background: var(--ink); color: var(--on-dark); font-size: 15px; }
.footer a { color: #fff; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 32px; padding-bottom: 24px; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand img { display: block; width: 150px; height: auto; }
.footer__title { margin: 0 0 10px; color: #fff; font-size: 16px; font-weight: 500; }
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { padding: 3px 0; }
.footer__list .off { color: #8f979e; }
.footer__phone { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #fff; font-size: 17px; font-weight: 500; }
.footer__hours { margin: 0; color: var(--on-dark); font-size: 14px; line-height: 1.6; }
.social { display: flex; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-2); color: #fff; }
.social a:hover { background: var(--red); }
.social .ico { width: 20px; height: 20px; }
.footer__bottom { padding: 14px 0 6px; border-top: 1px solid #383d42; color: #9aa2a9; font-size: 13px; }
.footer__bottom .container > div + div { margin-top: 8px; }
.footer__bottom a { color: var(--on-dark); }

.to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	box-shadow: var(--shadow);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
.to-top.is-visible { opacity: .9; visibility: visible; }
.to-top:hover { opacity: 1; }

/* ---- Шире ---- */
@media (min-width: 640px) {
	.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.strip__list { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
	.service__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.opt-row { grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; gap: 12px; }
	.store-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero { grid-auto-columns: 62%; }
}

@media (min-width: 768px) {
	h1 { font-size: 28px; }
	.topbar { display: block; }
	.header__phone, .header__user { display: none; }
	.header__inner { grid-template-columns: auto auto minmax(0, 1fr); gap: 20px; padding-top: 14px; padding-bottom: 14px; }
	.brand img { width: 190px; }
	.search { grid-column: auto; grid-row: auto; max-width: 640px; }
	.product__title { font-size: 26px; }
	.price-box__value { font-size: 28px; }
	.strip__nav { display: inline-flex; }
	.strip__list { scrollbar-width: none; }
	.strip__list::-webkit-scrollbar { display: none; }
	.store-info { padding: 24px; }
}

@media (min-width: 992px) {
	.burger, .catnav__head, .catnav__extra, .scrim { display: none !important; }
	.header__inner { grid-template-columns: auto minmax(0, 1fr); }
	.brand img { width: 232px; }
	.catnav {
		position: static;
		width: auto;
		overflow: visible;
		background: var(--ink);
		box-shadow: none;
		transform: none;
		visibility: visible;
	}
	.catnav > .container { padding: 0 16px; }
	.catnav__list { display: flex; flex-wrap: wrap; margin: 0 -14px; padding: 0; }
	.catnav__link { position: relative; padding: 13px 14px; color: #fff; font-size: 15px; }
	.catnav__link:hover { background: var(--ink-2); color: #fff; }
	.catnav__link::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 3px; background: var(--red-bright); transform: scaleX(0); transition: transform .15s; }
	.catnav__link:hover::after { transform: none; }

	.hero { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; grid-auto-flow: row; overflow: visible; }
	.hero__item:first-child { grid-row: 1 / 3; }
	.hero__item:not(:first-child) .hero__link img { aspect-ratio: auto; position: absolute; inset: 0; }
	.hero__item:not(:first-child) .hero__caption { font-size: 16px; padding-top: 28px; }
	.hero__caption { padding: 60px 22px 18px; font-size: 22px; }

	.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.strip__list { grid-auto-columns: calc((100% - 3 * 16px) / 4); }

	.catalog { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
	.catalog .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.filters-open { display: none; }
	.side { position: static; width: auto; overflow: visible; box-shadow: none; transform: none; visibility: visible; background: none; }
	.side__head { display: none; }
	.side__body { padding: 0; }
	.side-block { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

	.product__top { grid-template-areas: "gallery head" "gallery info"; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 14px 36px; align-items: start; }
	.gallery { position: sticky; top: 16px; }
	.footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; }
	.footer__brand { grid-column: auto; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/* 9 разделов в одну строку */
	.catnav__list { margin: 0 -6px; }
	.catnav__link { padding: 13px 6px; font-size: 13.5px; }
	.catnav__link::after { right: 6px; left: 6px; }
}

@media (min-width: 1200px) {
	.catalog .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.strip__list { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
}

@media (hover: none) {
	.hero__link:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

@media print {
	.topbar, .catnav, .search, .footer, .to-top, .strip, .contact-box__actions, .service { display: none !important; }
}