/*
 * 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;
	--nrd-gutter:    32px;
	--nrd-header-h:  92px;
	--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-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);

	--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);
}

/* Доступність: приховати візуально, лишити для читалок. */
.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-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: 1fr;
}

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

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

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

.nrd-topbar {
	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__links {
	display: none;
}

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

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

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

.nrd-topbar__phone {
	font-weight: 600;
	white-space: nowrap;
}

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

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

/* --- 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 {
	font-family: var(--nrd-font-head);
	font-weight: 300;
	font-size: var(--nrd-fs-3xl);
	letter-spacing: var(--nrd-ls-logo);
	line-height: 1;
	color: var(--nrd-ink);
	flex: 0 0 auto;
	padding-right: var(--nrd-space-1);
	white-space: nowrap;
}

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

/* Риска над «O» — та сама макрон, що в назві Nordikō. */
.nrd-logo__o {
	position: relative;
}

.nrd-logo__macron {
	position: absolute;
	left: 1px;
	right: 9px;
	top: -7px;
	height: 3px;
	background: var(--nrd-accent);
}

.nrd-nav {
	display: none;
	font-size: var(--nrd-fs-base);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-wide);
	margin-inline: auto;
}

.nrd-nav a {
	position: relative;
	padding-block: var(--nrd-space-2);
	white-space: nowrap;
}

.nrd-nav .current-menu-item > a,
.nrd-nav a:hover {
	color: var(--nrd-accent);
}

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

.nrd-mnav {
	position: fixed;
	inset: 0;
	z-index: var(--nrd-z-drawer);
	background: var(--nrd-bg-card);
	padding: var(--nrd-space-5) var(--nrd-space-6);
	overflow-y: auto;
}

.nrd-mnav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--nrd-space-5);
	border-bottom: 1px solid var(--nrd-line);
	margin-bottom: var(--nrd-space-5);
}

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

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

/* Заблокувати прокрутку тіла, поки відкрита шторка або мобільне меню. */
body.nrd-locked {
	overflow: hidden;
}

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

.nrd-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--nrd-line);
	background: var(--nrd-bg-card);
	color: var(--nrd-ink);
	border-radius: var(--nrd-radius);
	transition: border-color var(--nrd-t-base), color var(--nrd-t-base);
}

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

.nrd-iconbtn__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: 50%;
	background: var(--nrd-accent);
	color: #fff;
	font-size: var(--nrd-fs-3xs);
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

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

/* --- 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.5 Картка товару --- */

.nrd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nrd-bg-card);
	border: 1px solid var(--nrd-line);
	border-radius: var(--nrd-radius);
	overflow: hidden;
	transition: border-color var(--nrd-t-base), box-shadow var(--nrd-t-base);
}

.nrd-card:hover {
	border-color: var(--nrd-line-strong);
	box-shadow: var(--nrd-shadow-md);
}

.nrd-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--nrd-bg-tint);
	overflow: hidden;
}

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

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

.nrd-card__tools {
	position: absolute;
	top: var(--nrd-space-2);
	right: var(--nrd-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-1);
	z-index: 2;
}

.nrd-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--nrd-space-2);
	padding: var(--nrd-space-4) var(--nrd-space-4) var(--nrd-space-5);
	flex: 1 0 auto;
}

.nrd-card__cat {
	font-size: var(--nrd-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--nrd-ls-widest);
	text-transform: uppercase;
	color: var(--nrd-muted-soft);
}

.nrd-card__title {
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-lg);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
}

.nrd-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-3);
	margin-top: auto;
	padding-top: var(--nrd-space-2);
}

.nrd-badge {
	position: absolute;
	top: var(--nrd-space-2);
	left: var(--nrd-space-2);
	z-index: 2;
	padding: 5px 10px;
	background: var(--nrd-ink);
	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);
}

.nrd-badge--sale   { background: var(--nrd-danger); }
.nrd-badge--new    { background: var(--nrd-success); }
.nrd-badge--accent { background: var(--nrd-accent); }

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

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

.nrd-price__from {
	font-size: var(--nrd-fs-xs);
	font-weight: 400;
	color: var(--nrd-muted);
}

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

.nrd-price__old {
	margin-left: var(--nrd-space-1);
	font-size: var(--nrd-fs-sm);
	color: var(--nrd-muted-faint);
	text-decoration: line-through;
	white-space: nowrap;
}

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

.nrd-fav,
.nrd-cmp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--nrd-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	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-12 {
	grid-column: 1 / -1;
}

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

/* --- 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-footer {
	margin-top: var(--nrd-space-10);
	background: var(--nrd-bg-warm);
	border-top: 1px solid var(--nrd-line);
	padding-block: var(--nrd-space-9) var(--nrd-space-6);
	font-size: var(--nrd-fs-base);
	color: var(--nrd-muted);
}

.nrd-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nrd-space-7);
}

.nrd-footer__title {
	font-family: var(--nrd-font-body);
	font-size: var(--nrd-fs-xs);
	font-weight: 700;
	letter-spacing: var(--nrd-ls-widest);
	text-transform: uppercase;
	color: var(--nrd-ink);
	margin-bottom: var(--nrd-space-3);
}

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

.nrd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrd-space-4);
	margin-top: var(--nrd-space-8);
	padding-top: var(--nrd-space-5);
	border-top: 1px solid var(--nrd-line);
	font-size: var(--nrd-fs-xs);
	color: var(--nrd-muted-soft);
}

/* --- 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 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: 1fr;
	gap: var(--nrd-space-5);
}

.woocommerce ul.products li.product {
	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:hover {
	border-color: var(--nrd-line-strong);
	box-shadow: var(--nrd-shadow-md);
}

.woocommerce ul.products li.product 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);
}

/* Підсумок кошика й замовлення. */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	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;
	}

	.nrd-topbar__status { display: flex; }

	.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-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-12 { grid-column: span 12; }
}

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

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

	.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-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);
	}

	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: var(--nrd-space-7);
		align-items: start;
	}

	/*
	 * Ліва колонка — усе, крім підсумку. Праворуч підсумок, і його рядки
	 * задані явно: без цього браузер ставить блок замовлення в наступний
	 * вільний рядок, і той з'їжджає вниз під усю форму.
	 */
	.woocommerce-checkout form.checkout > * {
		grid-column: 1;
		display: block;
	}

	.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: calc(var(--nrd-header-h) + var(--nrd-space-4));
	}

	/* Кабінет: меню збоку. */
	.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-catalog {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--nrd-space-7);
		align-items: start;
	}

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

	/* Чекаут: форма й підсумок. */
	.nrd-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: var(--nrd-space-7);
		align-items: start;
	}
}

@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;
	}
}