/*
 * Nordikō — базова система стилів.
 *
 * Зібрано з макета Claude Design (design/markup.html), у якому 1406 інлайнових
 * style="…" і жодного класу. Інлайн у тему не переносимо: підтримувати його
 * неможливо, а окремі властивості звідти перебивають медіазапити — на цьому
 * в попередньому проєкті сторінка лишалася в дві вузькі колонки на телефоні
 * через інлайновий grid-template-columns.
 *
 * Правило, що з цього випливає і діє на весь проєкт:
 * пропорції колонок задаються ТІЛЬКИ в медіазапиті від потрібної ширини,
 * ніколи — інлайном у шаблоні.
 *
 * Порядок файлу:
 *   1. Токени (:root)
 *   2. Скидання і базова типографіка
 *   3. Layout: контейнер, сітки, секції
 *   4. Компоненти
 *   5. Медіазапити
 */

/* =========================================================================
   1. Токени
   ====================================================================== */

:root {
	/* --- Кольори: нейтральна шкала --- */
	--nrd-ink:          #1c1a17; /* Основний текст, темні секції */
	--nrd-ink-soft:     #3d3934; /* Текст на темному тлі, другорядний */
	--nrd-ink-line:     #3a3631; /* Межі всередині темних секцій */
	--nrd-muted:        #6e675f; /* Другорядний текст */
	--nrd-muted-soft:   #8a837b; /* Підписи, метадані */
	--nrd-muted-faint:  #b9b1a7; /* Плейсхолдери, вимкнене */

	/* --- Кольори: тло й межі --- */
	--nrd-bg:           #fbf9f6; /* Тло сторінки */
	--nrd-bg-card:      #ffffff; /* Картки, шапка */
	--nrd-bg-warm:      #f1ebe3; /* Верхня смуга, підвал */
	--nrd-bg-soft:      #f5f1ec; /* Секції-акценти */
	--nrd-bg-tint:      #efe9e1; /* Заповнення блоків */
	--nrd-line:         #e4ded6; /* Основна межа */
	--nrd-line-soft:    #efe9e1; /* Легка межа всередині карток */
	--nrd-line-strong:  #ddd4c8; /* Виразна межа, активний стан */

	/* --- Кольори: бренд і стани --- */
	--nrd-accent:       #b07d4e; /* Бронза — головний акцент */
	--nrd-accent-dark:  #96683d; /* Наведення на акцент */
	--nrd-accent-soft:  #d5a570; /* Акцент на темному тлі */
	--nrd-success:      #5c7a5e; /* «В наявності», підтвердження */
	--nrd-danger:       #b24a3c; /* Помилки, розпродаж */
	--nrd-star:         #f5c518; /* Зірки рейтингу */

	/* --- Типографіка --- */
	--nrd-font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nrd-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/*
	 * Кеглі. Макет тримається на компактній шкалі 10.5–17px для інтерфейсу
	 * і на clamp() для заголовків — саме так, а не фіксованими розмірами
	 * з окремими значеннями під мобільний.
	 */
	--nrd-fs-3xs:   10.5px;
	--nrd-fs-2xs:   11.5px;
	--nrd-fs-xs:    12px;
	--nrd-fs-sm:    12.5px;
	--nrd-fs-base:  13.5px;
	--nrd-fs-md:    14px;
	--nrd-fs-lg:    15px;
	--nrd-fs-xl:    17px;
	--nrd-fs-2xl:   19px;
	--nrd-fs-3xl:   22px;

	--nrd-h1: clamp(34px, 4.4vw, 58px);
	--nrd-h2: clamp(28px, 3.4vw, 42px);
	--nrd-h3: clamp(26px, 3vw, 38px);
	--nrd-h4: clamp(23px, 2.4vw, 30px);
	--nrd-h5: clamp(22px, 2.2vw, 28px);

	--nrd-lh-tight:  1.2;
	--nrd-lh-head:   1.25;
	--nrd-lh-base:   1.6;
	--nrd-lh-text:   1.75;

	/* Розрядки. У макеті вони змістовні: що дрібніший текст, то ширша. */
	--nrd-ls-tight:  .01em;
	--nrd-ls-wide:   .04em;
	--nrd-ls-wider:  .08em;
	--nrd-ls-widest: .16em;
	--nrd-ls-logo:   .28em;

	/* --- Розміри й ритм --- */
	--nrd-container: 1360px;
	/*
	 * Поля сторінки. Телефонні — 16 пікселів: із 32 на кожен бік екран
	 * у 390 втрачав шосту частину ширини, і це видно на всьому — від іконок
	 * у шапці, які висіли далеко від країв, до світлин у картках товару.
	 */
	--nrd-gutter:    16px;
	/*
	 * Висота шапки. Тут — телефонна: на вузькому екрані в ній лише бургер,
	 * логотип і три іконки, і 92 пікселі з десктопа з'їдали шосту частину
	 * екрана ще до першого товару. Повний розмір повертається з 768px,
	 * де в шапці з'являються пошук і підписи під іконками.
	 */
	--nrd-header-h:  58px;
	--nrd-topbar-h:  38px;

	--nrd-space-1:  6px;
	--nrd-space-2:  9px;
	--nrd-space-3:  12px;
	--nrd-space-4:  16px;
	--nrd-space-5:  20px;
	--nrd-space-6:  26px;
	--nrd-space-7:  32px;
	--nrd-space-8:  48px;
	--nrd-space-9:  64px;
	--nrd-space-10: 88px;

	/*
	 * Скруглення. Макет майже прямокутний: 2px — це «майже нуль», але
	 * достатньо, щоб край не виглядав різаним. Кола (50%) — аватари й крапки.
	 */
	--nrd-radius:     2px;
	/* Таблетка: чіпи підкатегорій, кнопка фільтра, сортування. */
	--nrd-radius-pill: 999px;
	--nrd-radius-md:  3px;
	--nrd-radius-lg:  9px;
	--nrd-radius-pill: 28px;

	--nrd-shadow-sm: 0 1px 4px rgba(28, 26, 23, .14);
	--nrd-shadow-md: 0 6px 20px rgba(28, 26, 23, .12);
	--nrd-shadow-lg: 0 16px 44px rgba(28, 26, 23, .16);
	--nrd-shadow-xl: 0 24px 60px rgba(28, 26, 23, .14);
	--nrd-shadow-accent: 0 10px 30px rgba(176, 125, 78, .4);

	--nrd-ease:      cubic-bezier(.2, .7, .3, 1);
	--nrd-t-fast:    .2s ease;
	--nrd-t-base:    .25s ease;
	--nrd-t-slow:    .45s var(--nrd-ease);

	/*
	 * Висота липкої шапки. Задається скриптом по факту: шапка складається
	 * з двох ярусів (92 + 54), а на вузьких екранах другий ховається —
	 * зашите число тут означало б, що смуга вкладок то ховається під шапку,
	 * то висить із зазором.
	 */
	--nrd-stick: 148px;

	--nrd-z-header:  40;
	--nrd-z-drawer:  60;
	--nrd-z-overlay: 55;
	--nrd-z-widget:  50;
}

/* =========================================================================
   2. Скидання і база
   ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--nrd-bg);
	color: var(--nrd-ink);
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-md);
	line-height: var(--nrd-lh-base);
	letter-spacing: var(--nrd-ls-tight);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--nrd-t-fast);
}

a:hover {
	color: var(--nrd-accent);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nrd-font-head);
	font-weight: 300;
	line-height: var(--nrd-lh-head);
	letter-spacing: var(--nrd-ls-tight);
	margin: 0 0 var(--nrd-space-4);
}

h1 { font-size: var(--nrd-h1); }
h2 { font-size: var(--nrd-h2); }
h3 { font-size: var(--nrd-h3); }
h4 { font-size: var(--nrd-h4); }
h5 { font-size: var(--nrd-h5); }
h6 { font-size: var(--nrd-fs-2xl); }

p {
	margin: 0 0 var(--nrd-space-4);
	line-height: var(--nrd-lh-text);
}

/*
 * Атрибут hidden має вимикати елемент завжди.
 *
 * У браузера це лише `[hidden]{display:none}` з таблиці за замовчуванням,
 * і будь-яке власне правило з display перебиває його. Саме на цьому
 * пошук усередині фільтра ховав пункти в DOM, а на екрані вони лишались:
 * у списку фільтра пункти — flex.
 */
[hidden] {
	display: none !important;
}

/* Доступність: приховати візуально, лишити для читалок. */
.nrd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--nrd-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   3. Layout
   ====================================================================== */

.nrd-container {
	width: 100%;
	max-width: var(--nrd-container);
	margin: 0 auto;
	padding-inline: var(--nrd-gutter);
}

.nrd-main {
	flex: 1 0 auto;
}

.nrd-section {
	padding-top: var(--nrd-space-9);
}

.nrd-section--tight {
	padding-top: var(--nrd-space-7);
}

.nrd-section--dark {
	background: var(--nrd-ink);
	color: #fff;
	margin-top: var(--nrd-space-10);
	padding-block: var(--nrd-space-9);
}

.nrd-section--soft {
	background: var(--nrd-bg-warm);
	border-top: 1px solid var(--nrd-line);
	padding-block: var(--nrd-space-9);
}

.nrd-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nrd-space-5);
	margin-bottom: var(--nrd-space-6);
}

.nrd-section__title {
	margin: 0;
}

/* Посилання зі стрілкою — «Весь каталог», «Всі відгуки», «Всі статті». */
.nrd-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	color: var(--nrd-accent);
	white-space: nowrap;
}

.nrd-link-arrow svg {
	transition: transform var(--nrd-t-base);
}

.nrd-link-arrow:hover svg {
	transform: translateX(3px);
}

.nrd-eyebrow {
	font-size: var(--nrd-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-widest);
	text-transform: uppercase;
	color: var(--nrd-accent);
	margin-bottom: var(--nrd-space-2);
}

/*
 * Сітки.
 *
 * Базовий стан — одна колонка. Кількість колонок додається медіазапитом
 * знизу вгору. Так мобільна верстка не залежить від того, чи забули щось
 * перевизначити, і жодне правило її не перебиває.
 */
.nrd-grid {
	display: grid;
	gap: var(--nrd-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.nrd-grid--gap-lg { gap: var(--nrd-space-6); }
.nrd-grid--gap-sm { gap: var(--nrd-space-2); }

/* =========================================================================
   4. Компоненти
   ====================================================================== */

/* --- 4.1 Верхня смуга --- */

/*
 * На телефоні смуги немає зовсім.
 *
 * З усього її вмісту на вузькому екрані лишався тільки знак «UA» —
 * перемикача мов немає, друга мова на сайті теж. Тобто 38 пікселів
 * над шапкою тримались заради підпису, який нічого не робить.
 * З 768px, де в смузі з'являються графік і місто, вона повертається.
 */
.nrd-topbar {
	display: none;
	background: var(--nrd-bg-warm);
	border-bottom: 1px solid var(--nrd-line);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-topbar__inner {
	height: var(--nrd-topbar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-6);
}

.nrd-topbar__status {
	display: none;
	align-items: center;
	gap: var(--nrd-space-1);
	white-space: nowrap;
}

.nrd-topbar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nrd-success);
	flex: 0 0 auto;
}

.nrd-topbar__links {
	display: none;
}

.nrd-topbar__side {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.nrd-topbar__city {
	display: none;
	align-items: center;
	gap: var(--nrd-space-1);
	white-space: nowrap;
}

.nrd-topbar__city svg {
	stroke: var(--nrd-accent);
}

/* Перемикач мови. Другої мови поки немає — див. inc/setup.php. */
.nrd-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	font-weight: 600;
	font-size: var(--nrd-fs-xs);
	letter-spacing: var(--nrd-ls-wider);
}

.nrd-lang__btn {
	border: 0;
	background: transparent;
	color: var(--nrd-muted);
	padding: 3px 8px;
	border-radius: var(--nrd-radius);
}

.nrd-lang__btn.is-on {
	background: var(--nrd-ink);
	color: #fff;
}

/*
 * Скидання для всіх меню WordPress.
 *
 * wp_nav_menu() завжди віддає <ul><li>. Без цього правила пункти лишаються
 * маркованим списком і розпихають рядок шапки по вертикалі.
 */
.nrd-topbar__menu,
.nrd-catnav__list,
.nrd-footer__menu,
.nrd-footer__legal-list,
.nrd-mnav__list,
.nrd-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nrd-topbar__menu,
.nrd-footer__legal-list {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-5);
	flex-wrap: wrap;
}

/* --- 4.2 Шапка --- */

.nrd-header {
	background: var(--nrd-bg-card);
	border-bottom: 1px solid var(--nrd-line);
	position: sticky;
	top: 0;
	z-index: var(--nrd-z-header);
}

.nrd-header__inner {
	height: var(--nrd-header-h);
	display: flex;
	align-items: center;
	gap: var(--nrd-space-4);
}

/* --- Логотип --- */

.nrd-logo {
	flex: 0 0 auto;
	display: block;
	padding-right: var(--nrd-space-1);
}

.nrd-logo:hover {
	color: var(--nrd-ink);
}

.nrd-logo__word {
	display: block;
	position: relative;
	font-family: var(--nrd-font-head);
	font-weight: 300;
	font-size: 19px;
	letter-spacing: var(--nrd-ls-logo);
	line-height: 1;
	color: var(--nrd-ink);
	white-space: nowrap;
}

/*
 * Макрон над останньою «O» — та сама риска, що в назві Nordikō.
 * Вона саме над кінцевою літерою, не над першою: так у логотипі.
 */
.nrd-logo__o {
	position: relative;
}

/*
 * Розміри в em, а не в пікселях: логотип на телефоні дрібніший, і риска,
 * підігнана під 23px, над 19px висіла б окремо від літери. В em вона
 * масштабується разом зі словом — числа підібрані так, щоб на десктопі
 * вийшли ті самі 3px і -7px, що були.
 */
.nrd-logo__macron {
	position: absolute;
	left: .05em;
	right: .4em;
	top: -.3em;
	height: .13em;
	background: var(--nrd-accent);
}

.nrd-logo__tag {
	display: block;
	margin-top: 5px;
	font-size: 7px;
	letter-spacing: .3em;
	color: var(--nrd-accent);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Пошук у шапці --- */

.nrd-hsearch {
	display: none;
	flex: 1;
	max-width: 520px;
	position: relative;
}

.nrd-hsearch__input {
	width: 100%;
	height: 46px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg);
	padding: 0 52px 0 16px;
	font-size: var(--nrd-fs-md);
	color: var(--nrd-ink);
	outline: none;
	border-radius: var(--nrd-radius);
}

.nrd-hsearch__input:focus {
	border-color: var(--nrd-accent);
	background: var(--nrd-bg-card);
}

.nrd-hsearch__btn {
	position: absolute;
	right: 0;
	top: 0;
	width: 46px;
	height: 46px;
	border: 0;
	background: var(--nrd-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 var(--nrd-radius) var(--nrd-radius) 0;
}

.nrd-hsearch__btn:hover {
	background: var(--nrd-accent);
}

/* --- Дії в шапці: обране, порівняння, кабінет, кошик --- */

.nrd-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--nrd-space-1);
}

.nrd-act {
	position: relative;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 6px 10px;
	color: var(--nrd-ink);
	font-size: var(--nrd-fs-2xs);
	white-space: nowrap;
}

.nrd-act:hover {
	color: var(--nrd-accent);
}

.nrd-act__count,
.nrd-cartbtn__count {
	position: absolute;
	top: 2px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--nrd-accent);
	color: #fff;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.nrd-act__count[data-count="0"],
.nrd-cartbtn__count[data-count="0"] {
	display: none;
}

/*
 * Кошик на телефоні — теж просто знак.
 *
 * Чорний прямокутник поруч із двома голими іконками виглядав як третя
 * рамка, тільки залита. Кількість товарів усе одно видно: вона висить
 * бронзовою міткою на самій іконці. Із 768px кнопка повертається —
 * там вона показує ще й суму, і без підкладки та злилась би з логотипом.
 */
.nrd-cartbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--nrd-ink);
	border-radius: var(--nrd-radius);
}

.nrd-cartbtn:hover {
	color: var(--nrd-accent);
}

.nrd-cartbtn__ico {
	position: relative;
	display: flex;
}

.nrd-cartbtn__count {
	top: -6px;
	right: -8px;
}

.nrd-cartbtn__sum {
	display: none;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Іконки шапки без рамок.
 *
 * Рамка навколо кожної кнопки давала на телефоні три зайві прямокутники
 * поспіль — саме з цього почалась розмова про те, що рамок забагато.
 * Замість рамки — розмір: кнопка 40 пікселів, знак усередині великий.
 */
.nrd-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--nrd-ink);
	flex: 0 0 auto;
	border-radius: var(--nrd-radius);
}

.nrd-burger:hover {
	color: var(--nrd-accent);
}

/* --- Контакти в шапці --- */

.nrd-hcontact {
	position: relative;
	display: flex;
}

.nrd-hcontact__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--nrd-ink);
	border-radius: var(--nrd-radius);
}

.nrd-hcontact__btn:hover,
.nrd-hcontact[data-open] .nrd-hcontact__btn {
	color: var(--nrd-accent);
}

/*
 * Віконце прив'язане до правого краю кнопки, а не до лівого: кнопка стоїть
 * майже біля межі екрана, і від лівого краю віконце вилазило б за неї —
 * тобто давало б ту саму горизонтальну прокрутку, з якої почалась ця пачка правок.
 */
.nrd-hcontact__pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: var(--nrd-z-header);
	min-width: 232px;
	padding: var(--nrd-space-4);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	box-shadow: var(--nrd-shadow-lg);
	text-align: left;
}

.nrd-hcontact__num {
	display: block;
	font-size: var(--nrd-fs-xl);
	font-weight: 600;
	color: var(--nrd-ink);
	white-space: nowrap;
}

.nrd-hcontact__num:hover {
	color: var(--nrd-accent);
}

.nrd-hcontact__hours {
	margin-top: 3px;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

.nrd-hcontact__ways {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
	margin-top: var(--nrd-space-3);
}

.nrd-hcontact__way {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	padding: 7px 9px;
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-ink);
	background: var(--nrd-bg);
}

.nrd-hcontact__way svg {
	fill: var(--cw);
	flex: 0 0 auto;
}

.nrd-hcontact__way:hover {
	background: var(--nrd-bg-warm);
	color: var(--nrd-ink);
}

.nrd-hcontact__call {
	width: 100%;
	margin-top: var(--nrd-space-3);
	padding: 10px 12px;
	border: 1px solid var(--nrd-accent);
	background: none;
	color: var(--nrd-accent);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.nrd-hcontact__call:hover {
	background: var(--nrd-accent);
	color: #fff;
}

/* --- Друга смуга шапки: каталог і категорії --- */

.nrd-catbar {
	display: none;
	border-top: 1px solid var(--nrd-line);
}

.nrd-catbar__inner {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 30px;
}

.nrd-catbtn {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--nrd-accent);
	border: 0;
	color: #fff;
	height: 54px;
	padding: 0 24px;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	/* Заходить під край контейнера — так у макеті. */
	margin-left: -24px;
}

.nrd-catbtn:hover {
	background: var(--nrd-accent-dark);
	color: #fff;
}

.nrd-catnav__list {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-6);
	font-size: var(--nrd-fs-base);
}

/* Підкреслення, що виїжджає зліва направо. */
.nrd-catnav__list a {
	position: relative;
	white-space: nowrap;
}

.nrd-catnav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -7px;
	height: 1px;
	background: var(--nrd-accent);
	transition: right .28s var(--nrd-ease);
}

.nrd-catnav__list a:hover::after,
.nrd-catnav__list .current-menu-item > a::after {
	right: 0;
}

/* Розпродаж у меню — червоним, це не помилка верстки. */
.nrd-catnav__list .nrd-sale > a {
	color: var(--nrd-danger);
	font-weight: 600;
}

.nrd-catbar__side {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.nrd-catbar__phone {
	font-size: var(--nrd-fs-lg);
	font-weight: 600;
	white-space: nowrap;
}

.nrd-callbtn {
	background: none;
	border: 1px solid var(--nrd-line);
	padding: 8px 14px;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
	border-radius: var(--nrd-radius);
	white-space: nowrap;
}

.nrd-callbtn:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

/* --- Мегаменю каталогу --- */

.nrd-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 36;
	background: var(--nrd-bg-card);
	border-bottom: 1px solid var(--nrd-line);
	box-shadow: var(--nrd-shadow-xl);
	max-height: calc(100vh - 190px);
	overflow-y: auto;
	animation: nrd-fade .2s ease;
}

.nrd-mega__grid {
	padding: 36px var(--nrd-gutter) 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px 40px;
}

.nrd-mega__head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
}

/* Категорійна іконка в мегаменю: та сама фігура, що на плитці, менший розмір. */
.nrd-mega__svg {
	width: 19px;
	height: 19px;
	color: var(--nrd-accent);
}

.nrd-mega__ico {
	width: 34px;
	height: 34px;
	border: 1px solid var(--nrd-line);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nrd-bg);
	color: var(--nrd-accent);
	flex: 0 0 auto;
}

.nrd-mega__title {
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-xl);
	font-weight: 400;
	letter-spacing: var(--nrd-ls-wide);
}

.nrd-mega__list {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-base);
}

.nrd-mega__list a {
	color: var(--nrd-muted);
}

.nrd-mega__promo {
	background: var(--nrd-bg-warm);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}

.nrd-mega__promo-title {
	font-family: var(--nrd-font-head);
	font-size: 23px;
	font-weight: 300;
	line-height: 1.25;
}

.nrd-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 26, 23, .4);
	z-index: 35;
	animation: nrd-in .18s ease;
	border: 0;
	width: 100%;
}

@keyframes nrd-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes nrd-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes nrd-slide {
	from { transform: translateX(24px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* --- Мобільне меню --- */

.nrd-mnav {
	position: fixed;
	inset: 0;
	z-index: 61;
}

.nrd-mnav__back-drop {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	background: rgba(28, 26, 23, .45);
	cursor: default;
	animation: nrd-fade .22s ease;
}

.nrd-mnav__box {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: min(340px, 86vw);
	display: flex;
	flex-direction: column;
	background: var(--nrd-bg-card);
	padding: 18px 22px 24px;
	animation: nrd-slide-left .24s var(--nrd-ease);
}

@keyframes nrd-slide-left {
	from { transform: translateX(-100%); }
	to   { transform: none; }
}

.nrd-mnav__head {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	padding-bottom: var(--nrd-space-4);
	margin-bottom: var(--nrd-space-3);
	border-bottom: 1px solid var(--nrd-line-soft);
	flex: 0 0 auto;
}

.nrd-mnav__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: calc(-1 * var(--nrd-space-2));
	border: 0;
	background: none;
	color: var(--nrd-ink);
	cursor: pointer;
}

.nrd-mnav__title {
	font-size: var(--nrd-fs-lg);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wide);
	text-transform: uppercase;
}

/* Кнопка закриття завжди праворуч, що б не стояло ліворуч від неї. */
.nrd-mnav__head .nrd-burger {
	margin-left: auto;
}

/*
 * Екрани меню. Гортається кожен окремо: у «Диванах» пʼятнадцять підрозділів,
 * і список має свою прокрутку, а шапка з «назад» лишається на місці.
 */
.nrd-mnav__panel {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nrd-mnav__list {
	display: flex;
	flex-direction: column;
	font-size: var(--nrd-fs-xl);
	font-weight: 500;
}

.nrd-mnav__list a {
	display: block;
	padding-block: var(--nrd-space-3);
	border-bottom: 1px solid var(--nrd-line-soft);
}

/*
 * Рядок розділу: назва тягнеться, стрілка тримає власну ширину.
 * Межу малює рядок, а не посилання, — інакше під стрілкою був би розрив.
 */
.nrd-mnav__item {
	display: flex;
	align-items: stretch;
	gap: var(--nrd-space-2);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-mnav__item a {
	flex: 1;
	min-width: 0;
	border-bottom: 0;
}

.nrd-mnav__into {
	flex: 0 0 auto;
	width: 44px;
	border: 0;
	background: none;
	color: var(--nrd-muted-soft);
	cursor: pointer;
}

.nrd-mnav__into:hover {
	color: var(--nrd-accent);
}

.nrd-mnav__link--all {
	color: var(--nrd-accent);
	font-size: var(--nrd-fs-md);
	font-weight: 600;
}

/* Сторінки під розділами каталогу — дрібнішим, це вже не товари. */
.nrd-mnav__list--pages {
	margin-top: var(--nrd-space-5);
	font-size: var(--nrd-fs-md);
	color: var(--nrd-muted);
}

body.nrd-locked {
	overflow: hidden;
}
/* --- 4.3 Кнопки --- */

.nrd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-2);
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--nrd-radius);
	background: var(--nrd-accent);
	color: #fff;
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	text-align: center;
	transition: background var(--nrd-t-base), color var(--nrd-t-base), border-color var(--nrd-t-base);
}

.nrd-btn:hover {
	background: var(--nrd-accent-dark);
	color: #fff;
}

.nrd-btn[disabled],
.nrd-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}

.nrd-btn--ghost {
	background: transparent;
	border-color: var(--nrd-line);
	color: var(--nrd-ink);
}

.nrd-btn--ghost:hover {
	background: transparent;
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-btn--dark {
	background: var(--nrd-ink);
	color: #fff;
}

.nrd-btn--dark:hover {
	background: var(--nrd-ink-soft);
}

.nrd-btn--wide {
	width: 100%;
}

.nrd-btn--sm {
	padding: 9px 16px;
	font-size: var(--nrd-fs-xs);
}

/* --- 4.4 Хлібні крихти --- */

.nrd-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nrd-space-1);
	padding-block: var(--nrd-space-4);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-crumbs__sep {
	color: var(--nrd-muted-faint);
}

.nrd-crumbs__cur {
	color: var(--nrd-ink);
}

/* --- 4.3.1 Головна: герой, смуга переваг, плитки, промо --- */

.nrd-hero {
	position: relative;
	background: var(--nrd-ink);
	color: #fff;
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: center;
}

.nrd-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
}

.nrd-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--nrd-space-10);
	max-width: 820px;
}

.nrd-hero__eyebrow {
	font-size: var(--nrd-fs-3xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-widest);
	text-transform: uppercase;
	color: var(--nrd-accent-soft);
	margin-bottom: var(--nrd-space-4);
}

.nrd-hero__title {
	margin: 0 0 var(--nrd-space-4);
	max-width: 15ch;
	color: #fff;
}

.nrd-hero__text {
	max-width: 46ch;
	color: rgba(255, 255, 255, .78);
	margin-bottom: var(--nrd-space-6);
}

.nrd-hero__btns {
	display: flex;
	gap: var(--nrd-space-3);
	flex-wrap: wrap;
}

/* Другорядна кнопка на темному тлі. */
.nrd-btn--ondark {
	background: transparent;
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.nrd-btn--ondark:hover {
	background: rgba(255, 255, 255, .1);
	border-color: #fff;
	color: #fff;
}

.nrd-link-arrow--ondark {
	color: var(--nrd-accent-soft);
}

/* Смуга переваг під героєм. */
.nrd-perkbar {
	background: var(--nrd-bg-card);
	border-bottom: 1px solid var(--nrd-line);
}

.nrd-perkbar__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--nrd-line);
	padding: 0;
}

.nrd-perkbar__item {
	display: flex;
	align-items: flex-start;
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-6) var(--nrd-space-4);
	background: var(--nrd-bg-card);
}

.nrd-perkbar__item svg {
	color: var(--nrd-accent);
	flex: 0 0 auto;
	margin-top: 2px;
}

.nrd-perkbar__item b {
	display: block;
	font-size: var(--nrd-fs-base);
	margin-bottom: 3px;
}

.nrd-perkbar__item span {
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

/* Плитка категорії. */
.nrd-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nrd-bg-tint);
}

.nrd-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--nrd-ease);
}

.nrd-tile:hover img {
	transform: scale(1.05);
}

/*
 * Плитка з іконкою.
 *
 * Це інший тип плитки, а не той самий з підміненою картинкою: у фото
 * підпис лежить поверх знімка на темному градієнті, а іконці градієнт
 * нема на чому тримати. Тому тут іконка по центру, підпис під нею,
 * і темний градієнт вимкнено.
 */
.nrd-tile--icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-4);
	background: var(--nrd-bg-soft);
	border: 1px solid var(--nrd-line);
	transition: border-color var(--nrd-t-base), background var(--nrd-t-base);
}

.nrd-tile--icon:hover {
	border-color: var(--nrd-accent);
	background: var(--nrd-bg-card);
}

.nrd-tile__icon {
	width: 56px;
	height: 56px;
	/* Іконки намальовані під currentColor — колір задаємо тут, а не у файлі. */
	color: var(--nrd-accent);
	transition: transform var(--nrd-t-base);
}

.nrd-tile--icon:hover .nrd-tile__icon {
	transform: translateY(-3px);
}

/* Підпис виходить із-під градієнта: він тут ні до чого. */
.nrd-tile--icon .nrd-tile__cap {
	position: static;
	padding: 0;
	background: none;
	text-align: center;
}

.nrd-tile--icon .nrd-tile__cap b { color: var(--nrd-ink); }
.nrd-tile--icon .nrd-tile__cap span { color: var(--nrd-muted); }

.nrd-tile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--nrd-space-4);
	background: linear-gradient(to top, rgba(28, 26, 23, .78), transparent);
	color: #fff;
}

.nrd-tile__cap b {
	display: block;
	font-family: var(--nrd-font-head);
	font-weight: 400;
	font-size: var(--nrd-fs-xl);
}

.nrd-tile__cap span {
	font-size: var(--nrd-fs-xs);
	opacity: .75;
}

/* Темна секція акцій: картки всередині лишаються світлими. */
.nrd-sale .nrd-section__title {
	color: #fff;
}

/* Два промо-блоки. */
.nrd-promos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-4);
}

.nrd-promo {
	padding: var(--nrd-space-8) var(--nrd-space-7);
	background: var(--nrd-bg-warm);
}

.nrd-promo--pay {
	background: var(--nrd-bg-tint);
}

.nrd-promo__title {
	font-size: var(--nrd-h5);
	margin: 0 0 var(--nrd-space-3);
}

.nrd-promo p {
	color: var(--nrd-muted);
	max-width: 46ch;
}

/* Відгук на головній. */
.nrd-review {
	margin: 0;
	padding: var(--nrd-space-6);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
}

.nrd-review blockquote {
	margin: var(--nrd-space-3) 0;
	font-size: var(--nrd-fs-md);
	line-height: 1.7;
}

.nrd-review figcaption b {
	display: block;
	font-size: var(--nrd-fs-base);
}

.nrd-review figcaption span {
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted-soft);
}

.nrd-seo {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-7);
}

.nrd-seo h2 {
	font-size: var(--nrd-fs-3xl);
	margin-bottom: var(--nrd-space-3);
}

/* --- 4.4.1 Каталог: шапка, чіпи, фільтри, тулбар --- */

.nrd-cat__head {
	padding-bottom: var(--nrd-space-6);
}

.nrd-cat__title {
	margin: 0 0 var(--nrd-space-3);
}

.nrd-cat__desc {
	max-width: 760px;
	color: var(--nrd-muted);
	font-size: var(--nrd-fs-md);
}

.nrd-cat__desc p {
	margin: 0;
}

/* Смуга підкатегорій. */
.nrd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-2);
	margin-bottom: var(--nrd-space-6);
}

/*
 * Кнопка «ще N» стоїть у тому ж ряду, що й самі чіпи, — щоб не з'їдати
 * окремий рядок на телефоні, де через це й почалась ця правка.
 */
.nrd-chips__more {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--nrd-accent);
	border-radius: var(--nrd-radius-pill);
	background: none;
	color: var(--nrd-accent);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.nrd-chips__more:hover {
	background: var(--nrd-accent);
	color: #fff;
}

/*
 * Чіп — таблетка, а не прямокутник.
 *
 * Прямі кути в 2 пікселі й поля по 9/18 робили з кожної підкатегорії
 * помітну рамку, а їх у ряду по три: смуга розділів важила більше
 * за самі товари. Скруглення і тісніші поля лишають від рамки тільки
 * контур навколо тексту.
 */
.nrd-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-base);
	border-radius: var(--nrd-radius-pill);
	white-space: nowrap;
}

.nrd-chip:hover,
.nrd-chip.is-on {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

/*
 * На телефоні чіпи дрібніші: тут їх буває під двадцять, і повнорозмірні
 * з'їдали весь перший екран, ховаючи товари під собою.
 *
 * Медіазапит стоїть ПІСЛЯ звичайних правил, а не перед ними. Коли він лежав
 * вище, при однаковій вазі перемагало те, що нижче, — тобто повний розмір,
 * і на телефоні нічого не змінювалось. Побачити це можна тільки міряючи
 * обчислені поля в браузері: на око різниця в два пікселі непомітна.
 */
@media (max-width: 767px) {
	.nrd-chip,
	.nrd-chips__more {
		padding: 6px 13px;
		font-size: var(--nrd-fs-sm);
	}

	.nrd-chips {
		gap: 6px;
		margin-bottom: var(--nrd-space-5);
	}
}

/*
 * Фільтри. На телефоні — шторка, на десктопі — колонка ліворуч.
 *
 * Розгорнутий список фільтрів на вузькому екрані відсував товари на другий
 * екран: в одному «Кольорі» бувають десятки значень. Тому до 1024px це
 * шторка з-під кнопки «Фільтр», а з 1024px — звичайний блок у сітці
 * (скидання — у медіазапиті розділу 5, разом із самою сіткою).
 */
.nrd-fsheet {
	position: fixed;
	inset: 0;
	z-index: var(--nrd-z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.nrd-fsheet.is-open {
	visibility: visible;
	pointer-events: auto;
}

.nrd-fsheet__back {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	background: rgba(28, 26, 23, .45);
	opacity: 0;
	transition: opacity .25s ease;
	cursor: default;
}

.nrd-fsheet.is-open .nrd-fsheet__back {
	opacity: 1;
}

.nrd-filters {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: min(340px, 88vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-5);
	/* Зсув, а не поява: шторка має «виїжджати», інакше вона просто блимає. */
	transform: translateX(-100%);
	transition: transform .28s var(--nrd-ease);
}

.nrd-fsheet.is-open .nrd-filters {
	transform: none;
}

/*
 * Заголовок липне до верху шторки: список фільтрів довгий, і кнопка
 * закриття не має лишатись десь угорі за межами екрана.
 */
.nrd-filters__head {
	position: sticky;
	top: calc(-1 * var(--nrd-space-5));
	z-index: 1;
	background: var(--nrd-bg-card);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	padding-block: var(--nrd-space-3) var(--nrd-space-4);
	margin-top: calc(-1 * var(--nrd-space-3));
	border-bottom: 1px solid var(--nrd-line-soft);
	margin-bottom: var(--nrd-space-4);
}

.nrd-filters__headside {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-3);
}

.nrd-filters__x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: calc(-1 * var(--nrd-space-2));
	border: 0;
	background: none;
	color: var(--nrd-muted-soft);
	cursor: pointer;
}

.nrd-filters__x:hover {
	color: var(--nrd-ink);
}

.nrd-filters__title {
	font-size: var(--nrd-fs-base);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-widest);
	text-transform: uppercase;
}

.nrd-filters__reset {
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-filters__empty {
	margin: 0;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted-soft);
	line-height: 1.6;
}

.nrd-widget {
	padding-block: var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-widget:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nrd-widget__title {
	font-size: var(--nrd-fs-md);
	font-family: var(--nrd-font-body);
	font-weight: 600;
	margin: 0 0 var(--nrd-space-3);
}

.nrd-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-base);
}

/*
 * Список значень атрибута. Довгий за визначенням: у «Кольорі» на весь
 * каталог 316 значень, і хоч WooCommerce показує лише ті, що є серед
 * знайдених товарів, у широкій категорії їх усе одно десятки. Тому список
 * обмежений висотою й прокручується сам.
 */
.nrd-widget .woocommerce-widget-layered-nav-list {
	max-height: 260px;
	overflow-y: auto;
	padding-right: var(--nrd-space-1);
}

.nrd-widget .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-2);
}

.nrd-widget .woocommerce-widget-layered-nav-list__item a {
	color: var(--nrd-muted);
	flex: 1;
}

.nrd-widget .woocommerce-widget-layered-nav-list__item a:hover {
	color: var(--nrd-accent);
}

.nrd-widget .woocommerce-widget-layered-nav-list__item.chosen a {
	color: var(--nrd-ink);
	font-weight: 600;
}

/* Обране значення позначаємо галочкою — інакше в списку його не видно. */
.nrd-widget .woocommerce-widget-layered-nav-list__item.chosen a::before {
	content: "✓ ";
	color: var(--nrd-accent);
}

.nrd-widget .woocommerce-widget-layered-nav-list__item .count {
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-faint);
	flex: 0 0 auto;
}

/* Активні фільтри — чіпами, як у макеті. */
.nrd-widget .woocommerce-widget-layered-nav-filters ul,
.widget_layered_nav_filters ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--nrd-space-1);
}

.widget_layered_nav_filters li a {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	padding: 5px 10px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
	background: var(--nrd-bg);
}

.widget_layered_nav_filters li a:hover {
	border-color: var(--nrd-danger);
	color: var(--nrd-danger);
}

/* Повзунок ціни. */
.nrd-widget .price_slider_wrapper {
	padding-top: var(--nrd-space-2);
}

.nrd-widget .price_slider {
	position: relative;
	height: 3px;
	background: var(--nrd-line);
	margin: var(--nrd-space-5) 4px var(--nrd-space-4);
	border-radius: 2px;
}

.nrd-widget .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--nrd-accent);
}

.nrd-widget .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-left: -7px;
	transform: translateY(-50%);
	background: var(--nrd-bg-card);
	border: 2px solid var(--nrd-accent);
	border-radius: 50%;
	cursor: grab;
	z-index: 2;
}

.nrd-widget .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-2);
	flex-wrap: wrap;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-widget .price_slider_amount .button {
	order: 3;
	width: 100%;
	margin-top: var(--nrd-space-3);
	padding: 10px;
	font-size: var(--nrd-fs-xs);
	background: var(--nrd-ink);
}

.nrd-widget .price_slider_amount .button:hover {
	background: var(--nrd-accent);
}

.nrd-widget .price_label {
	order: 1;
}

/*
 * Поле з помилкою: червона рамка й напис під ним.
 *
 * Не тільки рамка: вона каже «щось не так», але не каже що.
 */
.nrd-bad input.input-text,
.nrd-bad input {
	border-color: var(--nrd-danger) !important;
}

.nrd-bad__note {
	display: block;
	margin-top: 5px;
	font-size: var(--nrd-fs-xs);
	line-height: 1.4;
	color: var(--nrd-danger);
}

/*
 * Два поля з конкретними сумами у фільтрі ціни. Додаються скриптом:
 * у розмітці WooCommerce вони є, але його ж скрипт їх ховає.
 */
.nrd-price-fields {
	order: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nrd-space-2);
	margin-bottom: var(--nrd-space-3);
}

.nrd-price-field {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 7px 10px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted-soft);
}

.nrd-price-field:focus-within {
	border-color: var(--nrd-accent);
}

.nrd-price-field__cap {
	flex: 0 0 auto;
}

/*
 * Поле без власного оформлення: рамку малює обгортка, і разом вони
 * читаються як одне поле з підписом усередині. Стрілки-«крутилки»
 * прибираємо — у ціни в тисячах гривень крок в одиницю безглуздий.
 */
.nrd-price-field__input {
	flex: 1;
	min-width: 0;
	appearance: textfield;
	-moz-appearance: textfield;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nrd-ink);
	font-family: inherit;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
}

.nrd-price-field__input::-webkit-outer-spin-button,
.nrd-price-field__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.nrd-price-field__input:focus {
	outline: none;
}

.nrd-price-field__cur {
	flex: 0 0 auto;
}

/* Поле пошуку всередині довгого фільтра — додається скриптом. */
.nrd-filter-search {
	width: 100%;
	margin-bottom: var(--nrd-space-2);
	padding: 8px 10px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg);
	font-size: var(--nrd-fs-sm);
	border-radius: var(--nrd-radius);
}

.nrd-filter-search:focus {
	outline: none;
	border-color: var(--nrd-accent);
	background: var(--nrd-bg-card);
}

.woocommerce-widget-layered-nav-list.is-empty::after {
	content: "Нічого не знайдено";
	display: block;
	padding: var(--nrd-space-2) 0;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted-faint);
}

/* Порожній фільтр не показуємо: заголовок без вмісту виглядає зламано. */
.nrd-widget:empty {
	display: none;
}

/*
 * Тулбар над сіткою.
 *
 * На телефоні перший рядок — «Фільтр» і сортування, і саме в один рівень:
 * це дві дії одного роду, і розкидані по різних рядках вони читаються
 * як різні речі. Кількість знайденого спускається під них окремим рядком —
 * вона довга й у той самий рядок не влазить.
 */
.nrd-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	flex-wrap: wrap;
	padding-bottom: var(--nrd-space-4);
	margin-bottom: var(--nrd-space-5);
	border-bottom: 1px solid var(--nrd-line);
}

.nrd-toolbar__filter {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	height: 36px;
	padding: 0 var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	color: var(--nrd-ink);
	border-radius: var(--nrd-radius-pill);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.nrd-toolbar__filter:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-toolbar__filter-n {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--nrd-accent);
	color: #fff;
	border-radius: 9px;
	font-size: 10px;
	line-height: 18px;
	text-align: center;
}

.nrd-toolbar__count {
	width: 100%;
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
}

.nrd-toolbar__count b {
	color: var(--nrd-ink);
}

/*
 * Сортування займає решту рядка й стискається.
 *
 * Селект «За замовчуванням» сам по собі 302 пікселі — разом із кнопкою
 * фільтра він не влазив у 326 доступних і зʼїжджав на другий рядок,
 * тобто рівно те, чого просили не робити. min-width: 0 обовʼязковий:
 * без нього елемент флекса не стискається менше власного вмісту.
 */
.nrd-toolbar__sort {
	flex: 1;
	min-width: 0;
}

.nrd-toolbar__sort form {
	margin: 0;
}

.nrd-toolbar__sort select {
	width: 100%;
	height: 36px;
	padding: 0 var(--nrd-space-3);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-base);
	border-radius: var(--nrd-radius-pill);
}

/* --- 4.4.2 Сторінка товару --- */

/* Смуга вкладок, що липне під шапкою. */
.nrd-ptabs {
	position: sticky;
	top: var(--nrd-stick);
	z-index: 25;
	background: var(--nrd-bg);
	border-bottom: 1px solid var(--nrd-line);
}

.nrd-ptabs__inner {
	display: flex;
	gap: var(--nrd-space-6);
	overflow-x: auto;
	scrollbar-width: none;
}

.nrd-ptabs__inner::-webkit-scrollbar {
	display: none;
}

.nrd-ptab {
	padding: 16px 0;
	font-size: var(--nrd-fs-base);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.nrd-ptab.is-on,
.nrd-ptab:hover {
	border-bottom-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-7);
	padding-top: var(--nrd-space-7);
	align-items: start;
}

/*
 * Права колонка сторінки товару: панель покупки, під нею відгуки.
 *
 * Обгортка, а не спільний батько .nrd-buy: панель переїжджає в повноекранну
 * галерею разом зі своїм вузлом, і відгуки поїхали б туди ж.
 */
.nrd-product__aside {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-6);
	min-width: 0;
}

/* Панель покупки. */
.nrd-buy__meta {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-3);
	flex-wrap: wrap;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted-soft);
	margin-bottom: var(--nrd-space-3);
}

.nrd-buy__title {
	margin: 0 0 var(--nrd-space-3);
	font-size: var(--nrd-h4);
}

.nrd-buy__price {
	display: flex;
	align-items: baseline;
	gap: var(--nrd-space-3);
	flex-wrap: wrap;
	margin: var(--nrd-space-5) 0 var(--nrd-space-3);
	padding-bottom: var(--nrd-space-5);
	border-bottom: 1px solid var(--nrd-line);
}

.nrd-buy__price .nrd-price {
	font-size: clamp(28px, 3vw, 38px);
}

.nrd-sale-pct {
	background: var(--nrd-danger);
	color: #fff;
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
	padding: 3px 8px;
	border-radius: var(--nrd-radius);
}

.nrd-buy__inst {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	margin-bottom: var(--nrd-space-4);
}

.nrd-buy__side {
	display: flex;
	gap: var(--nrd-space-2);
	margin-top: var(--nrd-space-3);
}

/* Переваги під кнопкою купівлі. */
.nrd-perks {
	list-style: none;
	margin: var(--nrd-space-6) 0 0;
	padding: 0;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
}

.nrd-perks li {
	display: flex;
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-perks li:last-child {
	border-bottom: 0;
}

.nrd-perks svg {
	color: var(--nrd-accent);
	flex: 0 0 auto;
	margin-top: 2px;
}

.nrd-perks b {
	display: block;
	font-size: var(--nrd-fs-base);
	margin-bottom: 3px;
}

.nrd-perks span {
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
	line-height: 1.6;
}

/* Текстові розділи під галереєю. */
.nrd-psection {
	padding-top: var(--nrd-space-9);
	/* Заголовок розділу не має ховатись під шапкою й смугою вкладок. */
	scroll-margin-top: calc(var(--nrd-stick) + 70px);
}

.nrd-psection > h2 {
	font-size: var(--nrd-h5);
	margin-bottom: var(--nrd-space-5);
}

.nrd-specs {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
	font-size: var(--nrd-fs-md);
}

.nrd-specs th,
.nrd-specs td {
	padding: var(--nrd-space-3) 0;
	border-bottom: 1px solid var(--nrd-line-soft);
	text-align: left;
	vertical-align: top;
}

.nrd-specs th {
	width: 40%;
	font-weight: 400;
	color: var(--nrd-muted);
}

/*
 * Доставка й оплата — рядками.
 *
 * Було чотири колонки-картки: кожен абзац стискався до сорока символів
 * і ламався на шість рядків. Рядок дає тексту дихати, а розділи
 * відокремлює лінія — тому й рамки навколо кожного більше немає.
 */
.nrd-delivery {
	margin: 0;
	border-top: 1px solid var(--nrd-line);
}

.nrd-delivery__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-1);
	padding-block: var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line);
}

.nrd-delivery__row dt {
	font-size: var(--nrd-fs-md);
	font-weight: 600;
}

.nrd-delivery__row dd {
	margin: 0;
	/* Рядок довжиною в екран не читається — обмежуємо саме текст. */
	max-width: 68ch;
	font-size: var(--nrd-fs-base);
	line-height: 1.65;
	color: var(--nrd-muted);
}

@media (min-width: 768px) {
	/* Заголовок ліворуч, текст поруч: очима видно, де який розділ. */
	.nrd-delivery__row {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--nrd-space-6);
		padding-block: var(--nrd-space-5);
	}
}

/* Форма варіацій і кнопка купівлі. */
.nrd-buy .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--nrd-space-4);
}

.nrd-buy .variations tr {
	display: block;
	margin-bottom: var(--nrd-space-4);
}

.nrd-buy .variations th,
.nrd-buy .variations td {
	display: block;
	padding: 0;
	text-align: left;
}

.nrd-buy .variations th label {
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
	margin-bottom: var(--nrd-space-1);
	display: block;
}

.nrd-buy .variations select {
	width: 100%;
	height: 48px;
	padding: 0 var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
	border-radius: var(--nrd-radius);
}

.nrd-buy .reset_variations {
	display: inline-block;
	margin-top: var(--nrd-space-1);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

/* Ціна обраної варіації WooCommerce малює вдруге — вона вже є вище. */
.nrd-buy .woocommerce-variation-price {
	display: none;
}

.nrd-buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-2);
	align-items: stretch;
	margin: 0;
}

.nrd-buy form.cart .variations,
.nrd-buy form.cart .woocommerce-variation {
	flex: 0 0 100%;
}

.nrd-buy .quantity {
	display: flex;
	flex: 0 0 auto;
}

.nrd-buy .quantity input.qty {
	width: 96px;
	height: 52px;
	text-align: center;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-md);
}

.nrd-buy button.single_add_to_cart_button,
.nrd-buy .single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	height: 52px;
	background: var(--nrd-accent);
	color: #fff;
	border: 0;
	font-size: var(--nrd-fs-base);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	border-radius: var(--nrd-radius);
}

.nrd-buy button.single_add_to_cart_button:hover {
	background: var(--nrd-accent-dark);
}

.nrd-buy button.single_add_to_cart_button.disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* --- 4.4.3 Таблиця порівняння --- */

/*
 * Таблиця широка за визначенням: чотири товари поруч не влазять у телефон.
 * Прокручується сама всередині обгортки — сторінка по горизонталі не їде.
 */
.nrd-cmp-wrap {
	overflow-x: auto;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
}

.nrd-cmp-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--nrd-fs-base);
}

.nrd-cmp-table th,
.nrd-cmp-table td {
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
	border-left: 1px solid var(--nrd-line-soft);
	text-align: left;
	vertical-align: top;
}

.nrd-cmp-table tr > *:first-child {
	border-left: 0;
}

/* Ліва колонка з підписами лишається видимою при прокрутці. */
.nrd-cmp-table__side {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 190px;
	background: var(--nrd-bg-warm);
	font-weight: 400;
	color: var(--nrd-muted);
}

.nrd-cmp-table tbody tr:nth-child(odd) td {
	background: var(--nrd-bg);
}

.nrd-cmp-card {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
	min-width: 180px;
}

.nrd-cmp-card img {
	width: 100%;
	max-width: 160px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--nrd-bg-tint);
}

.nrd-cmp-card__title {
	display: block;
	margin-top: var(--nrd-space-2);
	font-size: var(--nrd-fs-base);
	line-height: 1.4;
}

.nrd-cmp-card .nrd-cmp {
	align-self: flex-start;
}

/* --- 4.5 Картка товару --- */

/*
 * Картка без рамки й без підкладки.
 *
 * Рамка навколо кожної картки давала в сітці сітку з рамок: на телефоні
 * дві поспіль, на десктопі три-п'ять у ряд. Замовник назвав це «забагато
 * рамочок, які навантажують око» — і на головній, де рамок немає,
 * йому подобається більше.
 *
 * Замість рамки картку тримає світлина: вона на всю ширину картки,
 * а текст під нею йде прямо по тлу сторінки.
 */
.nrd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	transition: transform .3s var(--nrd-ease);
}

.nrd-card:hover {
	transform: translateY(-3px);
}

.nrd-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nrd-bg-soft);
}

/*
 * Тільки посилання-обгортка на все фото. Без :not() сюди потрапляє
 * і «Швидкий перегляд» — він теж <a> усередині медіа, і inset:0 розтягує
 * його на всю картку чорним прямокутником.
 */
.nrd-card__media > a:not(.nrd-card__qv) {
	position: absolute;
	inset: 0;
	display: block;
}

.nrd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--nrd-ease);
}

.nrd-card:hover .nrd-card__media img {
	transform: scale(1.05);
}

/* Позначки зліва згори: бейдж, під ним знаки оплати частинами. */
.nrd-card__marks {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nrd-space-2);
	z-index: 2;
	pointer-events: none;
}

.nrd-badge {
	background: var(--nrd-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--nrd-ls-widest);
	padding: 5px 9px;
}

.nrd-badge--sale { background: var(--nrd-danger); }
.nrd-badge--new  { background: var(--nrd-success); }
/* Хіт — бронза: помітно, але не сперечається з червоним «SALE». */
.nrd-badge--hit  { background: var(--nrd-accent); }

.nrd-card__pay {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
}

/*
 * Знаки оплати частинами й кнопки на світлині — напівпрозорі.
 *
 * Непрозорі білі кружечки читались як наліпки поверх товару: на картці
 * їх до чотирьох, і разом із рамкою вони й давали те «навантаження ока».
 * Пів прозорості вистачає, щоб знак було видно, і мало, щоб він
 * не сперечався зі світлиною. Під пальцем і курсором — повна.
 */
.nrd-card__pay span {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.nrd-card:hover .nrd-card__pay span {
	background: rgba(255, 255, 255, .92);
}

/* Обране й порівняння — справа згори. */
.nrd-card__tools {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
	z-index: 2;
}

.nrd-card__tools .nrd-fav,
.nrd-card__tools .nrd-cmp {
	border: 0;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(2px);
	color: var(--nrd-ink);
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.nrd-card__tools .nrd-fav:hover,
.nrd-card__tools .nrd-cmp:hover,
.nrd-card:hover .nrd-card__tools .nrd-fav,
.nrd-card:hover .nrd-card__tools .nrd-cmp {
	background: rgba(255, 255, 255, .92);
}

.nrd-card__tools .nrd-fav:hover,
.nrd-card__tools .nrd-cmp:hover {
	color: var(--nrd-accent);
}

/* Швидкий перегляд — виїжджає при наведенні. */
.nrd-card__qv {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, .62);
	backdrop-filter: blur(3px);
	border: 0;
	border-radius: var(--nrd-radius-pill);
	padding: 10px;
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .24s ease, transform .24s ease, background-color .2s ease, color .2s ease;
}

.nrd-card:hover .nrd-card__qv {
	opacity: 1;
	transform: none;
}

.nrd-card__qv:hover {
	background: var(--nrd-ink);
	color: #fff;
}

/* На пристроях без наведення підказка має бути видно одразу. */
@media (hover: none) {
	.nrd-card__qv { opacity: 1; transform: none; }
	.nrd-card:hover { transform: none; box-shadow: none; }
}

/* Без рамки зникають і бічні поля: текст вирівнюється по краю світлини. */
.nrd-card__body {
	padding: var(--nrd-space-3) 0 var(--nrd-space-4);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--nrd-space-2);
}

.nrd-card__rating {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
}

.nrd-card__stars {
	color: var(--nrd-accent);
	letter-spacing: var(--nrd-ls-widest);
}

.nrd-card__title {
	font-size: var(--nrd-fs-base);
	line-height: 1.45;
	/* Дві позиції в ряд мають вирівнюватись, навіть коли назви різної довжини. */
	min-height: 39px;
}

.nrd-card__stock {
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-success);
}

.nrd-card__stock--order {
	color: var(--nrd-accent);
}

.nrd-card__stock--out {
	color: var(--nrd-muted-soft);
}

.nrd-card__price {
	margin-top: auto;
	padding-top: var(--nrd-space-1);
	display: flex;
	align-items: baseline;
	gap: var(--nrd-space-2);
	flex-wrap: wrap;
}

.nrd-card__buy {
	display: flex;
	gap: var(--nrd-space-1);
}

.nrd-card__add {
	flex: 1;
	background: var(--nrd-ink);
	color: #fff;
	border: 0;
	padding: var(--nrd-space-3);
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-align: center;
}

.nrd-card__add:hover {
	background: var(--nrd-accent);
	color: #fff;
}

.nrd-card__oneclick {
	width: 44px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nrd-muted);
	flex: 0 0 auto;
}

.nrd-card__oneclick:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

/* --- 4.6 Ціна --- */

.nrd-price {
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-3xl);
	font-weight: 400;
	letter-spacing: var(--nrd-ls-tight);
	color: var(--nrd-ink);
	white-space: nowrap;
}

/* Гривня дрібнішим і не заголовковим шрифтом — так у макеті. */
.nrd-price__cur {
	font-family: var(--nrd-font-body);
	font-weight: 400;
	font-size: .7em;
	letter-spacing: 0;
	margin-left: .1em;
}

.nrd-price__from {
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-xs);
	font-weight: 400;
	color: var(--nrd-muted);
	margin-right: 4px;
}

.nrd-price--sale {
	color: var(--nrd-danger);
}

.nrd-price__old {
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted-soft);
	text-decoration: line-through;
	white-space: nowrap;
}

/* Оцінка платежу частинами. Показується лише коли спосіб реально під'єднано. */
.nrd-inst {
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
}

/* --- 4.7 Обране й порівняння --- */

.nrd-fav,
.nrd-cmp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line-soft);
	color: var(--nrd-muted);
	transition: color var(--nrd-t-base), border-color var(--nrd-t-base), background var(--nrd-t-base);
}

.nrd-fav:hover,
.nrd-cmp:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-fav.is-active {
	color: var(--nrd-danger);
	border-color: var(--nrd-danger);
}

.nrd-fav.is-active svg {
	fill: currentColor;
}

.nrd-cmp.is-active {
	color: #fff;
	background: var(--nrd-accent);
	border-color: var(--nrd-accent);
}

/* --- 4.8 Рейтинг --- */

.nrd-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--nrd-muted-faint);
}

.nrd-rating__star.is-on {
	color: var(--nrd-star);
}

.nrd-rating__star.is-on svg {
	fill: currentColor;
}

.nrd-rating__count {
	margin-left: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

/* --- 4.9 Форми --- */

.nrd-field {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
}

.nrd-field label,
.nrd-form label {
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

.nrd-input,
.nrd-form input[type="text"],
.nrd-form input[type="tel"],
.nrd-form input[type="email"],
.nrd-form input[type="password"],
.nrd-form input[type="number"],
.nrd-form input[type="search"],
.nrd-form select,
.nrd-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
	transition: border-color var(--nrd-t-base);
}

.nrd-input:focus,
.nrd-form input:focus,
.nrd-form select:focus,
.nrd-form textarea:focus {
	outline: none;
	border-color: var(--nrd-accent);
}

.nrd-form textarea {
	min-height: 110px;
	resize: vertical;
}

::placeholder {
	color: var(--nrd-muted-faint);
}

/*
 * Розкладка полів чекауту.
 *
 * Класи nrd-col-* вішаються на поля в inc/woocommerce.php. У одну колонку
 * до 768px — і тільки з цієї ширини розʼїжджаються на дві.
 */
.nrd-col-4,
.nrd-col-6,
.nrd-col-8,
.nrd-col-12 {
	grid-column: 1 / -1;
}

.nrd-hidden-row {
	display: none !important;
}


/* --- Герой-слайдер --------------------------------------------------
 *
 * Слайди лежать один поверх одного й перемикаються прозорістю, а не
 * зсувом стрічки: стрічка вимагає точної ширини кожного кадру, а вона
 * тут гумова. Прозорість цього не потребує й не смикається при зміні
 * розміру вікна.
 */

/*
 * Слайдер розтягується на всю висоту героя.
 *
 * .nrd-hero — флекс із align-items: center і min-height: 460px, а слайд
 * на телефоні виходить 360px. Трек центрувався, і зверху та знизу банера
 * лишалось по 50 пікселів чорного тла героя — просто смуги над світлиною.
 */
.nrd-hero--slider {
	position: relative;
	align-items: stretch;
}

.nrd-hero__track {
	position: relative;
	flex: 1;
	display: grid;
	/*
	 * Колонку задаємо явно. Без цього грід міряє її по вмісту, а єдиний
	 * елемент у потоці — текстовий блок з max-width: 46ch: світлина
	 * абсолютна й на ширину не впливає. Слайдер виходив завширшки
	 * з абзац тексту, решта екрана — чорна.
	 */
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

/* Усі слайди в одну клітинку: висоту задає найвищий, стрибків немає. */
.nrd-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 46vw, 620px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s var(--nrd-ease), visibility .6s;
}

.nrd-slide.is-on {
	opacity: 1;
	visibility: visible;
}

.nrd-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Праворуч на світлинах меблі, ліворуч — повітря під текст. */
	object-position: center right;
}

/*
 * Затемнення тільки з того боку, де текст. Суцільна плівка поверх усього
 * гасить саму світлину — а вона тут головний доказ якості меблів.
 */
.nrd-slide__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--nrd-space-8);
	color: #fff;
	text-shadow: 0 1px 24px rgba(28, 26, 23, .45);
}

/*
 * Ширину обмежуємо дітям, а не самому контейнеру. У .nrd-container є
 * margin-inline: auto — з власним max-width він центрувався разом із
 * текстом, а затемнення лишалось ліворуч: підпис опинявся світлим
 * по світлому.
 */
.nrd-slide__inner > * {
	/*
	 * Ширина в пікселях, не в ch. Один ch — це ширина нуля поточним
	 * шрифтом, а заголовок героя — 58px: 46ch виходило 1330 пікселів,
	 * тобто заголовок розтягувався майже на весь екран і виїжджав
	 * із затемненої зони на світлу частину світлини. Білим по світлому
	 * його не було видно.
	 */
	max-width: 560px;
	/*
	 * Ліворуч примусово. Старий герой був центрованим, і його правила
	 * (margin-inline: auto, вирівнювання кнопок) дістаються слайдам
	 * у спадок — текст ставав по центру, а затемнення лишалось ліворуч.
	 */
	margin-inline: 0;
	text-align: left;
}

.nrd-slide .nrd-hero__btns {
	justify-content: flex-start;
}

/*
 * z-index обов'язковий, і саме через нього затемнення довго не було видно.
 *
 * ::before і світлина — обидва абсолютні й обидва без z-index, а такі
 * елементи малюються в порядку розмітки. Псевдоелемент іде першим, тобто
 * світлина лягала поверх плівки й повністю її ховала. Виглядало це як
 * «текст білим по світлому», а не як помилка шарів.
 */
.nrd-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, rgba(28, 26, 23, .62) 0%, rgba(28, 26, 23, .28) 45%, transparent 72%);
}

/* Світлі банери: темний текст без плівки. */
.nrd-slide--light .nrd-slide__inner {
	color: var(--nrd-ink);
	text-shadow: none;
}

.nrd-slide--light::before {
	background: linear-gradient(to right, rgba(251, 249, 246, .82) 0%, rgba(251, 249, 246, .45) 45%, transparent 72%);
}

/* --- Керування --- */

.nrd-hero__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--nrd-space-6);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--nrd-space-3);
}

.nrd-hero__dots {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
}

.nrd-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background var(--nrd-t-base), width var(--nrd-t-base);
}

.nrd-hero__dot.is-on {
	width: 26px;
	border-radius: 5px;
	background: #fff;
}

.nrd-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.nrd-slide__inner { max-width: none; }
}


/* --- Популярні декори ------------------------------------------------ */

.nrd-decors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-3);
}

@media (min-width: 600px) {
	.nrd-decors { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.nrd-decors { grid-template-columns: repeat(4, 1fr); }
}

.nrd-decor {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-4);
	padding: var(--nrd-space-4);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	transition: border-color var(--nrd-t-base), transform var(--nrd-t-base);
}

.nrd-decor:hover {
	border-color: var(--nrd-accent);
	transform: translateY(-2px);
}

/*
 * Зразок кольору. Поки немає фотографій декорів — це чесна заглушка:
 * покупець бачить приблизний відтінок, а не порожній квадрат. Коли
 * з'являться справжні знімки поверхонь, сюди стане background-image
 * без правок розмітки.
 */
.nrd-decor__swatch {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: var(--nrd-radius);
	border: 1px solid var(--nrd-line-strong);
	background: var(--sw, var(--nrd-bg-tint));
	background-size: cover;
	background-position: center;
}

.nrd-decor__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nrd-decor__body b { font-size: var(--nrd-fs-md); }
.nrd-decor__body span { font-size: var(--nrd-fs-xs); color: var(--nrd-muted); }

/* --- 4.10 Пагінація --- */

.nrd-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-1);
	margin-block: var(--nrd-space-8);
}

.nrd-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	min-width: 40px;
	height: 40px;
	padding-inline: var(--nrd-space-3);
	justify-content: center;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	color: var(--nrd-muted);
	transition: border-color var(--nrd-t-base), color var(--nrd-t-base);
}

.nrd-pager .page-numbers:hover,
.nrd-pager .page-numbers.current {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-pager .page-numbers.current {
	background: var(--nrd-accent);
	color: #fff;
}

.nrd-pager .dots {
	border-color: transparent;
	background: transparent;
}

/* --- 4.11 Повідомлення --- */

.nrd-note {
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border-left: 3px solid var(--nrd-accent);
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	border-radius: 0 var(--nrd-radius) var(--nrd-radius) 0;
}

.nrd-note--error {
	border-left-color: var(--nrd-danger);
	color: var(--nrd-danger);
}

.nrd-note--ok {
	border-left-color: var(--nrd-success);
	color: var(--nrd-success);
}

.nrd-total__note {
	display: block;
	margin-top: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	font-weight: 400;
	color: var(--nrd-muted);
	line-height: 1.5;
}

/* --- 4.12 Плаваючий віджет звʼязку --- */

.nrd-cw {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: var(--nrd-z-widget);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--nrd-space-2);
}

.nrd-cw__list {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
}

.nrd-cw__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cw, var(--nrd-accent));
	color: #fff;
	box-shadow: var(--nrd-shadow-md);
}

.nrd-cw__item:hover {
	color: #fff;
	transform: translateY(-2px);
}

.nrd-cw__item svg {
	fill: currentColor;
}

.nrd-cw__tip {
	position: absolute;
	right: calc(100% + 10px);
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: var(--nrd-radius);
	background: var(--nrd-ink);
	color: #fff;
	font-size: var(--nrd-fs-xs);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--nrd-t-fast);
}

.nrd-cw__item:hover .nrd-cw__tip {
	opacity: 1;
}

.nrd-cw__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	background: var(--nrd-accent);
	color: #fff;
	box-shadow: var(--nrd-shadow-accent);
}

.nrd-cw__ico-close { display: none; }
.nrd-cw[aria-expanded="true"] .nrd-cw__ico-open { display: none; }
.nrd-cw[aria-expanded="true"] .nrd-cw__ico-close { display: block; }

/* --- 4.13 Розсилка --- */

.nrd-news {
	background: var(--nrd-bg-warm);
	margin-top: 72px;
	border-top: 1px solid var(--nrd-line);
}

.nrd-news__inner {
	padding-block: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-7);
	flex-wrap: wrap;
}

.nrd-news__title {
	font-family: var(--nrd-font-head);
	font-size: 26px;
	font-weight: 300;
	margin: 0;
}

.nrd-news__sub {
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	margin-top: var(--nrd-space-1);
}

.nrd-news__form {
	display: flex;
	flex: 1;
	min-width: 240px;
	max-width: 480px;
}

/*
 * min-width: 0 обов'язковий. За замовчуванням елемент флексу не звужується
 * менше за власний мінімальний вміст, і поле разом із кнопкою «Підписатись»
 * не вміщалось у 390px — уся сторінка отримувала горизонтальну прокрутку
 * на 19 пікселів. Видно це було тільки на телефоні й тільки в підвалі.
 */
.nrd-news__input {
	flex: 1;
	min-width: 0;
	height: 52px;
	border: 1px solid var(--nrd-line-strong);
	border-right: 0;
	background: var(--nrd-bg-card);
	padding: 0 18px;
	font-size: var(--nrd-fs-md);
	outline: none;
}

.nrd-news__input:focus {
	border-color: var(--nrd-accent);
}

.nrd-news__btn {
	background: var(--nrd-ink);
	color: #fff;
	border: 0;
	padding: 0 30px;
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-widest);
	white-space: nowrap;
}

.nrd-news__btn:hover {
	background: var(--nrd-accent);
}

/* --- 4.13.1 Підвал --- */

.nrd-footer {
	background: var(--nrd-ink);
	color: rgba(255, 255, 255, .7);
	font-size: var(--nrd-fs-base);
	margin-top: 0;
}

.nrd-footer a {
	color: rgba(255, 255, 255, .7);
}

.nrd-footer a:hover {
	color: var(--nrd-accent);
}

.nrd-footer__cols {
	padding-top: 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.nrd-footer .nrd-logo__word {
	color: #fff;
	font-size: 21px;
	letter-spacing: .26em;
}

.nrd-footer .nrd-logo__tag {
	font-size: 8px;
	letter-spacing: .32em;
}

.nrd-footer__about {
	margin: 24px 0 0;
	line-height: var(--nrd-lh-text);
	max-width: 300px;
	color: rgba(255, 255, 255, .55);
	text-wrap: pretty;
}

.nrd-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.nrd-footer__social a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nrd-footer__social a:hover {
	border-color: var(--nrd-accent);
}

.nrd-footer__title {
	color: #fff;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-lg);
	font-weight: 400;
	letter-spacing: var(--nrd-ls-wider);
	margin: 0 0 18px;
	text-transform: uppercase;
}

.nrd-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.nrd-footer__phone {
	color: #fff;
	font-size: var(--nrd-fs-2xl);
	font-weight: 600;
}

.nrd-footer__hours {
	margin-top: var(--nrd-space-1);
	color: rgba(255, 255, 255, .5);
	font-size: var(--nrd-fs-sm);
}

.nrd-footer__addr {
	margin-top: 18px;
	line-height: 1.7;
}

.nrd-footer__call {
	margin-top: 20px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
	padding: 11px 20px;
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wider);
}

.nrd-footer__call:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-footer__bottom {
	padding-block: var(--nrd-space-7);
	margin-top: 44px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-6);
	flex-wrap: wrap;
	font-size: var(--nrd-fs-sm);
	color: rgba(255, 255, 255, .45);
}

.nrd-footer__bottom a {
	color: rgba(255, 255, 255, .45);
}

.nrd-pay {
	display: flex;
	gap: var(--nrd-space-1);
	align-items: center;
}

.nrd-pay span {
	height: 30px;
	border-radius: var(--nrd-radius-md);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding-inline: 6px;
}
/* --- 4.14 Порожні стани й службові сторінки --- */

.nrd-empty {
	max-width: 520px;
	margin: 0 auto;
	padding-block: var(--nrd-space-10);
	text-align: center;
}

.nrd-empty__title {
	margin-bottom: var(--nrd-space-3);
}

.nrd-empty p {
	color: var(--nrd-muted);
}

.nrd-entry {
	max-width: 760px;
}

.nrd-entry :where(ul, ol) {
	padding-left: 1.3em;
	line-height: var(--nrd-lh-text);
}

.nrd-entry img {
	border-radius: var(--nrd-radius);
	margin-block: var(--nrd-space-5);
}

/* --- 4.15 Спливаюче повідомлення --- */

.nrd-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 90;
	max-width: min(92vw, 420px);
	padding: 12px 18px;
	border-radius: var(--nrd-radius);
	background: var(--nrd-ink);
	color: #fff;
	font-size: var(--nrd-fs-base);
	box-shadow: var(--nrd-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--nrd-t-base), transform var(--nrd-t-base);
}

.nrd-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.nrd-toast.is-error {
	background: var(--nrd-danger);
}

/* =========================================================================
   4.16 Базовий шар WooCommerce
   -------------------------------------------------------------------------
   Власні стилі магазину ми вимикаємо (inc/assets.php), бо вони перебивають
   макет. Поки власних шаблонів немає, стандартні лишаються зовсім без
   оформлення — цей шар робить їх читабельними й задає ті самі токени, на які
   потім спиратиметься верстка.
   ====================================================================== */

.woocommerce .nrd-entry > h2,
.woocommerce-checkout h3,
.woocommerce-cart h2 {
	font-size: var(--nrd-h5);
	margin-top: var(--nrd-space-8);
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--nrd-space-6);
	font-size: var(--nrd-fs-md);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--nrd-space-3) var(--nrd-space-2);
	border-bottom: 1px solid var(--nrd-line);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	color: var(--nrd-muted);
}

.woocommerce table.shop_table img {
	width: 72px;
	border-radius: var(--nrd-radius);
}

/* Кнопки WooCommerce успадковують вигляд nrd-btn. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-2);
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--nrd-radius);
	background: var(--nrd-accent);
	color: #fff;
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	transition: background var(--nrd-t-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover {
	background: var(--nrd-accent-dark);
	color: #fff;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: .5;
	pointer-events: none;
}

/* Поля форм магазину — той самий вигляд, що й у власних форм теми. */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
	margin-bottom: var(--nrd-space-4);
}

.woocommerce form .form-row label {
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

.woocommerce form .form-row .required {
	color: var(--nrd-danger);
	text-decoration: none;
}

/*
 * Підказка під полем. Без власного правила WooCommerce малює її акцентним
 * кольором теми — і рядок «Почніть вводити номер відділення» на чекауті
 * читався як повідомлення про помилку.
 */
.woocommerce form .form-row .description {
	font-size: var(--nrd-fs-xs);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--nrd-muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
	height: auto;
	transition: border-color var(--nrd-t-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--nrd-accent);
}

.woocommerce form .form-row textarea {
	min-height: 110px;
	resize: vertical;
}

/* Повідомлення магазину. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	margin: 0 0 var(--nrd-space-5);
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border-left: 3px solid var(--nrd-accent);
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-base);
	border-radius: 0 var(--nrd-radius) var(--nrd-radius) 0;
}

.woocommerce-error {
	border-left-color: var(--nrd-danger);
	color: var(--nrd-danger);
}

.woocommerce-message {
	border-left-color: var(--nrd-success);
}

/* Сітка товарів. */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-5);
}

/*
 * Це запасний вигляд — для стандартної розмітки WooCommerce.
 *
 * :not(.nrd-card) обов'язковий. Наша картка теж li.product у тому самому
 * ul.products, а селектор із трьох класів важить більше за .nrd-card —
 * тобто рамку картці малювали саме ці правила, і зняти її в .nrd-card
 * було неможливо: правило просто програвало.
 */
.woocommerce ul.products li.product:not(.nrd-card) {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	overflow: hidden;
	padding-bottom: var(--nrd-space-4);
	transition: border-color var(--nrd-t-base), box-shadow var(--nrd-t-base);
}

.woocommerce ul.products li.product:not(.nrd-card):hover {
	border-color: var(--nrd-line-strong);
	box-shadow: var(--nrd-shadow-md);
}

.woocommerce ul.products li.product:not(.nrd-card) img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: var(--nrd-space-4);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-lg);
	font-weight: 600;
	line-height: 1.4;
	margin: 0 var(--nrd-space-4) var(--nrd-space-2);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	display: block;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-2xl);
	font-weight: 600;
	color: var(--nrd-ink);
	margin: 0 var(--nrd-space-4) var(--nrd-space-3);
}

.woocommerce ul.products li.product .button {
	margin-inline: var(--nrd-space-4);
}

.woocommerce span.onsale {
	display: inline-block;
	padding: 5px 10px;
	background: var(--nrd-danger);
	color: #fff;
	font-size: var(--nrd-fs-3xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	border-radius: var(--nrd-radius);
}

/* Кількість. */
.woocommerce .quantity input.qty {
	width: 72px;
	padding: 10px;
	text-align: center;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
}

/*
 * Підсумок кошика. Підсумок чекауту сюди не входить: він лежить у власній
 * картці (.nrd-checkout__card), і друга рамка навколо давала б рамку в рамці.
 */
.woocommerce .cart_totals {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	padding: var(--nrd-space-5);
}

.woocommerce ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
}

.woocommerce ul#shipping_method label {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-weight: 600;
	color: var(--nrd-ink);
	cursor: pointer;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--nrd-space-5);
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
}

.woocommerce-checkout #payment div.form-row {
	padding: 0;
}

/* Кабінет. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--nrd-space-6);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--nrd-accent);
	background: var(--nrd-accent);
	color: #fff;
}

/* Сторінка товару. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: var(--nrd-radius);
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--nrd-space-4);
}

.woocommerce div.product form.cart .variations td {
	padding-block: var(--nrd-space-2);
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
}

/* =========================================================================
   5. Медіазапити
   ====================================================================== */

@media (min-width: 480px) {
	.nrd-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	:root {
		--nrd-gutter: 24px;
	}

	/*
	 * Тут шапка перестає бути телефонною: з'являються пошук і підписи під
	 * іконками, і вони не влазять у 58 пікселів. Разом із ними повертається
	 * повний розмір логотипа й службова смуга — у неї на цій ширині вже
	 * є що показати, крім знака мови.
	 */
	:root {
		--nrd-header-h: 92px;
	}

	.nrd-topbar { display: block; }

	.nrd-topbar__status,
	.nrd-topbar__city { display: flex; }

	.nrd-logo__word { font-size: 23px; }
	.nrd-logo__tag  { font-size: 8.5px; margin-top: 7px; letter-spacing: .34em; }

	.nrd-hsearch { display: block; }
	.nrd-act     { display: flex; }
	.nrd-cartbtn__sum { display: inline; }

	.nrd-cartbtn {
		width: auto;
		height: auto;
		padding: 11px 18px;
		background: var(--nrd-ink);
		color: #fff;
	}

	.nrd-cartbtn:hover {
		background: var(--nrd-accent);
		color: #fff;
	}

	.nrd-burger,
	.nrd-hcontact__btn {
		border: 1px solid var(--nrd-line);
		background: var(--nrd-bg-card);
	}

	.nrd-burger:hover,
	.nrd-hcontact__btn:hover {
		border-color: var(--nrd-accent);
	}

	.nrd-mega__grid { grid-template-columns: repeat(2, 1fr); }

	.nrd-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.nrd-grid--4 { grid-template-columns: repeat(2, 1fr); }

	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }

	.nrd-perkbar__grid { grid-template-columns: repeat(2, 1fr); }
	.nrd-promos { grid-template-columns: repeat(2, 1fr); }

	.nrd-footer__cols { grid-template-columns: repeat(2, 1fr); }

	/* Пропорції колонок форми — тільки звідси, ніколи інлайном. */
	.nrd-checkout__fields {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--nrd-space-4);
	}

	.nrd-col-4  { grid-column: span 4; }
	.nrd-col-6  { grid-column: span 6; }
	.nrd-col-8  { grid-column: span 8; }
	.nrd-col-12 { grid-column: span 12; }
}

/*
 * З 900px фільтри стають колонкою, а не шторкою.
 *
 * Раніше межа стояла на 1024, і на ноутбучному вікні в 900–1023 пікселі
 * покупець отримував телефонну шторку: панель фільтрів лягала поверх усієї
 * сторінки, накриваючи шапку й товари. Саме це й називають «наезжает
 * на весь контент». З 900 місця вистачає на 260 пікселів фільтрів
 * і дві колонки товарів поруч.
 */
@media (min-width: 900px) {
	.nrd-catalog {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--nrd-space-6);
		align-items: start;
	}

	/*
	 * Скидати треба все, чим шторка трималась поверх сторінки, —
	 * і положення, і зсув, і видимість.
	 */
	.nrd-fsheet {
		position: static;
		visibility: visible;
		pointer-events: auto;
		/*
		 * z-index обов'язково скидати, і саме це було причиною скарги
		 * «панель фільтрів наїжджає на весь контент».
		 *
		 * У шторки z-index: 60, щоб лежати поверх сторінки. На десктопі
		 * вона стає звичайним блоком, і здається, що z-index уже ні на що
		 * не впливає: він діє тільки на позиціоновані елементи. Але тут
		 * .nrd-fsheet — елемент гріда, а для дітей гріда й флекса z-index
		 * працює і без position. Колонка фільтрів опинялась вище липкої
		 * шапки (z-index: 40) і малювалась поверх неї при прокрутці.
		 */
		z-index: auto;
	}

	.nrd-fsheet__back,
	.nrd-filters__x,
	.nrd-toolbar__filter { display: none; }

	.nrd-filters {
		position: static;
		width: auto;
		overflow: visible;
		transform: none;
	}

	.nrd-filters__head {
		position: static;
		margin-top: 0;
		padding-block: 0 var(--nrd-space-4);
	}

	/* Кількість знайденого повертається в один рядок із сортуванням. */
	.nrd-toolbar__count {
		width: auto;
		order: -1;
	}

	/* Селект знову по вмісту: розтягувати його на пів рядка нема потреби. */
	.nrd-toolbar__sort {
		flex: 0 0 auto;
	}

	.nrd-toolbar__sort select {
		width: auto;
	}
}

@media (min-width: 1024px) {
	:root {
		--nrd-gutter: 32px;
	}

	.nrd-catalog {
		gap: var(--nrd-space-7);
	}

	.nrd-topbar__links { display: flex; }
	.nrd-catbar { display: block; }
	.nrd-burger { display: none; }

	/* Тут з'являється смуга каталогу з номером і «Замовити дзвінок» —
	   друга кнопка контактів поруч була б тим самим двічі. */
	.nrd-hcontact { display: none; }
	.nrd-mega__grid { grid-template-columns: repeat(4, 1fr); }

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

	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
	.nrd-sale .woocommerce ul.products,
	.nrd-section .woocommerce.columns-5 ul.products { grid-template-columns: repeat(5, 1fr); }

	.nrd-perkbar__grid { grid-template-columns: repeat(4, 1fr); }
	.nrd-promos { grid-template-columns: 1.6fr 1fr; }

	.nrd-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

	/*
	 * Чекаут у дві колонки. Класи вішає WooCommerce, і саме тут — у медіазапиті —
	 * задаються пропорції. Інлайном у шаблоні їх ставити не можна: на телефоні
	 * інлайн перебиває це правило й сторінка лишається у двох вузьких колонках.
	 */
	.woocommerce .col2-set,
	.woocommerce-page .col2-set {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--nrd-space-7);
	}

	/*
	 * Чекаут у дві колонки живе не тут, а в розділі 7.1, поруч зі своїми
	 * компонентами. Причина технічна: розділи 6–8 йдуть у файлі ПІСЛЯ
	 * цього медіазапиту, тож при однаковій специфічності перемагають вони.
	 * Одного разу це вже коштувало сторінки з формою в правій колонці
	 * і порожньою лівою.
	 */

	/* Кабінет: меню збоку. */
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--nrd-space-7);
		align-items: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		margin-bottom: 0;
	}


	/* Товар: галерея й панель покупки. */
	.nrd-product {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--nrd-space-8);
	}

}

@media (min-width: 1280px) {
	.nrd-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media print {
	.nrd-header,
	.nrd-topbar,
	.nrd-footer,
	.nrd-cw {
		display: none;
	}
}

/* =========================================================================
   6. Галерея товару
   ------------------------------------------------------------------------
   Мініатюри збоку, велике зображення поруч — як у макеті. На вузьких
   екранах стрічка мініатюр переїжджає під фото й прокручується вбік.
   ====================================================================== */

.nrd-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-3);
}

/*
 * Рамка головного фото за висотою дорівнює самій світлині.
 *
 * Раніше тут стояло aspect-ratio: 4/3, і кадр інших пропорцій лишав
 * порожню смугу. Спершу вона була зверху (фото починалося нижче
 * прев'ю), після вирівнювання по верху переїхала вниз — і в ній
 * зависли підказка та лупа, які мають лежати ПОВЕРХ фото.
 *
 * Стала пропорція тут нічого не давала: світлини в донора різні,
 * і будь-яке фіксоване число породжує порожнечу з того чи іншого боку.
 * min-height лишається, щоб до завантаження блок не схлопувався.
 */
.nrd-gallery__main {
	position: relative;
	order: -1;
	/*
	 * align-self обов'язковий: стрічка прев'ю вища за фото, і рамка
	 * розтягувалась на всю висоту рядка сітки. Саме звідти й бралась
	 * порожнеча, а не з пропорцій.
	 */
	align-self: start;
	background: var(--nrd-bg-soft);
	overflow: hidden;
}

/*
 * Стрічка світлин: кадр рівно на ширину рамки, зупинка — на кадрі.
 *
 * scroll-snap-stop: always обов'язковий. Без нього швидкий рух пальця
 * проносить стрічку повз кілька кадрів або відкидає її назад — саме на це
 * і скаржився замовник: «прокручування» замість переходу до кожного фото.
 *
 * У донора 35 світлин із 37 строго квадратні, тому рамка теж квадратна:
 * contain у ній не лишає полів практично ніде, а стрічці потрібна
 * однакова висота кадрів, інакше вона стрибає при гортанні.
 */
.nrd-gallery__track {
	display: flex;
	aspect-ratio: 1 / 1;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.nrd-gallery__track::-webkit-scrollbar {
	display: none;
}

.nrd-gallery__shot {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/*
 * Курсор-лупа лишається: він обіцяє збільшення, і воно є — у повний екран
 * фото відкривається одним дотиком. А от збільшення просто від наведення
 * тут більше немає: світлина смикалась щоразу, коли миша йшла повз неї
 * до кнопки купівлі. Зум переїхав у повноекранну галерею, куди заходять
 * саме роздивлятись.
 */
.nrd-gallery__shot {
	cursor: zoom-in;
}

/* Заглушка «немає фото» приїжджає без наших класів. */
.nrd-gallery--empty img {
	display: block;
	width: 100%;
	height: auto;
}

.nrd-gallery__main .nrd-badge {
	position: absolute;
	top: var(--nrd-space-3);
	left: var(--nrd-space-3);
	z-index: 2;
}

/*
 * На телефоні прев'ю перетворюються на крапки.
 *
 * Це ті самі кнопки перемикання фото, просто без самого зображення:
 * стрічка прев'ю під світлиною забирала висоту, а крапок рівно стільки,
 * скільки фото. З 768px вони знову стають прев'ю — там для них є місце
 * збоку від великого кадру.
 */
.nrd-gallery__thumbs {
	display: flex;
	justify-content: center;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.nrd-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.nrd-gallery__thumb {
	position: relative;
	flex: 0 0 auto;
	/* Сама крапка маленька, а кнопка — 22 пікселі: у неї треба влучити пальцем. */
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.nrd-gallery__thumb img {
	display: none;
}

.nrd-gallery__thumb::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nrd-line-strong);
	transition: width .2s ease, background .2s ease;
}

.nrd-gallery__thumb.is-on::after {
	width: 20px;
	border-radius: 4px;
	background: var(--nrd-accent);
}

/*
 * Товар із двома сотнями фото: крапок не буде, буде лічильник.
 * На десктопі стрічка прев'ю лишається — вона колонкою й із прокруткою,
 * там довгий список не заважає.
 */
.nrd-gallery--many .nrd-gallery__thumbs {
	display: none;
}

.nrd-gallery__counter {
	position: absolute;
	left: var(--nrd-space-3);
	bottom: var(--nrd-space-3);
	z-index: 2;
	padding: 5px 11px;
	border-radius: var(--nrd-radius-pill);
	background: rgba(28, 26, 23, .55);
	backdrop-filter: blur(3px);
	color: #fff;
	font-size: var(--nrd-fs-2xs);
	font-weight: 600;
	pointer-events: none;
}

.nrd-remote-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.nrd-gallery {
		/*
		 * Перша колонка — auto, а не 80px. У товарів з однією світлиною
		 * прев'ю немає взагалі, і фіксована колонка лишалась на місці:
		 * головне фото сідало в неї і показувалось розміром із прев'ю.
		 * Порожня auto-колонка стискається в нуль, і фото займає всю ширину.
		 */
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.nrd-gallery__main {
		order: 0;
		/*
		 * Пропорцію не задаємо: рамка має дорівнювати світлині.
		 * Саме це правило й лишало порожню смугу, у якій зависали
		 * підказка й лупа — їх місце ПОВЕРХ фото.
		 */
	}

	/* Лічильник потрібен телефону; на десктопі його місце займають прев'ю. */
	.nrd-gallery__counter { display: none; }

	.nrd-gallery--many .nrd-gallery__thumbs { display: flex; }

	/* Прев'ю знову з картинками: колонка збоку від великого кадру. */
	.nrd-gallery__thumbs {
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--nrd-space-2);
		overflow-x: visible;
		max-height: 620px;
		overflow-y: auto;
	}

	.nrd-gallery__thumb {
		width: 72px;
		height: 90px;
		border: 1px solid var(--nrd-line);
		background: var(--nrd-bg-card);
		overflow: hidden;
	}

	.nrd-gallery__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.nrd-gallery__thumb::after {
		display: none;
	}

	.nrd-gallery__thumb.is-on,
	.nrd-gallery__thumb:hover {
		border-color: var(--nrd-accent);
	}
}

/* =========================================================================
   7. Кошик і підсумок замовлення
   ====================================================================== */

/*
 * minmax(0, 1fr), а не просто 1fr.
 *
 * Голий 1fr — це minmax(auto, 1fr), а auto тут означає min-content:
 * доріжка відмовляється звужуватись менше за найширшу дитину. Рядок
 * кошика з назвою товару й ціною має min-content 389px, і на екрані
 * 390px уся сторінка їхала вбік на 31 піксель — ціна й кнопка
 * «Застосувати» опинялись за краєм.
 */
.nrd-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-7);
	align-items: start;
	margin-top: var(--nrd-space-6);
}

.nrd-cart__items {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
}

/* Позиція кошика. */
.nrd-citem {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		"media info remove"
		"media qty  price";
	gap: var(--nrd-space-2) var(--nrd-space-4);
	align-items: center;
	padding: var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-citem:last-of-type {
	border-bottom: 0;
}

.nrd-citem__media  { grid-area: media; }
.nrd-citem__info   { grid-area: info; }
.nrd-citem__qty    { grid-area: qty; }
.nrd-citem__price  { grid-area: price; text-align: right; }
.nrd-citem__remove { grid-area: remove; text-align: right; }

.nrd-citem__media img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	background: var(--nrd-bg-tint);
}

.nrd-citem__title {
	display: block;
	font-size: var(--nrd-fs-md);
	font-weight: 600;
	line-height: 1.4;
}

.nrd-citem__sku,
.nrd-citem__one {
	display: block;
	margin-top: 3px;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
}

/* Обрана комбінація варіації — WooCommerce віддає її як <dl>. */
.nrd-citem__info dl.variation {
	margin: var(--nrd-space-1) 0 0;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted);
}

.nrd-citem__info dl.variation dt,
.nrd-citem__info dl.variation dd {
	display: inline;
	margin: 0;
}

.nrd-citem__info dl.variation dd + dt::before {
	content: " · ";
}

.nrd-citem__info dl.variation p {
	display: inline;
	margin: 0;
}

.nrd-citem__price {
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-xl);
	white-space: nowrap;
}

.nrd-citem__remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--nrd-line);
	color: var(--nrd-muted-soft);
	border-radius: var(--nrd-radius);
}

.nrd-citem__remove .remove:hover {
	border-color: var(--nrd-danger);
	color: var(--nrd-danger);
}

.nrd-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-4);
	border-top: 1px solid var(--nrd-line);
	background: var(--nrd-bg);
}

/*
 * min-width у відсотках, а не в пікселях.
 *
 * Було 260px, і на екрані 390 поле з кнопкою «Застосувати» вже не
 * вміщалось: разом із відступами рядок вимагав 404 пікселі й тягнув
 * усю сторінку вбік. Відсоток звужується разом з екраном, а на широкому
 * поводиться так само, як раніше.
 */
.nrd-coupon {
	display: flex;
	flex: 1;
	min-width: min(260px, 100%);
	gap: var(--nrd-space-2);
}

/* Поле теж мусить уміти звужуватись — інакше його тримає власний вміст. */
.nrd-coupon input {
	min-width: 0;
}

.nrd-coupon input {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
	border-radius: var(--nrd-radius);
}

.nrd-coupon input:focus {
	outline: none;
	border-color: var(--nrd-accent);
}

/* Підсумок збоку. */
.nrd-cart__side .cart_totals {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-5);
}

.nrd-cart__side h2 {
	font-size: var(--nrd-fs-3xl);
	margin-bottom: var(--nrd-space-4);
}

.nrd-cart__side .shop_table th,
.nrd-cart__side .shop_table td {
	padding-block: var(--nrd-space-3);
}

.nrd-cart__side .order-total th,
.nrd-cart__side .order-total td {
	font-size: var(--nrd-fs-xl);
	font-weight: 700;
	border-bottom: 0;
}

.nrd-cart__side .wc-proceed-to-checkout {
	margin-top: var(--nrd-space-4);
}

.nrd-cart__side .checkout-button {
	width: 100%;
	text-align: center;
}

/* Підсумок на чекауті. */
.nrd-review .product-name {
	font-size: var(--nrd-fs-base);
	line-height: 1.45;
}

.nrd-review__qty {
	color: var(--nrd-muted-soft);
	white-space: nowrap;
}

.nrd-review dl.variation {
	margin: 4px 0 0;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted);
}

.nrd-review dl.variation dt,
.nrd-review dl.variation dd,
.nrd-review dl.variation p {
	display: inline;
	margin: 0;
}

.nrd-review .order-total th,
.nrd-review .order-total td {
	font-size: var(--nrd-fs-xl);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.nrd-cart {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}

	.nrd-citem {
		grid-template-columns: 72px minmax(0, 1fr) 120px 140px 44px;
		grid-template-areas: "media info qty price remove";
	}

	.nrd-cart__side .cart_totals {
		position: sticky;
		top: calc(var(--nrd-stick) + var(--nrd-space-4));
	}
}

/*
 * Сторінки кошика, чекауту й кабінету йдуть через page.php, а там вміст
 * загорнутий у .nrd-entry з max-width 760px — це правильно для тексту
 * й зовсім неправильно для таблиць у дві колонки. Знімаємо обмеження
 * саме там, де воно заважає.
 */
.woocommerce-cart .nrd-entry,
.woocommerce-checkout .nrd-entry,
.woocommerce-account .nrd-entry {
	max-width: none;
}

/*
 * На кошику ховаємо все, що стосується розрахунку доставки: калькулятор,
 * рядок способу й підказку «варіанти буде оновлено при оформленні».
 * Вартість у нас не рахується взагалі, перевізника обирають на чекауті —
 * а порожній блок доставки в кошику читається як «щось не порахувалось».
 */
.woocommerce-cart .cart_totals .shipping-calculator-form,
.woocommerce-cart .cart_totals .shipping-calculator-button,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	display: none;
}

/* =========================================================================
   7.1 Чекаут
   =========================================================================

   Одна сторінка, три пронумеровані кроки ліворуч, підсумок липкою карткою
   праворуч. Кроки нічого не ховають за акордеонами: покупець одразу бачить
   увесь шлях і скільки лишилось.

   Пропорції колонок — тільки в медіазапиті від 1024px (див. розділ 5).
   ====================================================================== */

/*
 * До 1024px — один стовпчик, і порядок у ньому не збігається з порядком
 * у розмітці: кнопка «Ваше замовлення», під нею сам підсумок, і вже потім
 * форма. У розмітці підсумок стоїть після форми (так правильно для
 * десктопа й для читалок екрана), тому на телефоні його піднімає order —
 * інакше натискання кнопки розгортало б підсумок за півтора екрана нижче,
 * і виглядало б це як «кнопка не працює».
 */
.nrd-checkout {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--nrd-space-9);
}

.nrd-checkout__peek { order: 1; }
.nrd-checkout__side { order: 2; }
.nrd-checkout__main { order: 3; }

/* --- Сторінка оформлення: власна шапка й підвал --- */

/*
 * На чекауті немає ні мегаменю, ні каталогу, ні підвалу в чотири колонки:
 * усе це веде геть зі сторінки, на якій покупець уже вирішив купити.
 * Лишається логотип, повернення в кошик і правові посилання.
 */
.nrd-co {
	/*
	 * Липка шапка сайту сюди не приходить, тож підсумку немає під що
	 * підлазити. Значення з :root (148px) лишило б над ним зайву смугу.
	 */
	--nrd-stick: 16px;

	background: var(--nrd-bg);
}

.nrd-cohead {
	border-bottom: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
}

.nrd-cohead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-4);
	min-height: 74px;
	padding-block: var(--nrd-space-3);
}

.nrd-cohead__side {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-5);
}

.nrd-cohead__safe,
.nrd-cohead__back {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-cohead__safe svg {
	color: var(--nrd-success);
}

.nrd-cohead__back:hover {
	color: var(--nrd-accent);
}

/* На телефоні лишається тільки повернення в кошик — місця більше немає. */
@media (max-width: 599px) {
	.nrd-cohead__safe {
		display: none;
	}
}

.nrd-comain {
	padding-block: var(--nrd-space-7);
	min-height: 60vh;
}

.nrd-cofoot {
	border-top: 1px solid var(--nrd-line);
	padding-block: var(--nrd-space-5);
}

.nrd-cofoot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
}

.nrd-cofoot__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-4);
	margin: 0;
	padding: 0;
}

.nrd-cofoot__menu a,
.nrd-cofoot__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-cofoot__menu a:hover,
.nrd-cofoot__phone:hover {
	color: var(--nrd-accent);
}

/* На чекауті сторінка й так одна — хлібні крихти нема куди вести. */
.nrd-co .nrd-crumbs {
	display: none;
}

/* --- Крок --- */

.nrd-step {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	padding: var(--nrd-space-6);
	margin-bottom: var(--nrd-space-4);
}

.nrd-step__head {
	display: flex;
	align-items: flex-start;
	gap: var(--nrd-space-3);
	margin-bottom: var(--nrd-space-5);
}

.nrd-step__num {
	flex: none;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--nrd-ink);
	color: #fff;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
}

.nrd-step__title {
	font-size: var(--nrd-fs-2xl);
	line-height: var(--nrd-lh-head);
	margin: 0;
}

.nrd-step__sub {
	margin: 4px 0 0;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-step .form-row:last-child {
	margin-bottom: 0;
}

/* --- Перевізник --- */

.nrd-ship {
	display: grid;
	gap: var(--nrd-space-2);
	margin-bottom: var(--nrd-space-5);
}

.nrd-ship__opt {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	cursor: pointer;
	transition: border-color var(--nrd-t-base), background var(--nrd-t-base);
}

.nrd-ship__opt:hover {
	border-color: var(--nrd-line-strong);
}

.nrd-ship__opt.is-on {
	border-color: var(--nrd-accent);
	background: rgba(176, 125, 78, .05);
}

/*
 * Рідне радіо лишається в розмітці й лишається клікабельним для читалок
 * екрана — просто не показується. display:none викинув би його з дерева
 * доступності, а WooCommerce читає саме його значення.
 */
.nrd-ship__opt input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.nrd-ship__mark {
	width: 18px;
	height: 18px;
	border: 1px solid var(--nrd-line-strong);
	border-radius: 50%;
	position: relative;
	transition: border-color var(--nrd-t-base);
}

.nrd-ship__opt.is-on .nrd-ship__mark {
	border-color: var(--nrd-accent);
	border-width: 5px;
}

.nrd-ship__opt input:focus-visible + .nrd-ship__mark {
	outline: 2px solid var(--nrd-accent);
	outline-offset: 2px;
}

.nrd-ship__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nrd-ship__name {
	font-weight: 700;
	font-size: var(--nrd-fs-lg);
}

.nrd-ship__note {
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-ship__cost {
	grid-column: 2;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted-soft);
}

.nrd-delivery__eta {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	margin: var(--nrd-space-4) 0 0;
	padding-top: var(--nrd-space-4);
	border-top: 1px solid var(--nrd-line-soft);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-delivery__eta svg {
	flex: none;
	color: var(--nrd-accent);
}

/* --- Підказки довідника --- */

.nrd-sug__host {
	position: relative;
}

.nrd-sug {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	max-height: 300px;
	overflow-y: auto;
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line-strong);
	border-radius: var(--nrd-radius);
	box-shadow: var(--nrd-shadow-md);
}

.nrd-sug__note {
	padding: var(--nrd-space-3) var(--nrd-space-4);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

/*
 * Рядок пояснення над списком: «цей пункт обслуговує таке-то місто».
 * Липкий, бо у великих містах список довгий, а причина, чому адреси
 * не збігаються з назвою пункту, потрібна на будь-якій його висоті.
 */
.nrd-sug__lead {
	position: sticky;
	top: 0;
	padding: var(--nrd-space-2) var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line);
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-xs);
	line-height: var(--nrd-lh-base);
	color: var(--nrd-muted);
}

.nrd-sug__opt {
	display: block;
	width: 100%;
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border: 0;
	border-bottom: 1px solid var(--nrd-line-soft);
	background: none;
	text-align: left;
	cursor: pointer;
}

.nrd-sug__opt:last-child {
	border-bottom: 0;
}

.nrd-sug__opt:hover,
.nrd-sug__opt.is-on {
	background: var(--nrd-bg-soft);
}

.nrd-sug__name {
	display: block;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	color: var(--nrd-ink);
}

.nrd-sug__note-inline {
	display: block;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

.nrd-sug__hint {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 6px;
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-3xs);
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

/* --- Оплата --- */

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	padding: var(--nrd-space-4);
	transition: border-color var(--nrd-t-base), background var(--nrd-t-base);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--nrd-accent);
	background: rgba(176, 125, 78, .05);
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-lg);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--nrd-ink);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods .payment_box {
	margin: var(--nrd-space-2) 0 0;
	padding: 0;
	background: none;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
	display: none;
}

.woocommerce-checkout #payment ul.payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment .place-order {
	margin: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	padding: 17px 24px;
	border: 0;
	border-radius: var(--nrd-radius);
	background: var(--nrd-accent);
	color: #fff;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-md);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--nrd-t-base);
}

.woocommerce-checkout #payment #place_order:hover {
	background: var(--nrd-accent-dark);
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--nrd-space-4);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

/* --- Підсумок праворуч --- */

/*
 * Підсумок тонований, а кроки — білі. Сторінка світла, і біла картка на
 * світлому тлі не читалася б як окремий стовпчик; у макеті-орієнтирі
 * підсумок теж відрізняється тлом, а не рамкою.
 */
.nrd-checkout__card {
	background: var(--nrd-bg-warm);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	padding: var(--nrd-space-5);
}

.nrd-checkout__card-title {
	font-size: var(--nrd-fs-xl);
	margin: 0 0 var(--nrd-space-4);
}

.nrd-checkout__side .woocommerce-checkout-review-order {
	background: none;
	border: 0;
	padding: 0;
}

.nrd-sum__items {
	display: grid;
	gap: var(--nrd-space-4);
	max-height: 340px;
	overflow-y: auto;
	padding-bottom: var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-sum__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--nrd-space-3);
}

.nrd-sum__media {
	position: relative;
	width: 56px;
	height: 56px;
	border: 1px solid var(--nrd-line-soft);
	border-radius: var(--nrd-radius);
	overflow: hidden;
	background: var(--nrd-bg-soft);
}

.nrd-sum__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Кількість бейджем на світлині — так, як у кошику Shopify. */
.nrd-sum__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--nrd-ink);
	color: #fff;
	font-size: var(--nrd-fs-3xs);
	font-weight: 700;
}

.nrd-sum__info {
	min-width: 0;
}

.nrd-sum__name {
	display: block;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	line-height: var(--nrd-lh-base);
}

.nrd-sum__opt {
	display: block;
	margin-top: 2px;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

/* Скільки штук і почому — звичайним текстом, а не значком на фото. */
.nrd-sum__count {
	display: block;
	margin-top: 3px;
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	color: var(--nrd-ink);
}

.nrd-sum__price {
	font-size: var(--nrd-fs-base);
	font-weight: 700;
	white-space: nowrap;
}

.nrd-sum__lines {
	display: grid;
	gap: var(--nrd-space-2);
	padding-top: var(--nrd-space-4);
}

.nrd-sum__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
}

.nrd-sum__line--disc {
	color: var(--nrd-success);
}

.nrd-sum__ship {
	font-size: var(--nrd-fs-xs);
	text-align: right;
}

.nrd-sum__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	margin-top: var(--nrd-space-2);
	padding-top: var(--nrd-space-4);
	border-top: 1px solid var(--nrd-line);
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-xl);
	font-weight: 700;
	color: var(--nrd-ink);
}

.nrd-sum__total .nrd-total__note {
	display: block;
	margin-top: 4px;
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-2xs);
	font-weight: 400;
	text-align: right;
	color: var(--nrd-muted);
}

/* --- Промокод --- */

/*
 * Імена свідомо прив'язані до блоку чекауту.
 *
 * Спочатку блок звався .nrd-promo — і збігся з картками акцій на головній.
 * Потім .nrd-coupon — і збігся з полем купона в кошику, яке має display:flex:
 * підпис «Промокод» ставав ліворуч від поля, а повідомлення про помилку —
 * праворуч від кнопки, розчавлюючи поле до трьох літер. Два збіги поспіль
 * в одному місці — достатньо, щоб більше не вигадувати коротких імен.
 */
.nrd-checkout__promo {
	display: block;
	margin-top: var(--nrd-space-5);
	padding-top: var(--nrd-space-5);
	border-top: 1px solid var(--nrd-line-soft);
}

.nrd-checkout__promo-label {
	display: block;
	margin-bottom: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

/*
 * У вузькій картці підсумку кнопка «Застосувати» з'їдала поле майже цілком —
 * лишалось місце на три літери. Тому до 420px рядок стає у два поверхи.
 */
.nrd-checkout__promo-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-2);
}

@media (min-width: 420px) {
	.nrd-checkout__promo-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.nrd-checkout__promo-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
}

.nrd-checkout__promo-input:focus {
	outline: none;
	border-color: var(--nrd-accent);
}

.nrd-checkout__promo-btn {
	white-space: nowrap;
}

/* Повідомлення — власним рядком під полем, а не збоку від кнопки. */
.nrd-checkout__promo-msg {
	display: block;
	margin: var(--nrd-space-2) 0 0;
	font-size: var(--nrd-fs-sm);
	line-height: var(--nrd-lh-base);
	color: var(--nrd-danger);
}

.nrd-checkout__promo-msg.is-ok {
	color: var(--nrd-success);
}

/* --- Друга кнопка оформлення --- */

.nrd-checkout__side-order {
	margin-top: var(--nrd-space-4);
	padding: 17px 24px;
	border: 0;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-md);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	cursor: pointer;
}

/* --- Гарантії --- */

.nrd-checkout__trust {
	list-style: none;
	margin: var(--nrd-space-5) 0 0;
	padding: var(--nrd-space-5) 0 0;
	border-top: 1px solid var(--nrd-line-soft);
	display: grid;
	gap: var(--nrd-space-3);
}

.nrd-checkout__trust li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-sm);
	line-height: var(--nrd-lh-base);
	color: var(--nrd-muted);
}

.nrd-checkout__trust svg {
	margin-top: 2px;
	color: var(--nrd-accent);
}

/* --- Смуга підсумку для телефона --- */

.nrd-checkout__peek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	width: 100%;
	margin-bottom: var(--nrd-space-4);
	padding: var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-card);
	cursor: pointer;
}

.nrd-checkout__peek-label {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-2);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	color: var(--nrd-ink);
}

.nrd-checkout__peek-label svg {
	color: var(--nrd-accent);
}

.nrd-checkout__peek-count {
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-3xs);
	font-weight: 700;
}

.nrd-checkout__peek-sum {
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-lg);
	font-weight: 700;
}

/*
 * До 1024px підсумок згорнутий: на телефоні він відсуває форму на екран
 * униз, а покупцеві спершу треба заповнити поля. Розгортається кнопкою.
 */
.nrd-checkout__side {
	display: none;
}

.nrd-checkout__side.is-open {
	display: block;
	margin-bottom: var(--nrd-space-5);
}

/*
 * Дві колонки. Кожна сторона — власний блок (див. шаблон
 * checkout/form-checkout.php): без обгорток права колонка з'їжджала вниз,
 * бо висоту рядка задавала ліва.
 *
 * Медіазапит стоїть тут, а не в розділі 5, і це важливо: розділ 5 лежить
 * у файлі вище, тож базові правила цього розділу перемагали б його при
 * однаковій специфічності. Саме так сторінка одного разу й вийшла з формою
 * праворуч і порожньою лівою колонкою.
 */
@media (min-width: 1024px) {
	.nrd-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: var(--nrd-space-7);
		align-items: start;
	}

	.nrd-checkout__peek {
		display: none;
	}

	/*
	 * Клітинку задаємо повністю — і стовпчик, і рядок.
	 *
	 * Одного стовпчика мало: order з мобільних правил діє і в гріді, тобто
	 * підсумок розкладається першим. Він займає перший рядок праворуч,
	 * курсор автоматичного розміщення проходить далі — і форма їде в другий
	 * рядок. На сторінці це виглядало як 400 порожніх пікселів над формою.
	 */
	.nrd-checkout__main {
		grid-area: 1 / 1;
	}

	.nrd-checkout__side {
		display: block;
		grid-area: 1 / 2;
		position: sticky;
		top: calc(var(--nrd-stick) + var(--nrd-space-4));
	}
}

/* =========================================================================
   8. «Дякуємо» і кабінет
   ====================================================================== */

.nrd-thanks {
	max-width: 720px;
	margin: var(--nrd-space-6) auto var(--nrd-space-8);
	padding: var(--nrd-space-8) var(--nrd-space-7);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	text-align: center;
}

.nrd-thanks__mark {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--nrd-space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--nrd-success);
	color: #fff;
}

.nrd-thanks--failed .nrd-thanks__title {
	color: var(--nrd-danger);
}

/* Оплата ще підтверджується банком. */
.nrd-thanks__pending {
	display: flex;
	align-items: flex-start;
	gap: var(--nrd-space-2);
	max-width: 52ch;
	margin: var(--nrd-space-5) auto 0;
	padding: var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	background: var(--nrd-bg-soft);
	font-size: var(--nrd-fs-base);
	line-height: var(--nrd-lh-base);
	text-align: left;
	color: var(--nrd-muted);
}

.nrd-thanks__pending svg {
	flex: none;
	margin-top: 3px;
	color: var(--nrd-accent);
}

/*
 * Проміжна сторінка, з якої форма сама йде в LiqPay. Покупець бачить її
 * долі секунди, але побачити мусить щось осмислене: порожній екран у момент
 * оплати читається як поломка.
 *
 * Ім'я довге не просто так: .nrd-pay вже зайнято іконками платіжних систем
 * у підвалі. Це вже третій збіг класів у цьому файлі за сесію — після
 * .nrd-promo (картки акцій) і .nrd-coupon (купон у кошику). Перед новим
 * коротким іменем спершу grep по assets/css/app.css.
 */
.nrd-payredirect {
	max-width: 520px;
	margin: var(--nrd-space-9) auto;
	padding: var(--nrd-space-8) var(--nrd-space-7);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	text-align: center;
}

.nrd-payredirect__note {
	margin-bottom: var(--nrd-space-5);
	color: var(--nrd-muted);
}

.nrd-thanks__title {
	font-size: var(--nrd-h4);
	margin-bottom: var(--nrd-space-3);
}

.nrd-thanks__lead {
	color: var(--nrd-muted);
	max-width: 52ch;
	margin-inline: auto;
}

/* Факти замовлення: підпис і значення в рядок, на телефоні — стовпчиком. */
.nrd-thanks__facts {
	list-style: none;
	margin: var(--nrd-space-6) 0;
	padding: 0;
	border: 1px solid var(--nrd-line-soft);
	text-align: left;
}

.nrd-thanks__facts li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-2);
	padding: var(--nrd-space-3) var(--nrd-space-4);
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-thanks__facts li:last-child {
	border-bottom: 0;
}

.nrd-thanks__facts span {
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
}

.nrd-thanks__note {
	padding: var(--nrd-space-4);
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	text-align: left;
	line-height: 1.7;
}

.nrd-thanks__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nrd-space-3);
	margin: var(--nrd-space-6) 0 0;
}

/* Кабінет. */
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-6);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: var(--nrd-fs-3xl);
	margin-bottom: var(--nrd-space-4);
}

.woocommerce-account .woocommerce-Address {
	margin-bottom: var(--nrd-space-5);
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.8;
	color: var(--nrd-muted);
}

/* Форма входу й реєстрації. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 460px;
	margin-inline: auto;
}

.woocommerce form.login,
.woocommerce form.register {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-6);
}

.woocommerce form.login .button,
.woocommerce form.register .button {
	width: 100%;
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-base);
}

/*
 * «Дякуємо»: у картці зверху вже є сума, спосіб оплати й доставка, тому
 * в стандартній таблиці подробиць ці ж рядки ховаємо. Дублювання тих самих
 * цифр двічі на одному екрані змушує звіряти їх між собою.
 * Перелік позицій і адресу лишаємо — їх у картці немає.
 */
.woocommerce-order-details tfoot tr:not(:first-child) {
	display: none;
}

.woocommerce-order-details,
.woocommerce-customer-details {
	max-width: 900px;
	margin-inline: auto;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
	font-size: var(--nrd-fs-3xl);
	margin-bottom: var(--nrd-space-4);
}

/* =========================================================================
   9. Журнал і стаття
   ====================================================================== */

/* Головна стаття списку. */
.nrd-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-5);
	margin-bottom: var(--nrd-space-8);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
}

.nrd-lead__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--nrd-bg-tint);
}

.nrd-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--nrd-ease);
}

.nrd-lead:hover .nrd-lead__media img {
	transform: scale(1.03);
}

.nrd-lead__body {
	padding: 0 var(--nrd-space-6) var(--nrd-space-6);
	align-self: center;
}

.nrd-lead__title {
	font-size: var(--nrd-h4);
	margin: var(--nrd-space-2) 0 var(--nrd-space-3);
}

.nrd-lead__body p {
	color: var(--nrd-muted);
	max-width: 56ch;
}

.nrd-card__excerpt {
	margin: 0;
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	line-height: 1.6;
}

/* Стаття. */
.nrd-post__head {
	max-width: 760px;
	padding-block: var(--nrd-space-6) var(--nrd-space-5);
}

.nrd-post__title {
	margin: var(--nrd-space-2) 0 0;
	font-size: var(--nrd-h3);
}

.nrd-post__cover {
	margin: 0 0 var(--nrd-space-7);
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--nrd-bg-tint);
}

.nrd-post__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Колонка тексту вужча за контейнер — інакше рядок надто довгий для читання. */
.nrd-post__body {
	max-width: 720px;
	font-size: var(--nrd-fs-lg);
}

.nrd-post__body h2 {
	font-size: var(--nrd-h5);
	margin-top: var(--nrd-space-8);
}

.nrd-post__body h3 {
	font-size: var(--nrd-fs-3xl);
	margin-top: var(--nrd-space-6);
}

.nrd-post__body blockquote {
	margin: var(--nrd-space-6) 0;
	padding-left: var(--nrd-space-5);
	border-left: 3px solid var(--nrd-accent);
	font-size: var(--nrd-fs-xl);
	color: var(--nrd-muted);
	font-style: italic;
}

/* Перехід до сусідніх статей. */
.nrd-postnav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-3);
	margin: var(--nrd-space-9) 0 var(--nrd-space-8);
	padding-top: var(--nrd-space-6);
	border-top: 1px solid var(--nrd-line);
}

.nrd-postnav__item {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
	padding: var(--nrd-space-4) var(--nrd-space-5);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
}

.nrd-postnav__item:hover {
	border-color: var(--nrd-accent);
}

.nrd-postnav__item--next {
	text-align: right;
}

.nrd-postnav__dir {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	color: var(--nrd-muted-soft);
}

.nrd-postnav__item--next .nrd-postnav__dir {
	justify-content: flex-end;
}

.nrd-postnav__title {
	font-size: var(--nrd-fs-md);
	font-weight: 600;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.nrd-postnav { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.nrd-lead {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 0;
	}

	.nrd-lead__media {
		aspect-ratio: auto;
		height: 100%;
	}

	.nrd-lead__body {
		padding: var(--nrd-space-7);
	}
}

/* =========================================================================
   10. Сторінка відгуків
   ====================================================================== */

.nrd-reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-6);
	align-items: start;
}

.nrd-score {
	padding: var(--nrd-space-6);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	text-align: center;
}

.nrd-score__num {
	font-family: var(--nrd-font-head);
	font-size: clamp(38px, 5vw, 54px);
	font-weight: 300;
	line-height: 1;
	margin-bottom: var(--nrd-space-2);
}

.nrd-score .nrd-card__stars {
	font-size: var(--nrd-fs-xl);
}

.nrd-score__count {
	margin-top: var(--nrd-space-2);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-score__note {
	margin-top: var(--nrd-space-4);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
	line-height: 1.7;
}

.nrd-reviews__list {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-3);
}

.nrd-reviews__list .nrd-review {
	padding: var(--nrd-space-5) var(--nrd-space-6);
}

.nrd-reviews__list blockquote {
	margin: var(--nrd-space-2) 0 var(--nrd-space-3);
}

.nrd-review figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--nrd-space-2);
}

.nrd-review figcaption b {
	display: inline;
}

@media (min-width: 1024px) {
	.nrd-reviews {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--nrd-space-7);
	}

	.nrd-reviews__side {
		position: sticky;
		top: calc(var(--nrd-stick) + var(--nrd-space-4));
	}
}

/* =========================================================================
   11. Сторінка товару: вибір варіації, галерея, спойлери, липка смуга
   ====================================================================== */

/* --- 11.1 Свій вигляд полів і списків --- */

/*
 * Рідний select стилізувати однаково в усіх браузерах неможливо: стрілку
 * й список малює операційна система. Тому там, де вигляд важливий, поверх
 * нього малюється свій — а сам select лишається живим для WooCommerce
 * і для читалок екрана.
 */
.nrd-var__native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.nrd-var {
	position: relative;
	margin-bottom: var(--nrd-space-5);
}

.nrd-var__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-2);
	margin-bottom: var(--nrd-space-2);
}

.nrd-var__label {
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

.nrd-var__chosen {
	font-size: var(--nrd-fs-base);
	color: var(--nrd-ink);
	text-align: right;
}

.nrd-var__count {
	display: block;
	margin-top: var(--nrd-space-1);
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
}

.nrd-var__reset {
	display: inline-block;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

/* --- Свотчі --- */

.nrd-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-2);
}

.nrd-swatch {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--nrd-line);
	background: var(--sw, var(--nrd-bg-tint));
	border-radius: var(--nrd-radius);
	position: relative;
	transition: box-shadow var(--nrd-t-base), border-color var(--nrd-t-base);
}

.nrd-swatch--noimg {
	background: var(--nrd-bg-tint);
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted);
	text-transform: uppercase;
}

.nrd-swatch:hover {
	border-color: var(--nrd-line-strong);
}

/* Обране — подвійною обводкою, а не галочкою: галочка ховає сам колір. */
.nrd-swatch.is-on {
	border-color: var(--nrd-accent);
	box-shadow: inset 0 0 0 2px var(--nrd-bg-card);
}

/* Значення, якого немає в жодній сумісній комбінації. */
.nrd-swatch.is-off,
.nrd-optcard.is-off,
.nrd-select__opt.is-off {
	opacity: .3;
	cursor: not-allowed;
	position: relative;
}

.nrd-swatch.is-off::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent 47%, var(--nrd-muted) 47%, var(--nrd-muted) 53%, transparent 53%);
}

/* --- Картки-варіанти (розмір) --- */

.nrd-optcards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrd-space-2);
}

.nrd-optcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 120px;
	padding: 11px 14px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	border-radius: var(--nrd-radius);
	text-align: left;
	transition: border-color var(--nrd-t-base), background var(--nrd-t-base);
}

.nrd-optcard:hover {
	border-color: var(--nrd-line-strong);
}

.nrd-optcard.is-on {
	border-color: var(--nrd-accent);
	background: var(--nrd-bg-warm);
}

.nrd-optcard__name {
	font-size: var(--nrd-fs-base);
	font-weight: 600;
}

.nrd-optcard__price {
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

.nrd-optcard__price:empty {
	display: none;
}

/* --- Свій список --- */

.nrd-select {
	position: relative;
}

.nrd-select__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-2);
	height: 48px;
	padding: 0 var(--nrd-space-4);
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	border-radius: var(--nrd-radius);
	font-size: var(--nrd-fs-md);
	text-align: left;
}

.nrd-select__btn:hover,
.nrd-select__btn[aria-expanded="true"] {
	border-color: var(--nrd-accent);
}

.nrd-select__btn svg {
	flex: 0 0 auto;
	color: var(--nrd-muted);
	transition: transform var(--nrd-t-base);
}

.nrd-select__btn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.nrd-select__val {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nrd-select__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 30;
	max-height: 300px;
	overflow-y: auto;
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	box-shadow: var(--nrd-shadow-md);
	border-radius: var(--nrd-radius);
}

.nrd-select__opt {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	width: 100%;
	padding: 10px var(--nrd-space-4);
	border: 0;
	background: transparent;
	font-size: var(--nrd-fs-base);
	text-align: left;
}

.nrd-select__opt:hover {
	background: var(--nrd-bg);
}

.nrd-select__opt.is-on {
	background: var(--nrd-bg-warm);
	font-weight: 600;
}

.nrd-select__sw {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 1px solid var(--nrd-line);
	background: var(--sw, var(--nrd-bg-tint));
	border-radius: 2px;
}

.nrd-select__delta {
	margin-left: auto;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
}

.nrd-select__delta:empty {
	display: none;
}

/* --- 11.2 Способи оплати частинами --- */

/*
 * Способи оплати частинами — одним рядком, через розділювачі.
 *
 * Стовпчиком із трьох рядків вони важили більше за саму кнопку купівлі,
 * хоча це довідка, а не дія. У рядок вони займають одну смугу, а риски
 * між ними не дають прочитати три назви як одну довгу.
 */
.nrd-inst-list {
	list-style: none;
	margin: var(--nrd-space-5) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--nrd-space-3);
}

.nrd-inst-list li {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted);
	white-space: nowrap;
}

/*
 * Риска малюється перед пунктом, а не після: у останнього її не буде,
 * і не доведеться гасити :last-child окремим правилом. При переносі
 * рядка риска лишається на початку — це читається як продовження списку.
 */
/* Спільний підпис зліва: він не потребує ні риски, ні іконки. */
.nrd-inst-list__lead {
	color: var(--nrd-muted-soft);
}

.nrd-inst-list__lead + li::before {
	display: none;
}

.nrd-inst-list li + li::before {
	content: "";
	width: 1px;
	height: 14px;
	margin-right: var(--nrd-space-3);
	background: var(--nrd-line);
}

.nrd-inst-list svg {
	flex: 0 0 auto;
}

.nrd-buy__oneclick {
	flex: 1;
}

/* --- 11.3 Галерея: стрілки, підказка, лупа --- */

.nrd-gallery__main {
	cursor: zoom-in;
}

/*
 * Стрілки гортання — з 768px.
 *
 * На телефоні вони лежали поверх світлини й закривали товар, а фото
 * перемикають крапки під ним. Мишею крапки в 7 пікселів незручні,
 * тому на широкому екрані стрілки лишаються.
 */
.nrd-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: rgba(255, 255, 255, .92);
	color: var(--nrd-ink);
	box-shadow: var(--nrd-shadow-sm);
	opacity: 0;
	transition: opacity var(--nrd-t-base), background var(--nrd-t-base);
	z-index: 2;
}

.nrd-gallery__main:hover .nrd-gallery__nav {
	opacity: 1;
}

.nrd-gallery__nav:hover {
	background: var(--nrd-ink);
	color: #fff;
}

.nrd-gallery__nav--prev { left: var(--nrd-space-3); }
.nrd-gallery__nav--next { right: var(--nrd-space-3); }

.nrd-gallery__hint {
	position: absolute;
	left: var(--nrd-space-3);
	bottom: var(--nrd-space-3);
	padding: 6px 12px;
	background: rgba(28, 26, 23, .72);
	color: #fff;
	font-size: var(--nrd-fs-2xs);
	opacity: 0;
	transition: opacity var(--nrd-t-base);
	pointer-events: none;
	z-index: 2;
}

.nrd-gallery__main:hover .nrd-gallery__hint {
	opacity: 1;
}

.nrd-gallery__zoom {
	position: absolute;
	right: var(--nrd-space-3);
	bottom: var(--nrd-space-3);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--nrd-line);
	background: rgba(255, 255, 255, .94);
	color: var(--nrd-ink);
	z-index: 2;
}

.nrd-gallery__zoom:hover {
	background: var(--nrd-ink);
	color: #fff;
	border-color: var(--nrd-ink);
}

@media (min-width: 768px) {
	.nrd-gallery__nav { display: flex; }
}

/* На пристроях без наведення показуємо керування одразу. */
@media (hover: none) {
	.nrd-gallery__nav { opacity: 1; }
	.nrd-gallery__hint { display: none; }

	/*
	 * Лупа лишається знаком, але перестає ловити дотик: під нею стрічка,
	 * і свайп, початий із цього кута, не доходив до неї взагалі — палець
	 * потрапляв у кнопку й гортання просто не відбувалось. Тап крізь неї
	 * усе одно відкриває повний екран: його ловить сама світлина.
	 */
	.nrd-gallery__zoom {
		pointer-events: none;
	}
}

/* --- 11.4 Повноекранна галерея --- */

.nrd-lb {
	position: fixed;
	inset: 0;
	z-index: 100;
	/*
	 * Тло непрозоре. Крізь 96% просвічували шапка, фільтри й текст сторінки —
	 * поверх світлини, яку відкрили саме щоб роздивитись.
	 */
	background: #0f0e0c;
	color: #fff;
	display: flex;
	flex-direction: column;
	animation: nrd-in .18s ease;
}

.nrd-lb__bar {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-4);
	padding: var(--nrd-space-4) var(--nrd-space-5);
	flex: 0 0 auto;
}

.nrd-lb__title {
	font-size: var(--nrd-fs-md);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nrd-lb__count {
	margin-left: auto;
	font-size: var(--nrd-fs-base);
	color: rgba(255, 255, 255, .6);
}

.nrd-lb__close {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: #fff;
	font-size: 18px;
	line-height: 1;
}

.nrd-lb__close:hover {
	background: rgba(255, 255, 255, .12);
}

/*
 * Два ряди з явними частками, а не «фото скільки влізе, панель по вмісту».
 *
 * Було `minmax(0, 1fr) auto`: панель купівлі з варіантами й розстрочкою
 * вимагала 575 пікселів із 768, фото лишалось 193 — а сама світлина
 * трималась за max-height: 62vh і вилазила з клітинки. На екрані це
 * виглядало як накладені один на одного знімок, смуга мініатюр і ціна.
 */
.nrd-lb__body {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) minmax(0, 46%);
	overflow: hidden;
}

.nrd-lb__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-4);
	padding: 0 var(--nrd-space-5) var(--nrd-space-5);
	min-height: 0;
}

/*
 * Стрічка світлин у повний екран.
 *
 * min-height: 0 обов'язковий — інакше стрічка тримає власний розмір
 * і вилазить за межі клітинки. scroll-snap-stop: always так само
 * обов'язковий: без нього швидкий рух пальця проносить повз кадри.
 */
.nrd-lb__track {
	flex: 1;
	min-height: 0;
	width: 100%;
	max-width: min(100%, 900px);
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.nrd-lb__track::-webkit-scrollbar {
	display: none;
}

.nrd-lb__shot {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/*
	 * Збільшення під курсором живе тут — саме сюди заходять роздивлятись.
	 * Кратність 1.6, а не «щоб красиво»: у світлин донора 1000px по стороні,
	 * а показуємо ми їх близько 900 — справжнього запасу лише в півтора раза.
	 * Точку ставить курсор (--zx/--zy), інакше зум завжди тягне в центр.
	 */
	transform-origin: var(--zx, 50%) var(--zy, 50%);
	transition: transform .35s var(--nrd-ease);
	cursor: zoom-in;
}

/* Збільшується тільки видимий кадр: сусіди лежать упритул боками,
   і їхні збільшені краї заповзали б у рамку. */
.nrd-lb__stage.is-zoom .nrd-lb__shot.is-on {
	transform: scale(1.6);
	transition-duration: .18s;
}

@media (prefers-reduced-motion: reduce) {
	.nrd-lb__shot,
	.nrd-lb__stage.is-zoom .nrd-lb__shot.is-on {
		transform: none;
		transition: none;
	}
}

/*
 * Стрілки повного екрана — з 768px, як і в решті галерей.
 *
 * На телефоні світлини гортають пальцем, а дві кнопки 52×52 поверх фото
 * не тільки закривали товар, а й з'їдали жест: свайп, початий із кнопки,
 * не доходив до стрічки взагалі.
 */
.nrd-lb__nav {
	position: absolute;
	top: 45%;
	display: none;
	width: 52px;
	height: 52px;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 20px;
}

.nrd-lb__nav:hover {
	background: rgba(255, 255, 255, .24);
}

.nrd-lb__nav--prev { left: var(--nrd-space-4); }
.nrd-lb__nav--next { right: var(--nrd-space-4); }

/*
 * Стрічка мініатюр — один рядок із прокруткою. Перенос по рядках здається
 * зручнішим, але на товарі з сорока фото він з'їдає весь екран і ховає
 * саме зображення, заради якого лайтбокс і відкривали.
 */
.nrd-lb__strip {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	max-width: 900px;
	padding-bottom: var(--nrd-space-1);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.nrd-lb__strip::-webkit-scrollbar {
	height: 6px;
}

.nrd-lb__strip::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .3);
	border-radius: 3px;
}

.nrd-lb__thumb {
	flex: 0 0 auto;
}

.nrd-lb__thumb {
	width: 84px;
	height: 60px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	background: transparent;
	overflow: hidden;
	opacity: .55;
}

.nrd-lb__thumb.is-on,
.nrd-lb__thumb:hover {
	opacity: 1;
	border-color: var(--nrd-accent);
}

.nrd-lb__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Підказка про стрілки й Esc — для тих, у кого клавіатура. На телефоні
 * стрілок немає, Esc теж, а фото гортається пальцем без підказок.
 */
.nrd-lb__hint {
	display: none;
	font-size: var(--nrd-fs-2xs);
	color: rgba(255, 255, 255, .45);
	margin-left: var(--nrd-space-3);
}

@media (min-width: 768px) {
	.nrd-lb__hint {
		display: block;
	}
}

/*
 * Панель покупки всередині лайтбокса. Це не копія форми, а сама форма:
 * її вузол переїжджає сюди й повертається назад при закритті. Копія
 * означала б два стани вибору, які треба синхронізувати.
 */
.nrd-lb__panel {
	padding: var(--nrd-space-5);
	/* Непрозоре тло: крізь напівпрозоре просвічує текст сторінки під ним. */
	background: #191713;
	border-top: 1px solid rgba(255, 255, 255, .1);
	overflow-y: auto;
}

.nrd-lb__panel .nrd-buy__title,
.nrd-lb__panel .nrd-perks,
.nrd-lb__panel .nrd-buy__meta {
	display: none;
}

.nrd-lb__panel .nrd-var__label,
.nrd-lb__panel .nrd-var__chosen,
.nrd-lb__panel .nrd-buy__price,
.nrd-lb__panel .nrd-inst-list li {
	color: #fff;
}

.nrd-lb__panel .nrd-buy__price {
	border-bottom-color: rgba(255, 255, 255, .15);
}

.nrd-lb__panel .nrd-optcard,
.nrd-lb__panel .nrd-select__btn,
.nrd-lb__panel .nrd-buy__inst,
.nrd-lb__panel .quantity input.qty,
.nrd-lb__panel .nrd-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

.nrd-lb__panel .nrd-btn--ghost:hover {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

.nrd-lb__panel .nrd-fav,
.nrd-lb__panel .nrd-cmp {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .75);
}

/*
 * Список варіантів на темній панелі.
 *
 * Сам список лишався світлим (--nrd-bg-card), а підписи в ньому кольору
 * не мають і успадковували білий від панелі — виходило біле по білому.
 * У повноекранній галереї це виглядало так, ніби варіанти без назв:
 * видно було тільки квадратики кольорів.
 */
.nrd-lb__panel .nrd-select__list {
	background: #191713;
	border-color: rgba(255, 255, 255, .22);
}

.nrd-lb__panel .nrd-select__opt {
	color: #fff;
}

.nrd-lb__panel .nrd-select__opt:hover,
.nrd-lb__panel .nrd-select__opt.is-on {
	background: rgba(255, 255, 255, .12);
}

.nrd-lb__panel .nrd-select__delta {
	color: rgba(255, 255, 255, .65);
}

.nrd-lb__panel .nrd-select__sw {
	border-color: rgba(255, 255, 255, .28);
}

.nrd-lb__panel .nrd-price {
	color: #fff;
}

/* Свотчі на темному потребують власної межі, інакше світлі зливаються з тлом. */
.nrd-lb__panel .nrd-swatch {
	border-color: rgba(255, 255, 255, .28);
}

.nrd-lb__panel .nrd-swatch.is-on {
	border-color: var(--nrd-accent);
	box-shadow: inset 0 0 0 2px #191713;
}

.nrd-lb__panel .nrd-var__count,
.nrd-lb__panel .nrd-inst-list li {
	color: rgba(255, 255, 255, .65);
}

.nrd-lb__panel .nrd-optcard.is-on {
	background: rgba(176, 125, 78, .22);
	border-color: var(--nrd-accent);
}

/* --- 11.5 Спойлери --- */

.nrd-spoiler {
	position: relative;
}

/*
 * Згасання тексту внизу згорнутого спойлера.
 *
 * Робимо маскою, а не накладкою-градієнтом зверху. Накладка мусить знати
 * колір підложки: на сторінці товару це --nrd-bg, у картці був би білий,
 * у темній секції — темний. Варто перенести спойлер в інше місце, і замість
 * згасання з'явиться кольорова плита. Маска гасить сам контент і працює
 * на будь-якому тлі.
 *
 * Зупинки підібрані нерівномірно — це наближення до плавної кривої.
 * Один лінійний перехід дає видиму межу там, де починається градієнт:
 * око чіпляється за неї як за смугу.
 */
.nrd-spoiler [data-nrd-spoiler-body] {
	overflow: hidden;

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 38%,
		rgba(0, 0, 0, .92) 55%,
		rgba(0, 0, 0, .72) 68%,
		rgba(0, 0, 0, .45) 80%,
		rgba(0, 0, 0, .18) 91%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 38%,
		rgba(0, 0, 0, .92) 55%,
		rgba(0, 0, 0, .72) 68%,
		rgba(0, 0, 0, .45) 80%,
		rgba(0, 0, 0, .18) 91%,
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;

	transition: max-height .45s var(--nrd-ease), -webkit-mask-size .45s var(--nrd-ease), mask-size .45s var(--nrd-ease);
}

/*
 * Розгорнутий стан. Замість того щоб прибирати маску (це дало б стрибок),
 * розтягуємо її вчетверо: видимою лишається тільки верхня, повністю
 * непрозора частина градієнта — і згасання плавно йде вниз за край.
 */
.nrd-spoiler.is-open [data-nrd-spoiler-body],
.nrd-spoiler.is-short [data-nrd-spoiler-body] {
	-webkit-mask-size: 100% 420%;
	mask-size: 100% 420%;
}

.nrd-spoiler__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--nrd-space-1);
	margin-top: var(--nrd-space-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--nrd-accent);
	font-size: var(--nrd-fs-base);
	font-weight: 600;
}

.nrd-spoiler__btn svg {
	transition: transform var(--nrd-t-base);
}

.nrd-spoiler.is-open .nrd-spoiler__btn svg {
	transform: rotate(180deg);
}

.nrd-spoiler.is-short .nrd-spoiler__btn {
	display: none;
}

/* --- 11.6 Липка смуга купівлі --- */

.nrd-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: var(--nrd-bg-card);
	border-top: 1px solid var(--nrd-line);
	box-shadow: 0 -8px 30px rgba(28, 26, 23, .1);
	transform: translateY(101%);
	transition: transform .28s var(--nrd-ease);
}

.nrd-buybar.is-on {
	transform: none;
}

.nrd-buybar__inner {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-4);
	padding-block: var(--nrd-space-2);
}

.nrd-buybar__media img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	background: var(--nrd-bg-tint);
}

.nrd-buybar__info {
	min-width: 0;
	flex: 1;
}

.nrd-buybar__title {
	display: block;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nrd-buybar__vars {
	display: block;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nrd-buybar__vars:empty {
	display: none;
}

.nrd-buybar__price {
	white-space: nowrap;
}

.nrd-buybar__price .nrd-price {
	font-size: var(--nrd-fs-2xl);
}

.nrd-buybar__add {
	flex: 0 0 auto;
	min-width: 150px;
}

/* Плаваючий віджет звʼязку не має накривати смугу купівлі.
   Клас ставить скрипт: смуга й віджет у розмітці не сусіди. */
body.nrd-buybar-on .nrd-cw {
	bottom: 92px;
}

@media (max-width: 660px) {
	.nrd-buybar__media,
	.nrd-buybar__vars {
		display: none;
	}

	.nrd-buybar__add {
		min-width: 0;
		padding-inline: var(--nrd-space-4);
	}
}

@media (min-width: 768px) {
	.nrd-lb__nav { display: block; }
}

@media (min-width: 1024px) {
	/* Дві колонки: фото ліворуч, панель праворуч — ділити висоту вже не треба. */
	.nrd-lb__body {
		grid-template-columns: minmax(0, 1fr) 400px;
		grid-template-rows: minmax(0, 1fr);
	}

	.nrd-lb__panel {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, .1);
	}

	.nrd-lb__track {
		max-height: 74vh;
	}
}

/* =========================================================================
   12. Виправлення розкладки картки товару
   ====================================================================== */

/*
 * Ряд купівлі: кількість і кнопка — одна лінія однакової висоти.
 *
 * Сітку вішаємо на ДВА вузли, і це не перестраховка. У простого товару
 * кількість і кнопка лежать прямо у form.cart, а у варіативного WooCommerce
 * ховає їх усередину .woocommerce-variation-add-to-cart. Сітка тільки
 * на формі до них не дістає — саме тому поле кількості розтягувалось
 * на всю ширину, а кнопка тулилась вузьким прямокутником під ним.
 */
.nrd-buy form.cart,
.nrd-buy .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: var(--nrd-space-2);
	align-items: stretch;
}

.nrd-buy form.cart .variations,
.nrd-buy form.cart .woocommerce-variation,
.nrd-buy form.cart .single_variation_wrap,
.nrd-buy form.cart .nrd-vars,
.nrd-buy form.cart > .reset_variations {
	grid-column: 1 / -1;
}

/* Порожній блок ціни варіації не має лишати дірку в сітці. */
.nrd-buy .woocommerce-variation-availability:empty,
.nrd-buy .woocommerce-variation-description:empty {
	display: none;
}

.nrd-buy .quantity,
.nrd-buy .quantity input.qty {
	width: 100%;
	height: 56px;
	margin: 0;
}

.nrd-buy button.single_add_to_cart_button,
.nrd-buy .single_add_to_cart_button {
	height: 56px;
	min-width: 0;
	margin: 0;
}

/* Другий ряд: одна широка кнопка й дві квадратні іконки. */
.nrd-buy__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px 52px;
	gap: var(--nrd-space-2);
	margin-top: var(--nrd-space-2);
	align-items: stretch;
}

.nrd-buy__side > * {
	height: 52px;
	width: auto;
	margin: 0;
}

.nrd-buy__oneclick {
	padding-inline: var(--nrd-space-4);
}

/* Службове посилання WooCommerce не має займати окремий рядок над кнопкою. */
.nrd-buy .reset_variations {
	order: 99;
	font-size: var(--nrd-fs-sm);
}

/*
 * Розділи в лівій колонці не потребують великого верхнього відступу:
 * вони йдуть одразу під галереєю, а не окремими екранами.
 */
.nrd-product__media .nrd-psection {
	padding-top: var(--nrd-space-7);
}

.nrd-product__media .nrd-psection > h2 {
	font-size: var(--nrd-h5);
}

/* --- Відгуки товару --- */

.nrd-psection--reviews #reviews {
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	padding: var(--nrd-space-6);
}

.nrd-psection--reviews .woocommerce-Reviews-title {
	font-size: var(--nrd-h5);
	margin-bottom: var(--nrd-space-4);
}

.nrd-psection--reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--nrd-space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-3);
}

.nrd-psection--reviews .commentlist .review {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-4);
	border: 1px solid var(--nrd-line-soft);
	background: var(--nrd-bg);
}

.nrd-psection--reviews .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.nrd-psection--reviews .comment-text {
	min-width: 0;
}

.nrd-psection--reviews .woocommerce-review__author {
	font-weight: 600;
	font-size: var(--nrd-fs-md);
}

.nrd-psection--reviews .woocommerce-review__published-date {
	display: block;
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted-soft);
}

.nrd-psection--reviews .description {
	margin-top: var(--nrd-space-2);
	line-height: 1.7;
}

/* Форма відгуку. */
.nrd-psection--reviews #respond {
	border-top: 1px solid var(--nrd-line);
	padding-top: var(--nrd-space-5);
}

.nrd-psection--reviews .comment-reply-title {
	display: block;
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-3xl);
	font-weight: 300;
	margin-bottom: var(--nrd-space-2);
}

.nrd-psection--reviews .comment-notes,
.nrd-psection--reviews .comment-form-cookies-consent {
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
}

.nrd-psection--reviews .comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-3);
	max-width: 720px;
}

.nrd-psection--reviews .comment-form p {
	margin: 0;
}

.nrd-psection--reviews .comment-form label {
	display: block;
	margin-bottom: var(--nrd-space-1);
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-muted);
}

.nrd-psection--reviews .comment-form input[type="text"],
.nrd-psection--reviews .comment-form input[type="email"],
.nrd-psection--reviews .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	font-size: var(--nrd-fs-md);
	border-radius: var(--nrd-radius);
}

.nrd-psection--reviews .comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

.nrd-psection--reviews .comment-form input:focus,
.nrd-psection--reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--nrd-accent);
}

/*
 * Зірки оцінки. WooCommerce віддає їх текстовими посиланнями «1 з 5 зірок»
 * і перетворює на зірки власним CSS, який ми вимкнули разом із рештою
 * стилів магазину. Тому малюємо самі.
 */
/*
 * WooCommerce віддає оцінку як <p class="stars"><span><a>…</a></span></p>.
 * Flex треба вішати і на обгортку, і на span — інакше в ряд стають не
 * посилання, а один span, і п'ять зірок злипаються в одну пляму.
 */
.nrd-psection--reviews .comment-form-rating .stars,
.nrd-psection--reviews .comment-form-rating .stars > span {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nrd-psection--reviews .comment-form-rating .stars {
	margin-bottom: var(--nrd-space-3);
}

.nrd-psection--reviews .comment-form-rating .stars a {
	position: relative;
	width: 26px;
	height: 26px;
	font-size: 0;
	color: var(--nrd-muted-faint);
}

.nrd-psection--reviews .comment-form-rating .stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	font-size: 26px;
	line-height: 1;
	color: currentColor;
	transition: color var(--nrd-t-fast);
}

.nrd-psection--reviews .comment-form-rating .stars:hover a::before,
.nrd-psection--reviews .comment-form-rating .stars a.active ~ a::before {
	color: var(--nrd-muted-faint);
}

.nrd-psection--reviews .comment-form-rating .stars a:hover::before,
.nrd-psection--reviews .comment-form-rating .stars a:hover ~ a::before,
.nrd-psection--reviews .comment-form-rating .stars a.active::before {
	color: var(--nrd-star);
}

/* Наведення підсвічує зліва направо, тому порядок правил саме такий. */
.nrd-psection--reviews .comment-form-rating .stars:hover a::before {
	color: var(--nrd-star);
}

.nrd-psection--reviews .comment-form-rating .stars a:hover ~ a::before {
	color: var(--nrd-muted-faint);
}

.nrd-psection--reviews .form-submit input[type="submit"] {
	padding: 14px 32px;
	border: 0;
	background: var(--nrd-accent);
	color: #fff;
	font-size: var(--nrd-fs-base);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-wider);
	text-transform: uppercase;
	border-radius: var(--nrd-radius);
}

.nrd-psection--reviews .form-submit input[type="submit"]:hover {
	background: var(--nrd-accent-dark);
}

.nrd-psection--reviews .woocommerce-noreviews {
	margin: 0 0 var(--nrd-space-5);
	color: var(--nrd-muted);
}

@media (min-width: 768px) {
	.nrd-psection--reviews .comment-form {
		grid-template-columns: repeat(2, 1fr);
	}

	.nrd-psection--reviews .comment-form-comment,
	.nrd-psection--reviews .comment-notes,
	.nrd-psection--reviews .comment-form-rating,
	.nrd-psection--reviews .comment-form-cookies-consent,
	.nrd-psection--reviews .form-submit {
		grid-column: 1 / -1;
	}
}

/*
 * У боковій колонці форма відгуку знову в один стовпчик.
 *
 * Два поля поруч розраховані на всю ширину сторінки; у колонці в 460
 * пікселів «Ім'я» та «Email» стискаються до неможливості читати підказку.
 * Правило нижче медіазапиту 768 навмисно: воно має його перекривати.
 */
@media (min-width: 1024px) {
	.nrd-product__aside .nrd-psection--reviews .comment-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   13. Модальне вікно заявки
   ====================================================================== */

.nrd-modal {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nrd-space-4);
	animation: nrd-in .18s ease;
}

/* Підкладка — кнопка, а не div: закриття по кліку поза вікном має
   працювати і з клавіатури, і для читалок екрана. */
.nrd-modal__back {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	background: rgba(28, 26, 23, .55);
	cursor: default;
}

.nrd-modal__box {
	position: relative;
	z-index: 1;
	width: min(420px, 100%);
	max-height: calc(100vh - var(--nrd-space-8));
	overflow-y: auto;
	padding: var(--nrd-space-7) var(--nrd-space-6) var(--nrd-space-6);
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	box-shadow: var(--nrd-shadow-xl);
	animation: nrd-fade .22s var(--nrd-ease);
}

/*
 * z-index обов'язковий: у швидкому перегляді світлина йде в розмітці після
 * кнопки й теж має position, а такі елементи малюються в порядку розмітки.
 * Хрестик опинявся під фото — на телефоні вікно просто не закривалось,
 * бо палець потрапляв у світлину.
 */
.nrd-modal__x {
	position: absolute;
	top: var(--nrd-space-3);
	right: var(--nrd-space-3);
	z-index: 3;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	color: var(--nrd-muted);
}

.nrd-modal__x:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-modal__title {
	font-size: var(--nrd-fs-3xl);
	margin: 0 0 var(--nrd-space-2);
	padding-right: var(--nrd-space-8);
}

.nrd-modal__lead {
	margin: 0 0 var(--nrd-space-5);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
}

.nrd-modal__product {
	margin-bottom: var(--nrd-space-5);
	padding: var(--nrd-space-3) var(--nrd-space-4);
	background: var(--nrd-bg-warm);
	border-left: 3px solid var(--nrd-accent);
	font-size: var(--nrd-fs-base);
	line-height: 1.5;
}

.nrd-modal__form {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-4);
}

.nrd-req {
	color: var(--nrd-danger);
}

.nrd-modal__note {
	margin: 0;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
	line-height: 1.5;
	text-align: center;
}

/* Пастка для ботів. Не display:none — частина ботів такі поля пропускає. */
.nrd-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   14. Швидкий перегляд
   ====================================================================== */

/*
 * Кнопка на картці. У макеті це світла смуга внизу фото, що темніє
 * при наведенні — так вона не сперечається з самим товаром.
 * Іконка потрібна: без неї смуга читається як підпис до фото, а не як дія.
 */
.nrd-card__qv {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nrd-space-1);
	padding: 9px 12px;
	font-size: var(--nrd-fs-xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	color: var(--nrd-ink);
	/*
	 * Напівпрозора, як і решта знаків на світлині: суцільна біла смуга
	 * закривала нижню третину товару. Розмиття під нею тримає читабельність
	 * навіть на строкатому фото.
	 */
	background: rgba(255, 255, 255, .62);
	backdrop-filter: blur(3px);
	border: 0;
	border-radius: var(--nrd-radius-pill);
}

.nrd-card:hover .nrd-card__qv {
	background: rgba(255, 255, 255, .9);
}

.nrd-card__qv svg {
	flex: 0 0 auto;
	opacity: .6;
}

.nrd-card__qv:hover {
	background: var(--nrd-ink);
	color: #fff;
}

.nrd-card__qv:hover svg {
	opacity: 1;
}

.nrd-card__qv.is-busy {
	opacity: .6;
	pointer-events: none;
}

/* Вікно ширше за вікно заявки: тут два стовпці. */
.nrd-modal--qv .nrd-modal__box {
	width: min(940px, 100%);
	/* На телефоні поля вікна вужчі: 26 пікселів з кожного боку — це майже
	   шоста частина екрана, і фото товару лишалось у вузькій смузі. */
	padding: var(--nrd-space-4);
}

@media (min-width: 768px) {
	.nrd-modal--qv .nrd-modal__box {
		padding: var(--nrd-space-6);
	}
}

.nrd-qv {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nrd-space-5);
}

/*
 * Рамка квадратна: у донора 35 світлин із 37 строго 1:1, і в кадрі 4/3
 * вони лишали по білій смузі з боків. Квадрат прибирає ці смуги
 * і дає стрічці однакову висоту кадрів.
 */
.nrd-qv__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--nrd-bg-soft);
	overflow: hidden;
}

/*
 * Стрічка світлин. Кадр рівно на ширину вікна, зупинка — на кадрі:
 * без scroll-snap гортання лишає товар навпіл між двома фото.
 */
.nrd-qv__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.nrd-qv__track::-webkit-scrollbar {
	display: none;
}

.nrd-qv__shot {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: start;
	/*
	 * Зупинка на кожному кадрі.
	 *
	 * Саме цього бракувало: без scroll-snap-stop швидкий рух пальця
	 * або проносить стрічку повз кілька фото, або відкидає назад —
	 * замовник назвав це «прокручування замість переходу до кожного фото».
	 * Заодно align: start, а не center: у кадрів на всю ширину центр
	 * і початок збігаються, але start дає передбачувану позицію
	 * і на першому, і на останньому кадрі.
	 */
	scroll-snap-stop: always;
}

/* Заглушка WooCommerce приїжджає без наших класів. */
.nrd-qv__main > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Стрілки у швидкому перегляді — теж із 768px: на телефоні фото гортають
 * пальцем, а стрілки поверх нього тільки закривали товар. Крапки внизу
 * лишаються, вони й показують, скільки ще знімків.
 */
.nrd-qv__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--nrd-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--nrd-ink);
	cursor: pointer;
}

.nrd-qv__arrow--prev { left: var(--nrd-space-3); }
.nrd-qv__arrow--next { right: var(--nrd-space-3); }

.nrd-qv__arrow:hover {
	border-color: var(--nrd-accent);
	color: var(--nrd-accent);
}

.nrd-qv__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--nrd-space-3);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.nrd-qv__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(28, 26, 23, .25);
	transition: background .2s ease, width .2s ease;
}

.nrd-qv__dot.is-on {
	width: 18px;
	border-radius: 3px;
	background: var(--nrd-accent);
}

.nrd-qv__main .nrd-badge {
	position: absolute;
	top: var(--nrd-space-3);
	left: var(--nrd-space-3);
	z-index: 2;
}

.nrd-qv__thumbs {
	display: flex;
	gap: var(--nrd-space-2);
	margin-top: var(--nrd-space-2);
	overflow-x: auto;
	scrollbar-width: none;
}

.nrd-qv__thumbs::-webkit-scrollbar {
	display: none;
}

.nrd-qv__thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	overflow: hidden;
}

.nrd-qv__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nrd-qv__thumb.is-on,
.nrd-qv__thumb:hover {
	border-color: var(--nrd-accent);
}

.nrd-qv__title {
	font-size: var(--nrd-h5);
	margin: 0 0 var(--nrd-space-2);
}

/*
 * На телефоні прокрутка у вікні одна — сама сторінка вікна.
 *
 * Власна прокрутка в правій колонці тут була пасткою: на вузькому екрані
 * колонки немає, і всередині високого вікна з'являлась друга смуга
 * прокрутки. Палець потрапляв то в одну, то в іншу, а кнопка «Додати
 * в кошик» лишалась за краєм. Обмеження висоти повертається з 768px,
 * де колонки дві й воно справді потрібне.
 */
.nrd-qv__info {
	padding-right: var(--nrd-space-2);
}

.nrd-qv__foot {
	display: flex;
	align-items: center;
	gap: var(--nrd-space-2);
	margin-top: var(--nrd-space-5);
	padding-top: var(--nrd-space-4);
	border-top: 1px solid var(--nrd-line-soft);
}

.nrd-qv__foot .nrd-link-arrow {
	margin-right: auto;
}

/* Мініатюри — десктопна навігація. На телефоні гортають саме фото. */
.nrd-qv__thumbs {
	display: none;
}

@media (min-width: 768px) {
	.nrd-qv {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--nrd-space-6);
	}

	.nrd-qv__thumbs { display: flex; }
	.nrd-qv__arrow  { display: flex; }

	/* Мініатюри вже показують, котре фото зараз, — крапки зайві. */
	.nrd-qv__dots { display: none; }

	/* Довгий список варіантів не має розпирати вікно на весь екран. */
	.nrd-qv__info {
		max-height: 70vh;
		overflow-y: auto;
	}
}

/*
 * Порожній блок варіації WooCommerce тримає висоту й лишає провал між
 * вибором і кнопкою: у нього всередині порожні ціна, наявність і опис,
 * бо ціну ми показуємо вище своїм блоком.
 */
.nrd-qv .woocommerce-variation,
.nrd-buy .woocommerce-variation {
	margin: 0;
}

.nrd-qv .woocommerce-variation:empty,
.nrd-buy .woocommerce-variation:empty,
.nrd-qv .woocommerce-variation-price:empty,
.nrd-qv .woocommerce-variation-availability:empty,
.nrd-qv .woocommerce-variation-description:empty {
	display: none;
}

.nrd-qv .single_variation_wrap {
	margin-top: var(--nrd-space-4);
}

/* Ліва колонка не має розтягуватись на висоту правої. */
.nrd-qv__media {
	align-self: start;
}

/* Світлина, якої вже немає в донора, не має лишати білу дірку. */
.nrd-img-broken {
	display: none !important;
}

/*
 * Те саме для кадру стрічки — але прозорістю, а не display.
 * Кадр мусить лишитись на місці: він тримає нумерацію, за якою рахуються
 * крапки й індекс поточного фото.
 */
.nrd-shot-broken {
	visibility: hidden;
}

/*
 * Відступи навколо вибору варіації. Три джерела давали разом майже сто
 * пікселів порожнечі між останнім атрибутом і кнопкою: власний відступ
 * блоку атрибутів, відступ обгортки варіації і рядок службового посилання
 * «Скинути вибір», яке WooCommerce показує після вибору.
 */
.nrd-vars {
	margin-bottom: 0;
}

.nrd-vars .nrd-var:last-of-type {
	margin-bottom: var(--nrd-space-2);
}

.nrd-buy .single_variation_wrap,
.nrd-qv .single_variation_wrap {
	margin-top: 0;
}

.nrd-var__reset,
.nrd-buy .reset_variations {
	display: inline-block;
	margin: 0;
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted);
	text-decoration: underline;
}

/* =========================================================================
   15. Шторка кошика
   ====================================================================== */

.nrd-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--nrd-z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.nrd-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.nrd-drawer__back {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	background: rgba(28, 26, 23, .45);
	opacity: 0;
	transition: opacity .25s ease;
	cursor: default;
}

.nrd-drawer.is-open .nrd-drawer__back {
	opacity: 1;
}

.nrd-drawer__box {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: min(440px, 94vw);
	display: flex;
	flex-direction: column;
	background: var(--nrd-bg-card);
	box-shadow: -20px 0 60px rgba(28, 26, 23, .18);
	/* Зсув, а не поява: шторка має «виїжджати», інакше вона просто блимає. */
	transform: translateX(100%);
	transition: transform .28s var(--nrd-ease);
}

.nrd-drawer.is-open .nrd-drawer__box {
	transform: none;
}

.nrd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	padding: var(--nrd-space-6);
	border-bottom: 1px solid var(--nrd-line-soft);
	flex: 0 0 auto;
}

.nrd-drawer__title {
	font-family: var(--nrd-font-head);
	font-size: var(--nrd-fs-2xl);
	font-weight: 400;
	letter-spacing: var(--nrd-ls-tight);
}

.nrd-drawer__x {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--nrd-muted-soft);
}

.nrd-drawer__x:hover {
	color: var(--nrd-ink);
}

/* Список гортається, підсумок лишається на місці — інакше на довгому
   кошику кнопка оформлення губиться внизу. */
.nrd-drawer__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.nrd-drawer__list {
	flex: 1;
	overflow-y: auto;
	padding: 0 var(--nrd-space-6);
}

.nrd-ditem {
	display: flex;
	gap: var(--nrd-space-4);
	padding: var(--nrd-space-5) 0;
	border-bottom: 1px solid var(--nrd-line-soft);
}

.nrd-ditem:last-child {
	border-bottom: 0;
}

.nrd-ditem__media img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	background: var(--nrd-bg-warm);
}

.nrd-ditem__info {
	flex: 1;
	min-width: 0;
}

.nrd-ditem__title {
	display: block;
	font-size: var(--nrd-fs-base);
	line-height: 1.45;
}

.nrd-ditem__opt {
	margin-top: 5px;
	font-size: var(--nrd-fs-2xs);
	color: var(--nrd-muted-soft);
}

.nrd-ditem__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	margin-top: var(--nrd-space-3);
}

.nrd-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--nrd-line);
}

.nrd-qty__btn {
	width: 30px;
	height: 30px;
	border: 0;
	background: none;
	color: var(--nrd-muted);
	font-size: var(--nrd-fs-lg);
	line-height: 1;
}

.nrd-qty__btn:hover:not(:disabled) {
	color: var(--nrd-accent);
}

.nrd-qty__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.nrd-qty__val {
	width: 30px;
	text-align: center;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
}

/*
 * На сторінці кошика в середині лічильника не підпис, а справжнє поле форми:
 * без JS покупець вписує кількість руками й тисне «Оновити кошик». Виглядати
 * воно має так само, як число у шторці, тому знімаємо все рідне оформлення —
 * рамку, тло і стрілки-«крутилки» (у Firefox вони окремою властивістю).
 */
.nrd-qty__input {
	appearance: textfield;
	-moz-appearance: textfield;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	line-height: 30px;
}

.nrd-qty__input::-webkit-outer-spin-button,
.nrd-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.nrd-qty__input:focus-visible {
	outline: 2px solid var(--nrd-accent);
	outline-offset: -2px;
}

/*
 * «Оновити кошик» потрібна тільки там, де немає скрипта: з кроковими
 * кнопками кількість застосовується одразу, і кнопка, яка нічого не робить,
 * лише збиває з пантелику. Клас nrd-js ставить сам скрипт.
 */
.nrd-js .nrd-cart__update {
	display: none;
}

.nrd-ditem__sum .nrd-price {
	font-size: var(--nrd-fs-xl);
}

.nrd-ditem__del {
	align-self: flex-start;
	border: 0;
	background: none;
	color: var(--nrd-muted-faint);
	padding: 2px;
}

.nrd-ditem__del:hover {
	color: var(--nrd-danger);
}

.nrd-drawer__empty {
	padding: 70px var(--nrd-space-4);
	text-align: center;
	color: var(--nrd-muted-soft);
}

.nrd-drawer__empty-title {
	font-size: var(--nrd-fs-lg);
	color: var(--nrd-ink);
	margin-bottom: var(--nrd-space-2);
}

.nrd-drawer__foot {
	flex: 0 0 auto;
	padding: var(--nrd-space-6);
	border-top: 1px solid var(--nrd-line-soft);
	background: var(--nrd-bg);
}

.nrd-drawer__line {
	display: flex;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
	margin-bottom: var(--nrd-space-2);
}

.nrd-drawer__disc {
	color: var(--nrd-danger);
}

.nrd-drawer__ship {
	color: var(--nrd-muted-soft);
	text-align: right;
}

.nrd-drawer__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	padding-top: var(--nrd-space-4);
	margin-top: var(--nrd-space-2);
	margin-bottom: 18px;
	border-top: 1px solid var(--nrd-line);
	font-size: var(--nrd-fs-md);
	font-weight: 600;
}

.nrd-drawer__total .nrd-price {
	font-size: 27px;
}

.nrd-drawer__foot .nrd-btn--ghost {
	margin-top: 10px;
}