/* ==========================================================================
   Ананія — спільні компоненти.
   Кольори й шрифти — з theme.json (змінюйте там, не тут).
   Стилі конкретних секцій — у blocks/<назва>/style.css.
   ========================================================================== */

:root {
	--an-ivory: var(--wp--preset--color--ivory, #F6F3EC);
	--an-paper: var(--wp--preset--color--paper, #EDE7DA);
	--an-line: var(--wp--preset--color--line, #DDD5C4);
	--an-line-strong: var(--wp--preset--color--line-strong, #C9BFAA);
	--an-ink: var(--wp--preset--color--ink, #16140F);
	--an-muted: var(--wp--preset--color--muted, #5E574B);
	--an-gold: var(--wp--preset--color--gold, #7A5C22);
	--an-gold-light: var(--wp--preset--color--gold-light, #E3D3AE);
	--an-stone: var(--wp--preset--color--stone, #2E2921);
	--an-display: var(--wp--preset--font-family--display, Georgia, serif);
	--an-body: var(--wp--preset--font-family--body, system-ui, sans-serif);

	--an-gutter: clamp(20px, 5.5vw, 80px);
	--an-section: clamp(48px, 7vw, 96px);
	--an-header-h: 64px;
}
@media (min-width: 1024px) {
	:root { --an-header-h: 88px; }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; height: auto; display: block; }
body.an-lock { overflow: hidden; }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Каркас ---------- */

.an-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--an-gutter);
}
.an-section { padding-block: var(--an-section); }
.an-section--paper { background: var(--an-paper); }
.an-section--dark { background: var(--an-ink); color: var(--an-ivory); }
.an-section--line { border-top: 1px solid var(--an-line); }

.an-head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 16px 32px; margin-bottom: clamp(24px, 3.5vw, 40px);
}
.an-head__text { max-width: 760px; }

/* ---------- Типографіка ---------- */

.an-label {
	margin: 0 0 10px;
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--an-gold);
}
.an-section--dark .an-label { color: var(--an-gold-light); }

.an-title {
	margin: 0;
	font-family: var(--an-display); font-weight: 500;
	font-size: var(--wp--preset--font-size--h2, 2.75rem); line-height: 1.05;
}
.an-title--page { font-size: var(--wp--preset--font-size--h1, 4rem); line-height: 1; }
/* Довгі слова («Преображенського») на телефоні переносимо, а не обрізаємо. */
.an-title, .an-product__title, .an-hero__title, .an-card__title {
	overflow-wrap: break-word; hyphens: auto;
	hyphenate-limit-chars: 11 5 5;                                   /* лише довгі слова, не «хра-мів» */
	-webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
}

.an-lead {
	margin: 12px 0 0; max-width: 62ch;
	font-size: clamp(0.95rem, 1.2vw, 1.0625rem); line-height: 1.55; color: var(--an-muted);
}
.an-section--dark .an-lead { color: #CFC6B3; }

.an-breadcrumbs { font-size: 0.8125rem; color: var(--an-muted); margin-bottom: 16px; }
.an-breadcrumbs a { color: inherit; }

/* ---------- Кнопки й посилання ---------- */

.an-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px;
	border: 1px solid var(--an-ink); background: var(--an-ink); color: var(--an-ivory);
	font: 500 0.9375rem/1.2 var(--an-body); text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.an-btn:hover { background: var(--an-gold); border-color: var(--an-gold); color: #fff; }
.an-btn--outline { background: transparent; color: var(--an-ink); }
.an-btn--outline:hover { background: var(--an-ink); border-color: var(--an-ink); color: var(--an-ivory); }
.an-btn--light { background: var(--an-ivory); border-color: var(--an-ivory); color: var(--an-ink); }
.an-btn--light:hover { background: var(--an-gold-light); border-color: var(--an-gold-light); color: var(--an-ink); }
.an-btn--outline-light { background: transparent; border-color: var(--an-ivory); color: var(--an-ivory); }
.an-btn--outline-light:hover { background: var(--an-ivory); color: var(--an-ink); }
.an-btn--block { width: 100%; }

.an-link {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	color: var(--an-gold); font-weight: 500; text-decoration: none;
}
.an-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.an-section--dark .an-link { color: var(--an-gold-light); }

.an-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}

/* ---------- Медіа й заглушки ---------- */

.an-ratio-34, .an-ratio-32, .an-ratio-169 { position: relative; overflow: hidden; background: var(--an-stone); }
.an-ratio-34 { aspect-ratio: 3 / 4; }
.an-ratio-32 { aspect-ratio: 3 / 2; }
.an-ratio-169 { aspect-ratio: 16 / 9; }
.an-ratio-34 > img, .an-ratio-32 > img, .an-ratio-169 > img { width: 100%; height: 100%; object-fit: cover; }

.an-ph {
	position: absolute; inset: 0; display: flex; align-items: flex-end;
	padding: 12px 14px; background: var(--an-stone); color: #CFC6B3;
	font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}

.an-badge {
	position: absolute; top: 10px; left: 10px;
	padding: 4px 8px; background: var(--an-ivory); color: var(--an-ink);
	font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Картки ---------- */

.an-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.an-card__link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.an-card__media { margin-bottom: 8px; }
.an-card__media img { transition: transform .4s ease; }
.an-card__link:hover .an-card__media img { transform: scale(1.03); }
.an-card__title { margin: 0; font: 500 clamp(0.9375rem, 1.2vw, 1.0625rem)/1.3 var(--an-body); }
.an-card__link:hover .an-card__title { text-decoration: underline; text-underline-offset: 3px; }
.an-card__title--display { font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.1 var(--an-display); }
.an-card__tag { margin: 0; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--an-gold); }
.an-card__meta { margin: 0; font-size: 0.875rem; color: var(--an-muted); }
.an-card__price { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.an-card__cart {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	min-height: 44px; padding: 0; border: 0; background: none;
	color: var(--an-gold); font: 500 0.875rem var(--an-body); cursor: pointer;
}
.an-card__cart:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* Повідомлення «Додано до кошика» (assets/js/cart.js) */
.an-toast {
	position: fixed; z-index: 60; left: 50%; top: calc(var(--an-header-h) + 12px);
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
	width: min(calc(100% - 2 * var(--an-gutter)), 520px); padding: 14px 18px;
	background: var(--an-ink); color: var(--an-ivory); font-size: 0.9375rem;
	box-shadow: 0 8px 24px rgba(22, 20, 15, 0.2);
	opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.an-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.an-toast span { flex: 1 1 200px; }
.an-toast a { display: inline-flex; align-items: center; min-height: 44px; color: var(--an-gold-light); font-weight: 500; }

/* ---------- Сітки ---------- */

.an-grid { display: grid; gap: 28px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .an-grid { gap: 40px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .an-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.an-grid--projects { grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 768px) { .an-grid--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }

.an-empty {
	padding: 40px 24px; background: var(--an-paper); text-align: center; color: var(--an-muted);
}

/* ---------- Чипси (горизонтальний скрол на мобільному) ---------- */

.an-chips {
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	margin-inline: calc(var(--an-gutter) * -1); padding: 4px var(--an-gutter);
}
.an-chips::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .an-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.an-chip {
	flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
	border: 1px solid var(--an-line-strong); color: var(--an-ink); text-decoration: none; font-size: 0.875rem; white-space: nowrap;
}
.an-chip:hover { border-color: var(--an-ink); }
.an-chip[aria-current="page"] { background: var(--an-ink); border-color: var(--an-ink); color: var(--an-ivory); }

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

.an-pagination { margin-top: 56px; }
.an-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.an-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--an-line-strong); color: var(--an-ink); text-decoration: none;
}
.an-pagination .page-numbers.current { background: var(--an-ink); border-color: var(--an-ink); color: var(--an-ivory); }

/* ---------- Текстовий контент (звичайні сторінки) ---------- */

.an-flow > :not([class*="wp-block-ananiya"]):not(.alignfull) {
	max-width: calc(760px + var(--an-gutter) * 2);
	margin-inline: auto; padding-inline: var(--an-gutter);
}
.an-flow > p, .an-flow > ul, .an-flow > ol { font-size: 1.0625rem; line-height: 1.7; }
/* Текстові сторінки (напр. «Політика конфіденційності»): заголовки й списки у звичайних блоках. */
.an-flow > h2, .an-flow > h3 { font-family: var(--an-display); font-weight: 500; line-height: 1.15; }
.an-flow > h2 { margin-top: clamp(32px, 5vw, 48px); margin-bottom: 12px; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.an-flow > h3 { margin-top: 28px; margin-bottom: 8px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.an-flow > ul, .an-flow > ol { padding-left: calc(var(--an-gutter) + 1.25em); }
.an-flow > ul li + li, .an-flow > ol li + li { margin-top: 6px; }
.an-flow > :last-child:not([class*="wp-block-ananiya"]) { margin-bottom: var(--an-section); }
.an-page-head { padding-top: clamp(32px, 5vw, 64px); padding-bottom: 24px; }

/* ---------- Поля форм ---------- */

.an-input, .an-select {
	min-height: 48px; width: 100%; padding: 0 14px;
	border: 1px solid var(--an-line-strong); background: #fff; color: var(--an-ink);
	font: 400 1rem var(--an-body); border-radius: 0;
}

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

/* Банер згоди на cookie (inc/analytics.php) */
.an-consent {
	position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
	max-width: 720px; margin-inline: auto; padding: 16px 18px;
	background: var(--an-ivory); color: var(--an-ink); border: 1px solid var(--an-line-strong);
	box-shadow: 0 8px 28px rgba(22, 20, 15, 0.16); font-size: 0.9375rem; line-height: 1.5;
}
.an-consent[hidden] { display: none; }
.an-consent p { flex: 1 1 280px; margin: 0; }
.an-consent a { color: var(--an-gold); }
.an-consent__actions { display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
.an-consent__actions .an-btn { min-height: 44px; padding: 0 18px; }