/* Golos Text — self-hosted (variable font, weights 400-700) instead of the
   Google Fonts CDN, which loads unreliably for some Russian visitors. */
@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/golos-text-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/golos-text-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/golos-text-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* Sunduk Funduk — site template
   Palette from brandbook (Pantone/CMYK -> RGB conversion, verify against
   printed swatches before final sign-off):
   PANTONE 4695 C -> primary dark, 4705 C -> accent, 4715 C -> tertiary, 4685 C -> bg */
:root {
	--sf-bg: #F3E0C7;
	--sf-brown-dark: #4A140A;
	--sf-brown: #8B4030;
	--sf-accent: #8B4030;
	--sf-accent-soft: #B87B62;
	--sf-text: #2b1a12;
	--sf-text-muted: #8a7364;
	--sf-white: #ffffff;
	--sf-border: #e3d2bd;
	--sf-ok-bg: #e8f3ea;
	--sf-ok-text: #2f6b3a;
	--sf-warm-bg: #fbe7d8;
	--sf-warm-text: #9a4a1f;
	--sf-danger: #b23b2e;

	/* Brand headings/accents keep Cambria (brandbook-mandated, see
	   reference_sunduk_brandbook_palette memory). UI chrome — nav, buttons,
	   filters, cards, prices — uses Golos Text (loaded in header.php) for a
	   modern, legible interface; decided with the client 2026-09-09. */
	--sf-font-heading: Cambria, Georgia, "Times New Roman", serif;
	--sf-font-body: "Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--sf-container-width: 1200px;
	--sf-radius: 10px;
	--sf-radius-sm: 6px;
	--sf-radius-lg: 16px;

	--sf-space-1: 4px;
	--sf-space-2: 8px;
	--sf-space-3: 16px;
	--sf-space-4: 24px;
	--sf-space-5: 40px;

	--sf-shadow-card: 0 1px 2px rgba(74,20,10,.06);
	--sf-shadow-card-hover: 0 10px 24px rgba(74,20,10,.14);
}

* { box-sizing: border-box; }
/* No overflow-x:hidden here on purpose — it silently breaks position:sticky
   on every descendant (the header nav/topbar below rely on it). The mobile
   overflow bugs that rule was guarding against are fixed at their source
   instead (min-width:0 on flex children, box-sizing, filter card
   containment) — if a new one shows up, fix it locally, not with this. */
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--sf-font-body);
	color: var(--sf-text);
	background: var(--sf-bg);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--sf-font-heading); margin: 0 0 .5em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* bootstrap-grid.min.css defines breakpoint max-widths for .container/.row/.col-*;
   these overrides pin the brand's own max-width & gutter on top of that grid. */
.container {
	max-width: var(--sf-container-width);
	padding-right: 20px;
	padding-left: 20px;
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.page__main {
	flex: 1 0 auto;
}

/* Neutralize bitrix/components/bitrix/menu/templates/.default/style.css — the
   default "" menu template ships its own ul.left-menu li{background:#F5F5F5...}
   / a:visited{color:#BC262C} rules (identical selector = same specificity, so
   this wins purely by loading after it); every context below (.header__nav,
   .footer__menu) then re-colors links on top of this neutral base. */
ul.left-menu li { background: none; padding: 0; }

/* Header — two rows: topbar (logo/search/phone/actions) + nav (category menu) */
/* display:contents removes <header>'s own box so its children (topbar, nav)
   become direct flex items of the tall .page instead — position:sticky's
   "stuck" range is bounded by the immediate parent's box, and <header> on
   its own is only ~130px tall (topbar+nav), so sticky nav/topbar could only
   ever stay stuck for that first 130px of scroll. The DOM tree (and the
   nav-toggle-checkbox's ~ sibling selectors) are unaffected — only the box
   model changes. Each child already carries its own background. */
.header { display: contents; }

.header__topbar { background: var(--sf-white); border-bottom: 1px solid var(--sf-border); }
.header__topbar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.header__logo { flex-shrink: 0; }
.header__logo img { width: 180px; height: auto; }

.header__search {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
	order: 4;
	width: 100%;
}
.header__search input {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 44px;
	border: 1px solid var(--sf-border);
	border-radius: 999px;
	background: var(--sf-bg);
	font-family: var(--sf-font-body);
	font-size: 14px;
	color: var(--sf-text);
}
.header__search input::placeholder { color: var(--sf-text-muted); }
.header__search input:focus { outline: 2px solid var(--sf-accent-soft); outline-offset: 1px; }
.header__search-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	stroke: var(--sf-text-muted);
	fill: none;
	pointer-events: none;
}

.header__phone {
	display: none;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	font-size: 15px;
	color: var(--sf-brown-dark);
	white-space: nowrap;
}
.header__phone svg { width: 18px; height: 18px; stroke: var(--sf-accent); fill: none; flex-shrink: 0; }

.header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }

/* Burger toggle — CSS-only (checkbox hack), no JS needed. On mobile the
   category nav starts collapsed; checking #sf-nav-toggle reveals it. */
.header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--sf-brown-dark);
	cursor: pointer;
}
.header__burger:hover { background: var(--sf-bg); }
.header__burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.header__icon-btn--phone-mobile { display: inline-flex; }

.header__nav { background: var(--sf-brown-dark); }
.header__nav .container { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.nav-toggle-checkbox:checked ~ .header__nav .container { max-height: 500px; }

@media (min-width: 992px) {
	.header__topbar-inner { flex-wrap: nowrap; }
	.header__search { order: 0; flex: 0 1 360px; width: auto; }
	.header__phone { display: flex; }
	.header__icon-btn--phone-mobile { display: none !important; }
	.header__burger { display: none; }
	.header__nav .container { max-height: none !important; overflow: visible; }

	/* Desktop: the category bar sticks under the (non-sticky) topbar once
	   you scroll past it, so the nav — and the "Каталог" mega-menu — stay
	   reachable without scrolling back up. */
	.header__nav { position: sticky; top: 0; z-index: 40; }
}

/* Mobile: the topbar itself (logo/search/burger) sticks instead — the
   secondary category bar stays in normal flow, collapsed behind the burger. */
@media (max-width: 991px) {
	.header__topbar { position: sticky; top: 0; z-index: 40; }
}

/* "Каталог" mega-menu — hover-revealed panel of category tiles, desktop only. */
.has-megamenu {
	/* The <li> itself spans the full height of the nav bar (siblings are
	   centered via align-items on .left-menu, this one stretches) so the
	   trigger's hoverable area covers the whole strip and the panel opens
	   flush against the strip's bottom edge — no dead zone between
	   "Каталог" and the panel, no padding-top hack needed for that. */
	position: relative;
	display: flex;
	align-self: stretch;
}
.has-megamenu > a { display: inline-flex; align-items: center; gap: 4px; height: 100%; }
.has-megamenu__chevron { width: 12px; height: 12px; transition: transform .15s ease; }
.has-megamenu:hover .has-megamenu__chevron,
.has-megamenu:focus-within .has-megamenu__chevron { transform: rotate(180deg); }
.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: var(--sf-space-4);
	background: var(--sf-white);
	background-clip: padding-box;
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow-card-hover);
	padding-left: var(--sf-space-4);
	padding-right: var(--sf-space-4);
	padding-bottom: var(--sf-space-4);
	min-width: 560px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 41;
}
.has-megamenu:hover .mega-menu,
.has-megamenu:focus-within .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mega-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sf-space-3); }
.mega-menu__item { display: flex; flex-direction: column; gap: 8px; }
.mega-menu__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--sf-radius-sm);
	background-color: var(--sf-bg);
	background-position: center;
	background-size: cover;
	transition: transform .15s ease;
}
.mega-menu__item:hover .mega-menu__media { transform: scale(1.03); }
.mega-menu__title {
	font-size: 13px;
	font-weight: bold;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sf-text);
	text-align: center;
}
.mega-menu__item:hover .mega-menu__title { color: var(--sf-brown-dark); }
.mega-menu__all {
	display: block;
	margin-top: var(--sf-space-3);
	padding-top: var(--sf-space-3);
	border-top: 1px solid var(--sf-border);
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sf-accent);
}
.mega-menu__all:hover { color: var(--sf-brown-dark); }
@media (max-width: 991px) {
	.mega-menu, .has-megamenu__chevron { display: none; }
}
.header__nav .left-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.header__nav .left-menu li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.header__nav .left-menu a,
.header__nav .left-menu a:link,
.header__nav .left-menu a:visited {
	display: inline-block;
	padding: 22px 0;
	font-weight: bold;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85) !important;
	background: none;
	border: 0;
	text-decoration: none;
}
.header__nav .left-menu a:hover,
.header__nav .left-menu a.selected,
.header__nav .left-menu a.selected:link,
.header__nav .left-menu a.selected:visited {
	color: var(--sf-white) !important;
	background: none;
}

/* Footer */
.footer {
	background: var(--sf-brown-dark);
	color: var(--sf-white);
	position: relative;
}
.footer__pattern {
	height: 20px;
	background-image: url("../images/pattern-strip.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left center;
}
.footer__inner {
	padding-top: 40px;
	padding-bottom: 24px;
}
.footer__brand img { width: 140px; height: auto; }
.footer__menu .left-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: none;
	border: 0;
}
.footer__menu .left-menu li { margin: 0; background: none; border: 0; padding: 0; }
.footer__menu .left-menu a,
.footer__menu .left-menu a:link,
.footer__menu .left-menu a:visited,
.footer__menu .left-menu a.selected,
.footer__menu .left-menu a.selected:visited { color: rgba(255,255,255,.85) !important; font-size: 14px; }
.footer__menu .left-menu a:hover { color: var(--sf-white) !important; }
.footer__contacts-block { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__contacts-block a { color: rgba(255,255,255,.85); }
.footer__contacts-block a:hover { color: var(--sf-white); }
.footer__copy {
	padding-top: 16px;
	margin-top: 24px;
	border-top: 1px solid rgba(255,255,255,.15);
	color: rgba(255,255,255,.6);
	font-size: 13px;
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--sf-radius);
	font-size: 15px;
	font-weight: bold;
	border: 1px solid transparent;
	cursor: pointer;
}
.btn--primary {
	background: var(--sf-brown-dark);
	color: var(--sf-white);
}
.btn--primary:hover { background: var(--sf-accent); }
.btn--outline {
	background: transparent;
	border-color: var(--sf-brown-dark);
	color: var(--sf-brown-dark);
}
.btn--outline:hover { background: var(--sf-brown-dark); color: var(--sf-white); }
.btn--sm { padding: 8px 16px; font-size: 13px; border-radius: var(--sf-radius-sm); }
.btn--block { display: block; width: 100%; text-align: center; }
.btn:disabled, .btn[aria-disabled="true"] {
	background: var(--sf-border);
	color: var(--sf-text-muted);
	cursor: not-allowed;
}

/* Badges — availability / status labels, reused across catalog cards */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.6;
}
.badge--ok { background: var(--sf-ok-bg); color: var(--sf-ok-text); }
.badge--warm { background: var(--sf-warm-bg); color: var(--sf-warm-text); }

/* Header icon buttons — cabinet / cart, with optional count bubble */
.header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
}
.header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--sf-brown-dark);
}
.header__icon-btn:hover { background: var(--sf-bg); }
.header__icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.header__icon-btn .count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--sf-accent);
	color: var(--sf-white);
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
}

/* Sections */
.section { padding: 56px 0; }
.section__title {
	font-size: 28px;
	margin-bottom: 28px;
}
.section__text {
	color: var(--sf-text-muted);
	line-height: 1.6;
	margin-bottom: 24px;
}

/* Hero */
.hero {
	padding: 56px 0;
	background: linear-gradient(180deg, var(--sf-bg) 0%, #eed7b8 100%);
}
.hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 13px;
	color: var(--sf-accent);
	font-weight: bold;
	margin-bottom: 12px;
}
.hero__title {
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.15;
}
.hero__text {
	color: var(--sf-text-muted);
	line-height: 1.6;
	margin-bottom: 28px;
	max-width: 44ch;
}
.hero__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sf-radius);
	overflow: hidden;
	box-shadow: var(--sf-shadow-card-hover);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Section backgrounds alternate white/cream so the page doesn't read as one
   flat beige block; .section--categories and .section--about sit on white
   (USP keeps the cream --sf-bg below) so hero/usp/etc alternate with white,
   hero/usp keep the warm cream. */
.section--categories { background: var(--sf-white); }
.section--about { background: var(--sf-white); }

/* Decorative divider reusing the brand paisley strip — a quiet nod to the
   brandbook ornament outside the footer (see reference_sunduk_brandbook_palette). */
.section-divider {
	height: 14px;
	background-image: url("../images/pattern-strip.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center;
	opacity: .55;
}

/* Category cards */
.category-card {
	display: block;
	border-radius: var(--sf-radius);
	overflow: hidden;
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	box-shadow: var(--sf-shadow-card);
	transition: transform .15s ease, box-shadow .15s ease;
}
.category-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(74,20,10,.12);
}
.category-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--sf-bg), var(--sf-accent-soft));
}
.category-card__title {
	display: block;
	padding: 14px 16px;
	font-weight: bold;
}

/* Product card — base for the custom catalog.section/element templates.
   Structure: .product-card > .product-card__media (img + optional .badge),
   .product-card__title, .product-card__weight, .product-card__price-row
   (.product-card__price + optional .product-card__price-old), .btn--sm. */
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	overflow: hidden;
	box-shadow: var(--sf-shadow-card);
	transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sf-shadow-card-hover);
}
.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--sf-white);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media .badge { position: absolute; top: 10px; left: 10px; }
.product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	padding: var(--sf-space-3);
	gap: var(--sf-space-1);
}
.product-card__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	/* clamp to 2 lines so mismatched name lengths stay grid-aligned */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__weight { font-size: 12px; color: var(--sf-text-muted); }
.product-card__price-row {
	margin-top: auto;
	padding-top: var(--sf-space-2);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sf-space-2);
}
.product-card__price { font-size: 17px; font-weight: bold; color: var(--sf-brown-dark); }
.product-card__price-old {
	font-size: 13px;
	color: var(--sf-text-muted);
	text-decoration: line-through;
}

/* USP */
.section--usp { background: var(--sf-bg); }
.usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sf-white);
	color: var(--sf-brown-dark);
	box-shadow: var(--sf-shadow-card);
	margin-bottom: 12px;
}
.usp__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.usp__title { font-weight: bold; margin-bottom: 6px; }
.usp__text { color: var(--sf-text-muted); font-size: 14px; line-height: 1.5; }

/* About */
.about-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sf-radius);
	overflow: hidden;
	box-shadow: var(--sf-shadow-card-hover);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* Info/legal content pages (о бренде, доставка, возврат, FAQ, оферта, политика...) */
.info-page {
	padding: var(--sf-space-5) 0;
	max-width: 760px;
}
.info-page h1 { font-size: 32px; margin-bottom: var(--sf-space-4); }
.info-page h2 { font-size: 20px; margin-top: var(--sf-space-5); }
.info-page h3 { font-size: 16px; margin-top: var(--sf-space-4); }
.info-page p { line-height: 1.65; margin: 0 0 var(--sf-space-3); }
.info-page ul, .info-page ol { line-height: 1.65; margin: 0 0 var(--sf-space-3); padding-left: 1.3em; }
.info-page li { margin-bottom: var(--sf-space-1); }
.info-page a { color: var(--sf-brown); text-decoration: underline; text-decoration-color: var(--sf-border); }
.info-page a:hover { color: var(--sf-brown-dark); }
.info-page .lead {
	font-size: 17px;
	color: var(--sf-text-muted);
	margin-bottom: var(--sf-space-4);
}
.info-page .note {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	padding: var(--sf-space-3);
	font-size: 14px;
	color: var(--sf-text-muted);
	margin: var(--sf-space-4) 0;
}
.info-page .updated {
	color: var(--sf-text-muted);
	font-size: 13px;
	margin-bottom: var(--sf-space-4);
}

/* FAQ accordion (plain <details>/<summary>, no JS needed) */
.faq-item {
	border-bottom: 1px solid var(--sf-border);
	padding: var(--sf-space-3) 0;
}
.faq-item summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--sf-accent); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: var(--sf-space-2); color: var(--sf-text-muted); }

/* Contacts page */
.contact-block { display: flex; flex-direction: column; gap: var(--sf-space-2); margin-bottom: var(--sf-space-4); }
.contact-block dt { font-size: 13px; color: var(--sf-text-muted); }
.contact-block dd { margin: 0 0 var(--sf-space-2); font-weight: 600; }

/* Catalog product detail page */
.product-detail__media {
	position: relative;
	border-radius: var(--sf-radius);
	overflow: hidden;
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
}
.product-detail__media img { width: 100%; }
.product-detail__media .badge { position: absolute; top: 16px; left: 16px; }
.product-detail__title { margin-bottom: var(--sf-space-3); font-size: 28px; }
.product-detail__specs {
	list-style: none;
	margin: 0 0 var(--sf-space-3);
	padding: 0;
}
.product-detail__specs li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--sf-border);
	font-size: 14px;
}
.product-detail__specs li span { color: var(--sf-text-muted); }
.product-detail__price {
	font-family: var(--sf-font-heading);
	font-size: 30px;
	font-weight: bold;
	color: var(--sf-brown-dark);
	margin-bottom: var(--sf-space-3);
}
.product-detail__text { margin-top: var(--sf-space-4); line-height: 1.6; }
.product-detail__back {
	display: inline-block;
	margin-top: var(--sf-space-4);
	color: var(--sf-text-muted);
	font-size: 14px;
}
.product-detail__back:hover { color: var(--sf-brown-dark); }

/* Catalog pager (bitrix "round" pager template) — its own bundled CSS paints
   the current page a default Bootstrap blue; override with brand colors. */
.catalog-pager { margin: var(--sf-space-4) 0; text-align: center; }
.catalog-pager .bx-pagination-container ul { display: inline-flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.catalog-pager a, .catalog-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: bold;
	color: var(--sf-brown-dark);
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
}
.catalog-pager a:hover { background: var(--sf-bg); }
.catalog-pager li.bx-active span {
	background: var(--sf-brown-dark) !important;
	color: var(--sf-white) !important;
	border-color: var(--sf-brown-dark) !important;
}
.catalog-pager li.bx-pag-prev span, .catalog-pager li.bx-pag-next span,
.catalog-pager li.bx-pag-prev a, .catalog-pager li.bx-pag-next a {
	border-radius: var(--sf-radius-sm);
	padding: 0 14px;
	width: auto;
}

/* Smart filter — brand palette over the bundled bootstrap_v4 markup */
.bx-sidebar-block { margin-bottom: var(--sf-space-4); }
.smart-filter-parameters-box {
	border-bottom: 1px solid var(--sf-border);
	padding: var(--sf-space-3) 0;
}
.smart-filter-parameters-box-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--sf-text);
	cursor: pointer;
}
.smart-filter-parameters-box-title-text { font-family: var(--sf-font-body); }
.smart-filter-checkbox-text { font-size: 13px; color: var(--sf-text); }
.smart-filter-input-group-checkbox-list { margin-top: var(--sf-space-2); }
.smart-filter-block [type="checkbox"] { accent-color: var(--sf-accent); }
/* Bootstrap's grid-only build (bootstrap-grid.min.css, loaded deliberately
   instead of full Bootstrap) has no .form-control rule, so these inputs
   never got the `width:100%` that markup assumes — they rendered at their
   native `size="5"` intrinsic width instead of filling the 50%-width wrapper
   div, poking past the filter card's right edge. Set it explicitly. */
.smart-filter-parameters-box input[type="text"],
.smart-filter-parameters-box input[type="number"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-sm);
	padding: 8px 10px;
	font-family: var(--sf-font-body);
	font-size: 13px;
	color: var(--sf-text);
}

/* ==========================================================================
   Cart (bitrix:sale.basket.basket, bootstrap_v4) and Checkout
   (bitrix:sale.order.ajax, bootstrap_v4) — both render their item/step
   content client-side via mustache JS templates, so a from-scratch custom
   component template isn't practical here; these are brand overrides on
   top of the stable class names the bootstrap_v4 kit always emits.
   ========================================================================== */
#basket-root, .bx-soa-wrapper, .bx-soa-sidebar, .bx-soa {
	font-family: var(--sf-font-body);
	color: var(--sf-text);
}
#basket-root h1, #basket-root h2, #basket-root h3,
.bx-soa h1, .bx-soa h2, .bx-soa h3,
.bx-soa-section-title { font-family: var(--sf-font-heading); }

/* Cart — item list card */
.basket-items-list-wrapper {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	padding: var(--sf-space-3);
	box-shadow: var(--sf-shadow-card);
}
.basket-items-search-field { display: none; } /* SHOW_FILTER=N should already remove this; belt-and-braces */
.basket-checkout-block {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	padding: var(--sf-space-4);
	box-shadow: var(--sf-shadow-card);
}
.basket-checkout-block-total-price-inner,
.basket-checkout-block-total-price { color: var(--sf-brown-dark); font-weight: bold; }

/* Buttons — Bootstrap's own .btn-primary (used by both cart/checkout kits)
   remapped onto the brand button look; site's own .btn/.btn--primary
   (double-dash) is a different, unrelated class so there's no collision. */
.btn-primary, .basket-btn-checkout, .bx-soa-pay-system-list .btn-primary {
	background: var(--sf-brown-dark) !important;
	border-color: var(--sf-brown-dark) !important;
	border-radius: var(--sf-radius) !important;
	font-family: var(--sf-font-body);
	font-weight: bold;
	box-shadow: none !important;
}
.btn-primary:hover, .basket-btn-checkout:hover {
	background: var(--sf-accent) !important;
	border-color: var(--sf-accent) !important;
}
.btn-outline-primary, .btn-outline-secondary {
	border-radius: var(--sf-radius) !important;
	color: var(--sf-brown-dark) !important;
	border-color: var(--sf-brown-dark) !important;
}

/* Form fields */
#basket-root .form-control, .bx-soa .form-control, .bx-soa-section input, .bx-soa-section select {
	border-radius: var(--sf-radius-sm);
	border-color: var(--sf-border);
	font-family: var(--sf-font-body);
}
#basket-root .form-control:focus, .bx-soa .form-control:focus {
	border-color: var(--sf-accent-soft);
	box-shadow: 0 0 0 .15rem rgba(139,64,48,.15);
}

/* Checkout steps */
.bx-soa-section {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	margin-bottom: var(--sf-space-3);
	box-shadow: var(--sf-shadow-card);
}
.bx-soa-cart-total { color: var(--sf-brown-dark); }

/* Mobile: prevent basket/checkout tables and wide flex rows from forcing
   horizontal page scroll (same class of bug fixed sitewide earlier). */
@media (max-width: 767px) {
	.basket-items-list-table, .bx-soa-wrapper table { display: block; width: 100%; overflow-x: auto; }
	#basket-root, .bx-soa-wrapper { min-width: 0; }
	.basket-items-list-item, .bx-soa-section-content { min-width: 0; }
}

/* ==========================================================================
   Catalog list pages (category + root) — heading, product count, filter
   card, mobile filter drawer, and root /catalog/ section tiles.
   ========================================================================== */
.catalog-heading-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: var(--sf-space-3);
}
.catalog-heading { margin: 0; font-size: 28px; }
.catalog-heading-count { color: var(--sf-text-muted); font-size: 14px; }
.catalog-filter-toggle { margin-left: auto; display: none; cursor: pointer; }

/* Category hero banner (frenchkiss.ru-style): full-bleed darkened photo
   under the nav, title/count/filter-toggle overlaid on top. Only categories
   with a photo (see section_vertical.php's $sfCategoryBackground) get the
   --image variant; others keep the plain heading row. */
.catalog-category-hero {
	margin-bottom: var(--sf-space-4);
}
/* The --image variant's width:100vw overshoots the visible viewport by the
   scrollbar's own width, adding a few px of horizontal scroll. Clipping it
   on .page__main (not html/body) fixes that without resurrecting the
   position:sticky breakage overflow-x:hidden caused sitewide earlier —
   .page__main is a sibling of .header, not an ancestor, so the sticky nav
   is unaffected. */
.page__main { overflow-x: hidden; }
.catalog-category-hero--image {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 200px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Cancels the outer .container's own padding-top:24px (catalog/index.php)
	   so the banner sits flush under the nav bar, edge to edge, with no gap. */
	margin-top: calc(-1 * var(--sf-space-4));
	padding-bottom: var(--sf-space-4);
	overflow: hidden;
	background-color: var(--sf-brown-dark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.catalog-category-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28,8,4,.38) 0%, rgba(28,8,4,.5) 55%, rgba(28,8,4,.68) 100%);
}
.catalog-category-hero--image .container {
	position: relative;
	z-index: 1;
	width: 100%;
}
.catalog-category-hero--image .catalog-heading-row {
	margin-bottom: 0;
	color: var(--sf-white);
}
.catalog-category-hero--image .catalog-heading {
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.05;
	text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.catalog-category-hero--image .catalog-heading-count { color: rgba(255,255,255,.8); }
.catalog-category-hero--image .catalog-filter-toggle {
	border-color: rgba(255,255,255,.72);
	color: var(--sf-white);
	background: rgba(74,20,10,.32);
	backdrop-filter: blur(6px);
}
@media (max-width: 575px) {
	.catalog-category-hero--image {
		min-height: 220px;
		padding-bottom: var(--sf-space-3);
	}
}

.catalog-filter-card {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	padding: var(--sf-space-3);
	box-shadow: var(--sf-shadow-card);
	overflow: hidden;
	max-width: 100%;
}
.catalog-filter-card .form-check-input:checked { background-color: var(--sf-accent); border-color: var(--sf-accent); }

/* "Показать"/"Сбросить" — Bitrix renders these as bare <input type=submit
   class="btn btn-primary/btn-link">, which our design system never styles
   (it uses BEM `.btn--primary`, not Bootstrap's single-dash `.btn-primary`,
   and we don't load Bootstrap's own .btn CSS) — they were falling back to
   native OS button chrome with its own oversized padding/margins, stacked
   full-width instead of sitting in a row. Style them to match .btn--sm and
   force a row so both fit side by side on desktop. */
.smart-filter-button-box .smart-filter-parameters-box-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sf-space-2);
	margin-top: var(--sf-space-2);
}
.smart-filter-button-box input.btn {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	font-family: var(--sf-font-body);
	font-weight: bold;
	border-radius: var(--sf-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
}
.smart-filter-button-box input.btn-primary {
	background: var(--sf-brown-dark);
	color: var(--sf-white);
}
.smart-filter-button-box input.btn-primary:hover { background: var(--sf-accent); }
.smart-filter-button-box input.btn-link {
	background: transparent;
	border-color: var(--sf-border);
	color: var(--sf-text);
}
.smart-filter-button-box input.btn-link:hover { border-color: var(--sf-brown-dark); color: var(--sf-brown-dark); }

/* Our bootstrap-grid.min.css sets --bs-gutter-x on .row (12px negative
   margin each side) but ships no .col-*{padding} rule to compensate — the
   smart filter's own markup wraps every section in a bare .row > .col-12,
   so that -12px margin ate straight into the card's own 16px padding,
   leaving section labels/inputs sitting ~5px from the edge instead of 16px
   like every other white box on the site (.product-card__body etc). The
   filter only ever uses .row as a single-column wrapper here, never an
   actual multi-column layout, so it's safe to just zero the bleed. */
.catalog-filter-card .row { margin-left: 0; margin-right: 0; }

/* Bitrix's own price/weight range slider ("smart-filter-slider-*", not
   ion.rangeSlider) is dropped entirely per request — keep only the От/До
   number inputs, which already filter on their own via smartFilter.keyup(). */
.smart-filter-slider-track-container { display: none; }

/* Mobile: filter starts collapsed behind a "Фильтры" toggle button instead
   of pushing every product below the fold. */
.sf-filter-toggle-checkbox { display: none; }
@media (max-width: 767px) {
	.catalog-filter-toggle { display: inline-block; }
	.catalog-filter-col { display: none; margin-bottom: var(--sf-space-3); }
	.sf-filter-toggle-checkbox:checked ~ .row .catalog-filter-col { display: block; }
}

/* Root /catalog/ category tiles — reuse the homepage category-card look */
.catalog-section-list-tile-list { list-style: none; padding: 0; }
.catalog-section-list-item {
	background: var(--sf-white);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	overflow: hidden;
	box-shadow: var(--sf-shadow-card);
	transition: transform .15s ease, box-shadow .15s ease;
	margin-bottom: var(--sf-space-4);
}
.catalog-section-list-item:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-card-hover); }
.catalog-section-list-item-img {
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover !important;
	background-position: center !important;
}
.catalog-section-list-item-inner { padding: 14px 16px; }
.catalog-section-list-item-title { margin: 0; font-size: 16px; }
.catalog-section-list-item-link { font-weight: bold; color: var(--sf-text); }
.catalog-section-list-item-counter { color: var(--sf-text-muted); font-weight: normal; font-size: 13px; }

/* Product photos vary a lot in background/scale/lighting across the
   imported catalog — contain + padding + neutral card bg reads as an
   intentional grid instead of a mismatched assortment. */
.product-card__media img { object-fit: contain; padding: 12px; background: var(--sf-white); }

/* Product detail page enrichments */
.product-detail__specs { list-style: none; margin: 0 0 var(--sf-space-3); padding: 0; }
.product-detail__specs li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--sf-border); font-size: 14px; }
.product-detail__specs li span { color: var(--sf-text-muted); }
.product-detail__price { font-size: 28px; font-weight: bold; color: var(--sf-brown-dark); margin-bottom: var(--sf-space-3); }
.product-detail__breadcrumbs { font-size: 13px; color: var(--sf-text-muted); margin-bottom: var(--sf-space-3); }
.product-detail__breadcrumbs a { color: var(--sf-brown); }
.product-detail__breadcrumbs a:hover { color: var(--sf-brown-dark); }
.product-detail__note {
	margin-top: var(--sf-space-3);
	padding: var(--sf-space-3);
	background: var(--sf-bg);
	border-radius: var(--sf-radius-sm);
	font-size: 13px;
	color: var(--sf-text-muted);
	line-height: 1.6;
}
.product-detail__note a { color: var(--sf-brown); text-decoration: underline; }
.product-detail__buy-row { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sf-space-3); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; }
.qty-stepper button {
	width: 36px; height: 40px; border: 0; background: var(--sf-bg); color: var(--sf-brown-dark);
	font-size: 16px; font-weight: bold; cursor: pointer;
}
.qty-stepper button:hover { background: var(--sf-accent-soft); }
.qty-stepper input {
	width: 44px; height: 40px; border: 0; border-left: 1px solid var(--sf-border); border-right: 1px solid var(--sf-border);
	text-align: center; font-family: var(--sf-font-body); font-size: 15px; color: var(--sf-text);
}
.product-detail__text { margin-top: var(--sf-space-3); line-height: 1.6; color: var(--sf-text-muted); }

/* "Популярные в разделе" / "С этим покупают" block — bootstrap_v4's own
   markup hides this header via inline style until a slider JS toggles it,
   which never fires for our plain grid; force it visible. */
.catalog-block-header {
	display: block !important;
	opacity: 1 !important;
	font-family: var(--sf-font-heading);
	font-size: 20px;
	font-weight: bold;
	margin: var(--sf-space-5) 0 var(--sf-space-3);
}
/* ...except the "Выберите один из подарков" gift-with-purchase header —
   we deliberately disabled all gift/discount rules, so its container is
   always empty; showing the question with nothing to choose from is worse
   than not asking. Higher specificity than the rule above wins regardless
   of source order. */
.catalog-block-header:has(+ .sale-products-gift:empty) { display: none !important; }
.sale-products-gift:empty { display: none !important; }
/* Its wrapper row (`.row.mb-4 > .col[data-entity="parent-container"]`) still
   sits in the DOM even with nothing inside — a zero-height div still keeps
   its own mb-4 (24px) margin-bottom, which pushed the actual product grid
   24px lower than the filter card next to it. Collapse it entirely. */
.row.mb-4:has(> .col[data-entity="parent-container"]) { display: none !important; }
/* Same empty gift-section wrapper, matched structurally instead of by
   attribute (its markup varies slightly request to request) — it's always
   the row immediately before the product grid, always empty. */
.row.mb-4:has(+ .row.gy-4) { display: none !important; }