/**
 * silart-theme — catalog templates.
 *
 * Scoped под .silart-* class names, Kadence palette vars с fallback.
 * Mobile-first; @media (min-width: 768px) для tablet+. Grid + flex.
 */

/* === Design tokens (Figma "SILART 1 draft", 2026-05-26) ===
 *
 * Non-color tokens live on :root. The palette-mapped COLOR tokens live on `body`, NOT :root —
 * because Kadence's dark mode (color-switch) redefines --global-paletteN on `body.color-switch-dark`,
 * and a :root-scoped token would resolve the palette at :root (always the LIGHT values) and never
 * see the body-level dark overrides. Defining them on `body` makes --silart-surface/text/bg follow
 * the active Kadence palette automatically in both light and dark.
 *
 * Light-theme literals (text-strong / muted / border / accent) are overridden for dark under
 * `body.color-switch-dark` below (Kadence has no palette slot that matches them, or AA forces a
 * different value per mode). Contrast: light secondary text #5c6573 (≥4.82:1); dark values below
 * are AA-checked on the dark surfaces (#16202b / #0f1720).
 */
:root {
	--silart-radius: 10px;
	--silart-radius-sm: 5px;
	--silart-gap: 32px;
	--silart-font: "Open Sans", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
	--silart-font-subtitle: "Roboto", system-ui, sans-serif;
}

body {
	/* Palette-mapped — resolve the Kadence palette at body scope, so they switch with color-switch. */
	--silart-bg: var(--global-palette9, #faf9f6);
	--silart-surface: var(--global-palette8, #f4f1ec);
	--silart-surface-alt: var(--global-palette7, #ece8e1);
	--silart-text: var(--global-palette3, #2d3748);
	--silart-accent: var(--global-palette2, #34536e);
	/* Light-theme literals. */
	--silart-text-strong: #1b2535;
	--silart-text-muted: #5c6573;
	--silart-border: #969ca8;
}

/* Dark theme (Kadence color-switch): surfaces/bg/body-text already follow the dark palette via the
 * body block above; here we adapt the literal tokens. AA-verified on the dark surface #16202b. */
body.color-switch-dark {
	--silart-text-strong: #f1f3f5; /* headings / values — near-white (≈14:1 on #16202b) */
	--silart-text-muted: #9aa3b0;  /* labels / breadcrumb — lighter muted (≈6.5:1) */
	--silart-border: rgb(255 255 255 / 14%); /* subtle hairline on dark */
	--silart-accent: #8fb3d9;      /* links / hover — lighter blue (≈7.6:1) */
}

/* === Series archive layout — remove products sidebar, content full-width ===
 *
 * Guaranteed visual layer of the "no sidebar on series" mechanism (ADR 0004); pairs with the
 * server-side shortcode suppression in inc/catalog-layout.php. Body class `catalog-show-series`
 * is added in inc/catalog-query.php only on leaf-term (series) archives — category archives keep
 * the sidebar untouched.
 *
 * Kadence uniqueIDs below are from Element 974 (verified ШАГ 0, 2026-05-26):
 *   row wrap "Контейнер контента" (right-golden 24/76): kb-row-layout-id974_8b6e43-21
 *   sidebar column "Боковая панель":               kadence-column974_0816db-7e
 *   content column "Контент":                       kadence-column974_809739-86
 * If Element 974 is rebuilt these must be re-synced (see docs/decisions/0004-series-no-sidebar.md).
 */
.catalog-show-series .kadence-column974_0816db-7e {
	display: none;
}

/* A display:none grid item is unplaced, but the container's tracks stay 24%/76%, so the content
 * column would fall into the 24% track. Override the row tracks to a single full-width column. */
.catalog-show-series .kb-row-layout-id974_8b6e43-21 > .kt-row-column-wrap {
	grid-template-columns: 1fr !important;
}

.catalog-show-series .kadence-column974_809739-86 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}

/* === Tighten top spacing on catalog pages (Figma: breadcrumb sits close to the header) ===
 *
 * Kadence's `content-vertical-padding-show` adds 80px top/bottom margin on .content-area, and the
 * product element's breadcrumb row carries 60px top/bottom padding — together a ~258px dead gap
 * above the card (the "дыра вверху"). Scope strictly to catalog contexts so global pages keep
 * Kadence defaults (header/footer out of scope). Specificity beats Kadence's generated rules
 * without !important. */
body.single-product .content-area,
body.catalog-show-series .content-area,
body.catalog-show-categories .content-area {
	margin-top: 2rem;
	margin-bottom: 3rem;
}

/* Hide Kadence/RankMath's breadcrumb row (first row of single-product content): it shows only
 * "Главная" for the product CPT and carries 60px padding. The card renders its own correct
 * category-trail breadcrumb instead (silart_product_breadcrumb_html). */
body.single-product .entry-content > .kb-row-layout-wrap:first-child {
	display: none;
}

/* === Series page (Figma: cream card, Open Sans, label-style table) === */

.silart-series {
	max-width: 1263px;
	margin: 0 auto;
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
	background: var(--silart-surface);
	border-radius: var(--silart-radius);
	font-family: var(--silart-font);
	color: var(--silart-text);
}

.silart-series__header {
	margin-bottom: 2rem;
}

.silart-series__title {
	font-family: var(--silart-font);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.22;
	color: var(--silart-text);
	margin: 0;
}

.silart-series__title-extra {
	font-family: var(--silart-font);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.23;
	color: var(--silart-text);
	margin: 0;
}

.silart-series__subtitle {
	font-family: var(--silart-font-subtitle);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--silart-text-muted);
	margin: 0.5rem 0 0;
}

.silart-series-empty-chars {
	background: #fff8e1;
	border: 1px solid #f0c36d;
	border-radius: var(--silart-radius-sm);
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	font-size: 0.9rem;
}

.silart-series-empty-chars a {
	color: #b45f06;
	font-weight: 600;
}

/* Dark-theme variant of the admin-only «chars not configured» notice (editors using dark mode). */
body.color-switch-dark .silart-series-empty-chars {
	background: rgb(240 195 80 / 10%);
	border-color: rgb(240 195 80 / 32%);
	color: var(--silart-text);
}

body.color-switch-dark .silart-series-empty-chars a {
	color: #f0c060;
}

.silart-series-empty-products,
.silart-series-no-matches {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--silart-text-muted);
	font-style: italic;
}

/* === Filters === */

.silart-series__filters-block {
	margin: 0 0 1.5rem;
}

.silart-series__filters-heading {
	font-family: var(--silart-font);
	font-size: 1rem;
	font-weight: 600;
	color: var(--silart-text);
	margin: 0 0 0.75rem;
}

.silart-series-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 768px) {
	/* Up to 3 filters per row (Figma); 5 → 3 + 2. Tracks are content-sized (`auto`) so a long
	   placeholder like «Габаритные размеры (ШВГ) без DIN-клипа, мм» gets the width it needs while a
	   short one like «Производительность» stays narrow — no clipped labels (client feedback
	   2026-06-01). data-count is emitted by the shortcode (silart_render_series_filters). */
	.silart-series-filters {
		grid-template-columns: repeat(3, auto);
	}

	/* Balance the off-grid counts so no row is sparse (1) or leaves a stretched orphan (4). */
	.silart-series-filters[data-count="1"] {
		grid-template-columns: 1fr;
	}

	.silart-series-filters[data-count="2"],
	.silart-series-filters[data-count="4"] {
		grid-template-columns: repeat(2, auto);
	}
}

/* Field name lives inside the <select> as its placeholder (Figma) — no separate label above. */
.silart-series-filter {
	display: flex;
}

.silart-series-filter__select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--silart-border);
	border-radius: var(--silart-radius-sm);
	background: var(--silart-bg);
	color: var(--silart-text);
	font-family: var(--silart-font);
	font-size: 0.9375rem;
	min-height: 2.75rem;
}

.silart-series-filter__select:focus-visible {
	border-color: var(--silart-text);
	outline: 2px solid var(--silart-text);
	outline-offset: -1px;
}

/* === Table — horizontal scroll wrapper for narrow viewports === */

.silart-series-table-wrap {
	overflow-x: auto;
}

.silart-series-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--silart-font);
	font-size: 0.9375rem;
}

.silart-series-table__th,
.silart-series-table__td {
	padding: 0.75rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--silart-border);
	vertical-align: top;
}

.silart-series-table__th {
	color: var(--silart-text-muted);
	font-weight: 400;
	font-size: 0.9375rem;
	min-width: 6rem;
	word-break: normal;
	hyphens: manual;
}

/* Sortable column headers — series-filter.js wraps each <th> label in a button and adds the
   --sortable class. Without JS the header stays plain text and the table keeps its server-rendered
   natural order by Model. The cell padding moves onto the button so the whole header is one
   ≥44px tap target (WCAG 2.5.5). */
.silart-series-table__th--sortable {
	padding: 0;
}

.silart-series-table__sort {
	display: flex;
	align-items: center;
	gap: 0.4em;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	user-select: none;
	transition: color 0.15s ease;
}

.silart-series-table__sort:hover {
	color: var(--silart-text);
}

.silart-series-table__sort:focus-visible {
	outline: 2px solid var(--silart-text);
	outline-offset: -2px;
}

/* Direction indicator — a CSS triangle (font-independent); faint until the column is the active
   sort, then solid. The descending state flips it (transition is gated on reduced-motion below). */
.silart-series-table__sort::after {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-right: 0.3em solid transparent;
	border-bottom: 0.4em solid currentcolor;
	border-left: 0.3em solid transparent;
	opacity: 0.5;
}

.silart-series-table__th[aria-sort="ascending"] .silart-series-table__sort::after {
	opacity: 1;
}

.silart-series-table__th[aria-sort="descending"] .silart-series-table__sort::after {
	opacity: 1;
	transform: rotate(180deg);
}

/* Dark surfaces wash out the faint inactive indicator — lift it (active stays opaque via the
   higher-specificity aria-sort rules above). */
body.color-switch-dark .silart-series-table__sort::after {
	opacity: 0.65;
}

/* Lightest motion: ease the indicator between sort states — a soft fade in/out and a flip on
   asc↔desc. Gated on prefers-reduced-motion so opted-out users get instant state changes. */
@media (prefers-reduced-motion: no-preference) {
	.silart-series-table__sort::after {
		transition: opacity 0.15s ease, transform 0.15s ease;
	}
}

/* Visually-hidden live region announcing the active sort to screen readers. */
.silart-series-sort-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Rows past the initial page are hidden before series-filter.js paginates, to avoid a flash of
   all rows. <noscript> in the template re-shows them when JS is off (no-JS contract), and the
   script strips this class on init so it then controls visibility via the `hidden` attribute. */
.silart-series-table__row--inithide {
	display: none;
}

.silart-series-table__row:hover {
	background: rgb(0 0 0 / 3%);
}

/* On dark surfaces a black-alpha hover is invisible — use a light-alpha highlight instead. */
body.color-switch-dark .silart-series-table__row:hover {
	background: rgb(255 255 255 / 5%);
}

.silart-series-table__td {
	color: var(--silart-text);
}

.silart-series-table__td--name {
	font-weight: 600;
}

.silart-series-table__td--name a {
	color: var(--silart-text);
	text-decoration: none;
}

.silart-series-table__td--name a:hover {
	color: var(--silart-accent);
	text-decoration: underline;
}

/* «Ещё N моделей» pagination trigger — shown by series-filter.js when the filtered set exceeds the page limit. */
.silart-series__more {
	display: block;
	margin: 1.25rem auto 0;
	padding: 0.6875rem 1.5rem;
	border: 1px solid var(--silart-border);
	border-radius: var(--silart-radius-sm);
	background: var(--silart-bg);
	color: var(--silart-text);
	font-family: var(--silart-font);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.silart-series__more:hover {
	border-color: var(--silart-text);
	color: var(--silart-accent);
}

.silart-series__more:focus-visible {
	outline: 2px solid var(--silart-text);
	outline-offset: 2px;
}

/* === Category cards grid === */

.silart-category-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

@media (min-width: 600px) {
	.silart-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.silart-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.silart-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
	.silart-cols-5 { grid-template-columns: repeat(5, 1fr); }
	.silart-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

.silart-category-card {
	display: flex;
	flex-direction: column;
	background: var(--global-palette9, #fff);
	border: 1px solid var(--global-palette8, #e0e0e0);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.silart-category-card:hover {
	box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
	transform: translateY(-2px);
}

.silart-category-card__image img {
	width: 100%;
	height: auto;
	display: block;
}

.silart-category-card__body {
	padding: 1rem 1.25rem;
}

.silart-category-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: var(--global-palette4, #444);
}

.silart-category-card__desc {
	margin: 0;
	font-size: 0.9rem;
	color: var(--global-palette5, #666);
	line-height: 1.4;
}

/* === Product card (Figma: 2 cols ≥992px, cream cards, label/value rows) === */

.silart-product-card {
	max-width: 1263px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
	font-family: var(--silart-font);
	color: var(--silart-text);
}

/* Two columns only from ≥992px — at 768px the ~33% aside is too narrow for the download
   buttons with long Russian labels (they wrap/overflow). Below that everything stacks. */
@media (min-width: 992px) {
	.silart-product-card {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}

	.silart-product-card--no-aside {
		grid-template-columns: 1fr;
	}
}

/* Breadcrumb — full-width row above the panels, on the page background (Figma). */
.silart-product-card__breadcrumb {
	font-family: var(--silart-font);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--silart-text-muted);
}

@media (min-width: 992px) {
	.silart-product-card__breadcrumb {
		grid-column: 1 / -1;
	}
}

.silart-product-card__breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.silart-product-card__breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.silart-product-card__breadcrumb-item + .silart-product-card__breadcrumb-item::before {
	content: "›";
	color: var(--silart-text-muted);
}

.silart-product-card__breadcrumb-item a {
	color: var(--silart-text-muted);
	text-decoration: none;
}

.silart-product-card__breadcrumb-item a:hover,
.silart-product-card__breadcrumb-item a:focus-visible {
	color: var(--silart-accent);
	text-decoration: underline;
}

.silart-product-card__breadcrumb-item [aria-current="page"] {
	color: var(--silart-text);
}

/* Left column — cream card */
.silart-product-card__main {
	background: var(--silart-surface);
	border-radius: var(--silart-radius);
	padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
}

.silart-product-card__header {
	margin-bottom: 1.25rem;
}

/* Single H1 = «{серия} {модель}» (Figma): series and model on their own lines, same scale. */
.silart-product-card__title {
	font-family: var(--silart-font);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.22;
	margin: 0;
	color: var(--silart-text-strong);
}

.silart-product-card__title-series,
.silart-product-card__title-model {
	display: block;
}

.silart-product-card__chars {
	margin: 0 0 1.5rem;
}

.silart-product-card__char {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--silart-border);
}

.silart-product-card__char-label {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--silart-text-muted);
}

.silart-product-card__char-value {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
	color: var(--silart-text-strong);
}

/* «Описание» section (Figma): small muted label above the body text. The separator hairline is
 * already provided by the last characteristic row's border-bottom — no extra border-top here
 * (avoids the double line). */
.silart-product-card__description {
	margin-top: 1.5rem;
}

.silart-product-card__section-title {
	margin: 0 0 0.5rem;
	font-family: var(--silart-font);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--silart-text-muted);
}

.silart-product-card__description-body {
	line-height: 1.6;
	color: var(--silart-text);
}

.silart-product-card__description-body > :first-child {
	margin-top: 0;
}

.silart-product-card__description-body > :last-child {
	margin-bottom: 0;
}

/* Right column (aside) — stacked panels (Figma: downloads+photos panel, then similar-models). */
.silart-product-card__aside {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.silart-product-card__panel {
	background: var(--silart-surface);
	border-radius: var(--silart-radius);
	padding: 1.5rem;
}

/* Downloads — each link is an icon + text row (Figma), not a bordered button. */
.silart-product-card__downloads {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.silart-product-card__download {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.45rem 0;
	color: var(--silart-text-strong);
	font-family: var(--silart-font);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease;
}

.silart-product-card__download-icon {
	flex: 0 0 auto;
	color: var(--silart-text-muted);
	transition: color 0.15s ease;
}

/* Scoped under __downloads so the hover state outranks Kadence's `.entry-content a:hover`
 * (which otherwise suppressed the colour change). */
.silart-product-card__downloads .silart-product-card__download:hover,
.silart-product-card__downloads .silart-product-card__download:focus-visible {
	color: var(--silart-accent);
}

.silart-product-card__downloads .silart-product-card__download:hover .silart-product-card__download-text,
.silart-product-card__downloads .silart-product-card__download:focus-visible .silart-product-card__download-text {
	text-decoration: underline;
}

.silart-product-card__downloads .silart-product-card__download:hover .silart-product-card__download-icon,
.silart-product-card__downloads .silart-product-card__download:focus-visible .silart-product-card__download-icon {
	color: var(--silart-accent);
}

/* Gallery thumbnails — sit in the same panel as the downloads, below them (Figma). */
.silart-product-card__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.silart-product-card__downloads + .silart-product-card__gallery {
	margin-top: 1.25rem;
}

.silart-product-card__gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--silart-radius-sm);
	cursor: zoom-in;
}

/* «Модели с похожими характеристиками» panel (Figma): model name + a thin mini-spec line.
 * Selector is scoped under __panel to outrank Kadence's `.entry-content ul { padding-left }`
 * (which otherwise indents the items past the panel heading). padding-left:0 is explicit. */
.silart-product-card__panel .silart-product-card__similar-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.silart-product-card__similar-item {
	margin: 0;
	padding: 0;
}

.silart-product-card__similar-link {
	display: block;
	text-decoration: none;
	color: var(--silart-text-strong);
}

.silart-product-card__similar-link:hover .silart-product-card__similar-model,
.silart-product-card__similar-link:focus-visible .silart-product-card__similar-model {
	color: var(--silart-accent);
	text-decoration: underline;
}

.silart-product-card__similar-model {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.silart-product-card__similar-spec {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--silart-text-muted);
}