@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/inter-400-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/inter-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/inter-500-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/inter-500-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-700-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Типографіка */
	--font-family: 'Inter', sans-serif;
	--font-weight: 400;
	--font-weight-bold: 700;
	--font-size: 14px;
	--font-size-small: 12px;
	--font-size-large: 16px;
	--line-height: 1.57;
	--letter-spacing: calc(var(--font-size) * 0.01);

	/* Основний темний колір */
	--main: #343131;
	--main-75: #676464;
	--main-50: #999898;
	--main-25: #CCCCCB;
	--main-10: #EAEAEA;
	--main-5: #F5F4F4;
	--main-opa-75: #343131BF;
	--main-opa-50: #34313180;
	--main-opa-25: #34313140;
	--main-opa-10: #3431311A;
	--main-opa-5: #3431310D;

	/* Акцентні кольори */
	--splash: #F2330D;
	--splash-75: #F6664A;
	--splash-50: #F89885;
	--splash-25: #FBCCC2;
	--splash-10: #FDEAE6;
	--splash-5: #FEF5F3;
	--splash-opa-75: #F2330DBF;
	--splash-opa-50: #F2330D80;
	--splash-opa-25: #F2330D40;
	--splash-opa-10: #F2330D1A;
	--splash-opa-5: #F2330D0D;
	--splash-d: #C2290A;

	/* dropt#1355: --primary — очікується global/template/front/css/loader.css (Ajax progress-bar).
	   Токен існував у старому 1-root.css (видалений тредом 917, "очищення css") — звідси й зникнення
	   червоної смуги, без жодного зв'язку з рендер-логікою самого лоадера. Аліас на --splash
	   (зіставлення за значенням: --splash — поточний акцентний/CTA-червоний дропту), не відновлення
	   старого мертвого #FF014D. */
	--primary: var(--splash);

	/* Нейтральні кольори */
	--back: #FCFCFD;
	--border: #E3E4E8;
	--white: #FFFFFF;
	--white-opa-60: #FFFFFF99;
	--black: #000000;
	--disabled: var(--main-opa-5);

	--gray-50:          #FCFCFD;
	--gray-100:         #F8F8F8;
	--gray-200:         #F0F0F0;
	--gray-300:         #E0E0E0;
	--gray-400:         #C8C8C8;
	--gray-500:         #A9A9A9;
	--gray-600:         #808080;
	--gray-700:         #585858;
	--gray-800:         #343131;
	--gray-900:         #181818;

	/* Кольори тексту */
	--text-primary: var(--main);
	--text-secondary: var(--main-50);
	--text-white: var(--white);
	--text-black: var(--black);

	/* Семантичні кольори */
	--success-text: #4CAF50;
	--success-back: #E8F5E9;
	--success-opa-back: #4CAF5033;
	--error-text: #EF5350;
	--error-back: #FFEBEE;
	--error-opa-back: #EF535033;
	--warning-text: #FFB74D;
	--warning-back: #FFF8E1;
	--warning-opa-back: #FFB74D33;
	--info-text: #29B6F6;
	--info-back: #E1F5FE;
	--info-opa-back: #29B6F633;

	/* Spacing */
	--xxxs: 2px;
	--xxs: 4px;
	--xs: 8px;
	--s: 12px;
	--m: 16px;
	--l: 24px;
	--xl: 32px;
	--xxl: 48px;
	--xxxl: 64px;
	--step: 20px;
	--gap: 12px;

	/* Layout */
	--header-height: 60px;
	--radius: 12px;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* === Кабінет / авторизація — mobile first === */

p.error {
	color: var(--error-text);
	font-size: var(--font-size-small);
	min-height: 1.2em;
	margin: 4px 0;
}

p.success {
	color: var(--success-text);
	font-size: var(--font-size-small);
	min-height: 1.2em;
	margin: 4px 0;
}

/* 2-колонкова сітка (Ім'я+Прізвище) у формах реєстрації/complete */
.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

/* Кнопка показати/сховати пароль всередині поля */
form div:has(> .toggle-password) {
	position: relative;
}

form div:has(> .toggle-password) > input {
	padding-right: 44px;
}

.toggle-password {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 40px;
	border: none;
	background: none;
	padding: 0;
	font-size: 1rem;
	color: var(--main-50);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Чекбокс-рядок "Запам'ятати мене" — inline, не блоковий label */
form > label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	width: auto;
}

form > label input[type="checkbox"] {
	width: auto;
}

/* --- OAuth --------------------------------------------------- */

.oauth {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	margin-top: var(--gap);
}

.oauth a {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 6px var(--gap);
	color: var(--text-primary);
	font-weight: var(--font-weight);
	text-decoration: none;
}

.oauth a:hover {
	background: var(--gray-100);
}

/* --- Таби логін/реєстрація/відновлення ------------------------ */

.auth-tabs {
	max-width: 480px;
	margin: 0 auto;
}

.auth-tabs > div:first-child {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--gap);
}

.auth-tab-btn {
	flex: 1;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	padding: var(--xs) var(--gap);
	width: auto;
	color: var(--main-50);
	font-weight: var(--font-weight);
	font-size: var(--font-size-small);
	white-space: nowrap;
}

.auth-tab-btn:hover {
	color: var(--text-primary);
}

.auth-tab-btn.active {
	color: var(--splash);
	border-bottom-color: var(--splash);
	font-weight: var(--font-weight-bold);
}

.auth-tab {
	display: none;
}

.auth-tab.active {
	display: block;
}

#form-reset {
	display: none;
}

#form-reset.visible {
	display: block;
}

#form-forgot.hidden {
	display: none;
}

/* --- Кабінет (авторизований) ----------------------------------- */

.cabinet {
	max-width: 480px;
	margin: 0 auto;
}

#logout-form {
	margin-top: var(--gap);
}

#logout-form button[type="submit"] {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--border);
}

#logout-form button[type="submit"]:hover {
	background: var(--gray-100);
}

/* --- Адреси доставки -------------------------------------------- */

.cabinet-points,
.cabinet-payers {
	margin-top: var(--xl);
	padding-top: var(--l);
	border-top: 1px solid var(--border);
}

.cabinet-points h2,
.cabinet-payers h2 {
	margin-bottom: var(--gap);
	font-size: var(--font-size);
}

.points-list,
.payers-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin-bottom: var(--gap);
}

.points-empty,
.payers-empty {
	color: var(--main-50);
	font-size: var(--font-size-small);
}

.point-item,
.payer-item {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--gap);
	background: var(--back);
}

.point-item > div {
	font-size: var(--font-size-small);
	margin-top: 4px;
}

.point-item > div:first-child {
	margin-top: 0;
}

.point-name,
.payer-name {
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	font-size: var(--font-size-small);
}

.point-address,
.point-phone,
.point-recipient,
.point-delivery,
.payer-code1c {
	color: var(--main-75);
}

.point-edit,
.point-remove {
	width: auto;
	margin-top: var(--gap);
	margin-right: var(--xs);
	font-size: var(--font-size-small);
	padding: 4px var(--xs);
}

#point-cancel {
	width: auto;
	margin-left: var(--xs);
}

#point-cancel.hidden {
	display: none;
}

/* Toast кабінету — той самий візуальний підхід, що й у кошику (dropt#1327) */
#cabinet-toast-host {
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--xs);
}

.cabinet-toast {
	background: var(--main);
	color: var(--text-white);
	border-radius: var(--radius);
	padding: 10px 16px;
	font-size: var(--font-size-small);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	opacity: 1;
	transition: opacity .3s ease;
}

.cabinet-toast-hide {
	opacity: 0;
}

/* === Кошик /cart — mobile first === */

.cart-page {
	padding: var(--gap) 0;
}

.cart-auth-required,
.checkout-gate {
	color: var(--main-75);
}

.cart-messages {
	margin-bottom: var(--gap);
}

.cart-message {
	background: var(--error-back);
	color: var(--error-text);
	border-radius: var(--radius);
	padding: var(--xs) var(--gap);
	margin: 0 0 6px;
	font-size: var(--font-size-small);
}

.cart-empty {
	text-align: center;
	padding: var(--xxl) var(--xs);
	color: var(--main-50);
}

.cart-empty a {
	display: inline-block;
	margin-top: var(--xs);
}

.cart-list {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	margin-top: var(--gap);
}

.cart-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name remove"
		"qty  total";
	align-items: center;
	gap: 6px var(--gap);
	background: var(--back);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--xs) var(--gap);
}

.cart-item-name {
	grid-area: name;
	color: var(--text-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.cart-item-name:hover {
	text-decoration: underline;
}

.cart-item-qty {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	gap: var(--xxs);
}

.cart-qty-minus,
.cart-qty-plus {
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--gray-100);
	line-height: 1;
}

.cart-qty-minus:hover,
.cart-qty-plus:hover {
	background: var(--gray-200);
}

.cart-qty-value {
	min-width: 1.5em;
	text-align: center;
	font-weight: var(--font-weight-bold);
}

.cart-item-line-total {
	grid-area: total;
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.cart-remove {
	grid-area: remove;
	justify-self: end;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--main-50);
	font-size: 1.125rem;
	line-height: 1;
}

.cart-remove:hover {
	color: var(--error-text);
}

.cart-total {
	margin-top: var(--gap);
	padding-top: var(--gap);
	border-top: 1px solid var(--border);
	text-align: right;
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.cart-total-line {
	display: block;
}

.cart-checkout-btn {
	display: inline-block;
	width: 100%;
	margin-top: var(--gap);
	background: var(--main);
	color: var(--text-white);
	border: 1px solid var(--main);
	text-align: center;
	text-decoration: none;
	font-weight: var(--font-weight-bold);
}

.cart-checkout-btn:hover {
	background: var(--main-75);
	border-color: var(--main-75);
}

@media (min-width: 576px) {
	.cart-item {
		grid-template-columns: 1fr auto auto auto;
		grid-template-areas: "name qty total remove";
	}

	.cart-checkout-btn {
		width: auto;
	}
}

/* === Сторінка /checkout === */

.checkout-page {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--gap) 0;
}

.checkout-cart-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--gap);
	padding-bottom: var(--gap);
	border-bottom: 1px solid var(--border);
}

.checkout-cart-row {
	display: flex;
	justify-content: space-between;
	gap: var(--xs);
	font-size: var(--font-size-small);
	color: var(--main-75);
}

.checkout-cart-name {
	flex: 1;
	color: var(--text-primary);
}

.checkout-cart-qty {
	white-space: nowrap;
}

.checkout-cart-line {
	white-space: nowrap;
	color: var(--text-primary);
}

.checkout-info {
	font-size: var(--font-size-small);
}

.checkout-discount {
	background: var(--gray-100);
	border-radius: var(--radius);
	padding: var(--gap);
	margin: var(--gap) 0;
}

.checkout-discount p {
	margin: 4px 0;
	font-size: var(--font-size-small);
}

.checkout-shipnow {
	display: flex;
	gap: var(--gap);
}

.checkout-shipnow label {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	width: auto;
}

.checkout-shipnow input {
	width: auto;
}

#checkout-success h2 {
	margin-bottom: var(--gap);
}

#checkout-success.hidden,
#checkout-form.hidden {
	display: none;
}

#checkout-submit {
	background: var(--main);
	color: var(--text-white);
	border-color: var(--main);
	font-weight: var(--font-weight-bold);
}

#checkout-submit:hover {
	background: var(--main-75);
	border-color: var(--main-75);
}

/* Toast — мінімальне візуальне підтвердження дій кошика (add/update/remove) */
#cart-toast-host {
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--xs);
}

.cart-toast {
	background: var(--main);
	color: var(--text-white);
	border-radius: var(--radius);
	padding: 10px 16px;
	font-size: var(--font-size-small);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	opacity: 1;
	transition: opacity .3s ease;
}

.cart-toast-hide {
	opacity: 0;
}

/* === Дровер кошика (створюється JS-ом при відкритті, dropt#600) === */

.cart-drawer {
	position: fixed;
	top: 0;
	right: -340px;
	width: 320px;
	max-width: 90vw;
	height: 100%;
	overflow-y: auto;
	z-index: 3;
	transition: right .35s cubic-bezier(.65, .05, .36, 1);
	background: var(--back);
}

.cart-drawer.open {
	right: 0;
}

.cart-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 2;
}

.cart-drawer-overlay.active {
	display: block;
}

.cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap) var(--m);
	border-bottom: 1px solid var(--border);
	font-weight: var(--font-weight-bold);
}

.cart-drawer-close {
	width: auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.25rem;
	line-height: 1;
}

.cart-drawer .cart-region-body {
	padding: var(--gap) var(--m);
}

.cart-drawer-loading {
	color: var(--main-50);
	padding: var(--gap) var(--m);
}

/* === Каталог — mobile first === */

.catalog-page {
	padding: var(--gap) 0;
}

.catalog-toolbar {
	display: flex;
	align-items: center;
	gap: var(--xs);
	padding: var(--xs) 0;
	flex-wrap: wrap;
}

.catalog-toolbar select {
	width: auto;
}

.catalog-toolbar label {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	width: auto;
}

.count-html {
	margin-left: auto;
	font-size: var(--font-size-small);
	color: var(--main-75);
}

/* Layout — mobile: одна колонка */
.catalog-layout {
	display: block;
}

/* Aside — mobile: fixed drawer */
.catalog-aside {
	position: fixed;
	top: 0;
	left: -300px;
	width: 280px;
	height: 100%;
	overflow-y: auto;
	z-index: 3;
	transition: left .35s cubic-bezier(.65, .05, .36, 1);
	background: var(--back);
	padding: var(--gap);
	box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
}

.catalog-aside.open {
	left: 0;
}

.catalog-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 2;
}

.catalog-overlay.active {
	display: block;
}

.aside-close {
	float: right;
	background: none;
	border: none;
	width: auto;
	padding: 0 var(--xxs);
	font-size: 1.25rem;
}

/* Групи фільтрів (details/summary) */
.filter-group {
	border: none;
	border-bottom: 1px solid var(--border);
	padding: var(--xs) 0;
}

.filter-group summary {
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	padding: var(--xxs) 0;
	list-style: none;
}

.filter-group summary::marker,
.filter-group summary::-webkit-details-marker {
	display: none;
}

.filter-group summary::after {
	content: ' \25BE';
	font-size: var(--font-size-small);
	color: var(--main-50);
}

.filter-group[open] summary::after {
	content: ' \25B4';
}

.filter-group label {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	padding: 3px 0;
	cursor: pointer;
	font-size: var(--font-size-small);
	width: auto;
	border: none;
}

.filter-group label i {
	margin-left: auto;
	font-style: normal;
	color: var(--main-50);
	font-size: var(--font-size-small);
}

.filter-children {
	padding-left: var(--m);
}

/* is-hidden/search-hidden — приховані рядки за поточним станом (не видаляються з DOM) */
.is-hidden,
.search-hidden {
	display: none !important;
}

.filter-apply {
	position: sticky;
	bottom: 0;
	width: 100%;
	margin-top: var(--s);
	background: var(--main);
	color: var(--text-white);
	border-color: var(--main);
	font-weight: var(--font-weight-bold);
}

/* Рядок фільтра: окремий radio/checkbox + окремий <a> назви + лічильник */
.filter-row {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	padding: 3px 0;
	font-size: var(--font-size-small);
}

.filter-row input[type="radio"],
.filter-row input[type="checkbox"] {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.filter-row a {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filter-row a:hover {
	text-decoration: underline;
}

.filter-row .filter-count {
	margin-left: auto;
	font-style: normal;
	color: var(--main-50);
	font-size: var(--font-size-small);
}

.filter-child {
	padding-left: var(--m);
}

/* Range-контрол: два числові інпути min/max */
.filter-range {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	padding: var(--xxs) 0;
}

.filter-range input[type="number"] {
	width: 100%;
	min-width: 0;
}

.filter-range span {
	color: var(--main-50);
	flex: 0 0 auto;
}

/* Пошук у великій групі */
.filter-search {
	width: 100%;
	margin: var(--xxs) 0;
	font-size: var(--font-size-small);
}

/* Чипи вибраних фільтрів */
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--xxs);
	background-color: var(--splash-25);
	border-radius: var(--radius);
	padding: 4px 8px;
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	color: var(--splash);
	margin: 2px;
}

.filter-chip a {
	text-decoration: none;
	color: inherit;
}

/* Перемикач вигляду (сітка/таблиця) */
.view-switch {
	display: flex;
	gap: var(--xxs);
	width: auto;
}

.view-switch button {
	width: auto;
	padding: 4px 8px;
	line-height: 1;
}

.view-switch button.active {
	background: var(--main);
	color: var(--text-white);
	border-color: var(--main);
}

.filter-toggle {
	width: auto;
}

/* === Список товарів — mobile: 1 колонка (grid view) === */
.catalog-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	margin-top: var(--gap);
}

.catalog-list > div {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--gap);
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--back);
}

/* Порожній стан — не картка: без рамки, на всю ширину сітки, приглушено */
.catalog-list > .catalog-empty {
	grid-column: 1 / -1;
	border: none;
	padding: var(--xxl) var(--gap);
	text-align: center;
	color: var(--main-50);
}

.catalog-list > div img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.catalog-list > div b small {
	display: block;
	font-weight: var(--font-weight);
	font-size: .8em;
	color: var(--main-75);
}

/* Зображення + зум-іконка (top-left) + серце «Обране» (top-right).
   dropt#1324: іконки — inline svg через MSvg::beforeContent() викликаний напряму з
   catalog-list.php (в обхід макрос-парсера, якого AJAX-партіал CatalogHandler::renderPartial()
   не проходить) — той самий sprite-механізм, що й у header/footer, просто без [svg/]-тексту. */
.item-img {
	position: relative;
}

.item-zoom,
.item-fav {
	text-decoration: none;
}

.item-zoom svg,
.item-fav svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.item-zoom {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .85);
	border-radius: 4px;
	color: var(--text-primary);
}

.item-zoom:hover {
	background: var(--white);
}

.item-fav {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--gray-400);
}

.item-fav.is-fav {
	color: var(--splash);
}

.item-fav:hover {
	background: var(--white);
}

.item-removing {
	opacity: 0;
	transition: opacity .18s ease;
}

.item-name {
	color: inherit;
	text-decoration: none;
}

.item-name:hover {
	text-decoration: underline;
}

/* Чипи категорій під назвою: основна звичайна, додаткові курсивом/приглушені */
.item-cats {
	display: block;
	font-weight: var(--font-weight);
	margin-top: 3px;
}

.item-cat {
	display: inline-block;
	font-size: .8em;
	margin-right: var(--xs);
	color: var(--main-75);
}

.item-cat-add {
	font-style: italic;
	color: var(--main-50);
}

.item-brandline {
	color: var(--main-50);
	font-size: .9em;
}

/* Клікабельні значення-фільтри (бренд, категорія, атрибути) — акцентний колір посилань сайту */
a.item-cat,
a.item-brand-link,
a.item-attr {
	color: var(--splash);
	text-decoration: none;
}

a.item-cat:hover,
a.item-brand-link:hover,
a.item-attr:hover {
	text-decoration: underline;
}

.code {
	border-radius: var(--radius);
	padding: 4px 8px;
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	color: var(--main-75);
	background-color: var(--main-10);
	white-space: nowrap;
}

/* Вигляд «таблиця» — mobile: 3 колонки (img / назва / наявність) */
.catalog-list.table {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.catalog-list.table > div {
	display: contents;
}

.catalog-list.table > div > * {
	padding: var(--xs);
	border-bottom: 1px solid var(--border);
	align-self: center;
	font-size: var(--font-size-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.catalog-list.table > div img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.catalog-list.table > div > span:nth-child(3),
.catalog-list.table > div > span:nth-child(4),
.catalog-list.table > div > span.item-actions,
.catalog-list.table > div > span.item-attrs,
.catalog-list.table > div > a {
	display: none;
}

.catalog-list > .catalog-head {
	display: none;
}

.catalog-list.table > .catalog-head > * {
	font-weight: var(--font-weight-bold);
	color: var(--main-75);
	border-bottom-width: 2px;
}

.catalog-list.table > .catalog-head > span:nth-child(6),
.catalog-list.table > .catalog-head > span:nth-child(7) {
	display: none;
}

.no-stock {
	color: var(--error-text);
}

.in-stock {
	color: var(--success-text);
}

.item-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--xxs);
}

.item-actions input[type="number"] {
	width: 50px;
	padding: 4px;
}

.item-actions button {
	width: auto;
}

.item-add-cart {
	background: var(--main);
	color: var(--text-white);
	border-color: var(--main);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-small);
	padding: 6px var(--xs);
}

.item-add-cart:hover:not(:disabled) {
	background: var(--main-75);
	border-color: var(--main-75);
}

/* Пагінація — «Показати ще» + номерна пагінація */
#pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--m);
	padding: var(--l) 0;
}

#pagination .load-more {
	width: auto;
	padding: 10px var(--l);
	border-color: var(--splash);
	background: var(--back);
	color: var(--splash);
	font-weight: var(--font-weight-bold);
}

#pagination .load-more:hover {
	background: var(--splash);
	color: var(--text-white);
}

.pagination {
	display: flex;
	align-items: center;
	gap: var(--xxs);
	font-size: var(--font-size-small);
}

.pagination a,
.pagination .current,
.pagination .gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--gray-600);
	font-weight: var(--font-weight-bold);
}

.pagination a:hover {
	background: var(--gray-100);
}

.pagination .current {
	background: var(--splash-25);
	color: var(--splash);
}

.pagination .arrow {
	font-size: 18px;
}

.pagination .arrow.disabled {
	color: var(--gray-300);
}

/* Модальне вікно (dialog) картки товару. dropt#1362: явний width (замість автоматичного
   shrink-to-fit за замовчуванням) — без нього ширина залежала від того, яка акордеон-вкладка
   (dropt#1346) розгорнута зараз: контент-легкі вкладки (Опис/Склад) розтягували dialog до
   max-width:90vw, а "Відео" з завантаженим iframe (width:100% ігнорується при shrink-to-fit —
   iframe тоді рахується за власним intrinsic-розміром) звужувала dialog до ~1077px — видимий
   "стрибок" при перемиканні вкладок. Фіксоване значення підібране емпірично (вимірювання
   getBoundingClientRect на реальних товарах) під найширший регулярний елемент — таблицю
   item-variants (природна ширина ~718px для 6-колонкового варіанту, dropt#1337) + галерея
   280px + gap; на вузьких екранах (max-width 90vw) і так завжди домінував over 1080px,
   тому mobile не зачеплено (перевірено — там 90vw ніколи не сягає 1080px). */
dialog#catalog-modal {
	position: relative;
	width: min(1080px, 90vw);
	border: none;
	border-radius: var(--radius);
	padding: 0;
	max-width: 90vw;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

dialog#catalog-modal[open] {
	display: flex;
	flex-direction: column;
}

dialog#catalog-modal::backdrop {
	background: rgba(0, 0, 0, .5);
}

/* dropt#1419: скролиться лише .catalog-modal-body (padding перенесено сюди з dialog, яка тепер
   overflow:hidden) — сама "шапка" вмісту (.breadcrumbs, перший елемент фетчнутого catalog-item.php)
   лишається видимою через position:sticky нижче, "×" не входить у скрол-контейнер узагалі
   (окремий елемент дещо, абсолютний відносно dialog), тому лишається на місці автоматично. */
.catalog-modal-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--l);
}

.catalog-modal-body .breadcrumbs {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-right: var(--xxl);
	background: var(--back);
}

/* dropt#1341: "×" справа зверху — стандарт для всіх модалок сайту (dropt#280 п.19). Абсолютне
   позиціонування відносно dialog (не .catalog-modal-body) — лишається на екрані незалежно від
   скролу вмісту (dropt#1419). */
.catalog-modal-close {
	position: absolute;
	top: var(--gap);
	right: var(--gap);
	width: auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--main-50);
	z-index: 2;
}

/* --- Сторінка товару /p/{id} — той самий шаблон (catalog-item.php) рендерить і повну
   сторінку (SSR, з layout), і вміст модалки catalog-modal (?modal=1, без layout) — тому
   один набір класів/стилів нижче покриває обидва місця. */
.breadcrumbs {
	font-size: var(--font-size-small);
	padding: var(--xs) 0;
	color: var(--main-50);
}

.breadcrumbs a {
	color: var(--main-75);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.item-page {
	display: flex;
	flex-direction: column;
	gap: var(--l);
}

.item-gallery {
	display: flex;
	gap: var(--xs);
	overflow-x: auto;
}

.item-gallery img {
	height: 200px;
	border-radius: var(--radius);
	object-fit: contain;
	flex-shrink: 0;
	background: var(--gray-100);
}

.item-info > p {
	color: var(--main-75);
}

.item-info > p b {
	color: var(--text-primary);
}

.item-variants-scroll {
	overflow-x: auto;
	margin-top: var(--gap);
}

.item-variants {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-small);
}

.item-variants th,
.item-variants td {
	padding: var(--xs) var(--gap);
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.item-variants th {
	color: var(--main-50);
	font-weight: var(--font-weight);
}

.item-variants .qty-input {
	width: 60px;
}

.item-variants .item-add-cart {
	white-space: nowrap;
}

/* dropt#1346: item-text/item-nutrition/item-ingredients тепер всередині .accordion-body
   (акордеон) — margin-top їм більше не потрібен (spacing дає .accordion/.accordion-body),
   але line-height лишається для читабельності контенту з etalon. */
.item-text,
.item-nutrition,
.item-ingredients {
	line-height: 1.6;
}

.accordion {
	margin-top: var(--l);
}

.item-recently-viewed {
	margin-top: var(--l);
	line-height: 1.6;
}

.item-nutrition table,
.item-ingredients table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--gap);
}

.item-nutrition td,
.item-nutrition th,
.item-ingredients td,
.item-ingredients th {
	padding: var(--xxs) var(--xs);
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.item-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	display: block;
}

.item-recently-viewed ul {
	list-style: none;
	padding: 0;
	margin-top: var(--gap);
}

.item-recently-viewed li {
	margin-top: var(--xs);
}

@media (min-width: 992px) {
	.item-page {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.item-gallery {
		flex-direction: column;
		overflow-x: visible;
		width: 280px;
		flex-shrink: 0;
	}

	.item-gallery img {
		width: 100%;
		height: 260px;
		cursor: zoom-in; /* dropt#1358: підказка, що клік відкриває lightbox (лише десктоп) */
	}

	/* dropt#1370: на десктопі в основному блоці лишається тільки перше фото — решта доступна
	   через lightbox (стрілки prev/next, dropt#1358). display:none, НЕ видалення з DOM: JS
	   (catalog.js, showItemLightbox) читає ВСІ img через querySelectorAll('.item-gallery img')
	   незалежно від display, тому навігація lightbox лишається повною — логіку не чіпав. */
	.item-gallery img:not(:first-child) {
		display: none;
	}

	.item-info {
		flex: 1;
		min-width: 0;
	}

	.accordion,
	.item-recently-viewed {
		width: 100%;
	}

	/* dropt#1392: таби товару на десктопі — JS-driven (.js-tabs), заміна CSS Grid+
	   display:contents (dropt#1363/1370). Причина заміни: розбіжність row-track-sizing
	   між Firefox і Chromium при display:contents на <details> + explicit grid-row на
	   дітях (dropt#1379, root cause підтверджено, 2 pure-CSS фікси дали регресії гірші за
	   вихідний баг — відхилено). Без класу .js-tabs (JS вимкнений/не виконався) нижче
	   нічого не застосовується — сторінка лишається природним акордеоном (базові правила
	   .accordion/.accordion-item з 2-main.css, кожна вкладка розгортається під собою) —
	   це і є graceful degradation (вимога #4), додаткового CSS не потрібно.
	   <details> фізично лишається контейнером свого контенту (вимога #1, dropt#1379
	   відхилив markup-розділення через :has()) — .accordion-body лише візуально
	   виривається з потоку через position:absolute, DOM-вкладеність не змінюється.
	   Клас .js-tabs додає/знімає catalog.js (matchMedia 992px, той самий брейкпоінт). */
	.item-page .accordion.js-tabs {
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		transition: min-height .25s ease;
	}

	.item-page .js-tabs .accordion-item {
		border: none;
		border-radius: 0;
		overflow: visible;
	}

	.item-page .js-tabs .accordion-item summary {
		display: block;
		padding: var(--gap) var(--m);
		border-bottom: 2px solid transparent;
		color: var(--main-50);
		white-space: nowrap;
	}

	.item-page .js-tabs .accordion-item summary::after,
	.item-page .js-tabs .accordion-item[open] summary::after {
		content: none; /* +/- індикатор акордеону недоречний у табах */
	}

	.item-page .js-tabs .accordion-item.is-active summary {
		color: var(--text-primary);
		border-bottom-color: var(--splash);
	}

	/* dropt#1370 анімував через grid-template-rows:0fr→1fr — 'fr'-одиниці рахуються
	   ВІДНОСНО доступного простору грід-контейнера; коли контейнер сам position:absolute
	   БЕЗ явної height/bottom (тут — саме такий випадок, .accordion-body позиціонується
	   через top, висота 'auto'), доступний простір "невизначений", і специфікація CSS
	   Grid у цьому випадку трактує Nfr-трек ЯК auto НЕЗАЛЕЖНО від N — тобто 0fr і 1fr
	   рахуються ОДНАКОВО, колапс просто не працює (підтверджено: getComputedStyle
	   .gridTemplateRows на ЗАКРИТІЙ вкладці повертав ~2800px замість ~0, ідентично в
	   обох рушіях). Тому тут — явна height-анімація в пікселях: JS (reserveSpace/
	   activate(), catalog.js) вже вимірює innerOf(target).scrollHeight для min-height
	   контейнера, той самий px передається сюди через body.style.height. */
	.item-page .js-tabs .accordion-item .accordion-body {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: var(--tabs-row-height, 0px);
		height: 0;
		overflow: hidden;
		transition: height .25s ease;
	}

	/* is-active (не [open]) керує показом — це той самий клас, яким JS зчитує "яка
	   вкладка зараз показана", тож border і display завжди узгоджені з фактично видимим
	   станом. display:none→block у той самий кадр, що й height:0 (JS ставить це явно
	   ПЕРЕД forced reflow, activate()) — новий px-стан фіксується ДО того, як rAF задає
	   кінцеву висоту, тому transition стартує коректно в обох браузерах (на відміну від
	   попередньої ітерації з grid-template-rows, що "глушилась" саме в Chromium). */
	.item-page .js-tabs .accordion-item.is-active .accordion-body {
		display: block;
		border-top: 1px solid var(--border);
	}

	.item-page .js-tabs .accordion-item .accordion-body-inner {
		padding: var(--l);
	}
}

form#catalog-filter > div > details {
	max-height: 38vh;
	overflow-y: auto;
	border: 1px solid var(--border);
	padding: var(--gap);
	width: 100%;
	border-radius: var(--radius);
}

/* ============================================================
   /search — сторінка результатів пошуку. Переюзує .filter-group/
   .filter-row/.filter-count/.filter-search/.filter-apply/.is-hidden
   каталогу (стилі вище); тут лише власний layout сторінки і фасети.
   ============================================================ */

.search-page #search-form {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
}

.search-aside {
	position: fixed;
	top: 0;
	left: -300px;
	width: 280px;
	height: 100%;
	overflow-y: auto;
	z-index: 3;
	transition: left .35s cubic-bezier(.65, .05, .36, 1);
	background: var(--back);
	padding: var(--gap);
	box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
}

.search-aside.open {
	left: 0;
}

.search-main {
	flex: 1 1 auto;
	min-width: 0;
}

.search-toolbar {
	display: flex;
	align-items: center;
	gap: var(--gap);
	flex-wrap: wrap;
	margin-bottom: var(--m);
}

.search-toolbar .count-html {
	margin-left: auto;
}

.filter-price {
	display: flex;
	align-items: center;
	gap: var(--xs);
}

.filter-price input {
	width: 84px;
}

.filter-sale {
	margin: var(--xs) 0;
}

.search-aside-actions {
	display: flex;
	align-items: center;
	gap: var(--xs);
	margin-top: var(--s);
}

/* === Десктоп 992px === */
@media (min-width: 992px) {
	.catalog-layout {
		display: flex;
		gap: var(--l);
		align-items: flex-start;
	}

	.catalog-aside {
		position: sticky;
		top: var(--m);
		left: auto;
		width: 260px;
		height: auto;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		flex-shrink: 0;
		box-shadow: none;
		border-right: 1px solid var(--border);
		padding-right: var(--m);
		padding-left: 0;
		transition: none;
	}

	.catalog-overlay {
		display: none !important;
	}

	.filter-toggle,
	.catalog-aside .aside-close {
		display: none;
	}

	.catalog-main {
		flex: 1;
		min-width: 0;
	}

	.catalog-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.catalog-list.table {
		grid-template-columns: 60px 1fr auto auto auto auto;
	}

	.catalog-list.table.has-price {
		grid-template-columns: 60px 1fr auto auto auto auto auto;
	}

	.catalog-list.table > div > span:nth-child(3),
	.catalog-list.table > div > span:nth-child(4),
	.catalog-list.table > div > span.item-actions,
	.catalog-list.table > div > span.item-attrs,
	.catalog-list.table > div > a {
		display: revert;
	}

	.catalog-list.table > .catalog-head > span:nth-child(6),
	.catalog-list.table > .catalog-head > span:nth-child(7) {
		display: revert;
	}

	.search-aside {
		position: static;
		left: auto;
		width: 260px;
		height: auto;
		flex: 0 0 260px;
		overflow: visible;
		box-shadow: none;
		padding: 0;
	}

	.search-aside .aside-close {
		display: none;
	}

	.search-toolbar .filter-toggle {
		display: none;
	}
}

/* Lightbox галереї товару — десктоп (dropt#1358). За візуальним референсом адмінського
   #gallery-overlay (global/template/run/css/3-gallery.css): темний фон, зображення по центру,
   стрілки з боків, "×" справа зверху — власна CSS-реалізація для фронта (адмінська CSS-база
   не переюзана, окремий root/токени). */
dialog#item-lightbox {
	position: relative;
	border: none;
	padding: 0;
	background: transparent;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
}

dialog#item-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

dialog#item-lightbox::backdrop {
	background: rgba(0, 0, 0, .9);
}

.item-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}

.item-lightbox-close {
	position: absolute;
	top: var(--gap);
	right: var(--gap);
	width: auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--white);
}

.item-lightbox-prev,
.item-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	padding: var(--xs) var(--gap);
	border: none;
	background: none;
	font-size: 2.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--white-opa-60);
}

.item-lightbox-prev:hover,
.item-lightbox-next:hover {
	color: var(--white);
}

.item-lightbox-prev { left: var(--xs); }
.item-lightbox-next { right: var(--xs); }

.item-lightbox-info {
	position: absolute;
	bottom: var(--gap);
	left: 0;
	right: 0;
	text-align: center;
	color: var(--white-opa-60);
	font-size: var(--font-size-small);
}

*,
*:after,
*:before {
	box-sizing: border-box;
	min-height: 0;
	min-width: 0;
}
html {
	scrollbar-gutter: stable;
}
body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	color: var(--text-primary);
	background-color: var(--back);
	padding-top: var(--header-height);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
main {
	flex: 1 0 auto;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: var(--l) 0;
}
h1, .h1 {
	font-size: 30px;
}
h2, .h2 {
	font-size: 26px;
	line-height: 1.23;
	letter-spacing: -0.015em;
}
h3, .h3 {
	font-size: 22px;
	line-height: 1.27;
}
h4, .h4 {
	font-size: 18px;
	line-height: 1.33;
	letter-spacing: -0.01em;
}
p,
ul {
	margin: var(--gap) 0 0;
}
svg {
	display: inline-block;
	width: var(--step);
	height: var(--step);
	fill: var(--text-primary);
	stroke: none;
}
.close,
.wIcon svg.search-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
label {
	cursor: pointer;
}
a {
	color: var(--splash);
}
input:not([type="checkbox"], [type="radio"]),
textarea,
select,
button,
.btn {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 6px var(--gap);
	display: inline-block;
	background-color: transparent;
	color: var(--text-primary);
	line-height: 26px;
	width: 100%;
}
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
	outline: none;
}
button,
.btn,
input[type="button"] {
	font-size: var(--font-size-large);
	cursor: pointer;
}
button.wBorder,
.btn.wBorder,
input[type="button"].wBorder {
	border: none;
}
button.flex,
.btn.flex,
input[type="button"].flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}
button.primary,
.btn.primary {
	color: var(--text-white);
	background-color: var(--main);
	border-color: var(--main);
	font-weight: var(--font-weight-bold);
	line-height: 34px;
}
button:disabled,
.btn:disabled,
input[type="button"]:disabled {
	color: var(--gray-300);
	cursor: not-allowed;
}
a.btn {
	text-decoration: none;
}
form input:not([type="checkbox"], [type="radio"]),
form textarea,
form select,
form button,
form .btn {
	width: 100%;
}
select {
	padding: 6px 12px 8px;
}
.clearfix:after {
	content:"";
	display:table;
	clear:both;
}

.table-wr {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
}
/* Акордеон (dropt#1346) — нативний details/summary, без JS. Перевикористовний компонент,
   стандарт студії (dropt#280): тримати структуру мінімальною, без прив'язки до сторінки товару. */
.accordion {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
}
.accordion-item {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.accordion-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--xs);
	padding: var(--gap);
	cursor: pointer;
	font-weight: var(--font-weight-bold);
	list-style: none;
}
.accordion-item summary::-webkit-details-marker {
	display: none;
}
.accordion-item summary::after {
	content: '+';
	flex-shrink: 0;
}
.accordion-item[open] summary::after {
	content: '−';
}
/* dropt#1370: CSS-анімація розкриття — grid-template-rows: 0fr→1fr (сумісно з нативним
   <details>: author CSS display:grid перебиває UA-приховування закритого вмісту, тому
   [open] тут не потрібен для видимості, лише height-перехід). Один grid-рядок з ОДНИМ
   grid-item (.accordion-body-inner) — padding/overflow:hidden обов'язково на внутрішньому
   елементі: на самому grid-контейнері вони не стискаються 0fr-трюком до нуля. */
.accordion-body {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows .25s ease;
}
.accordion-item[open] .accordion-body {
	grid-template-rows: 1fr;
}
.accordion-body-inner {
	overflow: hidden;
	padding: 0 var(--gap) var(--gap);
	min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
	.accordion-body {
		transition: none;
	}
}
table {
	width: 100%;
	border-collapse: collapse;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.tal {
	text-align: left;
}
.tar {
	text-align: right;
}
.tac {
	text-align: center;
}
.tal > .btn {
	margin-right:auto;
	margin-left:0;
}
.tar > .btn {
	margin-right:0;
	margin-left:auto;
}
.nowrap {
	white-space: nowrap;
}
.line {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.through {
	text-decoration: line-through;
}
a:focus:not(:focus-visible) {
	outline: none;
}
.bold {
	font-weight:bold;
}
.ib {
	display:inline-block;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
ul.inside {
	list-style-position:inside;
}
.dN {
	display:none;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6{
	margin-top: var(--step);
}
.col1 > *,
.col2 > *,
.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	margin-top: var(--gap);
	display:block;
}
.col1 > *:after,
.col2 > *:after,
.col3 > *:after,
.col4 > *:after,
.col5 > *:after,
.col6 > *:after {
	content:"";
	display:table;
	clear:both;
}
.container {
	margin:0 calc(var(--gap) / 2);
	overflow:hidden;
}
/* cms#951: banner slide-background — без цього мінімуму порожній <div style="background-image">
   схлопується до нульової висоти (на відміну від <img>, background-image не задає розмір сам). */
.bannerSlider .slide-background {
	min-height: 300px;
	background-position: 50% 50%;
	background-size: cover;
	display: flex;
	align-items: center;
}
/* dropt#1371: текст банера головної (заголовок/опис/CTA) — портовано з попередньої реалізації
   (wellcomeBanner, article.ID=1) у [banner/]. .title тепер контейнер верстки (span з display:flex —
   валідно, тег не міняв, щоб не чіпати MBanner.php зайве), 3 частини — .banner-name/.banner-text/
   .btn — усі йдуть з macro-контенту banner.title (library+html-макроси, не хардкод). */
.bannerSlider .title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--m);
	max-width: 480px;
	padding: var(--xl) var(--gap);
	color: var(--text-white);
}
.bannerSlider .banner-name {
	font-weight: var(--font-weight);
	font-size: 32px;
	line-height: 1.15;
}
/* Ім'я залогінованого клієнта (Html::wellcomeBannerCustomerName()) — жирне, на відміну від
   звичайного "Привіт," навколо (dropt#1371, узгоджено з Вадіком: жирність, не колір-акцент). */
.bannerSlider .banner-name span {
	font-weight: var(--font-weight-bold);
}
.bannerSlider .banner-text {
	line-height: 1.6;
}
.bannerSlider .title .btn {
	width: auto;
}
.tile > * {
	background: var(--back);
	border: 1px solid var(--border);
}

header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: var(--back);
}
header .container {
	position: relative;
}
header,
header .line {
	height: var(--header-height);
}
.siteName svg {
	width: 146px;
	height: 33px;
}
.siteName a {
	text-decoration: none;
}
header .toolbar {
	height: var(--xl);
}
header .toolbar > * {
	margin: 0 var(--xxs);
	height: var(--xl);
}
.wIcon {
	display: inline-flex;
	align-items: center;
	gap: var(--xxs);
	color: var(--text-primary);
	text-decoration: none;
}
.wIcon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: none;
}
/* dropt#1372: тригер тепер сама кнопка (button.wIcon.search), не обгортка з input — знімаємо
   генеричний button-скін (border/padding/width:100%, спільне правило вище для всіх button/.btn). */
.wIcon.search {
	border: none;
	background: none;
	padding: 0;
	width: auto;
	line-height: normal;
}
/* dropt#1372: модал пошуку — за зразком повноекранного оверлею dropt.com.ua, технічно той самий
   нативний <dialog>-патерн, що dialog#item-lightbox (2-catalog.css): full-viewport, свій backdrop,
   персистентна "×" поза тілом, що перезаписується. */
dialog#search-modal {
	position: relative;
	border: none;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	background: var(--back);
}
dialog#search-modal[open] {
	display: flex;
	flex-direction: column;
}
dialog#search-modal::backdrop {
	background: rgba(0, 0, 0, .3);
}
.search-modal-close {
	position: absolute;
	top: var(--gap);
	right: var(--gap);
	width: auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--main-50);
}
.search-modal-form {
	display: flex;
	align-items: center;
	gap: var(--gap);
	padding: var(--xl) var(--xxl) var(--gap) var(--gap);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
/* .search-icon — та сама лінійна іконка (fill:none/stroke), що в хедері (див. правило
   .wIcon svg.search-icon вище); тут не всередині .wIcon, тож стилізуємо явно тим самим прийомом. */
.search-modal-form svg.search-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--main-50);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.search-modal-form input {
	border: none;
	width: 100%;
	font-size: var(--font-size-large);
	padding: var(--xs) 0;
}
.search-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--gap);
}
.search-query {
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--m);
}
.search-cols {
	display: flex;
	flex-direction: column;
	gap: var(--l);
}
.search-facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--l);
}
.search-facets h4,
.search-groups h4 {
	margin: 0 0 var(--xs);
	font-size: var(--font-size);
	color: var(--main-50);
	font-weight: var(--font-weight);
}
.search-facets a {
	display: flex;
	justify-content: space-between;
	gap: var(--xs);
	text-decoration: none;
	color: var(--text-primary);
	padding: 4px 0;
}
.search-facets b {
	color: var(--main-50);
	font-weight: var(--font-weight);
}
.search-groups section a {
	display: flex;
	align-items: center;
	gap: var(--gap);
	padding: var(--xs) 0;
	text-decoration: none;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border);
}
.search-groups section a img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex-shrink: 0;
}
.search-groups section a > span {
	flex: 1;
	min-width: 0;
}
.search-groups section a small {
	display: block;
	color: var(--main-50);
	font-size: .85em;
}
.search-all {
	display: block;
	text-align: center;
	margin-top: var(--l);
	padding: var(--gap);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text-primary);
	font-weight: var(--font-weight-bold);
}
.fav-count,
.cart-count {
	display: inline-block;
	margin-left: var(--xxs);
	vertical-align: sub;
}
.fav-count[hidden],
.cart-count[hidden] {
	display: none;
}
/* dropt#1373: знижка й перемикач мов у хедері десктопу — окремі від мобільного nav.tm-дровера
   (.discount/.lang-panel там лишаються без змін). На мобільному приховані (тут), щоб не
   дублювати видимо в тому самому в'юпорті — .discount вже в дровері (.greeting), lang-panel
   вже в .contacts. Позиціонування (order) — 5-992.css. */
.header-discount,
.header-lang {
	display: none;
}
.auth-banner {
	background-color: var(--splash-10);
	color: var(--text-primary);
	padding: var(--xs) var(--gap);
	text-align: center;
	font-size: var(--font-size-small);
}
.auth-banner a {
	color: var(--splash);
	font-weight: var(--font-weight-bold);
}

nav.tm {
	line-height: 3;
}
nav.tm label {
	display: block;
}
nav.tm label,
nav.tm svg {
	width: 30px;
	height: 30px;
}
nav.tm input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
nav.tm label .close {
	display: none;
}
nav.tm input[type="checkbox"]:checked ~ label .hamburger {
	display: none;
}
nav.tm input[type="checkbox"]:checked ~ label .close {
	display: block;
}
nav.tm ul {
	list-style: none outside;
	padding: 0;
	margin: 0;
}
nav.tm ul ul {
	margin: var(--gap) 0 var(--gap) var(--gap);
}
nav.tm li {
	position: relative;
	min-height: var(--xl);
}
nav.tm > div {
	padding: var(--gap);
	position: fixed;
	top: var(--header-height);
	left: 0;
	z-index: 2;
	width: 100%;
	height: calc(100vh - var(--header-height));
	max-height: calc(100vh - var(--header-height));
	overflow: auto;
	transform: translateX(-125%);
	transition: .35s all cubic-bezier(.65, .05, .36, 1);
	background-color: var(--back);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
nav.tm input[type="checkbox"]:checked ~ div {
	transform: translateX(0);
}
nav.tm a {
	text-decoration: none;
}
nav.tm a,
nav.tm span {
	color: var(--text-primary);
	font-weight: var(--font-weight-bold);
	display: block;
}
nav.tm .greeting span {
	display: inline-block;
	color: var(--splash);
}
nav.tm .discount {
	font-size: 30px;
	line-height: 1;
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--gap);
}
nav.tm .contacts {
	margin-top: var(--gap);
	padding: var(--gap);
	border: 1px solid var(--main-10);
	border-radius: var(--radius);
}
nav.tm .contacts .messengers a {
	display: inline;
}
nav.tm .contacts .lang-panel {
	margin-top: var(--gap);
}
nav.tm .lang-panel > li {
	display: inline-block;
	margin-right: var(--gap);
}

.siteName > * {
	display: inline-block;
}
footer .top {
	line-height: 3;
}
footer .top a,
footer .top span {
	display: block;
	color: var(--text-primary);
}
footer .top a {
	text-decoration: none;
}
footer .top a:hover {
	text-decoration: underline;
}
footer .top p a.ib {
	display: inline-block;
}
footer .top .messengers a {
	display: inline;
}
.footer-grid {
	margin-top: calc(var(--gap) / -2);
}
.footer-grid > * {
	margin-top: var(--gap);
}
.footer-grid > div > *:first-child {
	border-bottom: 1px solid var(--splash);
	padding-bottom: 6px;
	margin-bottom: 6px;
	font-weight: var(--font-weight-bold);
}
.footer-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-simple ul {
	margin-top: 6px;
}
.menu-simple > li > span {
	border-bottom: 1px solid var(--splash);
	padding-bottom: 6px;
	margin-bottom: 6px;
	font-weight: var(--font-weight-bold);
}
footer .top form .line {
	position: relative;
}
footer .top form .line input {
	padding-right: 44px;
}
footer .top form .line button[type="submit"] {
	padding: 0;
	border: none;
	background: transparent;
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
footer .bottom {
	padding: var(--gap) 0;
}
footer .bottom a {
	color: var(--text-primary);
}

@media only screen and (min-width: 576px) {
.col2,
.col3,
.col4,
.col5,
.col6 {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items:stretch;
	gap:var(--gap);
}
.col2 > *,
.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	width: calc(50% - var(--gap) / 2);
	margin-top:0;
}
.footer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: var(--gap);
}
.footer-grid > * {
	margin-top: 0;
	width: calc(50% - var(--gap) / 2);
}
/* dropt#1368: «Ви переглядали» — 2 картки в ряд (мобільна адаптація за аналогією з .catalog-list,
   яка на цій ширині лишається 1-колонковою; .recent-list — власний компактний грід). */
.catalog-list.recent-list {
	grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 768px) {
.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	width: calc(100%/3 - var(--gap) / 3 * 2);
}
}
@media only screen and (min-width: 992px) {
.col4 > *,
.col5 > *,
.col6 > * {/*4 колонки*/
	width: calc(25% - var(--gap) / 4 * 3);
}

.line .siteName {
	order: -1;
}
header .toolbar {
	order: 2;
}
nav.tm {
	flex-grow: 1;
	margin-left: var(--gap);
}
nav.tm > label {
	display: none;
}
nav.tm > div {
	transform: none;
	position: static;
	height: auto;
	max-height: unset;
	padding: 0;
	overflow: visible;
	width: auto;
	display: flex;
	background-color: transparent;
}
nav.tm > div > div {
	display: contents;
}
nav.tm ul.menu-top {
	display: flex;
}
nav.tm ul.menu-top > li {
	margin: 0 var(--gap);
	width: auto;
	height: var(--xl);
	white-space: nowrap;
	position: relative;
	display: flex;
	align-items: center;
}
nav.tm .greeting,
nav.tm .contacts {
	display: none;
}
/* dropt#1373: знижка — між nav.tm (order:0, дефолт) і .toolbar (order:2) у .line, "перед
   іконками" (dropt.com.ua-референс). Число — акцентний колір (--splash), той самий, що вже
   використовує проєкт для акцентних чисел/лінків (a{color:var(--splash)} у 2-main.css). */
.header-discount {
	display: flex;
	align-items: baseline;
	gap: var(--xxs);
	order: 1;
	white-space: nowrap;
	font-weight: var(--font-weight-bold);
}
.header-discount span {
	color: var(--splash);
}
/* Перемикач мов — поряд з блоком іконок (одразу після .toolbar, order:3, найправіше в .line). */
.header-lang {
	display: flex;
	order: 3;
}
.header-lang .lang-panel {
	display: flex;
	gap: var(--xs);
	list-style: none;
}
.header-lang .lang-panel a,
.header-lang .lang-panel span {
	color: var(--main-50);
	text-decoration: none;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	font-size: var(--font-size-small);
}
.header-lang .lang-panel li.active span {
	color: var(--text-primary);
}

.footer-grid > * {
	width: calc(25% - var(--gap) / 4 * 3);
}
/* dropt#1368: «Ви переглядали» — 4 картки в ряд на десктопі. Вища специфічність за
   .catalog-list{grid-template-columns:repeat(3,1fr)} (2-catalog.css, той самий 992px-поріг,
   рахунок сайдбара каталогу) — тут сайдбара немає, тому 4, а не 3. */
.catalog-list.recent-list {
	grid-template-columns: repeat(4, 1fr);
}
footer .top .phones {
	line-height: 1.8;
}
footer .top .regime {
	line-height: 1.5;
}
footer .top .renewal {
	line-height: 1.5;
}
footer .bottom .container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
/* dropt#1371: банер головної — крупніший заголовок і ширший текстовий блок на десктопі. */
.bannerSlider .slide-background {
	min-height: 420px;
}
.bannerSlider .title {
	max-width: 560px;
	padding: var(--xxl) var(--xl);
}
.bannerSlider .banner-name {
	font-size: 48px;
}
/* dropt#1372: модал пошуку на десктопі — вужчий центрований стовпчик (не на всю ширину екрана,
   як на мобільному) + facets колонкою зліва від груп товарів. */
.search-modal-form,
.search-modal-body {
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
}
.search-cols {
	flex-direction: row;
	align-items: flex-start;
}
.search-facets {
	flex-direction: column;
	flex: 0 0 200px;
}
.search-groups {
	flex: 1;
	min-width: 0;
}
}
@media only screen and (min-width: 1200px) {
.col5 > *{
	width: calc(20% - var(--gap) / 5 * 4);
}
.col6 > * {
	width: calc(100%/6 - var(--gap) / 6 * 5);
}
.container {
	max-width: 1200px;
	margin: 0 auto;
}
}
@media only screen and (min-width: 1440px) {
.container {
	max-width: 1440px;
}
}