/*
Theme Name: ENSO Sushi Bar
Theme URI: https://enso.local
Author: Valentin Gorbatenko
Description: Тема суші-бару ENSO — темна дзен-палітра, каталог на WooCommerce, доставка та сповіщення в Telegram.
Version: 0.2.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sushistudio
Tags: restaurant, food, e-commerce, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   1. Токени — бренд ENSO
   --------------------------------------------------------------------------
   Палітра з бренд-борду: #0D1B2A #1B3A63 #A8B6C8 #FFFFFF #F3F5F7
   Перевірено на контраст (WCAG 2.1):
     #FFFFFF на #0D1B2A .... 17.39:1  AAA
     #A8B6C8 на #0D1B2A ..... 8.44:1  AAA
     #FFFFFF на #1B3A63 .... 11.46:1  AAA
     #1B3A63 на #0D1B2A ..... 1.52:1  ПРОВАЛ -> лише підкладка, ніколи не текст
     #B7282E на #0D1B2A ..... 2.78:1  ПРОВАЛ -> лише заливка, ніколи не текст
     #FFFFFF на #B7282E ..... 6.26:1  AA    -> червона кнопка з білим текстом ок
   ========================================================================== */
:root {
	/* Поверхні */
	--ss-bg: #0d1b2a;
	--ss-surface: #112436;
	--ss-surface-2: #1b3a63;
	--ss-line: rgba(168, 182, 200, 0.16);
	--ss-line-strong: rgba(168, 182, 200, 0.32);

	/* Текст */
	--ss-text: #f3f5f7;
	--ss-text-strong: #ffffff;
	--ss-text-muted: #a8b6c8;

	/* Акцент — печатка ханко з логотипу */
	--ss-seal: #b7282e;
	--ss-seal-hover: #d03038;
	/* Печатка #b7282e на фоні дає 2.78:1 — як текст не годиться.
	   Для тексту-акценту беремо лосось: 6.30:1, проходить AA. */
	--ss-accent-text: #ef7b4d;

	/* Типографіка */
	--ss-font-latin: "Cinzel", "Times New Roman", serif;
	--ss-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--ss-step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
	--ss-step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.9rem);
	--ss-step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
	--ss-step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
	--ss-step-2: clamp(1.4rem, 1.26rem + 0.7vw, 1.85rem);
	--ss-step-3: clamp(1.7rem, 1.45rem + 1.2vw, 2.5rem);
	--ss-step-4: clamp(2.1rem, 1.6rem + 2.3vw, 3.6rem);

	/* Ритм */
	--ss-gap: clamp(1rem, 0.6rem + 2vw, 2rem);
	--ss-section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
	--ss-header-h: 84px;
	--ss-wrap: 1240px;
	--ss-radius: 4px;
	--ss-radius-lg: 8px;

	/* Фірмове трекінгування — на бренд-борді всі підписи розріджені */
	--ss-track: 0.22em;
	--ss-track-sm: 0.12em;
}

/* ==========================================================================
   2. База
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--ss-bg);
	color: var(--ss-text);
	font-family: var(--ss-font-body);
	font-size: var(--ss-step-0);
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--ss-text); text-underline-offset: 3px; }
a:hover { color: var(--ss-text-strong); }

h1, h2, h3, h4 {
	color: var(--ss-text-strong);
	font-family: var(--ss-font-body);
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 0.7em;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
}
h1 { font-size: var(--ss-step-4); }
h2 { font-size: var(--ss-step-3); }
h3 { font-size: var(--ss-step-1); }
h4 { font-size: var(--ss-step-0); }

/* Латиниця в заголовках — Cinzel. Кирилиці в ньому немає, тому вішаємо
   тільки на елементи, які свідомо латинські (логотип, ENSO, EN-версія). */
.ss-latin,
html[lang^="en"] h1,
html[lang^="en"] h2 {
	font-family: var(--ss-font-latin);
	font-weight: 700;
	letter-spacing: var(--ss-track-sm);
}

p { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.3em; }
strong, b { font-weight: 600; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ss-text-muted);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 999;
	width: auto; height: auto; clip: auto; clip-path: none;
	padding: 10px 16px; background: var(--ss-surface-2); color: var(--ss-text-strong);
}

/* ==========================================================================
   3. Хвиля сейгайха — фірмовий патерн з упаковки
   ========================================================================== */
.ss-seigaiha {
	--wave: rgba(168, 182, 200, 0.09);
	background-image:
		radial-gradient(circle at 50% 100%, transparent 33%, var(--wave) 33%, var(--wave) 36%, transparent 36%),
		radial-gradient(circle at 0 100%, transparent 33%, var(--wave) 33%, var(--wave) 36%, transparent 36%),
		radial-gradient(circle at 100% 100%, transparent 33%, var(--wave) 33%, var(--wave) 36%, transparent 36%);
	background-size: 56px 28px;
	background-position: 0 0;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.ss-wrap {
	width: min(100% - 2 * var(--ss-gap), var(--ss-wrap));
	margin-inline: auto;
}
.ss-section { padding-block: var(--ss-section); }
.ss-section--tight { padding-block: calc(var(--ss-section) * 0.55); }
.ss-section--alt { background: var(--ss-surface); }

.ss-head { max-width: 58ch; margin-bottom: calc(var(--ss-gap) * 1.8); }
.ss-head--center { margin-inline: auto; text-align: center; }
.ss-head p { color: var(--ss-text-muted); margin-bottom: 0; }

.ss-eyebrow {
	display: block;
	font-size: var(--ss-step--2);
	font-weight: 500;
	letter-spacing: var(--ss-track);
	text-transform: uppercase;
	color: var(--ss-text-muted);
	margin-bottom: 1.2em;
}

/* Тонка риска-роздільник у дзен-дусі */
.ss-rule {
	width: 48px; height: 1px;
	margin: 0 0 1.6rem;
	background: var(--ss-line-strong);
	border: 0;
}
.ss-head--center .ss-rule { margin-inline: auto; }

/* ==========================================================================
   5. Кнопки
   ========================================================================== */
.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 2em;
	border: 1px solid transparent;
	border-radius: var(--ss-radius);
	font-family: var(--ss-font-body);
	font-size: var(--ss-step--1);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Червона печатка як заливка — білий текст дає 6.26:1 */
.ss-btn--primary { background: var(--ss-seal); color: #fff; }
.ss-btn--primary:hover { background: var(--ss-seal-hover); color: #fff; }

.ss-btn--ghost { border-color: var(--ss-line-strong); color: var(--ss-text); background: transparent; }
.ss-btn--ghost:hover { border-color: var(--ss-text-muted); background: rgba(168, 182, 200, 0.08); color: var(--ss-text-strong); }

.ss-btn--solid { background: var(--ss-surface-2); color: #fff; }
.ss-btn--solid:hover { background: #24487a; color: #fff; }

.ss-btn--block { width: 100%; }

/* ==========================================================================
   6. Шапка
   ========================================================================== */
.ss-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/*
	 * Типово шапка суцільна. Це не косметика: .ss-pagehead під нею має
	 * рівно той самий колір, тому шва не видно взагалі. Рамки знизу немає
	 * навмисно — вона світліша за фон з обох боків.
	 */
	background: var(--ss-bg);
	transition: background-color 0.25s;
}

/*
 * Раніше над банером шапка була прозорою — заради стику без межі.
 * Від цього відмовились: під час прокручування пункти меню накладалися
 * на світлі ділянки фото й зливалися з ним. Читабельність навігації
 * важить більше за делікатність шва, тим паче що банер усе одно заходить
 * під шапку (див. нижче) і різкої межі не утворює.
 */

/* Вміст шапки над можливим фоном. */
.ss-header__inner { position: relative; z-index: 1; min-height: var(--ss-header-h); }

/*
 * На головній банер заходить ПІД шапку. Шапка тепер суцільна й фото під
 * собою ховає, але зсув лишається: без нього між фоном сторінки (25) і
 * верхом фото (29) знову з'явилася б сходинка на всю ширину. Так шапка
 * закінчується рівно там, де фото вже темне, і межі не видно.
 * Внутрішній відступ повертає вміст банера на місце.
 */
.home .ss-hero {
	margin-top: calc(-1 * var(--ss-header-h));
	padding-top: var(--ss-header-h);
}

.admin-bar .ss-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ss-header { top: 46px; } }

.ss-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ss-gap);
}

.ss-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	text-decoration: none;
	color: var(--ss-text-strong);
}
.ss-brand__mark { width: 40px; height: 40px; flex: none; }
.ss-brand__name {
	display: block;
	font-family: var(--ss-font-latin);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1;
	color: var(--ss-text-strong);
}
.ss-brand__tag {
	display: block;
	margin-top: 0.35em;
	font-size: 0.58rem;
	font-weight: 400;
	letter-spacing: var(--ss-track);
	text-transform: uppercase;
	color: var(--ss-text-muted);
}

.ss-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.2rem);
	margin: 0; padding: 0;
	list-style: none;
}
.ss-nav a {
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	font-weight: 500;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.5em;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.ss-nav a:hover,
.ss-nav .current-menu-item > a { color: var(--ss-text-strong); border-bottom-color: var(--ss-seal); }

.ss-header__cta { display: flex; align-items: center; gap: 1rem; }
.ss-header__phone {
	font-size: var(--ss-step--1);
	font-weight: 600;
	color: var(--ss-text);
	text-decoration: none;
	white-space: nowrap;
}
.ss-header__phone:hover { color: var(--ss-text-strong); }

/* Кошик */
.ss-cart-link {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	color: var(--ss-text);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.ss-cart-link:hover { border-color: var(--ss-text-muted); color: var(--ss-text-strong); }
.ss-cart-link__count {
	position: absolute;
	top: -7px; right: -7px;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--ss-seal);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
}
.ss-cart-link__count:empty,
.ss-cart-link__count[data-count="0"] { display: none; }

/* Перемикач мов */
.ss-lang { display: flex; gap: 0.4rem; font-size: var(--ss-step--2); letter-spacing: var(--ss-track-sm); }
.ss-lang a { color: var(--ss-text-muted); text-decoration: none; text-transform: uppercase; }
.ss-lang a:hover, .ss-lang .is-active { color: var(--ss-text-strong); }

.ss-burger {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	cursor: pointer;
}
.ss-burger span {
	display: block;
	width: 18px; height: 1px;
	margin: 5px auto;
	background: var(--ss-text);
	transition: transform 0.2s, opacity 0.2s;
}
.ss-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ss-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ss-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.ss-burger { display: block; order: 3; }
	.ss-header__phone { display: none; }
	.ss-header__inner { flex-wrap: wrap; }
	.ss-nav {
		order: 4;
		flex-basis: 100%;
		display: none;
		border-top: 1px solid var(--ss-line);
		padding-block: 0.5rem 1rem;
	}
	.ss-nav.is-open { display: block; }
	.ss-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.ss-nav a { display: block; padding: 0.9em 0; border-bottom: 1px solid var(--ss-line); }
	.ss-nav a:hover { border-bottom-color: var(--ss-line); }
}

/* ==========================================================================
   7. Герой
   ========================================================================== */
.ss-hero { position: relative; overflow: hidden; background: var(--ss-bg); }
.ss-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.5;
}
/* Базова накладка. Робочу заливку героя задає секція 20 нижче — тут лише
   каркас, щоб псевдоелемент існував. */
.ss-hero::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(13, 27, 42, 0.55) 0%, rgba(13, 27, 42, 0.75) 60%, var(--ss-bg) 100%);
}
.ss-hero__tagline {
	font-size: var(--ss-step--1);
	letter-spacing: var(--ss-track);
	text-transform: uppercase;
	color: var(--ss-text-muted);
	margin-bottom: 2.5rem;
}

.ss-hero__meta dt {
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	color: var(--ss-text-muted);
	margin-bottom: 0.4em;
}
.ss-hero__meta dd { margin: 0; font-size: var(--ss-step-1); color: var(--ss-text-strong); font-weight: 300; }

/* ==========================================================================
   8. Каталог
   ========================================================================== */
/*
 * Стрічка категорій прилипає під шапкою: у меню з шести десятків позицій
 * інакше доводиться гортати назад угору щоразу, коли хочеш перемкнути
 * розділ.
 *
 * Відступи по боках від'ємні, а внутрішні — на ту саму величину: смуга
 * фону мусить бути ширшою за колонку з картками, інакше картки визирали б
 * з-під неї збоку під час прокручування. Колір беремо з --ss-bg, яку
 * секція перевизначає під себе, тож на світлій секції смуга світла.
 */
.ss-filter {
	position: sticky;
	top: var(--ss-header-h);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 calc(-1 * var(--ss-gap)) calc(var(--ss-gap) * 1.5);
	padding: 0.75rem var(--ss-gap);
	list-style: none;
	justify-content: center;
	background: var(--ss-bg);
}

/*
 * Смуга фону на всю ширину вікна. Від'ємних відступів вистачало, щоб
 * сховати картки, але поза колонкою лишався декор секції, і він проїжджав
 * збоку від прилиплої стрічки. Секція підрізає надлишок сама (overflow: clip),
 * тож -100vw безпечні.
 */
.ss-filter::before {
	content: "";
	position: absolute;
	inset: 0 -100vw;
	z-index: -1;
	background: var(--ss-bg);
}

/* Панель адміністратора зсуває сторінку вниз, а шапка липне під нею. */
.admin-bar .ss-filter { top: calc(var(--ss-header-h) + 32px); }
@media (max-width: 782px) {
	.admin-bar .ss-filter { top: calc(var(--ss-header-h) + 46px); }
}

/*
 * На телефоні п'ять розділів переносяться на три рядки, і прилипла стрічка
 * з'їдала б чверть екрана. Тому один рядок із горизонтальним гортанням.
 */
@media (max-width: 640px) {
	.ss-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ss-filter::-webkit-scrollbar { display: none; }
	.ss-filter a { white-space: nowrap; }
}
.ss-filter a {
	display: inline-block;
	padding: 0.65em 1.4em;
	border: 1px solid var(--ss-line);
	border-radius: 999px;
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	font-weight: 500;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ss-filter a:hover { border-color: var(--ss-text-muted); color: var(--ss-text-strong); }
.ss-filter a[aria-current="page"] {
	background: var(--ss-surface-2);
	border-color: var(--ss-surface-2);
	color: #fff;
}

.ss-grid {
	display: grid;
	gap: var(--ss-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
}

.ss-card {
	display: flex;
	flex-direction: column;
	background: var(--ss-surface);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
/* Рамки немає навмисно: картку відділяє від секції власний фон.
   Наведення показуємо підйомом і трохи світлішим фоном — раніше це
   робив колір рамки, і без заміни картки перестали б відгукуватись. */
.ss-card:hover {
	transform: translateY(-2px);
	background: var(--ss-surface-2, var(--ss-surface));
}

.ss-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 50% 45%, #16293d 0%, #0d1b2a 72%);
	overflow: hidden;
}
/* Фото на всю ширину картки, без відступів. Мініатюри WooCommerce
   квадратні (300×300 з оригіналу 1000×1000), тому cover нічого не ріже —
   він лише прибирає поля, які раніше давав padding.
   Заокруглення приходить від самої картки: у неї overflow:hidden. */
.ss-card__media > a {
	display: block;
	width: 100%;
	height: 100%;
}
.ss-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-card__media--empty { display: grid; place-items: center; color: var(--ss-line-strong); }
.ss-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	padding: 0.35em 0.8em;
	border-radius: 2px;
	background: var(--ss-seal);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
}

.ss-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
.ss-card__title {
	font-size: var(--ss-step-0);
	font-weight: 500;
	letter-spacing: var(--ss-track-sm);
	margin-bottom: 0.5em;
	text-transform: uppercase;
}
.ss-card__title a { color: var(--ss-text-strong); text-decoration: none; }
.ss-card__title a:hover { color: var(--ss-text-muted); }

.ss-card__composition {
	font-size: var(--ss-step--1);
	font-weight: 300;
	color: var(--ss-text-muted);
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ss-card__weight {
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	color: var(--ss-text-muted);
	margin-bottom: 1rem;
}
.ss-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--ss-line);
}
.ss-price {
	font-size: var(--ss-step-1);
	font-weight: 500;
	color: var(--ss-text-strong);
	white-space: nowrap;
}
.ss-price small { font-size: 0.6em; font-weight: 400; color: var(--ss-text-muted); }
.ss-price del { color: var(--ss-text-muted); font-size: 0.62em; font-weight: 300; margin-right: 0.4em; }

.ss-add {
	padding: 0.7em 1.2em;
	font-size: var(--ss-step--2);
	white-space: nowrap;
}

/* ==========================================================================
   9. Кроки замовлення
   ========================================================================== */
.ss-steps {
	counter-reset: step;
	display: grid;
	gap: calc(var(--ss-gap) * 1.4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.ss-step { position: relative; padding-top: 3.4rem; }
.ss-step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute; top: 0; left: 0;
	font-family: var(--ss-font-latin);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ss-line-strong);
	letter-spacing: 0.05em;
}
.ss-step h3 { font-size: var(--ss-step-0); margin-bottom: 0.6em; }
.ss-step p { font-size: var(--ss-step--1); color: var(--ss-text-muted); margin: 0; }

/* ==========================================================================
   10. Сторінка страви
   ========================================================================== */
.ss-dish { display: grid; gap: calc(var(--ss-gap) * 2); grid-template-columns: 1fr; }
@media (min-width: 880px) { .ss-dish { grid-template-columns: 1fr 1fr; align-items: start; } }
.ss-dish__media {
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	background: radial-gradient(circle at 50% 45%, #16293d 0%, #0d1b2a 72%);
}
.ss-dish__price { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 2rem; }
.ss-dish__price .ss-price { font-size: var(--ss-step-3); }
.ss-dish__specs { margin: 0 0 2.5rem; border-top: 1px solid var(--ss-line); }
.ss-dish__specs > div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--ss-line);
	font-size: var(--ss-step--1);
}
.ss-dish__specs dt { margin: 0; color: var(--ss-text-muted); letter-spacing: var(--ss-track-sm); text-transform: uppercase; font-size: var(--ss-step--2); }
.ss-dish__specs dd { margin: 0; text-align: right; color: var(--ss-text-strong); }

/* ==========================================================================
   11. Контент
   ========================================================================== */
.ss-prose { max-width: 68ch; }
.ss-prose > * + * { margin-top: 1.2em; }
.ss-prose h2, .ss-prose h3 { margin-top: 2em; }
.ss-prose a { color: var(--ss-text-strong); text-decoration: underline; }
.ss-prose img, .ss-prose .wp-block-image { border-radius: var(--ss-radius-lg); overflow: hidden; }
.ss-prose blockquote {
	margin: 2em 0;
	padding: 0 0 0 1.6em;
	border-left: 1px solid var(--ss-seal);
	font-size: var(--ss-step-1);
	font-weight: 300;
	color: var(--ss-text-strong);
}
.ss-prose table { width: 100%; border-collapse: collapse; font-size: var(--ss-step--1); }
.ss-prose th, .ss-prose td { padding: 0.8em; border: 1px solid var(--ss-line); text-align: left; }
.aligncenter { margin-inline: auto; }
figcaption, .wp-caption-text { font-size: var(--ss-step--2); color: var(--ss-text-muted); text-align: center; margin-top: 0.7em; }

/* ==========================================================================
   12. Форми
   ========================================================================== */
input[type="text"], input[type="tel"], input[type="email"], input[type="search"],
input[type="number"], textarea, select {
	width: 100%;
	padding: 0.85em 1em;
	background: var(--ss-bg);
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	color: var(--ss-text);
	font-family: inherit;
	font-size: var(--ss-step-0);
}
input::placeholder, textarea::placeholder { color: rgba(168, 182, 200, 0.55); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ss-text-muted); }
label { display: block; font-size: var(--ss-step--2); letter-spacing: var(--ss-track-sm); text-transform: uppercase; color: var(--ss-text-muted); margin-bottom: 0.5em; }

/* ==========================================================================
   13. Пагінація
   ========================================================================== */
.ss-pagination { margin-top: calc(var(--ss-gap) * 2.5); }
.ss-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.ss-pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 2.7rem; height: 2.7rem;
	padding-inline: 0.7rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	color: var(--ss-text-muted);
	text-decoration: none;
	font-size: var(--ss-step--1);
}
.ss-pagination .page-numbers:hover { border-color: var(--ss-text-muted); color: var(--ss-text-strong); }
.ss-pagination .page-numbers.current { background: var(--ss-surface-2); border-color: var(--ss-surface-2); color: #fff; }

/* ==========================================================================
   14. Підвал
   ========================================================================== */
.ss-footer {
	background: var(--ss-surface);
	/* Рамки зверху немає навмисно: межу малює надрив. Поки всі секції були
	   темні, border-top не читався, але під світлою секцією він перетворювався
	   на чітку лінію рівно на стику. */
	padding-block: var(--ss-section) 2rem;
}
.ss-footer h3 {
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track);
	color: var(--ss-text-strong);
	margin-bottom: 1.6em;
}
.ss-footer a { color: var(--ss-text-muted); text-decoration: none; }
.ss-footer a:hover { color: var(--ss-text-strong); }
.ss-footer__cols {
	display: grid;
	gap: calc(var(--ss-gap) * 2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.ss-footer__cols ul { margin: 0; padding: 0; list-style: none; font-size: var(--ss-step--1); }
.ss-footer__cols li + li { margin-top: 0.7em; }
.ss-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	margin-top: calc(var(--ss-gap) * 2.5);
	padding-top: 1.6rem;
	border-top: 1px solid var(--ss-line);
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	color: var(--ss-text-muted);
}

/* ==========================================================================
   15. Дрібне
   ========================================================================== */
.ss-notice {
	padding: 1.4rem 1.6rem;
	border: 1px dashed var(--ss-line-strong);
	border-radius: var(--ss-radius-lg);
	color: var(--ss-text-muted);
	font-size: var(--ss-step--1);
	text-align: center;
}

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

/* Порожній стан картки — коло енсо замість фото */
.ss-card__media--empty > a,
.ss-card__media--empty { display: grid; place-items: center; }
.ss-card__media--empty > a { width: 100%; height: 100%; }
.ss-card__enso { width: 30%; max-width: 90px; color: var(--ss-line-strong); }

/* ==========================================================================
   16. Попап консультації
   ========================================================================== */
.ss-hero__phone {
	margin: 1.6rem 0 0;
	font-size: var(--ss-step--1);
	letter-spacing: var(--ss-track-sm);
}
.ss-hero__phone a { color: var(--ss-text-muted); text-decoration: none; }
.ss-hero__phone a:hover { color: var(--ss-text-strong); }

.ss-modal {
	width: min(100% - 2rem, 27rem);
	max-height: min(90dvh, 46rem);
	padding: 0;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-surface);
	color: var(--ss-text);
	overflow: auto;
}
.ss-modal::backdrop { background: rgba(6, 12, 20, 0.78); backdrop-filter: blur(3px); }
.ss-modal__inner { position: relative; padding: 2.4rem 2rem 2rem; text-align: center; }

.ss-modal__close {
	position: absolute;
	top: 0.75rem; right: 0.75rem;
	display: grid; place-items: center;
	width: 36px; height: 36px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--ss-radius);
	color: var(--ss-text-muted);
	cursor: pointer;
}
.ss-modal__close:hover { border-color: var(--ss-line-strong); color: var(--ss-text-strong); }

.ss-modal__enso { width: 44px; margin: 0 auto 1.2rem; color: var(--ss-line-strong); }
.ss-modal__title { font-size: var(--ss-step-2); margin-bottom: 0.6em; }
.ss-modal .ss-rule { margin-inline: auto; margin-bottom: 1.2rem; }
.ss-modal__lead { font-size: var(--ss-step--1); color: var(--ss-text-muted); margin-bottom: 1.8rem; }
.ss-modal__alt { margin: 1.2rem 0 0; font-size: var(--ss-step--2); color: var(--ss-text-muted); }
.ss-modal__alt a { color: var(--ss-text-strong); }

/* Форма */
.ss-form { text-align: left; }
.ss-field { margin-bottom: 1.1rem; }
.ss-field__error {
	margin: 0.45em 0 0;
	font-size: var(--ss-step--2);
	color: #ff8b8b;
	min-height: 0;
}
.ss-field__error:empty { display: none; }
.ss-field.is-invalid input:not([type="checkbox"]) { border-color: #ff8b8b; }

.ss-field--check { margin-bottom: 1.4rem; }
.ss-check {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	font-size: var(--ss-step--2);
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-text-muted);
	cursor: pointer;
}
.ss-check input[type="checkbox"] {
	flex: none;
	width: 18px; height: 18px;
	margin-top: 0.15em;
	accent-color: var(--ss-seal);
	cursor: pointer;
}
.ss-check a { color: var(--ss-text); }

.ss-form__status {
	margin: 1rem 0 0;
	font-size: var(--ss-step--2);
	text-align: center;
	min-height: 1.2em;
}
.ss-form__status.is-success { color: #7fd6a8; }
.ss-form__status.is-error { color: #ff8b8b; }

/* Пастка для ботів */
.ss-hp {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   17. WooCommerce — кошик, оформлення, повідомлення
   Власні стилі Woo вимкнено, тож малюємо все самі.
   ========================================================================== */
/* Відступів у самого <main> немає навмисно. Кожен шаблон Woo — і каталог,
   і картка товару, і кошик через page.php — уже загорнутий у .ss-section
   з власним padding-block. Дубль давав подвійний відступ і розрив
   перед футером. */
.woocommerce-page .ss-main > .ss-wrap > h1 { margin-bottom: calc(var(--ss-gap) * 1.5); }

/* Повідомлення */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
	margin: 0 0 var(--ss-gap);
	padding: 1rem 1.2rem;
	border: 1px solid var(--ss-line-strong);
	border-left-width: 3px;
	border-radius: var(--ss-radius);
	background: var(--ss-surface);
	list-style: none;
	font-size: var(--ss-step--1);
}
.woocommerce-message { border-left-color: #7fd6a8; }
.woocommerce-info { border-left-color: var(--ss-text-muted); }
.woocommerce-error { border-left-color: var(--ss-seal); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* Таблиця кошика */
.woocommerce-cart-form { margin-bottom: calc(var(--ss-gap) * 2); }
.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ss-step--1);
}
.shop_table th {
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--ss-line-strong);
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	font-weight: 500;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-align: left;
}
.shop_table td {
	padding: 1.2rem 0.8rem 1.2rem 0;
	border-bottom: 1px solid var(--ss-line);
	vertical-align: middle;
}
.shop_table td:last-child, .shop_table th:last-child { text-align: right; padding-right: 0; }

.cart_item .product-thumbnail { width: 92px; }
.cart_item .product-thumbnail img {
	width: 76px; height: 76px;
	object-fit: cover;
	border-radius: var(--ss-radius);
	background: var(--ss-surface);
	opacity: 0.85;
}
.cart_item .product-name a { color: var(--ss-text-strong); text-decoration: none; font-weight: 500; }
.cart_item .product-name a:hover { color: var(--ss-text-muted); }
.cart_item .product-price, .cart_item .product-subtotal { white-space: nowrap; }
.cart_item .product-subtotal { font-weight: 600; color: var(--ss-text-strong); }

.product-remove { width: 40px; }
.product-remove .remove {
	display: grid; place-items: center;
	width: 28px; height: 28px;
	border: 1px solid var(--ss-line);
	border-radius: 50%;
	color: var(--ss-text-muted) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}
.product-remove .remove:hover {
	border-color: var(--ss-seal);
	background: var(--ss-seal);
	color: #fff !important;
}

.quantity input.qty {
	width: 5.5rem;
	padding: 0.6em 0.5em;
	text-align: center;
}

.actions { padding-top: 1.4rem !important; border-bottom: 0 !important; text-align: right; }
.actions .coupon { display: none; }

/* Кнопки Woo під наш стиль */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
a.checkout-button,
button[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 1.9em;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	background: transparent;
	color: var(--ss-text);
	font-family: var(--ss-font-body);
	font-size: var(--ss-step--2);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
button[name="update_cart"]:hover {
	border-color: var(--ss-text-muted);
	background: rgba(168, 182, 200, 0.08);
	color: var(--ss-text-strong);
}
button[name="update_cart"]:disabled { opacity: 0.4; cursor: default; }

/* Головні дії — червона печатка.
   Специфічність має бути не нижчою за .woocommerce a.button вище. */
.woocommerce a.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#place_order {
	border-color: var(--ss-seal);
	background: var(--ss-seal);
	color: #fff;
	width: auto;
}
.woocommerce a.checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
#place_order:hover { background: var(--ss-seal-hover); border-color: var(--ss-seal-hover); color: #fff; }

.cart_totals {
	width: min(100%, 26rem);
	padding: 1.6rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-surface);
}
.cart_totals h2 { font-size: var(--ss-step-1); margin-bottom: 1.2rem; }
.cart_totals .shop_table th { border-bottom: 0; padding: 0.7rem 0; text-transform: none; letter-spacing: 0; font-size: var(--ss-step--1); }
.cart_totals .shop_table td { padding: 0.7rem 0; border-bottom: 0; text-align: right; }
.cart_totals .order-total th,
.cart_totals .order-total td {
	padding-top: 1.1rem;
	border-top: 1px solid var(--ss-line-strong);
	color: var(--ss-text-strong);
	font-size: var(--ss-step-0);
	font-weight: 600;
}
.wc-proceed-to-checkout { margin-top: 1.4rem; }
.wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* Порожній кошик */
.cart-empty { font-size: var(--ss-step-1); text-align: center; color: var(--ss-text-muted); }
.return-to-shop { text-align: center; margin-top: 1.5rem; }

/* Оформлення */
.woocommerce-checkout .col2-set { display: grid; gap: var(--ss-gap); }
@media (min-width: 900px) {
	/* Рядки задаємо явно, інакше панель замовлення падає під форму. */
	.woocommerce-checkout form.checkout {
		display: grid;
		gap: 0 calc(var(--ss-gap) * 2);
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 23rem);
		align-items: start;
	}
	.woocommerce-checkout .ss-delivery-choice { grid-column: 1 / -1; grid-row: 1; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 110px; }
}
.woocommerce-checkout h3 { font-size: var(--ss-step-1); margin-bottom: 1.2rem; }
.woocommerce-billing-fields__field-wrapper > p,
.woocommerce-additional-fields > p { margin-bottom: 1.1rem; }
#order_review {
	padding: 1.6rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-surface);
}
#payment .payment_methods { margin: 0 0 1.2rem; padding: 0; list-style: none; }
#payment .payment_methods li { padding: 0.6rem 0; border-bottom: 1px solid var(--ss-line); }
#payment .payment_box { font-size: var(--ss-step--2); color: var(--ss-text-muted); }
#place_order { width: 100%; }

@media (max-width: 640px) {
	.shop_table thead { display: none; }
	.shop_table tr { display: grid; grid-template-columns: 40px 92px 1fr; gap: 0.4rem 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--ss-line); }
	.shop_table td { padding: 0; border: 0; }
	.cart_item .product-name { grid-column: 3; }
	.cart_item .product-price, .cart_item .product-quantity, .cart_item .product-subtotal { grid-column: 3; text-align: left !important; }
	.actions { display: block; }
}

/* --------------------------------------------------------------------------
   Кошик у дві колонки: позиції ліворуч, липка панель підсумків праворуч
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce {
	display: grid;
	gap: calc(var(--ss-gap) * 1.5);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); }
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals { position: sticky; top: 110px; }
}
.woocommerce-cart .woocommerce-cart-form { margin-bottom: 0; }
.cart-collaterals { width: 100%; }
.cart_totals { width: 100%; }

img.woocommerce-placeholder { opacity: 0.5; }

/* Підказка про безкоштовну доставку */
.ss-delivery-note {
	margin: 1.2rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-bg);
	font-size: var(--ss-step--2);
	line-height: 1.6;
	color: var(--ss-text-muted);
}
.ss-delivery-note b { color: var(--ss-text-strong); font-weight: 600; }
.ss-delivery-note--free { border-color: rgba(127, 214, 168, 0.4); }
.ss-delivery-note--free b { color: #7fd6a8; }
.ss-delivery-note__bar {
	height: 3px;
	margin-top: 0.7rem;
	border-radius: 2px;
	background: var(--ss-line);
	overflow: hidden;
}
.ss-delivery-note__bar span {
	display: block;
	height: 100%;
	background: var(--ss-seal);
	transition: width 0.3s;
}
.ss-delivery-note--free .ss-delivery-note__bar span { background: #7fd6a8; }

/* Сторінки магазину — без обмеження ширини тексту */
.ss-shop-content { max-width: none; }

/* ==========================================================================
   18. Чекаут: спосіб отримання, поля, оплата
   ========================================================================== */
select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ss-text-muted) 50%),
		linear-gradient(135deg, var(--ss-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6rem;
	cursor: pointer;
}
select option { background: var(--ss-bg); color: var(--ss-text); }

/* Спосіб отримання */
.ss-delivery-choice { margin-bottom: calc(var(--ss-gap) * 1.5); }
.ss-radio-group {
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-bottom: 1.2rem;
}
.ss-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	background: var(--ss-surface);
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
	transition: border-color 0.2s, background-color 0.2s;
}
.ss-radio:hover { border-color: var(--ss-text-muted); }
.ss-radio:has(input:checked) { border-color: var(--ss-seal); background: rgba(183, 40, 46, 0.08); }
.ss-radio input[type="radio"] {
	flex: none;
	width: 18px; height: 18px;
	margin-top: 0.15em;
	accent-color: var(--ss-seal);
	cursor: pointer;
}
.ss-radio__body { display: block; }
.ss-radio__label {
	display: block;
	color: var(--ss-text-strong);
	font-size: var(--ss-step--1);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
}
.ss-radio__hint {
	display: block;
	margin-top: 0.35em;
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	line-height: 1.5;
}

.ss-address-row[hidden] { display: none; }
.ss-field-hint {
	display: block;
	margin-top: 0.5em;
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	line-height: 1.5;
}

/* Рядки форми WooCommerce */
.woocommerce form .form-row { margin-bottom: 1.2rem; padding: 0; }
.woocommerce form .form-row label { margin-bottom: 0.5em; }
.woocommerce form .form-row .required { color: var(--ss-seal); text-decoration: none; border: 0; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea { border-color: #ff8b8b; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgba(127, 214, 168, 0.5); }
.woocommerce-input-wrapper { display: block; }

/* Згода перед кнопкою */
.ss-consent { margin: 1.2rem 0 !important; }

/* Оплата */
#payment .payment_methods li {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--ss-line);
	list-style: none;
}
#payment .payment_methods li:last-child { border-bottom: 0; }
#payment .payment_methods label {
	display: inline;
	margin: 0 0 0 0.5rem;
	color: var(--ss-text-strong);
	font-size: var(--ss-step--1);
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
}
#payment .payment_methods input[type="radio"] { accent-color: var(--ss-seal); width: 18px; height: 18px; }
#payment .payment_box {
	margin-top: 0.7rem;
	padding: 0.8rem 1rem;
	border-radius: var(--ss-radius);
	background: var(--ss-bg);
	font-size: var(--ss-step--2);
	color: var(--ss-text-muted);
}
.woocommerce-privacy-policy-text { font-size: var(--ss-step--2); color: var(--ss-text-muted); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }

/* Підсумок замовлення */
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th { padding: 0 0 0.9rem; }
.woocommerce-checkout-review-order-table td { padding: 0.8rem 0; border-bottom: 1px solid var(--ss-line); text-align: right; }
.woocommerce-checkout-review-order-table td.product-name { text-align: left; color: var(--ss-text); }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--ss-text-muted); }
.woocommerce-checkout-review-order-table tfoot th { padding: 0.8rem 0; text-align: left; border-bottom: 1px solid var(--ss-line); }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 1.1rem;
	color: var(--ss-text-strong);
	font-size: var(--ss-step-0);
	font-weight: 600;
}

/* Подяка після замовлення */
.woocommerce-order-overview {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	margin: 0 0 var(--ss-gap);
	padding: 1.4rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-surface);
	list-style: none;
}
.woocommerce-order-overview li { font-size: var(--ss-step--2); color: var(--ss-text-muted); text-transform: uppercase; letter-spacing: var(--ss-track-sm); }
.woocommerce-order-overview li strong { display: block; margin-top: 0.4em; color: var(--ss-text-strong); font-size: var(--ss-step-0); text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   19. Герой: дві колонки, фото праворуч, летючі інгредієнти
   ========================================================================== */
.ss-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: calc(var(--ss-gap) * 1.5);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	min-height: clamp(32rem, 84vh, 50rem);
	padding-block: calc(var(--ss-section) * 0.9);
	text-align: center;
}
@media (min-width: 900px) {
	.ss-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		gap: calc(var(--ss-gap) * 2.5);
		text-align: left;
	}
}

.ss-hero__content { position: relative; z-index: 2; }
.ss-hero__enso { width: clamp(64px, 7vw, 88px); margin: 0 auto 1.6rem; opacity: 0.9; }
@media (min-width: 900px) { .ss-hero__enso { margin-inline: 0; } }

.ss-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
@media (min-width: 900px) { .ss-hero__actions { justify-content: flex-start; } }

.ss-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem 3rem;
	margin: 2.8rem 0 0;
	padding-top: 1.8rem;
	border-top: 1px solid var(--ss-line);
}
@media (min-width: 900px) { .ss-hero__meta { justify-content: flex-start; } }

/* --- Фото праворуч --- */
.ss-hero__photo {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	width: min(100%, 34rem);
	margin-inline: auto;
}
.ss-hero__photo-glow {
	position: absolute;
	inset: -8%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(27, 58, 99, 0.75) 0%, rgba(13, 27, 42, 0) 68%);
	filter: blur(6px);
}
.ss-hero__photo-img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
	animation: ss-hero-photo 9s ease-in-out infinite;
}
@keyframes ss-hero-photo {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -14px, 0); }
}

.ss-hero__photo-empty {
	position: relative;
	display: grid;
	place-items: center;
	gap: 1rem;
	width: 78%;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--ss-line-strong);
	border-radius: 50%;
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-align: center;
	padding: 2rem;
}
.ss-hero__photo-enso { width: 46px; color: var(--ss-line-strong); }

/* --- Летючі інгредієнти --- */
.ss-hero__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.ss-hero__float {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: clamp(96px, calc(var(--size) * 0.62), var(--size));
	translate: -50% -50%;
}

.ss-hero__float-inner {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.9;
	filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
	animation: ss-drift-a var(--dur, 31s) ease-in-out var(--delay, 0s) infinite;
}
.ss-hero__float-inner svg,
.ss-hero__float-inner img {
	width: 100%;
	height: auto;
}
.ss-hero__float-inner img { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5)); }


/* На вузьких екранах лишаємо лише кілька елементів — інакше каша */
@media (max-width: 780px) {
	.ss-hero__float--maguro,
	.ss-hero__float--ikura,
	.ss-hero__float--set { display: none; }
	.ss-hero__float-inner { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-hero__float-inner,
	.ss-hero__photo-img { animation: none; }
	.ss-hero__float { transition: none; transform: none; }
}

/* Кругла маска для головного фото — коло перегукується з енсо */
.ss-hero__photo-img {
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.ss-hero__photo::after {
	content: "";
	position: absolute;
	inset: -3%;
	border-radius: 50%;
	border: 1px solid var(--ss-line-strong);
	pointer-events: none;
}
/* Кольоровий підсвіт, щоб герой не був «плоско-синім» */
.ss-hero__photo-glow {
	background:
		radial-gradient(circle at 32% 28%, rgba(239, 123, 77, 0.35) 0%, rgba(239, 123, 77, 0) 55%),
		radial-gradient(circle at 72% 74%, rgba(147, 193, 79, 0.24) 0%, rgba(147, 193, 79, 0) 58%),
		radial-gradient(circle at 50% 50%, rgba(27, 58, 99, 0.85) 0%, rgba(13, 27, 42, 0) 70%);
	inset: -14%;
	filter: blur(10px);
}

/* --------------------------------------------------------------------------
   Глибина: дальній план за фото і розмитий, передній — різкий і зверху
   -------------------------------------------------------------------------- */
.ss-hero__decor { overflow: visible; }
.ss-hero { isolation: isolate; }

.ss-hero__float.is-back { z-index: 1; }
.ss-hero__float.is-front { z-index: 3; }
.ss-hero__photo { z-index: 2; }
.ss-hero__content { z-index: 4; }

.ss-hero__float.is-back .ss-hero__float-inner {
	filter: blur(var(--blur, 4px)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
	opacity: 0.5;
}
.ss-hero__float.is-front .ss-hero__float-inner {
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.65));
	opacity: 1;
}

/* Щоб елементи не вилазили за межі секції по горизонталі */
.ss-hero { overflow: hidden; }

@media (max-width: 780px) {
	.ss-hero__float.is-back .ss-hero__float-inner { opacity: 0.35; }
	.ss-hero__float.is-front .ss-hero__float-inner { opacity: 0.9; }
}

/* ==========================================================================
   20. Рух летючих елементів
   --------------------------------------------------------------------------
   Вимоги клієнта: мінімальний, хаотичний, легкий, БЕЗ реакції на курсор.
   Тому паралакс прибрано повністю, лишилась автономна CSS-анімація.

   Амплітуда навмисно мала (4-9px, до 2.5deg). Тривалості — прості числа
   (23, 29, 31, 37, 41, 43 с), тож цикли елементів ніколи не синхронізуються
   і рух не читається як повторюваний.
   ========================================================================== */
@keyframes ss-drift-a {
	0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
	19%  { transform: translate3d(4px, -6px, 0) rotate(calc(var(--rot, 0deg) + 1.1deg)); }
	43%  { transform: translate3d(-3px, -9px, 0) rotate(calc(var(--rot, 0deg) - 0.9deg)); }
	68%  { transform: translate3d(5px, -4px, 0) rotate(calc(var(--rot, 0deg) + 1.7deg)); }
	86%  { transform: translate3d(-2px, -7px, 0) rotate(calc(var(--rot, 0deg) + 0.3deg)); }
	100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}

@keyframes ss-drift-b {
	0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
	27%  { transform: translate3d(-5px, -4px, 0) rotate(calc(var(--rot, 0deg) - 1.4deg)); }
	52%  { transform: translate3d(3px, -8px, 0) rotate(calc(var(--rot, 0deg) + 0.6deg)); }
	71%  { transform: translate3d(-4px, -2px, 0) rotate(calc(var(--rot, 0deg) - 2.1deg)); }
	91%  { transform: translate3d(2px, -6px, 0) rotate(calc(var(--rot, 0deg) - 0.4deg)); }
	100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}

@keyframes ss-drift-c {
	0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
	23%  { transform: translate3d(6px, -3px, 0) rotate(calc(var(--rot, 0deg) + 2.2deg)); }
	46%  { transform: translate3d(-2px, -7px, 0) rotate(calc(var(--rot, 0deg) + 0.8deg)); }
	64%  { transform: translate3d(4px, -9px, 0) rotate(calc(var(--rot, 0deg) - 1.2deg)); }
	83%  { transform: translate3d(-5px, -3px, 0) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
	100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}

.ss-hero__float-inner.is-path-a { animation-name: ss-drift-a; }
.ss-hero__float-inner.is-path-b { animation-name: ss-drift-b; }
.ss-hero__float-inner.is-path-c { animation-name: ss-drift-c; }

/* Головне фото — справжня фотографія з власним тлом, тому кругла маска.
   Коло перегукується зі знаком енсо і прибирає чужий фон кадру. */
.ss-hero__photo { aspect-ratio: 1 / 1; width: min(100%, 30rem); }
.ss-hero__photo-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	animation: ss-drift-b 53s ease-in-out infinite;
}
.ss-hero__photo::after {
	content: "";
	position: absolute;
	inset: -2.5%;
	border-radius: 50%;
	border: 1px solid var(--ss-line-strong);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ss-hero__float-inner,
	.ss-hero__photo-img { animation: none !important; }
}

/* ==========================================================================
   21. Герой за структурою референсу
   --------------------------------------------------------------------------
   Патерн Hero-Centric: герой домінує, але головна дія рівно одна.
   Консультація стала текстовим посиланням, а не другою кнопкою — дві рівні
   за вагою кнопки поруч розмивають конверсію.
   ========================================================================== */
.ss-hero__inner { text-align: left; }
@media (min-width: 900px) {
	.ss-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.ss-hero__eyebrow {
	display: inline-block;
	margin-bottom: 1.4rem;
	padding: 0.5em 1.1em;
	border: 1px solid var(--ss-line-strong);
	border-radius: 999px;
	color: var(--ss-text-muted);
	font-size: var(--ss-step--2);
	font-weight: 600;
	letter-spacing: var(--ss-track);
	text-transform: uppercase;
}

.ss-hero__lead {
	margin: 0 0 0.6rem;
	color: var(--ss-text-muted);
	font-size: var(--ss-step-1);
	font-weight: 300;
}

/* Крупний заголовок. Кирилиця — Montserrat, бо в Cinzel її немає. */
.ss-hero__title {
	/* Тільки Montserrat: Cinzel не має кирилиці, і фраза в ньому
	   розсипалась на посимвольні підстановки. */
	margin: 0 0 2rem;
	max-inline-size: 15ch;
	font-family: var(--ss-font-body);
	font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ss-text-strong);
}
.ss-hero__accent {
	/* Не печатка: та дає лише 2.78:1 і провалює навіть поріг для великого
	   тексту. Лосось із палітри інгредієнтів дає 6.30:1. */
	color: var(--ss-accent-text);
}

.ss-btn--lg {
	padding: 1.15em 2.4em;
	font-size: var(--ss-step--1);
}

.ss-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
	justify-content: flex-start;
}
.ss-hero__link {
	padding: 0.4em 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ss-line-strong);
	color: var(--ss-text-muted);
	font-family: inherit;
	font-size: var(--ss-step--1);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.ss-hero__link:hover { color: var(--ss-text-strong); border-bottom-color: var(--ss-text-muted); }

.ss-hero__meta { justify-content: flex-start; }
.ss-hero__meta dd a { color: inherit; text-decoration: none; }
.ss-hero__meta dd a:hover { color: var(--ss-text-muted); }

@media (max-width: 899px) {
	.ss-hero__inner { text-align: center; }
	.ss-hero__title { max-inline-size: none; margin-inline: auto; }
	.ss-hero__actions, .ss-hero__meta { justify-content: center; }
}

/* ==========================================================================
   22. Рваний край секції меню
   --------------------------------------------------------------------------
   Секція виглядає як надірваний аркуш. Фігури залиті кольором фону сторінки
   і «з'їдають» край панелі згори та знизу.
   ========================================================================== */
.ss-section--torn {
	position: relative;
	background: var(--ss-surface);
	padding-block: calc(var(--ss-section) + 2rem);
}

.ss-torn {
	position: absolute;
	left: 0;
	width: 100%;
	height: clamp(46px, 6vw, 104px);
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}
.ss-torn svg { display: block; width: 100%; height: 100%; }
.ss-torn__main { fill: var(--ss-torn-fill, var(--ss-bg)); }
/* Нижній шар світліший — імітує серцевину надірваного паперу */
.ss-torn__under { fill: var(--ss-torn-under, rgba(168, 182, 200, 0.22)); }

.ss-torn--top { top: 0; }
.ss-torn--bottom { bottom: 0; transform: scaleY(-1); }

.ss-section--torn > .ss-wrap { position: relative; z-index: 2; }

/* ==========================================================================
   23. Герой на повноекранному фото
   --------------------------------------------------------------------------
   Летючі елементи прибрано. Фон — одне фото під градієнтною заливкою:
   ліва частина кадру найтемніша (яскравість 40 проти 73 у центрі),
   тому текст стоїть ліворуч і читається без додаткового підкладу.
   ========================================================================== */
.ss-hero {
	min-height: clamp(34rem, 88vh, 54rem);
	display: grid;
	align-items: center;
}
.ss-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}

/* Заливка, що гарантує контраст тексту незалежно від кадру.
   Ліворуч щільна, праворуч майже прозора — фото лишається видимим.

   Зверху перші дві стопи тримають суцільний фон рівно на висоту шапки.
   Шапка суцільна й заходить над банером; без цієї ділянки фото виринає
   з-під неї одразу на повну яскравість і дає горизонтальну смугу на всю
   ширину — заміряний стрибок 27.3 -> 36.2. Тепер на межі шапки фото ще
   повністю сховане, а далі проступає поступово.

   Знизу градієнт доводимо до ПОВНОЇ непрозорості: інакше фото обривається
   рівно там, де починається надрив, і стик видно. Висота розчинення —
   --ss-hero-fade, її можна крутити окремо. */
.ss-hero { --ss-hero-fade: 26%; }

.ss-hero::after {
	background:
		linear-gradient(90deg, rgba(13, 27, 42, 0.94) 0%, rgba(13, 27, 42, 0.86) 32%, rgba(13, 27, 42, 0.45) 62%, rgba(13, 27, 42, 0.35) 100%),
		linear-gradient(
			180deg,
			var(--ss-bg) 0,
			var(--ss-bg) var(--ss-header-h),
			rgba(13, 27, 42, 0.12) 30%,
			rgba(13, 27, 42, 0.35) calc(100% - var(--ss-hero-fade)),
			var(--ss-bg) 100%
		);
}

/* Зсув видимої частини кадру. 50% — центр, більше — фото «притиснуте» вниз. */
.ss-hero__bg { object-position: 50% var(--ss-hero-focus, 50%); }

/* Одна колонка: фон уже несе візуал, друга колонка не потрібна */
.ss-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
	padding-block: clamp(5rem, 12vh, 9rem);
}
@media (min-width: 900px) {
	.ss-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.ss-hero__content { max-width: 44rem; }
}

.ss-hero__title { max-inline-size: 16ch; }


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

   Контраст перевірено на #F3F5F7:
     #0D1B2A .... 15.92:1  основний текст
     #1B3A63 .... 10.49:1  заголовки
     #5A6B80 ..... 4.99:1  приглушений (AA)
     #B7282E ..... 5.72:1  акцент — на світлому працює і як текст
     #A8B6C8 ..... 1.89:1  ПРОВАЛ — темний приглушений сюди не переносимо
   ========================================================================== */
.ss-section--paper {
	--ss-bg: #f3f5f7;
	--ss-surface: #ffffff;
	--ss-text: #21313f;
	--ss-text-strong: #0d1b2a;
	--ss-text-muted: #5a6b80;
	--ss-line: rgba(13, 27, 42, 0.12);
	--ss-line-strong: rgba(13, 27, 42, 0.26);
	--ss-accent-text: #b7282e;

	/* Надрив заливається кольором сусідньої темної секції */
	--ss-torn-fill: #0d1b2a;
	--ss-torn-under: rgba(13, 27, 42, 0.2);

	background: var(--ss-bg);
	color: var(--ss-text);
}

.ss-section--paper h1,
.ss-section--paper h2,
.ss-section--paper h3,
.ss-section--paper h4 { color: var(--ss-text-strong); }

.ss-section--paper .ss-card {
	background: var(--ss-surface);
	box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04), 0 12px 28px -14px rgba(13, 27, 42, 0.22);
}
/* На світлому фон картки вже білий, тому підсвічувати нічим —
   відгук дає тінь. */
.ss-section--paper .ss-card:hover {
	background: var(--ss-surface);
	box-shadow: 0 2px 4px rgba(13, 27, 42, 0.06), 0 20px 40px -18px rgba(13, 27, 42, 0.3);
}
.ss-section--paper .ss-card__media {
	background: radial-gradient(circle at 50% 45%, #eef1f4 0%, #e4e9ee 72%);
}
.ss-section--paper .ss-filter a { background: var(--ss-surface); }
.ss-section--paper .ss-filter a[aria-current="page"] {
	background: var(--ss-text-strong);
	border-color: var(--ss-text-strong);
	color: #fff;
}
.ss-section--paper .ss-btn--ghost { color: var(--ss-text-strong); }
.ss-section--paper .ss-btn--ghost:hover {
	background: var(--ss-text-strong);
	border-color: var(--ss-text-strong);
	color: #fff;
}
.ss-section--paper .ss-card__enso { color: rgba(13, 27, 42, 0.18); }
.ss-section--paper .ss-notice { background: var(--ss-surface); }

/* Темна секція між світлими теж має рвані краї, залиті світлим */
.ss-section--ink {
	--ss-torn-fill: #f3f5f7;
	--ss-torn-under: rgba(255, 255, 255, 0.18);
	position: relative;
	background: var(--ss-bg);
	padding-block: calc(var(--ss-section) + 2rem);
}

/* Надрив над футером: секція доставки світла, тож заливка світла */
.ss-footer {
	position: relative;
	--ss-torn-fill: #f3f5f7;
	--ss-torn-under: rgba(255, 255, 255, 0.16);
	padding-top: calc(var(--ss-section) + 3rem);
}
.ss-footer > .ss-wrap { position: relative; z-index: 2; }

/* ==========================================================================
   25. Декор каталогу
   --------------------------------------------------------------------------
   Шар під контентом: коло-мазок за заголовком і фотовирізи, зрізані краями
   секції. Кліки не перехоплює, на вузьких екранах ховається.
   ========================================================================== */
.ss-section--torn,
/*
 * Секція підрізає декор, який виходить за її межі. Але overflow: hidden
 * робить елемент контейнером прокручування, і будь-який position: sticky
 * всередині перестає працювати — саме на цьому спотикається липка стрічка
 * категорій. overflow: clip підрізає так само, але контейнера прокручування
 * не створює. Для старих браузерів лишається hidden: там стрічка просто
 * не липне, decor не поїде.
 */
.ss-section--paper { overflow: hidden; }

@supports (overflow: clip) {
	.ss-section--paper { overflow: clip; }
}

.ss-decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.ss-decor__item {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: clamp(170px, calc(var(--w) * 0.78), var(--w));
	translate: -50% -50%;
	rotate: var(--rot, 0deg);
	opacity: var(--op, 1);
}
.ss-decor__item img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 22px 34px rgba(13, 27, 42, 0.28));
}

/* Коло-мазок — фон, а не предмет: без тіні й дуже приглушене */
.ss-decor__item--circle img { filter: none; }

@media (max-width: 1100px) {
	.ss-decor__item.is-hide-md { display: none; }
}
@media (max-width: 780px) {
	.ss-decor__item.is-hide-sm { display: none; }
}

/* Рекомендовані додатки в кошику */
.ss-recommended {
	grid-column: 1 / -1;
	margin-top: calc(var(--ss-gap) * 2.5);
	padding-top: calc(var(--ss-gap) * 2);
	border-top: 1px solid var(--ss-line);
}
.ss-recommended h2 {
	font-size: var(--ss-step-1);
	margin-bottom: calc(var(--ss-gap) * 1.2);
}
.ss-recommended .ss-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

/* ==========================================================================
   26. Темна шапка сторінки
   --------------------------------------------------------------------------
   Верх сторінки лишається темним, контент іде на світлому аркуші.
   Надрив малює нижня світла секція, тому тут нижнього відступу майже немає —
   інакше між заголовком і розривом зʼявляється порожня смуга.
   ========================================================================== */
.ss-pagehead {
	position: relative;
	background: var(--ss-bg);
	padding-block: calc(var(--ss-section) * 0.85) calc(var(--ss-section) * 0.5);
}
.ss-pagehead .ss-head { margin-bottom: 0; }
.ss-pagehead h1 { margin-bottom: 0.5em; }

/* Форма додавання в кошик на сторінці страви.
   Кількість і кнопка стояли впритул — Woo не дає їм відступу сам. */
.woocommerce div.product form.cart,
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.8rem;
	margin: 0 0 1.5rem;
}
form.cart .quantity { flex: none; }
form.cart .quantity input.qty {
	height: 100%;
	min-height: 3.1rem;
	width: 6rem;
}
form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3.1rem;
	padding-inline: 2rem;
	border-color: var(--ss-seal);
	background: var(--ss-seal);
	color: #fff;
}
form.cart .single_add_to_cart_button:hover {
	background: var(--ss-seal-hover);
	border-color: var(--ss-seal-hover);
	color: #fff;
}

/* Кнопки героя однакового розміру.
   Сітка з рівними колонками дає точний збіг ширини — padding від довжини
   тексту тут не працює, бо «Замовити зараз» і «Консультація» різної довжини.
   Висоту фіксуємо min-height, а вертикальний padding знімаємо. */
.ss-hero__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(10rem, 275px));
	gap: 0.9rem;
	justify-content: start;
}
.ss-hero__actions .ss-btn {
	width: 100%;
	min-height: 3.7rem;
	padding-block: 0;
}
@media (max-width: 899px) {
	.ss-hero__actions { justify-content: center; }
}
@media (max-width: 560px) {
	.ss-hero__actions { grid-template-columns: minmax(0, 275px); }
}

/* ==========================================================================
   27. Елементи керування WooCommerce — суцільний прохід
   --------------------------------------------------------------------------
   Попередні правила вимагали предка .woocommerce. Там, де Woo цю обгортку
   не додає (кабінет, окремі форми), кнопка лишалася системною. Тут селектори
   без прив'язки до предка, тому діють скрізь.
   ========================================================================== */
.button,
button.button,
input.button,
a.button,
.woocommerce-button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 3.1rem;
	padding: 0 1.9em;
	border: 1px solid var(--ss-line-strong);
	border-radius: var(--ss-radius);
	background: transparent;
	color: var(--ss-text);
	font-family: var(--ss-font-body);
	font-size: var(--ss-step--2);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.button:hover,
button.button:hover,
input.button:hover,
a.button:hover,
.woocommerce-button:hover {
	border-color: var(--ss-text-muted);
	background: rgba(168, 182, 200, 0.08);
	color: var(--ss-text-strong);
}
.ss-section--paper .button:hover,
.ss-section--paper button.button:hover,
.ss-section--paper a.button:hover {
	background: rgba(13, 27, 42, 0.06);
}

/* Головні дії — заливка печаткою */
.button.alt,
button.button.alt,
input.button.alt,
a.button.alt,
a.checkout-button,
#place_order,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	border-color: var(--ss-seal);
	background: var(--ss-seal);
	color: #fff;
}
.button.alt:hover,
button.button.alt:hover,
a.button.alt:hover,
a.checkout-button:hover,
#place_order:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
	border-color: var(--ss-seal-hover);
	background: var(--ss-seal-hover);
	color: #fff;
}

/* Кнопка «оновити кошик» неактивна, поки нічого не змінено */
button[name="update_cart"]:disabled,
button.button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Кабінет: вхід і реєстрація
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
	display: grid;
	gap: calc(var(--ss-gap) * 1.5);
	grid-template-columns: minmax(0, 1fr);
	max-width: 32rem;
	margin-inline: auto;
}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	padding: 1.8rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-surface);
}
.woocommerce-form-login p,
.woocommerce-form-register p { margin-bottom: 1.1rem; }
.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--ss-step--2);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-text-muted);
	cursor: pointer;
}
.woocommerce-form-login__rememberme input,
.woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--ss-seal);
}
.woocommerce-LostPassword {
	margin: 1rem 0 0;
	font-size: var(--ss-step--2);
}

/* --------------------------------------------------------------------------
   Сторінка подяки після замовлення
   -------------------------------------------------------------------------- */
.woocommerce-order .woocommerce-notice--success {
	margin-bottom: var(--ss-gap);
	font-size: var(--ss-step-1);
	color: var(--ss-text-strong);
}
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	margin-top: calc(var(--ss-gap) * 1.5);
}
.woocommerce-order h2 {
	font-size: var(--ss-step-1);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Дрібне: посилання «назад у магазин», порожній кошик
   -------------------------------------------------------------------------- */
.return-to-shop { margin-top: 1.5rem; }
.wc-backward { text-decoration: none; }

/* ==========================================================================
   28. Сторінка контактів
   --------------------------------------------------------------------------
   Дві колонки: список контактів ліворуч, картка зворотного дзвінка праворуч.
   Форму сюди не дублюємо — кнопка відкриває той самий попап, що й у героя,
   тож логіка відправки лишається одна.
   ========================================================================== */
.ss-contacts {
	display: grid;
	gap: var(--ss-gap);
	align-items: start;
}
@media (min-width: 900px) {
	.ss-contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3rem; }
}

.ss-contacts__list {
	display: grid;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 620px) {
	.ss-contacts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ss-contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.6rem 1.8rem;
	background: var(--ss-surface);
	border-radius: var(--ss-radius-lg);
	box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04), 0 12px 28px -14px rgba(13, 27, 42, 0.22);
}
.ss-contact__label {
	font-size: var(--ss-step--2);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	color: var(--ss-text-muted);
}
.ss-contact__value {
	font-size: var(--ss-step-0);
	color: var(--ss-text-strong);
	text-decoration: none;
}
/* Телефон — головна дія сторінки, тож він більший за решту рядків. */
.ss-contact__value--lg {
	font-size: var(--ss-step-2);
	font-weight: 600;
	letter-spacing: 0.01em;
}
a.ss-contact__value:hover { color: var(--ss-accent-text); }

.ss-contact__note {
	font-size: var(--ss-step--2);
	color: var(--ss-text-muted);
}
.ss-contact__link {
	align-self: start;
	margin-top: 0.2rem;
	font-size: var(--ss-step--1);
	color: var(--ss-accent-text);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.ss-contact__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}
.ss-contact__socials a {
	color: var(--ss-text-strong);
	text-decoration: none;
	border-bottom: 1px solid var(--ss-line-strong);
}
.ss-contact__socials a:hover { color: var(--ss-accent-text); }

/* Картка дзвінка навмисно темна: єдина пляма кольору на світлому аркуші
   веде око до дії. */
.ss-contacts__cta {
	padding: 2rem 1.9rem 2.2rem;
	background: #0d1b2a;
	border-radius: var(--ss-radius-lg);
	color: #f3f5f7;
	text-align: center;
}
.ss-contacts__cta h2 {
	margin: 0.8rem 0 0;
	font-size: var(--ss-step-2);
	color: #ffffff;
}
.ss-contacts__cta p {
	margin: 0.9rem 0 1.6rem;
	font-size: var(--ss-step--1);
	color: rgba(243, 245, 247, 0.72);
}
.ss-contacts__enso {
	width: 46px;
	height: 46px;
	color: var(--ss-seal-hover);
}

.ss-contacts__delivery { margin-top: calc(var(--ss-gap) * 1.4); }
.ss-contacts__delivery h2 { margin: 0; font-size: var(--ss-step-2); }

.ss-facts {
	display: grid;
	gap: 1.4rem;
	margin: 0;
}
@media (min-width: 620px) {
	.ss-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ss-facts dt {
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	color: var(--ss-text-muted);
}
.ss-facts dd {
	margin: 0.4rem 0 0;
	font-size: var(--ss-step-1);
	font-weight: 600;
	color: var(--ss-text-strong);
}

.ss-contacts__note {
	margin: 1.6rem 0 0;
	font-size: var(--ss-step--1);
	color: var(--ss-text-muted);
}
.ss-contacts__prose { margin-top: var(--ss-gap); }

/* Фірмовий логотип у шапці. Висоту задаємо явно, ширину лишаємо auto —
   інакше при зміні пропорцій файла шапка стрибне. */
.ss-brand__logo {
	display: block;
	height: 40px;
	width: auto;
	flex: none;
}
@media (max-width: 560px) {
	.ss-brand__logo { height: 32px; }
}

/* Уточнення до графіка в підвалі — тон нижчий за самі контакти. */
.ss-footer__note {
	font-size: var(--ss-step--2);
	color: var(--ss-text-muted);
	opacity: 0.85;
}

/* Логотип у підвалі. Трохи більший за шапку — тут він працює як підпис,
   а не як навігація, і місця навколо більше. */
.ss-footer__brand { display: inline-block; }
.ss-footer__logo {
	display: block;
	height: 46px;
	width: auto;
}
.ss-footer__tagline {
	margin-top: 1.1rem;
	font-size: var(--ss-step--1);
	color: var(--ss-text-muted);
}

/* ==========================================================================
   29. Юридичні сторінки
   ========================================================================== */
.ss-pagehead--tight { padding-block: calc(var(--ss-section) * 0.6); }
.ss-legal__updated { font-size: var(--ss-step--1); color: var(--ss-text-muted); }

/* Довгий документ читають рядок за рядком, тому колонка вужча за звичайну
   прозу, а міжрядковий інтервал більший. */
.ss-legal { max-width: 62ch; line-height: 1.75; }

/* Дві колонки: текст і липкий зміст праворуч.
   Групу центруємо цілком, а не розтягуємо на всю ширину обгортки — інакше
   поруч із вузькою колонкою тексту лишається порожнє поле на третину
   екрана. У розмітці зміст іде першим, тому на десктопі переставляємо його
   властивістю order. */
.ss-legal__layout { display: grid; gap: 2.4rem; }

@media (min-width: 1040px) {
	.ss-legal__layout {
		grid-template-columns: minmax(0, 62ch) 15rem;
		gap: 4.5rem;
		justify-content: center;
		align-items: start;
	}
	.ss-legal { order: 1; }
	.ss-legal__aside { order: 2; }
}

.ss-toc {
	padding: 1.4rem 1.5rem;
	background: var(--ss-surface);
	border-radius: var(--ss-radius-lg);
	box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04), 0 12px 28px -16px rgba(13, 27, 42, 0.2);
	font-size: var(--ss-step--1);
}
.ss-toc > summary {
	cursor: pointer;
	font-size: var(--ss-step--2);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	color: var(--ss-text-muted);
	list-style: none;
}
.ss-toc > summary::-webkit-details-marker { display: none; }
.ss-toc > summary::after {
	content: "";
	float: right;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.35em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}
.ss-toc[open] > summary::after { transform: rotate(-135deg); }

.ss-toc ol {
	margin: 1.1rem 0 0;
	padding: 0 0 0 1.3em;
	counter-reset: none;
}
.ss-toc li + li { margin-top: 0.55em; }
.ss-toc a {
	color: var(--ss-text);
	text-decoration: none;
	line-height: 1.45;
}
.ss-toc a:hover { color: var(--ss-accent-text); }

@media (min-width: 1040px) {
	/* Липкий зміст: людина шукає в оферті один пункт, і він має лишатися
	   під рукою на всій довжині документа. */
	.ss-legal__aside { position: sticky; top: 6.5rem; }
	.ss-toc { max-height: calc(100vh - 9rem); overflow-y: auto; }
	/* Стрілку на десктопі не показуємо: там блок завжди розгорнутий. */
	.ss-toc > summary { pointer-events: none; }
	.ss-toc > summary::after { display: none; }
}
.ss-legal h2 {
	margin-top: 2.6em;
	font-size: var(--ss-step-1);
	scroll-margin-top: 6rem;
}
.ss-legal ul { padding-left: 1.2em; }
.ss-legal li + li { margin-top: 0.5em; }
.ss-legal table { margin-block: 1.6em; }

/* Місце, куди власник має вписати свої дані. Навмисно помітне: такий
   маркер неможливо не побачити перед запуском. */
.ss-todo {
	padding: 0.15em 0.5em;
	border-radius: 4px;
	background: #ffe9a8;
	color: #6b4a00;
	font-size: 0.92em;
	font-weight: 600;
}

.ss-legal__nav {
	max-width: 62ch;
	margin-top: calc(var(--ss-gap) * 1.6);
	padding-top: 1.8rem;
	border-top: 1px solid var(--ss-line);
}
.ss-legal__nav h2 {
	margin: 0 0 0.9rem;
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track-sm);
	text-transform: uppercase;
	color: var(--ss-text-muted);
}
.ss-legal__nav ul { margin: 0; padding: 0; list-style: none; }
.ss-legal__nav li + li { margin-top: 0.5rem; }
.ss-legal__nav a { color: var(--ss-text-strong); text-decoration: none; border-bottom: 1px solid var(--ss-line-strong); }
.ss-legal__nav a:hover { color: var(--ss-accent-text); }

/* Рядок документів у підвалі — над копірайтом. */
.ss-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.8rem;
	margin-top: var(--ss-gap);
	padding-top: 1.6rem;
	border-top: 1px solid var(--ss-line);
	font-size: var(--ss-step--2);
}
.ss-footer__legal a { color: var(--ss-text-muted); text-decoration: none; }
.ss-footer__legal a:hover { color: var(--ss-text); }

/* ==========================================================================
   30. Головні дії оформлення — більший розмір
   --------------------------------------------------------------------------
   «Перейти до оформлення» і «Підтвердити замовлення» — єдині кнопки, заради
   яких існують ці сторінки, і за розміром вони мають відрізнятися від
   «Оновити кошик». Специфічність навмисно вища за .woocommerce a.checkout-button
   вище у файлі: там стоїть width:auto, і без цього кнопка не тягнеться
   на всю ширину картки підсумків.
   ========================================================================== */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
form.checkout #place_order {
	width: 100%;
	min-height: 4rem;
	padding-inline: 1.4em;
	font-size: var(--ss-step--1);
	font-weight: 600;
	letter-spacing: var(--ss-track-sm);
	box-shadow: 0 10px 24px -12px rgba(183, 40, 46, 0.55);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
form.checkout #place_order:hover {
	box-shadow: 0 12px 28px -12px rgba(183, 40, 46, 0.7);
}

/* На вузькому екрані кнопка й так на всю ширину — там важливіша висота,
   бо натискають пальцем. */
@media (max-width: 560px) {
	.woocommerce .wc-proceed-to-checkout a.checkout-button,
	.woocommerce #place_order,
	form.checkout #place_order { min-height: 3.6rem; }
}

/* ==========================================================================
   32. Підвал завжди внизу
   --------------------------------------------------------------------------
   На коротких сторінках — порожній кошик, 404, пошук без результатів —
   підвал зависав посеред екрана, а під ним лишалася смуга фону сторінки:
   277px на порожньому кошику, 188px на пошуку. Колонка на всю висоту
   вікна притискає його до низу, а на довгих сторінках нічого не змінює.
   ========================================================================== */
body {
	min-height: 100vh;
	/* dvh враховує панель браузера на телефоні; vh лишається запасним */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.ss-main { flex: 1 0 auto; }
.ss-footer { flex-shrink: 0; }

/* Панель адміністратора займає верх вікна — інакше зайвий скрол. */
body.admin-bar { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	body.admin-bar { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); }
}

/* ==========================================================================
   33. Порожні стани: 404, пошук без результатів, порожній кошик
   --------------------------------------------------------------------------
   Три різні сторінки з однією й тією ж задачею: пояснити, чому тут нічого
   немає, і дати одну зрозумілу дію. Раніше кожна виглядала як забутий
   рядок тексту посеред порожнечі.
   ========================================================================== */
.ss-empty {
	max-width: 44ch;
	margin-inline: auto;
	padding-block: clamp(1.5rem, 5vw, 4rem);
	text-align: center;
}
.ss-empty__mark {
	display: block;
	width: clamp(56px, 8vw, 84px);
	height: clamp(56px, 8vw, 84px);
	margin: 0 auto 1.8rem;
	color: var(--ss-line-strong);
}
.ss-empty__code {
	display: block;
	font-size: var(--ss-step--2);
	letter-spacing: var(--ss-track);
	text-transform: uppercase;
	color: var(--ss-text-muted);
}
.ss-empty h1,
.ss-empty h2 { margin: 0.8rem 0 0; }
.ss-empty p {
	margin: 1rem 0 0;
	color: var(--ss-text-muted);
}
.ss-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin-top: 2.2rem;
}
.ss-empty .ss-search { margin-top: 2rem; }

/* Порожній кошик приходить розміткою WooCommerce — підганяємо її під
   той самий вигляд, замість того щоб підміняти шаблон плагіна. */
.wc-empty-cart-message {
	max-width: 44ch;
	margin: 0 auto;
	text-align: center;
}
.woocommerce .cart-empty,
.wc-empty-cart-message .cart-empty {
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--ss-step-1);
	font-weight: 300;
	color: var(--ss-text-strong);
}
.woocommerce .cart-empty::before { content: none; }
.return-to-shop { text-align: center; }
.woocommerce .return-to-shop a.button {
	border-color: var(--ss-seal);
	background: var(--ss-seal);
	color: #fff;
}
.woocommerce .return-to-shop a.button:hover {
	border-color: var(--ss-seal-hover);
	background: var(--ss-seal-hover);
}

/* Порожній кошик малюємо самі, тому стандартне посилання «повернутися
   в магазин» ховаємо: у нашому блоці вже є кнопка. Прибрати його інакше
   не можна — воно зашите в шаблоні WooCommerce. */
.woocommerce-cart .return-to-shop,
.woocommerce-cart .wc-empty-cart-message { display: none; }

.ss-empty--cart { padding-block: clamp(1rem, 4vw, 3rem); }