/* ==========================================================================
   Components — every reusable piece, token-driven, all states wired
   ========================================================================== */

/* ---------- Buttons -------------------------------------------------------- */

.btn {
	--btn-bg: var(--ink);
	--btn-color: var(--white);
	--btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 48px;
	padding: 0 var(--space-l);
	border: 1px solid var(--btn-border);
	border-radius: var(--radius-full);
	background: var(--btn-bg);
	color: var(--btn-color);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); color: var(--btn-color); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-s); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }

.btn--primary { --btn-bg: var(--accent-ink); --btn-color: var(--white); }
.btn--primary:hover { --btn-bg: var(--accent-ink-hover); box-shadow: var(--shadow-accent); }

.btn--ink { --btn-bg: var(--ink); --btn-color: var(--white); }
.btn--ink:hover { --btn-bg: var(--ink-hover); }

.btn--outline {
	--btn-bg: transparent;
	--btn-color: var(--text);
	--btn-border: var(--border-strong);
}
.btn--outline:hover { --btn-border: var(--accent-text); --btn-color: var(--accent-text); box-shadow: none; }

.on-ink .btn--outline { --btn-color: var(--on-ink); --btn-border: var(--on-ink-28); }
.on-ink .btn--outline:hover { --btn-color: var(--accent-lift); --btn-border: var(--accent-lift); }
.on-ink .btn--ink { --btn-bg: var(--white); --btn-color: var(--ink); }
.on-ink .btn--ink:hover { --btn-bg: var(--on-ink-btn-hover); }

.btn--ghost { --btn-bg: transparent; --btn-color: var(--text); }
.btn--ghost:hover { --btn-bg: var(--surface); box-shadow: none; }

.btn--sm { min-height: 40px; padding-inline: var(--space-m); font-size: var(--step--1); }
.btn--lg { min-height: 56px; padding-inline: var(--space-xl); font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }
.btn--icon { min-width: 48px; padding-inline: var(--space-s); }

.btn .icon { width: 1.15em; height: 1.15em; flex: none; }
.btn--arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
.btn--arrow:hover .icon { transform: translateX(4px); }

.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px; height: 18px;
	border: 2px solid var(--on-ink-35);
	border-top-color: var(--white);
	border-radius: 50%;
	animation: pr-spin 700ms linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* Text link with an animated underline */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1.5px; }
.link-arrow .icon { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Badges --------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge--coa { background: var(--accent-soft); color: var(--accent-text-hover); }
.badge--stock { background: var(--success-soft); color: var(--success); }
.badge--out { background: var(--surface-2); color: var(--text-subtle); }
.badge--sale { background: var(--danger-soft); color: var(--danger); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.on-ink .badge { background: var(--on-ink-8); color: var(--on-ink); }
.on-ink .badge--coa { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Cards ---------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-l);
	background: var(--bg);
	border: var(--hairline);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-s);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}
.card h3 { margin-bottom: var(--space-2xs); }
.card p { color: var(--text-muted); }
.card--flat { box-shadow: none; background: var(--surface); border-color: transparent; }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--border-strong); }
.on-ink .card { background: var(--surface); border-color: var(--border); box-shadow: none; }

.card-icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: var(--space-m);
	border-radius: var(--radius-m);
	background: var(--accent-soft);
	color: var(--accent-text-hover);
}
.card-icon .icon { width: 22px; height: 22px; }
.on-ink .card-icon { background: var(--accent-soft); color: var(--accent-text); }

/* Feature / trust item without a card frame */
.feature { display: flex; gap: var(--space-s); align-items: flex-start; }
.feature .card-icon { margin-bottom: 0; flex: none; }
.feature h3 { font-size: var(--step-1); }
.feature p { font-size: var(--step--1); }

/* Category card */
.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 210px;
	padding: var(--space-l);
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--ink-2);
	color: var(--on-ink);
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 100% 0%, var(--veil-accent-lg) 0%, transparent 60%),
		var(--gradient-ink);
	transition: transform var(--dur-slow) var(--ease-out);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); color: var(--on-ink); }
.cat-card:hover::before { transform: scale(1.06); }
.cat-card h3 { color: var(--white); margin-bottom: 4px; font-size: var(--step-1); }
.cat-card__count { color: var(--on-ink-muted); font-size: var(--step--1); }
.cat-card__go {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: var(--space-s);
	color: var(--accent-lift);
	font-weight: 600; font-size: var(--step--1);
}
.cat-card__go .icon { transition: transform var(--dur-base) var(--ease-out); width: 1em; height: 1em; }
.cat-card:hover .cat-card__go .icon { transform: translateX(4px); }

/* ---------- Forms ---------------------------------------------------------- */

.field { display: block; margin-bottom: var(--space-m); }
.field > label, .field-label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text);
}
.field .required { color: var(--danger); }
.field-hint { margin-top: 6px; font-size: var(--step--1); color: var(--text-subtle); }
.field-error { margin-top: 6px; font-size: var(--step--1); color: var(--danger); font-weight: 500; }

.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
textarea, select {
	width: 100%;
	min-height: 48px;
	padding: 12px var(--space-s);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--bg);
	color: var(--text);
	font-size: var(--step-0);
	line-height: 1.4;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height: 150px; resize: vertical; }
select {
	appearance: none;
	padding-right: var(--space-xl); /* room for the chevron */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5a61' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-s) center;
	background-size: 18px;
	cursor: pointer;
}
.input:hover, input:hover, textarea:hover, select:hover { border-color: var(--text-subtle); }
.input:focus, input:focus, textarea:focus, select:focus {
	border-color: var(--accent-ink);
	box-shadow: 0 0 0 3px var(--accent-glow);
	outline: none;
}
::placeholder { color: var(--text-subtle); opacity: 1; }
.field.has-error .input, .field.has-error input, .field.has-error textarea { border-color: var(--danger); }

.checkbox, .radio { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--step--1); }
/* 24px so the box itself clears the minimum target size (WCAG 2.5.8); the
   label next to it is clickable too, but the box has to stand on its own. */
.checkbox input, .radio input,
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: 0; accent-color: var(--accent-ink); flex: none; }

.form-note { font-size: var(--step--1); color: var(--text-subtle); }

/* Inline newsletter / search row */
.input-row { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.input-row .input, .input-row input { flex: 1 1 220px; }

/* ---------- Quantity stepper ------------------------------------------------ */

.qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-full);
	overflow: hidden;
	background: var(--bg);
}
.qty button {
	width: 44px; min-height: 46px;
	border: 0; background: transparent;
	color: var(--text);
	font-size: var(--step-1); line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qty button:hover { background: var(--surface); color: var(--accent-text); }
.qty input {
	width: 52px; min-height: 46px;
	padding: 0; border: 0; border-inline: 1px solid var(--border);
	border-radius: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	-moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { box-shadow: none; }

/* ---------- Price ----------------------------------------------------------- */

.price {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2xs);
	font-family: var(--font-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	letter-spacing: -0.01em;
}
.price del { color: var(--text-subtle); font-weight: 400; text-decoration: line-through; }
.price ins { text-decoration: none; color: var(--danger); }
.price--lg { font-size: var(--step-2); }
.price__from {
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	color: var(--text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---------- Accordion -------------------------------------------------------- */

.accordion { border-top: var(--hairline); }
.accordion__item { border-bottom: var(--hairline); }
.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	width: 100%;
	padding: var(--space-m) 0;
	border: 0;
	background: none;
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--accent-text); }
.accordion__icon {
	position: relative;
	flex: none;
	width: 34px; height: 34px;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	transition:
		background-color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}
.accordion__icon::before, .accordion__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
	border-radius: var(--radius-xs);
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.accordion__icon::before { width: 13px; height: 1.5px; }
.accordion__icon::after { width: 1.5px; height: 13px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--white);
	transform: rotate(180deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; transform: scaleY(0); }
.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { max-width: var(--measure); padding-bottom: var(--space-m); color: var(--text-muted); }

/* ---------- Tabs -------------------------------------------------------------- */

.tabs__list {
	display: flex;
	gap: var(--space-l);
	margin: 0 0 var(--space-l);
	padding: 0 0 2px;
	list-style: none;
	border-bottom: var(--hairline);
	overflow-x: auto;
	scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list li { margin: 0; }
.tabs__tab {
	position: relative;
	padding: var(--space-s) 0;
	border: 0;
	background: none;
	color: var(--text-subtle);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.tabs__tab::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--accent-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel[hidden] { display: none; }

/* ---------- Tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
th, td { padding: var(--space-s); text-align: left; border-bottom: var(--hairline); vertical-align: middle; }
th {
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--surface);
}
tbody tr:hover { background: var(--surface); }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Notices, toasts, modals --------------------------------------------- */

.notice {
	display: flex;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	border-left: 3px solid var(--info);
	background: var(--info-soft);
	color: var(--text);
	font-size: var(--step--1);
}
.notice--success { border-color: var(--success); background: var(--success-soft); }
.notice--warning { border-color: var(--warning); background: var(--warning-soft); }
.notice--danger  { border-color: var(--danger);  background: var(--danger-soft); }
.notice .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }

.toast-region {
	position: fixed;
	right: var(--space-m);
	bottom: var(--space-m);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	pointer-events: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	max-width: min(360px, calc(100vw - var(--space-l)));
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	background: var(--ink);
	color: var(--white);
	box-shadow: var(--shadow-l);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	animation: pr-toast-in var(--dur-base) var(--ease-spring) forwards;
}
.toast .icon { color: var(--accent-lift); width: 20px; height: 20px; flex: none; }
.toast.is-out { animation: pr-toast-out var(--dur-base) var(--ease-out) forwards; }
@keyframes pr-toast-in { to { opacity: 1; transform: none; } }
@keyframes pr-toast-out { to { opacity: 0; transform: translateY(8px); } }

.modal[hidden] { display: none; }
.modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: grid;
	place-items: center;
	padding: var(--space-m);
	background: var(--scrim-strong);
	backdrop-filter: blur(3px);
	animation: pr-fade var(--dur-base) var(--ease-out);
}
.modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--space-xl);
	background: var(--bg);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-l);
	animation: pr-pop var(--dur-base) var(--ease-spring);
}
.modal__close {
	position: absolute; top: var(--space-m); right: var(--space-m);
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--surface); color: var(--text);
	cursor: pointer;
}
@keyframes pr-fade { from { opacity: 0; } }
@keyframes pr-pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ---------- Breadcrumb, pagination ---------------------------------------------- */

.breadcrumb {
	display: flex; flex-wrap: wrap; gap: var(--space-2xs);
	align-items: center;
	font-size: var(--step--1);
	color: var(--text-subtle);
}
.breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--text-muted);
	text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .sep { opacity: 0.5; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin-top: var(--space-2xl); }
.pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 var(--space-xs);
	border: var(--hairline);
	border-radius: var(--radius-m);
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pagination .page-numbers:hover { border-color: var(--accent-text); color: var(--accent-text); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Steps / process ------------------------------------------------------ */

.steps { counter-reset: step; }
.step { position: relative; padding-left: calc(var(--space-xl) + var(--space-m)); }
.step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0; top: 0;
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent-text);
	background: var(--bg);
}
.on-ink .step::before { background: transparent; }

/* ---------- Stat ------------------------------------------------------------------ */

.stat__value {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.stat__label { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Divider ---------------------------------------------------------------- */

.rule-mark { display: flex; align-items: center; gap: var(--space-s); color: var(--border-strong); }
.rule-mark::before, .rule-mark::after { content: ""; height: 1px; flex: 1; background: currentColor; }

/* ---------- Empty state ------------------------------------------------------------ */

.empty-state {
	display: grid;
	justify-items: center;
	gap: var(--space-s);
	padding: var(--space-3xl) var(--space-m);
	text-align: center;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-l);
	background: var(--surface);
}
.empty-state .card-icon { margin: 0; width: 56px; height: 56px; }
.empty-state p { max-width: 42ch; color: var(--text-muted); }