/* Мапінг глобальних змінних Blocksy на токени Тріску. */
:root {
	--theme-palette-color-1: var(--t-terra);
	--theme-palette-color-2: var(--t-terra-press);
	--theme-palette-color-3: var(--t-ink-soft);
	--theme-palette-color-4: var(--t-ink);
	--theme-palette-color-5: var(--t-line-strong);
	--theme-palette-color-6: var(--t-kraft);
	--theme-palette-color-7: var(--t-paper);
	--theme-palette-color-8: var(--t-paper-raised);
	--theme-font-family: var(--t-font-sans);
	--theme-headings-color: var(--t-ink);
	--theme-text-color: var(--t-ink);
	--theme-link-initial-color: var(--t-ink);
	--theme-link-hover-color: var(--t-terra);
	--theme-button-border-radius: var(--t-radius-s);
	--theme-form-field-border-radius: var(--t-radius-s);
}

body.t-root { background: var(--t-paper); }

.ct-header [data-id="logo"] .site-title {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: 2rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Мобільна панель меню: тепле ink замість сіро-синього тла Blocksy (rgba(18,21,25,.98)),
   пункти серифом, як заголовки вітрини. Поточний пункт і наведення — крафт (теракота на ink
   дає лише ~3:1, нижче AA). */
/* [data-header] — щоб перебити специфічність global.css Blocksy ([data-header*="type-1"] #offcanvas .ct-panel-inner). */
[data-header] #offcanvas .ct-panel-inner {
	background: var(--t-ink);
	--theme-link-initial-color: var(--t-paper);
	--theme-link-hover-color: var(--t-kraft);
	--theme-link-active-color: var(--t-kraft);
}
#offcanvas .mobile-menu .ct-menu-link { font: 500 var(--t-text-lg)/1.2 var(--t-font-serif); padding-block: var(--t-space-3); }
#offcanvas .ct-toggle-close { color: var(--t-paper); }

.ct-header .site-title a { text-decoration: none; }
.ct-header .site-title a::after { content: "."; color: var(--t-terra); }
.ct-header .ct-menu-link { font-weight: 600; font-size: var(--t-text-sm); text-transform: none; text-decoration: none; letter-spacing: 0; }

[data-footer] .ct-footer, .ct-footer { background: var(--t-paper); border-top: var(--t-border); color: var(--t-ink-soft); font-size: var(--t-text-sm); }
.ct-footer .ct-footer-copyright { color: var(--t-ink-soft); }

h1, h2, h3, .entry-title, .page-title { font-family: var(--t-font-serif); font-weight: 500; letter-spacing: -0.01em; }

/* Кошик у шапці за .ds-cart специмена: іконка, «Кошик», лічильник у теракотовому квадраті */
#header [data-id="cart"] .ct-cart-item {
	display: inline-flex;
	align-items: center;
	gap: var(--t-space-2);
	text-decoration: none;
}
#header [data-id="cart"] .ct-icon-container { display: contents; }
#header [data-id="cart"] .ct-icon-container svg { order: 1; }
#header [data-id="cart"] .ct-label { order: 2; }
#header [data-id="cart"] .ct-dynamic-count-cart { order: 3; }
#header [data-id="cart"] .ct-amount { display: none; }
#header [data-id="cart"] .ct-label {
	font-family: var(--t-font-sans);
	font-weight: 600;
	font-size: var(--t-text-sm);
	color: var(--t-ink);
	text-transform: none;
	letter-spacing: 0;
}
#header [data-id="cart"] .ct-dynamic-count-cart {
	position: static;
	display: grid;
	place-items: center;
	min-width: 1.5rem;
	transform: none;
	height: 1.5rem;
	border-radius: var(--t-radius-s);
	background: var(--t-terra);
	color: var(--t-on-terra);
	font: 500 var(--t-text-xs) / 1 var(--t-font-mono);
}
#header [data-id="cart"] .ct-dynamic-count-cart[data-count="0"] { display: none; }

/* ── Футер «Тріску» (parts/footer.php): марка, три колонки посилань, примітка про демо ── */
.t-footer {
	padding-block: var(--t-space-8) var(--t-space-5);
}
.t-footer .ds-wrap {
	max-width: var(--t-container);
	margin-inline: auto;
	padding-inline: var(--t-gutter);
}
.t-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
	gap: var(--t-space-6) var(--t-space-5);
	padding-bottom: var(--t-space-7);
}
.t-footer__brand,
.t-footer__note {
	display: grid;
	align-content: start;
	gap: var(--t-space-3);
}
.t-footer p {
	margin: 0;
	max-width: 32ch;
	color: var(--t-ink-soft);
}
.t-footer__logo {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: var(--t-text-xl);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t-ink);
	text-decoration: none !important;
}
.t-footer__logo::after { content: "."; color: var(--t-terra); }
.t-footer__title {
	margin: 0 0 var(--t-space-3);
	font-family: var(--t-font-sans);
	font-weight: 600;
	font-size: var(--t-text-sm);
	letter-spacing: 0;
	color: var(--t-ink);
}
.t-footer ul {
	display: grid;
	gap: var(--t-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.t-footer ul a {
	color: var(--t-ink-soft);
	text-decoration: none;
}
.t-footer ul a:hover {
	color: var(--t-ink);
	text-decoration: underline;
	text-decoration-color: var(--t-line-strong);
}
.t-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--t-space-3) var(--t-space-5);
	padding-top: var(--t-space-5);
	border-top: var(--t-border);
}
.t-footer__bottom p { max-width: none; }
.t-footer__tagline { color: var(--t-ink-soft); }
@media (max-width: 64rem) {
	.t-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.t-footer__brand,
	.t-footer__note { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
	.t-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Ширина контейнера Blocksy = контейнер дизайн-системи (--t-container мінус поля):
   шапка, каталог і головна починаються з однієї лінії. ── */
.t-root { --theme-normal-container-max-width: calc(var(--t-container) - 2 * var(--t-gutter)); }

/* Шапка нижча: 120 → 80 px на десктопі (мобільна лишається 70). */
@media (min-width: 1000px) {
	#header [data-row*="middle"] { --height: 5rem; }
}
#header [data-id="menu"] { margin-inline-start: var(--t-space-6); }

/* Випадний кошик у шапці: власне тло й рамка замість прозорого (тексти лягали на сторінку). */
#header [data-id="cart"] .ct-cart-content {
	background: var(--t-paper-raised);
	border: var(--t-border);
	border-radius: var(--t-radius-s);
}

/* ── Заголовок розділу каталогу: компактний, ліворуч, з описом розділу замість порожньої смуги 250 px ── */
.t-root .hero-section[data-type="type-2"] { --min-height: 0; }
.t-root .hero-section[data-type="type-2"] > .entry-header {
	max-width: var(--theme-normal-container-max-width);
	width: calc(100% - 2 * var(--t-gutter));
	margin-inline: auto;
	padding-block: var(--t-space-6);
	text-align: start;
	display: grid;
	justify-items: start;
	align-items: start;
	justify-content: start; /* Blocksy ставить center для flex-колонки; у сітці це центрувало б трек */
	gap: var(--t-space-3);
}
.t-root .hero-section[data-type="type-2"] .page-title { margin: 0; font-size: var(--t-text-2xl); }
.t-root .hero-section[data-type="type-2"] .page-description { display: block; max-width: 44rem; margin: 0; color: var(--t-ink-soft); }
.t-root .hero-section[data-type="type-2"] .page-description p { margin: 0; }

/* Фото розділу праворуч у заголовку (functions.php, blocksy:hero:description:after). Назва за ним не дублюється: alt="". */
.t-root .hero-section[data-type="type-2"] > .entry-header:has(.trisk-cat-photo) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	column-gap: var(--t-space-7);
	align-content: center;
}
.trisk-cat-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.trisk-cat-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--t-radius-s); }
@media (max-width: 47.99rem) {
	.trisk-cat-photo { display: none; }
}
/* Назва й опис тримаються разом по центру висоти фото, а не розносяться по краях рядків. */
.t-root .entry-header:has(.trisk-cat-photo) .page-title { align-self: end; }
.t-root .entry-header:has(.trisk-cat-photo) .page-description { align-self: start; }