/* Phase 4.3 additions — new page types only. Everything else (header, hero,
   product-card, category-card, filter-panel, listing, badges, buttons) is
   the existing Steel Ledger design-system CSS, compiled as-is. */

/* -----------------------------------------------------------------------
   Mode-choice screen (#/choose-mode) — premium split-screen onboarding.
   Built from existing tokens (--paper/--ink-900/--steel-500/
   --border-hairline/--shadow-dropdown/--signal-500/--signal-tint, all
   already theme-aware). REVERTED from two per-mode preview colours (a
   warm cream/blush retail hex + a neutral-grey wholesale hex) — both
   sides now render the same Industrial Premium palette; the split reads
   through spacing/density/composition instead (retail: more open, more
   image, more air; wholesale: tighter grid, more structure/technical
   density — see mode-gate.js for the actual content difference).

   The actual choreography (selection pulse, scene exit, reveal,
   home-page stagger-in) runs in JS via Motion (see js/app.js's
   playModeGateTransition / js/motion/motion-kit.js) — the CSS here only
   owns the STATIC look and the pure-hover states, which work even with
   Motion unavailable or prefers-reduced-motion on.
   ----------------------------------------------------------------------- */
.mode-gate-stage {
	position: relative;
	overflow: hidden;
	min-height: 100%;
}
.mode-gate-scene {
	display: flex;
	flex-direction: column;
	min-height: min(720px, 88vh);
}
.mode-gate-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 56px 24px 36px;
}
@media (max-width: 767px) {
	.mode-gate-heading { padding: 36px 16px 24px; }
}
.mode-gate__title { font-size: var(--fs-3xl); margin: 0 0 12px; }
.mode-gate__lede { color: var(--steel-500); max-width: 52ch; margin: 0 auto; }

.mode-gate-split {
	position: relative;
	flex: 1;
	display: flex;
	min-height: 320px;
}
@media (max-width: 767px) {
	.mode-gate-split { flex-direction: column; }
}
.mode-gate-split__divider {
	width: 1px;
	background: var(--concrete-line);
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.mode-gate-split__divider { width: 100%; height: 1px; }
}

/* Each side is a full-bleed button — large tap/click target, "two scenes
   of one serious site" rather than two small cards. flex-grow itself is
   nudged on hover (a real, if subtle, redistribution of space — "the
   chosen side gets more visual weight"), layered with the transform/
   opacity cues below for the actual felt motion. */
.mode-gate-side {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 280px;
	padding: 40px;
	border: 0;
	background: var(--paper);
	cursor: pointer;
	overflow: hidden;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: flex-grow 520ms cubic-bezier(0.22, 1, 0.36, 1), background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
	.mode-gate-split:hover .mode-gate-side:hover { flex-grow: 1.08; }
	.mode-gate-split:hover .mode-gate-side:not(:hover) { flex-grow: 0.92; }
}
/* Both sides share the same --paper background and the same tint colour
   (--mode-accent-surface, the site's one fixed pinned-dark graphite) —
   no per-mode palette left to preview. The split is legible through
   layout instead: see .mode-gate-side--retail/--wholesale's density rules
   further down (padding, content max-width, kicker/grid treatment). */
.mode-gate-side::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mode-accent-surface);
	opacity: 0.08;
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-gate-side:hover::before, .mode-gate-side:focus-visible::before { opacity: 0.2; }
.mode-gate-split:hover .mode-gate-side:not(:hover)::before { opacity: 0.05; }

/* Soft cursor-reactive glow (brief: "курсор ощущается живым") — a radial
   highlight positioned by --gx/--gy, written by app.js's rAF-throttled
   pointermove handler (hover-capable pointers only, skipped entirely
   under prefers-reduced-motion — see wireModeGateSplit). Pure opacity/
   background, no layout impact, cheap to composite. */
.mode-gate-side__glow {
	position: absolute;
	inset: -20%;
	background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 35%), rgba(255, 255, 255, 0.4), transparent 60%);
	opacity: 0;
	transition: opacity 320ms var(--ease-standard);
	pointer-events: none;
}
.mode-gate-side:hover .mode-gate-side__glow, .mode-gate-side:focus-visible .mode-gate-side__glow { opacity: 1; }
[data-theme="dark"] .mode-gate-side__glow { background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 35%), rgba(255, 255, 255, 0.14), transparent 60%); }

.mode-gate-side__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 360px;
	transform: translateY(0) scale(1);
	transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-gate-side:hover .mode-gate-side__content, .mode-gate-side:focus-visible .mode-gate-side__content { transform: translateY(-6px) scale(1); }
.mode-gate-split:hover .mode-gate-side:not(:hover) .mode-gate-side__content { transform: translateY(0) scale(0.97); }

.mode-gate-side__kicker {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--steel-500);
}
.mode-gate-side__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	line-height: var(--lh-tight);
	color: var(--ink-900);
}
@media (max-width: 767px) {
	.mode-gate-side__title { font-size: var(--fs-xl); }
}
.mode-gate-side__lede { font-size: var(--fs-sm); color: var(--steel-500); max-width: 40ch; }

/* Density split (replaces the old colour split — brief: "retail: больше
   воздуха; wholesale: больше grid/структуры"). Retail keeps the base
   padding/spacing above; wholesale tightens it and adds a small technical
   spec grid, reading as more information-dense/structured at a glance. */
.mode-gate-side--wholesale { padding: 32px 40px; }
@media (max-width: 767px) {
	.mode-gate-side--wholesale { padding: 28px; }
}
.mode-gate-side__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 4px;
	border: var(--border-hairline);
	background: var(--concrete-line);
}
.mode-gate-side__spec {
	background: var(--paper);
	padding: 8px 10px;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: 0.01em;
	color: var(--ink-700);
}
.mode-gate-side__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--ink-900);
	opacity: 0.7;
	transition: opacity 300ms var(--ease-standard), transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-gate-side__cta svg { width: 12px; height: 12px; transform: rotate(0deg); }
.mode-gate-side:hover .mode-gate-side__cta, .mode-gate-side:focus-visible .mode-gate-side__cta { opacity: 1; transform: translateX(4px); }

.mode-gate-side.is-selected { z-index: 1; }
.mode-gate-side.is-selected::before { opacity: 0.2; }

/* Full-bleed reveal panel (see js/app.js's playModeGateTransition) — a
   plain positioned layer; Motion drives its opacity/transform at
   selection time, this file only sets its resting (invisible) state so
   nothing shows before JS ever touches it, and so a failed Motion load
   still leaves a harmless, fully transparent layer behind. */
@media (prefers-reduced-motion: reduce) {
	.mode-gate-side, .mode-gate-side::before, .mode-gate-side__glow, .mode-gate-side__content, .mode-gate-side__cta {
		transition-duration: 1ms;
	}
	.mode-gate-split:hover .mode-gate-side:hover,
	.mode-gate-split:hover .mode-gate-side:not(:hover) {
		flex-grow: 1;
	}
}

.pdp-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 1024px) {
	.pdp-layout { grid-template-columns: 5fr 7fr; align-items: start; }
}

.cart-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 24px;
}
.cart-page-head h1 { margin: 0; }

.cart-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}
@media (min-width: 1024px) {
	.cart-layout { grid-template-columns: 1fr 340px; }
}

.cart-lines { display: flex; flex-direction: column; }

.cart-line {
	display: grid;
	grid-template-columns: 72px 1fr auto auto auto;
	gap: 16px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--concrete-line);
}
@media (max-width: 639px) {
	/* Remove button sits in its own column next to the title (it used to be
	   absolutely positioned 40px left of the line, i.e. off the screen). */
	.cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "media body remove" "media qty qty" "media price price"; row-gap: 8px; column-gap: 12px; align-items: start; }
	.cart-line .cart-line__media { grid-area: media; width: 64px; height: 64px; }
	.cart-line .cart-line__body { grid-area: body; }
	.cart-line .qty-stepper { grid-area: qty; justify-self: start; }
	.cart-line .cart-line__price { grid-area: price; }
	.cart-line > button { grid-area: remove; }
}

.cart-line__media { display: block; width: 72px; height: 72px; background: var(--concrete-100); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line__title { font-size: 14px; font-weight: 600; }
.cart-line__price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

.cart-summary {
	border: 1px solid var(--concrete-line);
	border-radius: var(--radius-sm);
	padding: 24px;
	position: sticky;
	top: 96px;
}
.cart-summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--concrete-line); }
.cart-summary__row:last-of-type { border-bottom: 0; }
.cart-summary__row--total { font-weight: 700; font-size: 18px; font-family: var(--font-mono); padding-top: 16px; }
.cart-summary .btn { margin-top: 16px; }

/* Wholesale request item list (views/wholesale-request.js) — same visual
   language as .cart-line (media size, borders, spacing) but its own class
   since it deliberately never has a price column or qty-stepper. */
.wholesale-lines { display: flex; flex-direction: column; }
.wholesale-line {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--concrete-line);
}
.wholesale-line__media { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--concrete-100); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); flex-shrink: 0; color: var(--concrete-300); }
.wholesale-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.wholesale-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wholesale-line__title { font-size: 14px; font-weight: 600; }
.wholesale-line__sku { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.wholesale-line__qty { font-size: 14px; color: var(--ink-700); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 479px) {
	.wholesale-line { flex-wrap: wrap; }
	.wholesale-line__qty { width: 100%; padding-left: 80px; }
}

.checkout-form { display: flex; flex-direction: column; }
.checkout-form h3:first-child { margin-top: 0 !important; }

.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; background: var(--paper); font-weight: 600; }
.compare-table th { vertical-align: top; }

@media (max-width: 767px) {
	.pdp-layout, .cart-layout { gap: 24px; }
	.cart-summary { position: static; }
}

/* Delivery calculator block — embedded in the cart page (see views/cart.js
   / components/delivery-widget.js), reusing .cart-summary's card look
   rather than introducing a separate page. */
.delivery-block {
	border: 1px solid var(--concrete-line);
	border-radius: var(--radius-sm);
	padding: 24px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.delivery-block__title { font-size: var(--fs-lg); margin: 0; }

.delivery-field { display: flex; flex-direction: column; gap: 6px; }
.delivery-field label { font-size: 13px; font-weight: 600; color: var(--steel-500); }
.delivery-field__row { display: flex; gap: 8px; }
.delivery-field__row .input { flex: 1; }
.delivery-field__static { font-size: 14px; color: var(--ink-900); }
.delivery-field__hint { font-size: 12px; color: var(--steel-500); }

.delivery-note { font-size: 12px; color: var(--steel-500); margin: 0; }
.delivery-note--error { color: var(--signal-600); }

.delivery-quotes { display: flex; flex-direction: column; gap: 8px; }
.delivery-quote {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--concrete-line);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 13px;
	cursor: pointer;
}
.delivery-quote.is-selected { border-color: var(--ink-900); }
.delivery-quote__name { flex: 1; }
.delivery-quote__term { color: var(--steel-500); font-family: var(--font-mono); font-size: 12px; }
.delivery-quote__price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

.delivery-totals { border-top: 1px solid var(--concrete-line); padding-top: 12px; display: flex; flex-direction: column; }
.delivery-totals__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.delivery-totals__row--total { font-weight: 700; font-size: 18px; font-family: var(--font-mono); }

/* Persistent retail/wholesale switcher (chrome.js) — base rules are the
   normal theme-reactive tokens (same ones .btn-icon uses outside the
   header), so this control also works unmodified inside the mobile nav
   drawer, which is a normal light/dark surface, not the header's own
   permanently-dark chrome. */
.mode-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--control-size);
	border: 1px solid var(--concrete-300);
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}
/* Real sliding indicator (brief section 6) — one element, positioned/sized
   by app.js's positionModeSwitchThumb via Motion (spring x/width), instead
   of each option just flipping its own background. Sits behind the option
   text (z-index) so the label always stays legible while the thumb moves
   underneath it. */
.mode-switch__thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background: var(--signal-500);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}
.mode-switch__option {
	position: relative;
	z-index: 1;
	appearance: none;
	border: 0;
	background: transparent;
	height: 100%;
	padding: 0 var(--sp-4);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--steel-500);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.mode-switch__option + .mode-switch__option { border-left: 1px solid var(--concrete-300); }
.mode-switch__option:hover:not(.is-active) { color: var(--ink-900); transform: translateY(-1px); }
.mode-switch__option:active { transform: translateY(0) scale(0.96); }
.mode-switch__option.is-active { color: #fff; }
.mode-switch__option:focus-visible { outline: 2px solid var(--signal-500); outline-offset: -2px; }

/* Inside the header specifically, mirror the same fixed white-on-dark
   treatment already used for .site-header .btn-icon — the header background
   never follows the site's light/dark theme, so this control can't use the
   theme-reactive tokens above there either. */
.site-header .mode-switch { border-color: rgba(255, 255, 255, 0.3); }
.site-header .mode-switch__option { color: rgba(255, 255, 255, 0.75); }
.site-header .mode-switch__option + .mode-switch__option { border-left-color: rgba(255, 255, 255, 0.3); }
.site-header .mode-switch__option:hover:not(.is-active) { color: #fff; }
.site-header .mode-switch__option.is-active { color: #fff; }
.site-header .mode-switch__option:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.mode-switch__option { transition-duration: 1ms; }
}

/* Measured (getBoundingClientRect on the real header, not a guess): with
   .main-nav and .wholesale-plate already both hidden below 1024px (see
   design-system.css), the action-icon row alone needs ~444px once this
   control is added, and the full header row (logo + padding + icons) comes
   out to ~618px minimum — well past the ~480px breakpoint compare/
   favorites already hide at, so this can't reuse that same breakpoint
   without overflowing every width from 480px up to 1024px. Mirrors
   .site-header__cta's own exact breakpoint instead (hidden by default,
   shown only at >=1024px) — reachable one tap away via the mobile nav
   drawer below that (.mobile-nav__mode below), same as the CTA plate. */
.site-header .mode-switch { display: none; }
@media (min-width: 1024px) {
	.site-header .mode-switch { display: inline-flex; }
}

.mobile-nav__mode { margin-top: var(--sp-5); }
.mobile-nav__mode .mode-switch { width: 100%; height: var(--control-size); }
.mobile-nav__mode .mode-switch__option { flex: 1; font-size: var(--fs-xs); }

/* Mode-switch confirmation dialog (chrome-level, see index.html) — the only
   modal in this project; --shadow-modal/--z-modal already existed as
   design tokens with nothing built on them (the old quick-view modal was
   removed, see app.js's HOTFIX 2 note), so this is the first thing to
   actually use them. Reuses the same open/close mechanics as every other
   [data-panel] (closeAllPanels/Escape/outside-click, see app.js) even
   though it's opened programmatically rather than from a data-toggle. */
.confirm-dialog {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms var(--ease-standard), visibility 0s linear 200ms;
}
.confirm-dialog.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 200ms var(--ease-standard);
}
.confirm-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 24, 26, 0.5);
}
.confirm-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--paper);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-modal);
	padding: var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	transform: scale(0.96) translateY(10px);
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.confirm-dialog.is-open .confirm-dialog__panel {
	transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.confirm-dialog, .confirm-dialog__panel { transition-duration: 1ms; }
}
.confirm-dialog__panel h2 { font-size: var(--fs-lg); margin: 0; }
.confirm-dialog__panel p { color: var(--steel-500); font-size: var(--fs-sm); margin: 0; }
.confirm-dialog__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.confirm-dialog__actions .btn { flex: 1; }

/* ---------------------------------------------------------------------
   Page-transition carrier (js/motion/page-transitions.js — Home→Catalog).
   A single full-viewport-sized element, clipped down to the hero__stage
   panel's own on-screen rect at creation time and animated open via
   clip-path only (transform/opacity/clip-path — no layout-triggering
   width/height animation). Its background is read from the *live*
   --mode-accent-surface at the moment of click (getComputedStyle in JS,
   not a literal here) — the site's one fixed pinned-dark graphite, same
   in both customer modes now (see design-system.css's reverted mode
   block). Created/removed entirely by JS; only ever exists while
   !prefers-reduced-motion && Motion is available (see page-transitions.js's
   own guard), so no reduced-motion override is needed here — the JS
   never creates it in that case.
   --------------------------------------------------------------------- */
.page-transition-carrier {
	position: fixed;
	inset: 0;
	z-index: 500;
	pointer-events: none;
	will-change: clip-path;
}
/* The single arc()-driven flourish (brief section 8 — "1-2 key elements,
   not everything"): a small dot tracing a curved path from the clicked
   CTA to the hero__stage panel, reinforcing that the panel's expansion
   is a direct consequence of that click. */
.page-transition-spark {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--mode-accent-surface-strong);
	z-index: 501;
	pointer-events: none;
}


/* -----------------------------------------------------------------------
   Dark theme — graphite surface detail. ONE shared, fixed layer for the
   whole site: fine grain + soft density variation, blended (overlay: mid-
   grey = no-op) over page surfaces so it reads as their material.
   pointer-events: none — never intercepts clicks; position: fixed — never
   affects layout.
   ----------------------------------------------------------------------- */
/* The root needs its own paint: without it the overlay-blended grain has
   no backdrop far down long pages and renders as a grey haze. */
:root[data-theme="dark"] { background: var(--concrete-100); }
[data-theme="dark"] body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
	background:
		radial-gradient(1100px 760px at 16% 10%, rgba(255, 255, 255, 0.16), transparent 70%),
		radial-gradient(1000px 800px at 88% 92%, rgba(0, 0, 0, 0.24), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	opacity: 0.32;
}

/* Brand accent (--signal-500) = the important action. Two weights:
   .hero__cta — primary; .pdp-back — secondary navigation. */

/* PDP "← Вернуться в каталог" — sits in the same padding-less container as
   .pdp-layout, so its left edge lines up with the gallery. */
.pdp-back {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1;
	color: var(--signal-500);
	text-decoration: none;
	transition: opacity 180ms var(--ease-standard);
}
.pdp-back__arrow { flex: none; width: 22px; height: 22px; transition: transform 200ms var(--ease-standard); }
.pdp-back:hover { opacity: 0.85; }
.pdp-back:hover .pdp-back__arrow { transform: translateX(-5px); }
.pdp-back:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Home hero primary action — spans the intro column like the product-line
   rows below it (label left, marker right), so it reads as the head of that
   list rather than a floating button. */
.hero__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
	height: 64px;
	padding: 0 var(--sp-5) 0 var(--sp-6);
	border-radius: var(--radius-sm);
	background: var(--signal-500);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 180ms var(--ease-standard);
}
.hero__cta__arrow { flex: none; width: 24px; height: 24px; transition: transform 200ms var(--ease-standard); }
.hero__cta:hover { background: var(--signal-600); }
.hero__cta:hover .hero__cta__arrow { transform: translateX(5px); }
.hero__cta:active { background: var(--signal-700); }
.hero__cta:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 3px; }

/* Mode-choice screen (#/choose-mode): header = logo + theme toggle, footer =
   brand text + contacts only. Toggled in app.js afterRender(); the normal
   header/footer return on the next route. */
[data-mode-gate] .site-header .main-nav,
[data-mode-gate] .site-header__actions > :not([data-role="theme-toggle"]),
[data-mode-gate] .site-footer__col--nav,
[data-mode-gate] .site-footer__shop-link { display: none; }
@media (min-width: 768px) {
	[data-mode-gate] .site-footer__col--contacts { grid-column: -2 / -1; }
}

/* Home "Официальные дилеры" — 6 brand packshots, 3×2 on desktop. The stage
   is a fixed white product surface (the source JPGs are shot on white);
   each <img> carries its own left/top/width from home.js so every product
   occupies the same area of the stage. */
#brands .section-shell__head h2 { max-width: none; }
.brands__lede { margin: var(--sp-2) 0 0; color: var(--steel-500); font-size: var(--fs-sm); }
.brands__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}
@media (min-width: 600px) { .brands__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .brands__grid { grid-template-columns: repeat(3, 1fr); } }
.brand-tile {
	display: flex;
	flex-direction: column;
	border: var(--border-hairline);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--ink-900);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--dur-fast) var(--ease-standard);
}
.brand-tile__stage {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
}
.brand-tile__stage img {
	position: absolute;
	height: auto;
	max-width: none;
	mix-blend-mode: multiply; /* melts the photos' near-white backgrounds into the stage */
	transition: transform 320ms var(--ease-standard);
}
.brand-tile__name {
	padding: var(--sp-4) var(--sp-5);
	border-top: var(--border-hairline);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}
.brand-tile:hover { border-color: var(--ink-900); }
.brand-tile:hover .brand-tile__stage img { transform: scale(1.03); }
.brand-tile:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 3px; }

/* Mode-choice cards — line-art scene per mode (img/modes/retail.png,
   wholesale.png: the source drawings cropped to their exact bounds, lines
   as alpha). Used as a mask so the line colour is a theme token: graphite
   in light, soft silver in dark. Both cards share one box and ONE scale
   (the box is the wholesale drawing's proportions; retail is 92.3% of its
   width at that scale), so line weight is identical; both stand on the
   same bottom line as the text, on the card's right side. */
.mode-gate-side__art {
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: clamp(240px, calc(100% - 500px), 460px); /* never reaches the 360px text column */
	aspect-ratio: 951 / 529;
	background-color: var(--ink-700);
	opacity: 0.85;
	-webkit-mask: var(--art) right bottom / var(--art-w) auto no-repeat;
	mask: var(--art) right bottom / var(--art-w) auto no-repeat;
	pointer-events: none;
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 380ms var(--ease-standard);
}
.mode-gate-side--retail .mode-gate-side__art { --art: url("../img/modes/retail.png"); --art-w: 92.3%; }
.mode-gate-side--wholesale .mode-gate-side__art { --art: url("../img/modes/wholesale.png"); --art-w: 100%; }
[data-theme="dark"] .mode-gate-side__art { background-color: #B4B6B8; opacity: 0.7; }
.mode-gate-side:hover .mode-gate-side__art, .mode-gate-side:focus-visible .mode-gate-side__art { opacity: 1; }
[data-theme="dark"] .mode-gate-side:hover .mode-gate-side__art { opacity: 0.9; }
/* Narrower cards: smaller, top-right, above the text block. */
@media (max-width: 1399px) {
	.mode-gate-side__art { top: 32px; bottom: auto; right: 32px; width: 200px; }
	.mode-gate-side__art { -webkit-mask-position: right top; mask-position: right top; }
}
@media (max-width: 599px) {
	.mode-gate-side__art { display: none; }
}

/* Static content pages (js/views/static.js) — readable measure, hairline-
   ruled sections, square list markers; existing tokens only. */
.page-prose { max-width: 760px; }
.page-prose p { max-width: 68ch; margin: 0 0 var(--sp-4); color: var(--ink-700); }
.page-prose strong { color: var(--ink-900); font-weight: 600; }
.page-prose .page-prose__lede { margin-bottom: var(--sp-6); font-size: var(--fs-md); color: var(--ink-900); }
.page-prose__section { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: var(--border-hairline); }
.page-prose h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); }
.page-prose h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.page-prose__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; max-width: 68ch; }
.page-prose__list li { position: relative; margin-bottom: var(--sp-2); padding-left: var(--sp-5); color: var(--ink-700); }
.page-prose__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--steel-400); }
.page-prose__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.page-prose__tags span { padding: var(--sp-2) var(--sp-3); border: var(--border-hairline); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.page-prose__features { display: grid; grid-template-columns: 1fr; column-gap: var(--sp-8); margin: 0; }
@media (min-width: 768px) { .page-prose__features { grid-template-columns: 1fr 1fr; } }
.page-prose__features > div { padding: var(--sp-4) 0 var(--sp-5); border-bottom: var(--border-hairline); }
.page-prose__features dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); }
.page-prose__features dd { margin: var(--sp-2) 0 0; color: var(--ink-700); }
.page-prose__groups { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; }
@media (min-width: 768px) { .page-prose__groups { grid-template-columns: 1fr 1fr; } }
.page-prose__group { padding: var(--sp-5); border: var(--border-hairline); border-radius: var(--radius-sm); background: var(--paper); }
.page-prose__group .page-prose__list { margin-bottom: 0; }
.page-prose .page-prose__note { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--ink-900); background: var(--paper); color: var(--ink-900); }
.page-prose .page-prose__outro { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: var(--border-strong); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-heading); color: var(--ink-900); }
/* Static page heading: scales down on phones so a one-word title
   («Маслотехсервис») never overflows; 46px on desktop as before. */
.page-title { font-size: clamp(var(--fs-2xl), 9vw, var(--fs-3xl)); }

/* Home — «Масла и технические жидкости для бизнеса». One editorial band on
   the theme's own surface (--paper): asymmetric head (eyebrow + large title
   | lede, audience line, action), then business terms as numbered rows
   ruled by hairlines. No cards; the accent is the eyebrow rule + button. */
.biz-band {
	background: var(--paper);
	border-top: var(--border-hairline);
	border-bottom: var(--border-hairline);
}
.biz-band__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: end;
}
@media (min-width: 1024px) {
	.biz-band__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-16); }
}
.biz-band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--steel-500);
}
.biz-band__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--signal-500); }
.biz-band__title {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
}
.biz-band__lede { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--ink-700); max-width: 46ch; }
.biz-band__audience {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 1.8;
	color: var(--steel-500);
}
.biz-band__terms {
	list-style: none;
	margin: var(--sp-12) 0 0;
	padding: 0;
	border-top: var(--border-strong);
}
.biz-band__term {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: var(--sp-4);
	row-gap: var(--sp-2);
	padding: var(--sp-5) 0;
	border-bottom: var(--border-hairline);
}
@media (min-width: 768px) {
	.biz-band__term { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-8); padding: var(--sp-6) 0; align-items: baseline; }
}
.biz-band__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--steel-500); }
.biz-band__term-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-heading); color: var(--ink-900); }
.biz-band__term-text { grid-column: 2; color: var(--ink-700); max-width: 56ch; }
@media (min-width: 768px) { .biz-band__term-text { grid-column: 3; } }
/* Desktop: rows share the head grid (7fr | 5fr), so every description starts
   on the same vertical line as the lede above. */
@media (min-width: 1024px) {
	.biz-band__term { grid-template-columns: 64px minmax(0, 7fr) minmax(0, 5fr); column-gap: 0; }
	.biz-band__term-title { padding-right: var(--sp-16); }
}
@media (max-width: 767px) {
	/* .section-shell zeroes the container side padding; keep text off the screen edge on phones. */
	.biz-band > .section-shell { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
}

/* «Основные направления» (home.js) — a ruled catalogue index in the same
   language as .biz-band__terms: strong rule on top, hairlines between rows,
   mono number, large display name, one quiet description line, mono count,
   arrow. The whole row is the link; hover only recolours (title + arrow) and
   nudges the arrow — no cards, no images, no motion beyond that.
   Phones: one column. ≥900px: two columns of rows. */
.directions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--border-strong);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.directions .section-shell__head h2 { max-width: none; }
.directions__item { border-bottom: var(--border-hairline); }
.directions__link {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 20px;
	column-gap: var(--sp-4);
	align-items: start;
	height: 100%;
	padding: var(--sp-5) 0;
	color: inherit;
	text-decoration: none;
}
.directions__num {
	padding-top: 6px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--steel-500);
}
.directions__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.directions__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lg);
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	color: var(--ink-900);
	text-wrap: balance;
	transition: color var(--dur-fast) var(--ease-standard);
}
.directions__note {
	max-width: 52ch;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ink-700);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.directions__count {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.02em;
	color: var(--steel-500);
}
.directions__arrow {
	margin-top: 4px;
	color: var(--ink-900);
	transition: transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.directions__link:hover .directions__title,
.directions__link:hover .directions__arrow { color: var(--signal-500); }
.directions__link:hover .directions__arrow { transform: translateX(4px); }
.directions__link:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
@media (min-width: 900px) {
	.directions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-12); }
	.directions__link { grid-template-columns: 48px minmax(0, 1fr) 24px; padding: var(--sp-6) 0; }
	.directions__num { padding-top: 9px; font-size: var(--fs-sm); }
	.directions__title { font-size: var(--fs-xl); }
	.directions__arrow { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.directions__link:hover .directions__arrow { transform: none; }
}

/* Delivery — carriers as one ruled editorial list. Every logo sits in the
   same 96×44 slot, centred both ways; its height (inline, from content.js)
   gives each mark roughly equal visual AREA, so wide and compact marks read
   at one scale. Proportions kept (width auto, contain), nothing cropped.
   Phones: rows, slot left + name on one line. ≥768px: four equal columns,
   slot and name on one centred axis, hairlines between columns. */
.carriers { list-style: none; margin: 0 0 var(--sp-5); padding: 0; border-top: var(--border-hairline); }
.carriers__item { border-bottom: var(--border-hairline); }
/* The whole item is the link. Phones: slot left + name on one line; the link
   bleeds 8px sideways so its hover tone has air while the content keeps its
   alignment with the text above. */
.carriers__link { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; margin: 0 calc(var(--sp-2) * -1); padding: var(--sp-3) var(--sp-2); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard); }
.carriers__logo { display: flex; align-items: center; justify-content: center; width: 96px; height: 44px; }
.carriers__logo img { display: block; width: auto; max-width: 88px; max-height: 38px; object-fit: contain; }
.carriers__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); }
@media (min-width: 768px) {
	.carriers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--border-hairline); }
	.carriers__item { border-bottom: 0; border-left: var(--border-hairline); }
	.carriers__link { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); height: 100%; margin: 0; padding: var(--sp-5) var(--sp-2); text-align: center; }
	.carriers__item:first-child { border-left: 0; }
	.carriers__name { font-size: var(--fs-base); }
}
/* Dark theme: some marks carry dark lettering (Байкал-Сервис, DPD, Деловые
   Линии) — the same small neutral slot for every logo keeps them readable
   in their original colours, no filters. */
[data-theme="dark"] .carriers__logo { border-radius: var(--radius-sm); background: #EFEEEA; }
/* Whole carrier item = link to the official site: quiet hover (item tone +
   slightly softer name, no scaling/motion), clear keyboard focus. */
.carriers__link:hover { background: var(--concrete-200); }
.carriers__link:hover .carriers__name { color: var(--ink-700); }
.carriers__link:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -2px; }

/* Theme toggle: no frame and no swatch of its own — sun + moon glyphs sit
   directly on the dark header. The active theme's glyph is white, the other
   one muted; hover brightens both. Same 44px control height as the others;
   keyboard focus keeps a clear white outline. */
.site-header .btn-icon.theme-toggle,
.site-header .btn-icon.theme-toggle:hover,
.site-header .btn-icon.theme-toggle:active {
	width: auto;
	min-width: var(--control-size);
	gap: 4px;
	padding: 0 6px;
	background: transparent;
	border-color: transparent;
	color: #fff;
	transform: none;
}
.theme-toggle__glyph { display: inline-flex; opacity: 0.4; transition: opacity var(--dur-fast) var(--ease-standard); }
.theme-toggle[aria-pressed="false"] .theme-toggle__sun,
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { opacity: 1; }
.site-header .theme-toggle:hover .theme-toggle__glyph { opacity: 1; }
.site-header .btn-icon.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Phones: the toggle keeps the standard 44px slot so the header row (with the
   cabinet icon of a logged-in wholesale customer) still fits 390px. */
@media (max-width: 479px) {
	.site-header .btn-icon.theme-toggle,
	.site-header .btn-icon.theme-toggle:hover,
	.site-header .btn-icon.theme-toggle:active { width: var(--control-size); min-width: 0; padding: 0; gap: 0; }
	.theme-toggle__glyph svg { width: 16px; height: 16px; }
}

/* Header row fit (measured). ≤399px phones: tighten the gaps only; control
   and logo sizes unchanged. */
@media (max-width: 399px) {
	.site-header__row { gap: var(--sp-3); }
	.site-header__actions { gap: var(--sp-1); }
}

/* Catalog from the API: the previous page stays, dimmed, until the next
   view's data arrives (router.js toggles .is-loading on #view). */
#view { transition: opacity .15s ease; }
#view.is-loading { opacity: .55; pointer-events: none; }
#view.is-loading::before {
	content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
	background: var(--signal-500); transform-origin: left; animation: view-loading-bar 1.2s ease-in-out infinite;
}
@keyframes view-loading-bar { 0% { transform: scaleX(0); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #view.is-loading::before { animation: none; } }

/* PDP gallery thumbnails (1C sends several pictures for some products). */
.pdp-thumb {
	width: 64px; height: 64px; padding: 4px; cursor: pointer;
	background: var(--concrete-100); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb.is-active { border-color: var(--ink-900); }

/* Category links in the filter panel are plain links, not checkboxes. */
a.filter-option { text-decoration: none; color: inherit; }
a.filter-option:hover span:first-child { text-decoration: underline; }

/* Side gutters: .listing-head/.listing-layout/.section-shell/.listing-empty
   and the views' inline "padding: N 0" shorthands zeroed the .container
   side padding, so on phones text/cards touched the screen edge and on
   desktop the content didn't line up with the header logo. Keep the
   container gutter (same tokens as the header) for every page container. */
#view .container, .site-footer .container { padding-left: var(--container-pad-mobile) !important; padding-right: var(--container-pad-mobile) !important; }
#view .container .container, .site-footer .container .container { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 1024px) {
	#view .container, .site-footer .container { padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important; }
}

/* Closed search panel: it was only transparent (opacity 0, pointer-events
   none), so its suggestion cards stayed focusable/readable by keyboard and
   screen readers. visibility switches off after the close transition. */
.search-panel { visibility: hidden; transition: max-height var(--dur-slow) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-slow); }
.search-panel.is-open { visibility: visible; transition-delay: 0s; }

/* Per-litre products (розлив): unit next to the price on cards. */
.product-card__price-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.product-card__price-unit { font-size: 13px; color: var(--steel-500); white-space: nowrap; }

/* PDP: key facts under the price. */
.pdp-keyspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--concrete-line); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); overflow: hidden; }
.pdp-keyspecs > div { background: var(--paper); padding: 10px 12px; min-width: 0; }
.pdp-keyspecs dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 2px; }
.pdp-keyspecs dd { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink-900); overflow-wrap: anywhere; }

/* PDP: long 1C description folded behind "Читать полностью". */
.pdp-desc p { max-width: 70ch; color: var(--ink-700); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.pdp-desc.is-folded { position: relative; max-height: 15em; overflow: hidden; }
.pdp-desc.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5em; background: linear-gradient(to bottom, transparent, var(--concrete-100)); pointer-events: none; }
.pdp-desc__toggle { margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Home category grid: the number of 1C groups varies, so a last row with a
   single tile would leave a lonely card. Tiles 1-2 are --lg (2x2 on the
   4-column desktop grid); the incomplete last row of small tiles stretches. */
@media (min-width: 768px) {
	.category-grid > .category-card:not(.category-card--lg):last-child:nth-child(4n+3) { grid-column: span 4; }
	.category-grid > .category-card:not(.category-card--lg):nth-last-child(2):nth-child(4n+3),
	.category-grid > .category-card:not(.category-card--lg):last-child:nth-child(4n+4) { grid-column: span 2; }
	.category-grid > .category-card:not(.category-card--lg):last-child:nth-child(4n+5) { grid-column: span 2; }
}
@media (max-width: 767px) {
	.category-grid > .category-card:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Header live search: compact result rows (thumbnail, brand, title, price). */
.search-panel__results { grid-template-columns: 1fr; gap: 0; max-height: 360px; overflow-y: auto; }
@media (min-width: 768px) { .search-panel__results { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
.search-suggest { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--concrete-line); color: var(--ink-900); text-decoration: none; min-width: 0; }
.search-suggest:hover .search-suggest__title, .search-suggest:focus-visible .search-suggest__title { text-decoration: underline; }
.search-suggest__media { flex: 0 0 48px; width: 48px; height: 48px; background: var(--paper); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.search-suggest__media img { width: 100%; height: 100%; object-fit: contain; }
.search-suggest__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggest__brand { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-500); }
.search-suggest__title { color: var(--ink-900); font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-suggest__price { color: var(--ink-900); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.search-suggest__all { grid-column: 1 / -1; display: inline-block; margin-top: 12px; font-size: 14px; }

/* Checkout: order summary (item / qty × price / sum), errors, success. */
.checkout-summary__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); padding-bottom: 6px; border-bottom: 1px solid var(--concrete-line); }
.checkout-summary__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--concrete-line); }
.checkout-summary__name { grid-column: 1 / -1; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.checkout-summary__calc { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); margin-top: 2px; }
.checkout-summary__sum { font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; align-self: end; }
.checkout-error { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--signal-500); border-left-width: 4px; background: var(--paper); color: var(--ink-900); font-size: 14px; line-height: 1.5; }
.btn.is-loading { opacity: .75; cursor: progress; }
.btn.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation: none; } }
.checkout-success__number { font-size: 18px; margin: -8px 0 8px; }
.checkout-success__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 8px auto 8px; max-width: 560px; width: 100%; background: var(--concrete-line); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); overflow: hidden; }
.checkout-success__facts > div { background: var(--paper); padding: 12px; }
.checkout-success__facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 4px; }
.checkout-success__facts dd { margin: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
@media (max-width: 479px) { .checkout-success__facts { grid-template-columns: 1fr; } }
/* Single-column checkout (phones/tablets): the order summary with the total
   comes before the form, so the buyer sees what they pay before submitting. */
@media (max-width: 1023px) {
	.cart-layout > .checkout-summary { order: -1; }
}

/* =====================================================================
   Checkout with Business Lines delivery (views/checkout.js, .co-*)
   ===================================================================== */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1024px) {
	.co-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
	.co-summary { position: sticky; top: 96px; }
}
.co-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.co-step { background: var(--paper); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); padding: 20px; }
@media (min-width: 768px) { .co-step { padding: 28px; } }
.co-step__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.co-step__num { flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; background: var(--ink-900); color: var(--paper); border-radius: 2px; }
.co-step__title { font-size: 20px; line-height: 32px; }
.co-step__hint { margin-top: 2px; font-size: 13px; color: var(--steel-500); }
.co-req { color: var(--signal-500); }
.co-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .co-grid { grid-template-columns: 1fr 1fr; } .co-grid__wide { grid-column: 1 / -1; } }
.co-form .input { min-height: 48px; font-size: 16px; } /* 16px: no iOS zoom on focus */

/* Receiving choice + delivery options: selectable cards */
.co-choices { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .co-choices { grid-template-columns: 1fr 1fr; } }
.co-choice, .co-option { position: relative; display: block; border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease; }
.co-choice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; cursor: pointer; min-height: 72px; }
.co-choice:hover, .co-option:hover { border-color: var(--steel-500); }
.co-choice.is-selected, .co-option.is-selected { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.co-choice input, .co-option__head input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--signal-500); flex: 0 0 auto; }
.co-choice input:focus-visible, .co-option__head input:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.co-choice__body, .co-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.co-choice__title, .co-option__title { font-weight: 700; font-size: 16px; color: var(--ink-900); }
.co-choice__sub, .co-option__sub { font-size: 13px; color: var(--steel-500); line-height: 1.4; }
.co-choice__meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--steel-500); white-space: nowrap; }

.co-options { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.co-option__head { display: flex; gap: 12px; align-items: flex-start; padding: 16px; cursor: pointer; }
.co-option__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-500); }
.co-option__price-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 120px; }
.co-option__price { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink-900); white-space: nowrap; line-height: 1.1; }
.co-option__price--muted { font-size: 16px; color: var(--steel-500); }
.co-option__term { font-size: 13px; color: var(--steel-500); white-space: nowrap; }
.co-option__wait { font-size: 13px; color: var(--steel-500); }
.co-option__err { font-size: 13px; color: var(--signal-600); max-width: 220px; line-height: 1.4; }
.co-option.is-unavailable .co-option__title { color: var(--steel-500); }
.co-option__details { padding: 0 16px; }
.co-option:not(.is-selected) .co-option__details { display: none; }
.co-option.is-selected .co-option__details { padding-bottom: 4px; }
.co-option__field { margin-bottom: 12px; }
.co-select { width: 100%; text-overflow: ellipsis; }
.co-option__resolved, .co-option__warn { padding: 0 16px 14px; font-size: 13px; line-height: 1.4; }
.co-option__resolved { color: var(--steel-500); }
.co-option__warn { color: var(--signal-600); }
[data-role^="extra-"]:empty { display: none; }
.co-address { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.co-address__street { grid-column: 1 / -1; }
@media (min-width: 640px) { .co-address { grid-template-columns: 2fr 1fr 1fr; } .co-address__street { grid-column: 1 / -1; } }
@media (max-width: 479px) { .co-option__head { flex-wrap: wrap; } .co-option__price-box { flex-basis: 100%; align-items: flex-start; text-align: left; padding-left: 30px; min-width: 0; } }

/* Loading / errors */
.co-status { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 14px; }
.co-status--loading { color: var(--steel-500); }
.co-status--error { color: var(--signal-600); border-left: 3px solid var(--signal-500); padding-left: 10px; }
.co-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
.co-skel { display: block; border-radius: 2px; background: linear-gradient(90deg, var(--concrete-100) 25%, var(--concrete-line) 50%, var(--concrete-100) 75%); background-size: 200% 100%; animation: co-skel 1.2s ease-in-out infinite; }
.co-skel--price { width: 96px; height: 24px; }
.co-skel--term { width: 72px; height: 12px; }
@keyframes co-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .co-skel, .co-spinner { animation: none; } }

/* Autocomplete */
.co-form .field { position: relative; }
.co-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 2px; background: var(--paper); border: 1px solid var(--ink-900); border-radius: var(--radius-sm); box-shadow: var(--shadow-dropdown); max-height: 280px; overflow-y: auto; }
.co-suggest__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; min-height: 48px; background: none; border: 0; border-bottom: 1px solid var(--concrete-line); text-align: left; cursor: pointer; font: inherit; color: var(--ink-900); }
.co-suggest__item:last-child { border-bottom: 0; }
.co-suggest__item:hover, .co-suggest__item:focus-visible { background: var(--concrete-100); outline: none; }
.co-suggest__main { font-weight: 600; font-size: 15px; }
.co-suggest__sub { font-size: 12px; color: var(--steel-500); }

/* Payment + summary */
.co-pay-note { padding: 12px 14px; background: var(--concrete-100); border-left: 3px solid var(--ink-900); font-size: 14px; }
.co-invoice { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; cursor: pointer; }
.co-invoice input { width: 18px; height: 18px; accent-color: var(--signal-500); }
.co-sum-note { display: block; font-size: 12px; color: var(--steel-500); font-weight: 400; }
.co-sum-muted { color: var(--steel-500); }
.co-sum-hint { margin-top: 10px; font-size: 13px; color: var(--steel-500); line-height: 1.4; }
.co-submit { margin-top: 16px; min-height: 56px; font-size: 16px; }

/* Cart: delivery note instead of an estimate */
.cart-delivery-note { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed var(--concrete-line); border-radius: var(--radius-sm); font-size: 14px; color: var(--steel-500); }
.cart-delivery-note strong { color: var(--ink-900); }

/* =====================================================================
   Product card (views/product.js, .pdp-*): gallery | buy box, then
   «О товаре» + «Основные характеристики», then extra info if any.
   ===================================================================== */
.pdp-gallery { position: relative; background: var(--paper); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
.pdp-gallery img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-gallery__empty { width: 120px; height: 120px; color: var(--concrete-300); }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb { position: relative; }
.pdp-thumb__tag { position: absolute; left: 2px; bottom: 2px; padding: 1px 4px; font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; background: var(--ink-900); color: var(--paper); border-radius: 2px; }

.pdp-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pdp-info__brand { font-size: 13px; }
.pdp-info__title { font-size: var(--fs-2xl); line-height: 1.15; overflow-wrap: anywhere; }
.pdp-info__type { margin-top: -6px; font-size: 15px; color: var(--steel-500); }
.pdp-info__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pdp-info__price .product-card__price-value { font-size: 32px; }
.pdp-info__price .product-card__price-old { font-size: 16px; }
.pdp-info__unit { color: var(--steel-500); font-size: 14px; }
.pdp-info__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp-info__sku { font-family: var(--font-mono); font-size: 13px; color: var(--steel-500); }
.pdp-info__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pdp-info__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-info__delivery { font-size: 13px; color: var(--steel-500); line-height: 1.5; max-width: 52ch; }
@media (max-width: 479px) {
	.pdp-info__title { font-size: 24px; }
	.pdp-info__buy .btn { flex: 1 1 auto; }
	.pdp-info__buy .qty-stepper { flex: 0 0 auto; }
	.pdp-gallery { padding: 20px; }
}

.pdp-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
@media (min-width: 1024px) { .pdp-details { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.pdp-section__title { font-size: 20px; margin-bottom: 14px; }
.pdp-about__text { max-width: 68ch; color: var(--ink-700); line-height: 1.65; font-size: 15px; overflow-wrap: anywhere; }
.pdp-spec-list { margin: 0; border-top: 1px solid var(--concrete-line); }
.pdp-spec { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--concrete-line); }
.pdp-spec dt { font-size: 13px; color: var(--steel-500); }
.pdp-spec dd { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink-900); overflow-wrap: anywhere; }
@media (max-width: 479px) { .pdp-spec { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; } }
.pdp-extra { margin-top: 40px; max-width: 80ch; }
.pdp-extra__sub { font-size: 15px; margin: 20px 0 10px; }
.pdp-files { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* =====================================================================
   Contacts (views/contacts.js): shop tabs = site mode, info | 2GIS map
   ===================================================================== */
.contacts-switch { display: inline-flex; border: 1px solid var(--ink-900); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 24px; max-width: 100%; }
.contacts-switch__tab { min-height: 48px; padding: 0 22px; background: var(--paper); color: var(--ink-900); border: 0; font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.contacts-switch__tab + .contacts-switch__tab { border-left: 1px solid var(--ink-900); }
.contacts-switch__tab:hover { background: var(--concrete-100); }
.contacts-switch__tab.is-active { background: var(--ink-900); color: var(--paper); }
.contacts-switch__tab:focus-visible { outline: 2px solid var(--signal-500); outline-offset: -4px; }
@media (max-width: 479px) { .contacts-switch { display: flex; } .contacts-switch__tab { flex: 1 1 50%; padding: 0 8px; font-size: 12px; } }

.contacts-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .contacts-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } }

.contacts-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.contacts-info__kind { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-500); }
.contacts-info__name { font-size: 28px; line-height: 1.15; margin-top: -6px; }
.contacts-info__caption { color: var(--steel-500); font-size: 14px; line-height: 1.5; }
.contacts-info__list { margin: 4px 0 0; border-top: 1px solid var(--concrete-line); }
.contacts-info__list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--concrete-line); }
.contacts-info__list dt { font-size: 13px; color: var(--steel-500); padding-top: 2px; }
.contacts-info__list dd { margin: 0; font-size: 15px; color: var(--ink-900); overflow-wrap: anywhere; }
.contacts-info__muted { color: var(--steel-500); }
.contacts-info__state { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--steel-500); }
.contacts-info__state.is-open { color: var(--success-600, #2e7d32); }
.contacts-hours { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 14px; }
.contacts-hours__row { display: grid; grid-template-columns: 64px auto; gap: 12px; }
.contacts-info__phones { display: flex; flex-direction: column; gap: 4px; }
.contacts-info__phone { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink-900); text-decoration: none; white-space: nowrap; }
.contacts-info__phone:hover { text-decoration: underline; }
.contacts-info__msg { display: flex; gap: 16px; flex-wrap: wrap; }
.contacts-info__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 479px) {
	.contacts-info__list > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
	.contacts-info__actions .btn { flex: 1 1 100%; }
	.contacts-info__name { font-size: 24px; }
}

.contacts-map { position: relative; min-height: 440px; background: var(--concrete-100); border: 1px solid var(--concrete-line); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 1024px) { .contacts-map { min-height: 520px; } }
.contacts-map__canvas { position: absolute; inset: 0; }
.contacts-map__static { position: absolute; inset: 0; display: block; }
.contacts-map__static img { width: 100%; height: 100%; object-fit: cover; }
.contacts-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-footer__shop-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.contacts-max { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contacts-max__icon { flex: 0 0 auto; color: var(--ink-900); }
.contacts-max__name { font-weight: 700; }
.contacts-max__phone { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }

/* ---------------- Dark theme hotfix ----------------
   Quantity controls (catalog card «+», − / + steppers in the card, product
   page, cart) were near-white in dark theme (they used --ink-900, which
   flips to light). Dark theme only: an amber/orange accent derived from the
   brand amber (--amber-500 #B07E2E), dark glyphs for contrast. Light theme
   is untouched. Also lighter variants of red / green TEXT on dark surfaces
   (the brand red fill itself stays). */
:root[data-theme="dark"] {
	--qty-accent: #D08A2E;
	--qty-accent-hover: #E09C45;
	--qty-accent-active: #B5761F;
	--qty-accent-ink: #1C1307;
	--qty-focus: #F6C47E;
	--signal-text: #F2867A;
	--success-text: #7FC495;
}
[data-theme="dark"] .product-card__add:not(.product-card__add--oos),
[data-theme="dark"] .qty-stepper button {
	background: var(--qty-accent);
	border-color: var(--qty-accent);
	color: var(--qty-accent-ink);
	font-weight: 700;
}
[data-theme="dark"] .product-card__add:not(.product-card__add--oos):hover,
[data-theme="dark"] .qty-stepper button:hover:not(:disabled) {
	background: var(--qty-accent-hover);
	border-color: var(--qty-accent-hover);
}
[data-theme="dark"] .product-card__add:not(.product-card__add--oos):active,
[data-theme="dark"] .qty-stepper button:active:not(:disabled) {
	background: var(--qty-accent-active);
	border-color: var(--qty-accent-active);
}
[data-theme="dark"] .product-card__add:focus-visible,
[data-theme="dark"] .qty-stepper button:focus-visible {
	outline: 2px solid var(--qty-focus);
	outline-offset: 2px;
}
[data-theme="dark"] .qty-stepper button:disabled {
	background: var(--concrete-300);
	border-color: var(--concrete-300);
	color: var(--steel-400);
	opacity: 0.7;
}
/* the two buttons sit inside the stepper frame: keep a gap line from the value */
[data-theme="dark"] .qty-stepper { border-color: var(--concrete-300); background: var(--concrete-200); }
[data-theme="dark"] .qty-stepper input,
[data-theme="dark"] .qty-stepper__value { color: var(--ink-900); }

/* red / green text on dark surfaces: readable variants (fills unchanged) */
[data-theme="dark"] .link--signal,
[data-theme="dark"] .co-req,
[data-theme="dark"] .pdp-back,
[data-theme="dark"] .contacts-info__kind,
[data-theme="dark"] .legal-pending,
[data-theme="dark"] .mobile-nav__list a.is-cta { color: var(--signal-text); }
/* underline colour of <a> links only: button.link has no underline image (background reset) */
[data-theme="dark"] a.link--signal { background-image: linear-gradient(var(--signal-text), var(--signal-text)); }
[data-theme="dark"] .badge--in-stock,
[data-theme="dark"] .contacts-info__state.is-open { color: var(--success-text); }
[data-theme="dark"] .breadcrumbs span[aria-hidden="true"] { color: var(--steel-400); }

/* ===== Retail personal account (#/account) — js/views/account.js ===== */
.acc-page { padding: 32px 0 96px; }
.acc-title { margin: 24px 0 16px; }
.acc-narrow { max-width: 520px; }
.acc-wide { max-width: 960px; }
.acc-lead { color: var(--ink-700); margin: 0 0 20px; }
.acc-after { margin-top: 16px; }
.acc-note { margin-top: 12px; color: var(--ink-700); font-size: var(--fs-sm); }
.acc-hint { font-size: 13px; color: var(--steel-500); }
.acc-static { padding: 10px 0; font-weight: 600; }
.acc-h2 { font-size: var(--fs-lg); margin: 24px 0 12px; }
.acc-card .acc-h2 { margin-top: 0; }
.acc-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--concrete-line); margin-bottom: 24px; }
.acc-tabs a { padding: 10px 14px; text-decoration: none; font-weight: 600; color: var(--ink-700); border-bottom: 3px solid transparent; }
.acc-tabs a.is-active { color: var(--ink-900); border-bottom-color: var(--signal-500); }
.acc-tabs .acc-logout { margin-left: auto; padding: 10px 0; }
.acc-orders { border-top: 1px solid var(--concrete-line); }
.acc-order { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 4px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--concrete-line); color: inherit; text-decoration: none; }
.acc-order:hover .acc-order__num { color: var(--signal-600); }
.acc-order__num { font-weight: 700; display: flex; flex-direction: column; }
.acc-order__date, .acc-order__delivery { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-700); }
.acc-order__items { display: flex; flex-direction: column; font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.acc-order__sum { font-weight: 700; white-space: nowrap; }
.acc-status { display: inline-block; font-weight: 600; font-size: var(--fs-sm); padding: 3px 10px; border: 1px solid var(--concrete-line); white-space: nowrap; }
.acc-status--accepted, .acc-status--transferred { color: var(--amber-600); border-color: currentColor; }
.acc-status--confirmed, .acc-status--paid, .acc-status--assembling, .acc-status--shipped, .acc-status--in_transit { color: var(--ink-900); border-color: var(--ink-900); }
.acc-status--delivered, .acc-status--completed { color: var(--success-600); border-color: currentColor; }
.acc-status--cancelled { color: var(--steel-500); }
.acc-src { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--steel-500); font-weight: 400; }
.acc-empty { padding: 24px 0; }
.acc-card { border: 1px solid var(--concrete-line); padding: 16px 20px; margin-bottom: 16px; }
.acc-card--status .acc-card__row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.acc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.acc-dl dt { color: var(--ink-700); }
.acc-dl dd { margin: 0; overflow-wrap: anywhere; }
.acc-dl--totals { margin-top: 12px; justify-content: end; }
.acc-dl--totals dd { text-align: right; }
.acc-timeline { list-style: none; margin: 0; padding: 0; }
.acc-timeline li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 0 10px; padding: 0 0 14px; }
.acc-timeline li::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--concrete-line); }
.acc-timeline li:last-child::before { display: none; }
.acc-timeline__dot { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--steel-400); background: transparent; grid-row: span 2; }
.acc-timeline li.is-reached .acc-timeline__dot { background: var(--success-600); border-color: var(--success-600); }
.acc-timeline li.is-cancelled.is-reached .acc-timeline__dot { background: var(--steel-500); border-color: var(--steel-500); }
.acc-timeline__label { font-weight: 600; }
.acc-timeline li.is-pending .acc-timeline__label { font-weight: 400; color: var(--steel-500); }
.acc-timeline__meta { grid-column: 2; font-size: 13px; color: var(--steel-500); }
.acc-items { border-top: 1px solid var(--concrete-line); }
.acc-item { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 4px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--concrete-line); }
.acc-item img, .acc-item__noimg { width: 56px; height: 56px; object-fit: contain; background: var(--concrete-200); display: block; }
.acc-item__name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.acc-item__sku { font-size: 13px; color: var(--steel-500); }
.acc-item__qty { color: var(--ink-700); white-space: nowrap; font-size: var(--fs-sm); }
.acc-item__sum { font-weight: 700; white-space: nowrap; }
.co-account-note { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-700); }
@media (max-width: 720px) {
  .acc-grid { grid-template-columns: 1fr; }
  .acc-order { grid-template-columns: 1fr auto; }
  .acc-order__items { grid-column: 1 / -1; order: 3; }
  .acc-order__status { grid-column: 1 / -1; order: 4; }
  .acc-item { grid-template-columns: 48px 1fr auto; }
  .acc-item img, .acc-item__noimg { width: 48px; height: 48px; }
  .acc-item__qty { grid-column: 2; }
  .acc-item__sum { grid-column: 3; grid-row: 1; }
}

/* Cloudflare Turnstile on the checkout (js/state/turnstile.js) */
.co-captcha { margin: 16px 0 0; min-height: 65px; max-width: 100%; }
.co-captcha [data-role="co-turnstile"]:empty { min-height: 0; }
.co-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.co-captcha:has([data-role="co-turnstile"]:empty) { min-height: 0; margin: 0; }

/* Footer hotfix: company · contacts · information (no catalog), compact. */
.site-footer__top { padding: var(--sp-10) 0 var(--sp-8); gap: var(--sp-6); }
@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1.3fr 1.2fr 0.9fr; gap: var(--sp-8); }
}
@media (max-width: 767px) {
  .site-footer__top { padding: var(--sp-8) 0 var(--sp-6); gap: var(--sp-6); }
  .site-footer__contacts a[href^="tel:"], .site-footer__contacts a[href^="mailto:"] { padding: 4px 0; }
  .site-footer__col ul { gap: var(--sp-3); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}
.site-footer__docs a, .site-footer__docs button { color: rgba(255, 255, 255, 0.72); }

/* Notes under the legal documents (prototype stage, analytics status): small, calm. */
.legal-page__notes { margin-top: var(--sp-10); padding-top: var(--sp-4); border-top: 1px solid var(--concrete-line); max-width: 72ch; }
.legal-page__notes p { font-size: var(--fs-xs); line-height: 1.55; color: var(--steel-500); margin: 0 0 var(--sp-2); }

/* Header «Личный кабинет»: a noticeable orange button next to the theme toggle
   (retail -> #/account, wholesale -> #/wholesale/account; see chrome.js).
   The header is dark in both themes, so one orange works for both. Icon-only
   below 1280px (label in aria-label), icon + label from 1280px. */
:root {
	--account-btn-bg: #E8892B;
	--account-btn-bg-hover: #F29A3F;
	--account-btn-bg-active: #CC7419;
	--account-btn-ink: #1C1307;
	--account-btn-focus: #F6C47E;
}
.header-account-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	height: var(--control-size);
	min-width: var(--control-size);
	padding: 0;
	border-radius: var(--radius-sm, 4px);
	background: var(--account-btn-bg);
	color: var(--account-btn-ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color .15s ease;
}
.header-account-btn:hover { background: var(--account-btn-bg-hover); color: var(--account-btn-ink); }
.header-account-btn:active { background: var(--account-btn-bg-active); }
.header-account-btn:focus-visible { outline: 2px solid var(--account-btn-focus); outline-offset: 2px; }
.header-account-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.header-account-btn__label { display: none; }
@media (min-width: 1280px) {
	.header-account-btn { padding: 0 var(--sp-4) 0 var(--sp-3); }
	.header-account-btn__label { display: inline; }
}
.header-account-btn .cart-trigger__count {
	position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
	background: var(--signal-500); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
/* Header row fit at 1024–1279px (measured): nav + icons + mode switch +
   «Личный кабинет» + theme toggle need ~30px more than the row has, so the
   header controls are 40px here and the gaps tighter; nothing is hidden. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.site-header__actions { gap: var(--sp-1); }
	.site-header__actions .btn-icon,
	.site-header__actions .header-account-btn { width: 40px; min-width: 40px; height: 40px; }
	.site-header .mode-switch { height: 40px; }
}

/* ---------------------------------------------------------------------
   Site header, 2026-10-21: the original dark header (design-system.css
   background, link colours, «Каталог» dropdown, orange «Личный кабинет»),
   with line icons without frames. Only the top-level menu items are
   styled here — never the links inside the «Каталог» dropdown panel.
   --------------------------------------------------------------------- */
.site-header .main-nav > a, .site-header .main-nav .dropdown__link, .main-nav__to-retail { white-space: nowrap; }
.site-header .main-nav > * { flex-shrink: 0; }
.site-header .main-nav .dropdown { display: inline-flex; align-items: center; flex-wrap: nowrap; }
/* «Каталог» dropdown (design-system.css look): one line per category, so all
   items are the same height; scrolls on short screens. */
.site-header .dropdown__panel { max-height: calc(100vh - 120px); overflow-y: auto; }
.site-header .dropdown__panel .dropdown__item { white-space: nowrap; }
/* «Розница» in the menu: back from the wholesale site (wholesale mode only), looks like a menu link. */
.main-nav__to-retail {
	display: none; padding: var(--sp-1) 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.82);
	transition: color var(--dur-fast) var(--ease-standard);
}
[data-customer-mode="wholesale"] .main-nav__to-retail { display: inline; }
.main-nav__to-retail:hover { color: #fff; }
/* Menu hover line (chrome.js wireNavIndicator): no line at rest or under the
   current page; one line moves under the hovered item and fades on leave.
   The items keep their own 1.5px border (layout), always transparent now. */
.site-header .main-nav { position: relative; }
.site-header .main-nav > a, .site-header .main-nav > a:hover, .site-header .main-nav > a.is-active,
.site-header .main-nav .dropdown__link, .site-header .main-nav .dropdown__link:hover { border-bottom-color: transparent; }
.main-nav__indicator {
	position: absolute; left: 0; top: 0; width: 1px; height: 1.5px;
	background: var(--signal-500); transform-origin: 0 0; pointer-events: none;
	opacity: 0;
	transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-standard);
}
.main-nav__indicator.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.main-nav__indicator { transition: opacity 120ms linear; }
}

/* Icons: search, favorites, cart, account, MAX, menu — one size, one colour, no frames. */
.site-header__actions { gap: var(--sp-2); }
.site-header .btn-icon,
.site-header .header-account-btn {
	width: 40px; min-width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.9);
	transition: color var(--dur-fast) var(--ease-standard);
}
.site-header .btn-icon:hover, .site-header .header-account-btn:hover,
.site-header .header-account-btn:active { background: transparent; color: #fff; }
.site-header .btn-icon svg, .site-header .header-account-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
/* «Личный кабинет»: the person icon only (the label stays for screen readers via aria-label). */
.site-header .header-account-btn__label { display: none !important; }
.site-header .cart-trigger__count { top: 2px; right: 0; }
.site-header .cart-trigger__count[hidden] { display: none; }
/* MAX (right after the account icon): the MAX mark in the icon colour, a bit
   smaller than 20px because a filled shape looks heavier than line icons. */
.site-header .header-max-link { flex-shrink: 0; }
.site-header .header-max-link svg { width: 18px; height: 18px; }
.site-header .btn-icon:focus-visible, .site-header .header-account-btn:focus-visible, .main-nav__to-retail:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}
.mobile-nav__foot .mobile-nav__max { flex: 0 0 auto; padding-left: var(--sp-2); padding-right: var(--sp-2); }
/* Phones and tablets: logo + icons + menu button, tighter spacing (measured). */
@media (max-width: 1023px) {
	.site-header__row { gap: var(--sp-3); }
	.site-header__actions { gap: 0; }
}
/* The narrowest phones: MAX stays in the mobile menu. */
@media (max-width: 413px) {
	.site-header__actions .header-max-link { display: none; }
}
/* No retail price from 1C: a quiet note instead of a zero price. */
.product-card__price-value--none,
.pdp-info__price .product-card__price-value--none { font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-600); }