/*
 * Тріск — базові стилі й компоненти.
 * Залежить від tokens.css. Класи з префіксом .t- не конфліктують із Blocksy/Woo.
 */

/* ── Основа ─────────────────────────────────────────────────── */
.t-root {
	background: var(--t-paper);
	color: var(--t-ink);
	font-family: var(--t-font-sans);
	font-size: var(--t-text-base);
	line-height: var(--t-leading-body);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	accent-color: var(--t-terra);
	caret-color: var(--t-terra);
	scrollbar-color: var(--t-kraft-deep) var(--t-paper);
}

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

.t-root ::selection {
	background: var(--t-ink);
	color: var(--t-paper);
}

.t-root :focus-visible {
	outline: 2px solid var(--t-focus);
	outline-offset: 3px;
}

.t-root a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--t-line-strong);
	transition: text-decoration-color var(--t-dur) var(--t-ease-out);
}

.t-root a:hover {
	text-decoration-color: var(--t-terra);
}

/* ── Типографіка ────────────────────────────────────────────── */
.t-display {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: var(--t-display);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: var(--t-track-caps);
	text-wrap: balance;
	margin: 0;
}

.t-h1,
.t-h2,
.t-h3 {
	font-family: var(--t-font-serif);
	font-weight: 500;
	line-height: var(--t-leading-snug);
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0;
}

.t-h1 { font-size: var(--t-text-2xl); line-height: 1.05; }
.t-h2 { font-size: var(--t-text-xl); }
.t-h3 { font-size: var(--t-text-lg); }

.t-section-title {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: var(--t-text-2xl);
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: var(--t-track-caps);
	margin: 0;
}

.t-lead {
	font-size: var(--t-text-md);
	color: var(--t-ink-soft);
	max-width: var(--t-measure);
}

.t-mono {
	font-family: var(--t-font-mono);
	font-size: var(--t-text-xs);
	letter-spacing: var(--t-track-mono);
	text-transform: uppercase;
	line-height: 1.4;
}

.t-muted { color: var(--t-ink-soft); }

/* ── Іконки ─────────────────────────────────────────────────── */
.t-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Кнопки ─────────────────────────────────────────────────── */
.t-btn {
	--_bg: var(--t-terra);
	--_fg: var(--t-on-terra);
	--_bd: var(--t-terra);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--t-space-2);
	min-height: 3rem;
	padding: 0 var(--t-space-5);
	border: 1.5px solid var(--_bd);
	border-radius: var(--t-radius-s);
	background: var(--_bg);
	color: var(--_fg);
	font: 700 var(--t-text-sm) / 1 var(--t-font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--t-dur) var(--t-ease-out),
		color var(--t-dur) var(--t-ease-out),
		border-color var(--t-dur) var(--t-ease-out),
		transform var(--t-dur-fast) var(--t-ease-out);
}

.t-btn:hover { --_bg: var(--t-terra-press); --_bd: var(--t-terra-press); }
.t-btn:active { transform: translateY(1px); }

.t-btn--outline {
	--_bg: transparent;
	--_fg: var(--t-ink);
	--_bd: var(--t-ink);
}

.t-btn--outline:hover { --_bg: var(--t-ink); --_fg: var(--t-paper); --_bd: var(--t-ink); }

.t-btn--on-dark {
	--_bg: var(--t-paper);
	--_fg: var(--t-ink);
	--_bd: var(--t-paper);
}

.t-btn--on-dark:hover { --_bg: var(--t-kraft); --_bd: var(--t-kraft); }

.t-btn--block { width: 100%; }
.t-btn--sm { min-height: 2.5rem; padding: 0 var(--t-space-4); font-size: var(--t-text-xs); }

.t-btn:disabled,
.t-btn[aria-disabled="true"] {
	--_bg: var(--t-roast-ghost);
	--_fg: var(--t-ink-soft);
	--_bd: transparent;
	cursor: not-allowed;
	transform: none;
}

.t-btn[aria-busy="true"] { cursor: progress; }

.t-btn[aria-busy="true"] .t-icon {
	animation: t-spin 0.9s linear infinite;
}

@keyframes t-spin { to { transform: rotate(360deg); } }

.t-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--t-space-2);
	font: 700 var(--t-text-sm) / 1 var(--t-font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--t-terra) !important;
}

.t-link-arrow .t-icon { transition: transform var(--t-dur) var(--t-ease-out); }
.t-link-arrow:hover .t-icon { transform: translateX(4px); }

/* ── Теги (ноти смаку, обробка) ─────────────────────────────── */
.t-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-tag {
	display: inline-block;
	padding: 0.3em 0.6em 0.25em;
	border: var(--t-border);
	border-radius: var(--t-radius-s);
	font-family: var(--t-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--t-track-mono);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--t-ink-soft);
}

.t-tag--solid {
	background: var(--t-ink);
	border-color: var(--t-ink);
	color: var(--t-paper);
}

/* ── Шкала обсмаження: 6 фіксованих комірок, непідсвічені лишаються видимими ── */
.t-roast {
	display: grid;
	gap: var(--t-space-1);
}

.t-roast__cells {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 3px;
}

.t-roast__cell {
	height: 0.5rem;
	border-radius: 1px;
	background: var(--t-roast-ghost);
}

.t-roast[data-level] .t-roast__cell:nth-child(1) { --_c: var(--t-roast-1); }
.t-roast[data-level] .t-roast__cell:nth-child(2) { --_c: var(--t-roast-2); }
.t-roast[data-level] .t-roast__cell:nth-child(3) { --_c: var(--t-roast-3); }
.t-roast[data-level] .t-roast__cell:nth-child(4) { --_c: var(--t-roast-4); }
.t-roast[data-level] .t-roast__cell:nth-child(5) { --_c: var(--t-roast-5); }
.t-roast[data-level] .t-roast__cell:nth-child(6) { --_c: var(--t-roast-6); }

.t-roast[data-level="1"] .t-roast__cell:nth-child(-n + 1),
.t-roast[data-level="2"] .t-roast__cell:nth-child(-n + 2),
.t-roast[data-level="3"] .t-roast__cell:nth-child(-n + 3),
.t-roast[data-level="4"] .t-roast__cell:nth-child(-n + 4),
.t-roast[data-level="5"] .t-roast__cell:nth-child(-n + 5),
.t-roast[data-level="6"] .t-roast__cell:nth-child(-n + 6) {
	background: var(--_c);
}

.t-roast__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--t-space-3);
	color: var(--t-ink-soft);
}

.t-roast--lg .t-roast__cell { height: 0.875rem; }

/* ── Характеристики (dl): мітка — текст, значення — вимір ────── */
.t-specs {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0;
	border-top: 1.5px solid var(--t-ink);
}

.t-specs dt { padding-right: var(--t-space-5); }

.t-specs dt,
.t-specs dd {
	padding-block: var(--t-space-2);
	border-bottom: var(--t-border);
}

.t-specs dt { color: var(--t-ink-soft); font-size: var(--t-text-sm); }

.t-specs dd {
	margin: 0;
	font-family: var(--t-font-mono);
	font-size: var(--t-text-xs);
	letter-spacing: var(--t-track-mono);
	text-transform: uppercase;
	align-self: center;
}

/* ── Пакет-ілюстрація (заглушка до реальних фото) ────────────── */
.t-plate {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--t-kraft);
	border-radius: var(--t-radius-s);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.t-plate img,
.t-plate svg.t-bag {
	width: 62%;
	height: auto;
	filter: drop-shadow(0 18px 18px rgb(36 23 15 / 0.22));
	transition: transform var(--t-dur-slow) var(--t-ease-out);
}

.t-plate__note {
	position: absolute;
	left: var(--t-space-3);
	right: var(--t-space-3);
	bottom: var(--t-space-3);
	color: var(--t-ink-soft);
	font-size: var(--t-text-xs);
	text-align: center;
}

.t-plate__badge {
	position: absolute;
	top: var(--t-space-3);
	left: var(--t-space-3);
}

/* ── Картка товару в каталозі ───────────────────────────────── */
.t-root .t-card {
	text-decoration: none;
}

.t-card {
	display: grid;
	min-width: 0;
	gap: var(--t-space-3);
	align-content: start;
	color: inherit;
	text-decoration: none;
}

.t-card:hover .t-plate svg.t-bag,
.t-card:hover .t-plate img { transform: translateY(-6px) rotate(-1.5deg); }

.t-card__origin { color: var(--t-ink-soft); }

.t-card__name {
	font-family: var(--t-font-serif);
	font-weight: 500;
	font-size: var(--t-text-lg);
	line-height: var(--t-leading-snug);
	margin: 0;
}

@media (max-width: 30rem) {
	.t-card {
		grid-template-columns: 7rem minmax(0, 1fr);
		column-gap: var(--t-space-4);
		row-gap: var(--t-space-2);
	}

	.t-card > .t-plate {
		grid-row: 1 / span 5;
		align-self: start;
	}

	.t-card > .t-plate .t-plate__badge { display: none; }
}

.t-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-space-3);
	padding-top: var(--t-space-3);
	border-top: var(--t-border);
}

/* ── Ціна: цифри у фіксованих позиціях, без стрибків ─────────── */
.t-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	white-space: nowrap;
}

.t-price__from { font-size: var(--t-text-sm); color: var(--t-ink-soft); }

.t-price__value {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: var(--t-text-xl);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.t-price__unit {
	font-family: var(--t-font-mono);
	font-size: var(--t-text-xs);
	letter-spacing: var(--t-track-mono);
	color: var(--t-ink-soft);
}

.t-price--lg .t-price__value { font-size: var(--t-text-2xl); }

.t-price__value[data-swap] { animation: t-swap var(--t-dur) var(--t-ease-out); }

@keyframes t-swap {
	from { opacity: 0.2; filter: blur(3px); }
	to { opacity: 1; filter: blur(0); }
}

/* ── Вибір варіації: плитки (помел) і сегменти (вага) ───────── */
.t-choice {
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--t-space-2);
	min-width: 0;
}

.t-choice legend {
	padding: 0;
	margin-bottom: var(--t-space-2);
	font-size: var(--t-text-sm);
	font-weight: 600;
}

.t-choice legend output { font-weight: 400; color: var(--t-ink-soft); }

.t-choice__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: var(--t-space-2);
}

.t-opt { position: relative; }

.t-opt input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.t-opt__face {
	display: grid;
	justify-items: center;
	gap: var(--t-space-1);
	padding: var(--t-space-3) var(--t-space-2);
	border: var(--t-border);
	border-radius: var(--t-radius-s);
	background: var(--t-paper-raised);
	text-align: center;
	font-size: var(--t-text-sm);
	font-weight: 600;
	transition:
		border-color var(--t-dur) var(--t-ease-out),
		background-color var(--t-dur) var(--t-ease-out),
		color var(--t-dur) var(--t-ease-out);
}

.t-opt__face .t-icon { width: 2rem; height: 2rem; stroke-width: 1.25; }

.t-opt__sub {
	font-family: var(--t-font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: var(--t-track-mono);
	text-transform: uppercase;
	color: var(--t-ink-soft);
}

.t-opt input:hover + .t-opt__face { border-color: var(--t-line-strong); }

.t-opt input:checked + .t-opt__face {
	border: var(--t-border-strong);
	background: var(--t-ink);
	color: var(--t-paper);
}

.t-opt input:checked + .t-opt__face .t-opt__sub { color: var(--t-kraft); }

.t-opt input:focus-visible + .t-opt__face {
	outline: 2px solid var(--t-focus);
	outline-offset: 3px;
}

.t-opt input:disabled { cursor: not-allowed; }

.t-opt input:disabled + .t-opt__face {
	background: transparent;
	color: var(--t-ink-soft);
	border-style: dashed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Вага — компактні сегменти */
.t-choice--segments .t-choice__row { grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); }

.t-choice--segments .t-opt__face {
	padding: var(--t-space-3) var(--t-space-2);
	font-family: var(--t-font-mono);
	font-size: var(--t-text-sm);
	font-weight: 400;
	letter-spacing: var(--t-track-mono);
}

/* ── Кількість ──────────────────────────────────────────────── */
.t-qty {
	display: inline-grid;
	grid-template-columns: 2.75rem 3rem 2.75rem;
	height: 3rem;
	border: var(--t-border-strong);
	border-radius: var(--t-radius-s);
}

.t-qty button {
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--t-ink);
	cursor: pointer;
}

.t-qty button:hover { background: var(--t-roast-ghost); }

.t-qty input {
	width: 100%;
	border: 0;
	border-inline: var(--t-border);
	background: transparent;
	text-align: center;
	font: 400 var(--t-text-sm) var(--t-font-mono);
	-moz-appearance: textfield;
}

.t-qty input::-webkit-inner-spin-button,
.t-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Шлях зерна: одна лінія з датованими зупинками ───────────── */
.t-journey {
	--_dot: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	position: relative;
}

.t-journey::before {
	content: "";
	position: absolute;
	top: calc(var(--_dot) / 2 - 0.75px);
	left: 0;
	right: 0;
	border-top: 1.5px solid var(--t-ink);
}

.t-journey li {
	position: relative;
	display: grid;
	gap: var(--t-space-1);
	padding-top: calc(var(--_dot) + var(--t-space-3));
	padding-right: var(--t-space-3);
}

.t-journey li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--_dot);
	height: var(--_dot);
	border-radius: 50%;
	background: var(--t-ink);
	box-shadow: 0 0 0 4px var(--_ground, var(--t-paper));
}

.t-journey li[data-state="future"]::before {
	background: var(--_ground, var(--t-paper));
	border: 1.5px solid var(--t-ink);
}

.t-journey li[data-state="now"]::before {
	background: var(--t-terra);
	width: calc(var(--_dot) + 4px);
	height: calc(var(--_dot) + 4px);
	top: -2px;
	left: -2px;
}

.t-journey__label { font-weight: 600; font-size: var(--t-text-sm); }
.t-journey__date { color: var(--t-ink-soft); }

@media (max-width: 40rem) {
	.t-journey {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--t-space-4);
	}

	.t-journey::before {
		top: 0;
		bottom: 0;
		left: calc(var(--_dot) / 2 - 0.75px);
		right: auto;
		border-top: 0;
		border-left: 1.5px solid var(--t-ink);
	}

	.t-journey li {
		padding-top: 0;
		padding-left: calc(var(--_dot) + var(--t-space-4));
	}
}

/* ── Процес обсмаження: етапи, з'єднані лінією, з вимірами ──── */
.t-process {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	counter-reset: none;
}

.t-process li {
	position: relative;
	display: grid;
	gap: var(--t-space-3);
	align-content: start;
	padding: var(--t-space-5) var(--t-space-5) 0 0;
	border-top: 1.5px solid currentColor;
}

.t-process li::after {
	content: "";
	position: absolute;
	top: -0.45rem;
	right: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.t-process li:last-child::after { display: none; }

.t-process__stage {
	font-family: var(--t-font-display);
	font-weight: 800;
	font-size: var(--t-text-xl);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--t-track-caps);
}

.t-process__readout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--t-space-1) var(--t-space-3);
	margin: 0;
}

.t-process__readout dt { font-size: var(--t-text-sm); opacity: 0.8; }

.t-process__readout dd {
	margin: 0;
	font-family: var(--t-font-mono);
	font-size: var(--t-text-xs);
	letter-spacing: var(--t-track-mono);
	text-transform: uppercase;
	align-self: center;
}

.t-process p { margin: 0; font-size: var(--t-text-sm); max-width: 32ch; }

@media (max-width: 56rem) {
	.t-process { grid-template-columns: 1fr; gap: var(--t-space-6); }
	.t-process li { padding-right: 0; }
	.t-process li::after { display: none; }
}

/* ── Поля форм (чекаут) ─────────────────────────────────────── */
.t-field {
	display: grid;
	gap: var(--t-space-1);
}

.t-field label { font-size: var(--t-text-sm); font-weight: 600; }
.t-field label .t-req { color: var(--t-terra); }

.t-input,
.t-select {
	width: 100%;
	min-height: 3rem;
	padding: 0 var(--t-space-4);
	border: 1px solid var(--t-line-strong);
	border-radius: var(--t-radius-s);
	background: var(--t-paper-raised);
	color: var(--t-ink);
	font: 400 var(--t-text-base) var(--t-font-sans);
	transition: border-color var(--t-dur) var(--t-ease-out), box-shadow var(--t-dur) var(--t-ease-out);
}

.t-input::placeholder { color: var(--t-ink-soft); opacity: 1; }
.t-input:hover, .t-select:hover { border-color: var(--t-ink); }

.t-input:focus-visible,
.t-select:focus-visible {
	outline: none;
	border-color: var(--t-ink);
	box-shadow: 0 0 0 3px rgb(168 67 31 / 0.28);
}

.t-select {
	appearance: none;
	padding-right: var(--t-space-7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2324170F' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--t-space-4) center;
}

.t-field[data-invalid] .t-input,
.t-field[data-invalid] .t-select { border-color: var(--t-error); }

.t-field__hint { font-size: var(--t-text-sm); color: var(--t-ink-soft); }
.t-field[data-invalid] .t-field__hint { color: var(--t-error); }

/* ── Повідомлення Woo ───────────────────────────────────────── */
.t-notice {
	display: flex;
	gap: var(--t-space-3);
	align-items: flex-start;
	padding: var(--t-space-4) var(--t-space-5);
	border-radius: var(--t-radius-s);
	background: var(--t-ok-bg);
	color: var(--t-ok);
	font-size: var(--t-text-sm);
}

.t-notice p { margin: 0; color: var(--t-ink); }
.t-notice--error { background: var(--t-error-bg); color: var(--t-error); }
.t-notice--info { background: var(--t-warn-bg); color: var(--t-warn); }
.t-notice .t-icon { margin-top: 0.1em; }

/* ── Смуга «демо» ───────────────────────────────────────────── */
.t-demo-bar {
	background: var(--t-ink);
	color: var(--t-kraft);
	font-size: var(--t-text-sm);
	text-align: center;
	padding: var(--t-space-2) var(--t-gutter);
}

/* ── Секції-матеріали ───────────────────────────────────────── */
.t-band-kraft { background: var(--t-kraft); --_ground: var(--t-kraft); }
.t-band-ink { background: var(--t-ink); color: var(--t-paper); --_ground: var(--t-ink); }
.t-band-ink .t-muted,
.t-band-ink .t-lead { color: var(--t-kraft); }