/*
Theme Name: IndoorCatHub
Theme URI: https://indoorcathub.com/
Author: IndoorCatHub
Author URI: https://indoorcathub.com/
Description: Pure block theme for IndoorCatHub, a micro-niche editorial and affiliate platform for apartment cat owners. Presentation only: all product, review, affiliate, analytics and schema behaviour belongs to the IndoorCatHub Core plugin.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.3
Version: 1.0.14
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indoorcathub
Tags: blog, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Token aliases
   2.  Base and reset
   3.  Layout helpers
   4.  Focus, links, buttons
   5.  Header and navigation
   6.  Footer
   7.  Breadcrumbs and post meta
   8.  Article and editorial
   9.  Cards, grids, pagination
   10. Plugin block: product-box
   11. Plugin block: comparison-table
   12. Plugin block: product-rating
   13. Plugin block: pros-cons
   14. Affiliate CTA and disclosure
   15. Forms and tables
   16. Empty, error and ad-zone states
   17. Media queries
   18. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN ALIASES
   Short local names for the theme.json presets. No new values are introduced
   here; every colour, size and space resolves to an approved token.
   -------------------------------------------------------------------------- */

:root {
	--ich-bg: var(--wp--preset--color--bg, #FAF9F6);
	--ich-surface: var(--wp--preset--color--surface, #FFFFFF);
	--ich-text: var(--wp--preset--color--text, #222222);
	--ich-text-muted: var(--wp--preset--color--text-muted, #5F625E);
	--ich-primary: var(--wp--preset--color--primary, #3F6B57);
	--ich-primary-dark: var(--wp--preset--color--primary-dark, #2E4F40);
	--ich-beige: var(--wp--preset--color--beige, #EDE7DC);
	--ich-accent: var(--wp--preset--color--accent, #C8A96B);
	--ich-border: var(--wp--preset--color--border, #E4E1DA);

	--ich-border-strong: var(--wp--custom--border-strong, #8C8778);
	--ich-success: var(--wp--custom--success, #2E6B4F);
	--ich-warning: var(--wp--custom--warning, #8A5A12);
	--ich-error: var(--wp--custom--error, #A32B24);
	--ich-success-bg: var(--wp--custom--success-bg, #E6F0EA);
	--ich-warning-bg: var(--wp--custom--warning-bg, #FBF0DC);
	--ich-error-bg: var(--wp--custom--error-bg, #FBE9E7);

	--ich-radius-sm: var(--wp--custom--radius--sm, 4px);
	--ich-radius-md: var(--wp--custom--radius--md, 8px);
	--ich-radius-lg: var(--wp--custom--radius--lg, 12px);
	--ich-radius-pill: var(--wp--custom--radius--pill, 999px);

	--ich-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgba(34, 34, 34, 0.06));
	--ich-shadow-md: var(--wp--preset--shadow--md, 0 4px 12px rgba(34, 34, 34, 0.10));

	--ich-ratio-hero: var(--wp--custom--ratio--hero, 16 / 9);
	--ich-ratio-card: var(--wp--custom--ratio--card, 4 / 3);
	--ich-ratio-portrait: var(--wp--custom--ratio--portrait, 1 / 1);

	--ich-target: var(--wp--custom--target--min, 44px);

	--ich-s1: var(--wp--preset--spacing--1, 4px);
	--ich-s2: var(--wp--preset--spacing--2, 8px);
	--ich-s3: var(--wp--preset--spacing--3, 12px);
	--ich-s4: var(--wp--preset--spacing--4, 16px);
	--ich-s5: var(--wp--preset--spacing--5, 24px);
	--ich-s6: var(--wp--preset--spacing--6, 32px);
	--ich-s7: var(--wp--preset--spacing--7, 48px);
	--ich-s8: var(--wp--preset--spacing--8, 64px);
	--ich-s9: var(--wp--preset--spacing--9, 80px);
}

/* --------------------------------------------------------------------------
   2. BASE AND RESET
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * Runtime finding R-03: on Android the comparison table panned the whole page
 * rather than only its own region.
 *
 * Containment is applied at three levels, because clipping alone was not
 * enough: the document root is bounded, the block wrapper is prevented from
 * being sized by its content, and the scroll container owns the overflow.
 *
 * `clip` rather than `hidden` throughout: `overflow: hidden` establishes a
 * scroll container and silently breaks `position: sticky` on descendants,
 * which would disable the sticky header.
 */
html {
	max-width: 100%;
	overflow-x: clip;
}

body {
	/* 320px is a supported width: nothing may overflow horizontally. */
	max-width: 100%;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

p {
	margin-block: 0 var(--ich-s4);
	max-width: 68ch;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: var(--ich-s6) var(--ich-s3);
	text-wrap: balance;
}

h1:first-child,
h2:first-child,
h3:first-child {
	margin-block-start: 0;
}

/* Visually hidden, still available to assistive technology. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Core injects a skip link for block themes; this makes it visible on focus. */
.skip-link:focus {
	background-color: var(--ich-surface);
	color: var(--ich-primary-dark);
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--ich-s3) var(--ich-s4);
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.ich-band {
	padding-block: var(--ich-s7);
}

.ich-band--beige {
	background-color: var(--ich-beige);
}

.ich-section-lead {
	color: var(--ich-text-muted);
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   4. FOCUS, LINKS, BUTTONS
   -------------------------------------------------------------------------- */

/*
 * Two-layer focus ring. Required because #2E4F40 alone measures 1.50:1 against
 * the primary green button; the white offset guarantees one visible layer on
 * every surface in the palette.
 */
:focus-visible {
	outline: 2px solid var(--ich-primary-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ich-surface);
	border-radius: var(--ich-radius-sm);
}

/* Underline is mandatory in body copy: colour alone is not a link affordance. */
.entry-content a:where(:not(.wp-element-button):not(.ich-affiliate-cta)) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.entry-content a:where(:not(.wp-element-button):not(.ich-affiliate-cta)):hover {
	text-decoration-thickness: 2px;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ich-target);
	text-decoration: none;
	transition: background-color 120ms ease;
}

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	background-color: var(--ich-beige);
	color: var(--ich-text-muted);
	cursor: not-allowed;
}

.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--ich-border-strong);
	color: var(--ich-primary-dark);
}

/* --------------------------------------------------------------------------
   5. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */

.ich-header {
	background-color: var(--ich-surface);
	border-bottom: 1px solid var(--ich-border);
	min-height: 64px;
}

.ich-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--medium);
}

.ich-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--ich-target);
	padding-inline: var(--ich-s2);
	text-decoration: none;
	color: var(--ich-text);
}

.ich-header .wp-block-navigation-item__content:hover,
.ich-header .wp-block-navigation-item__content:focus {
	color: var(--ich-primary-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Current section: a rule plus aria-current, never colour alone. */
.ich-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ich-header [aria-current="page"] {
	box-shadow: inset 0 -2px 0 0 var(--ich-primary);
	color: var(--ich-primary-dark);
}

/* Overlay toggle is core's; only its target size is enforced here. */
.ich-header .wp-block-navigation__responsive-container-open,
.ich-header .wp-block-navigation__responsive-container-close {
	min-width: var(--ich-target);
	min-height: var(--ich-target);
}

/* Header utility cluster: navigation, social profiles and search stay together. */
.ich-header__row {
	gap: var(--ich-s4);
}

/* Site Logo may replace Site Title from the Site Editor. Keep either identity
 * block compact and aligned with the navigation/actions cluster. */
.ich-header .wp-block-site-logo {
	flex-shrink: 0;
	margin: 0;
}

.ich-header .wp-block-site-logo a {
	display: inline-flex;
	align-items: center;
}

.ich-header .wp-block-site-logo img {
	display: block;
	height: auto !important;
	max-width: 190px;
	max-height: 82px;
	object-fit: contain;
}

.ich-header__actions {
	gap: var(--ich-s2);
	min-width: 0;
}

.ich-header__social {
	flex-shrink: 0;
	gap: var(--ich-s1);
}

.ich-header__social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
}

.ich-header__social .wp-social-link svg {
	width: 20px;
	height: 20px;
}

.ich-header__search {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */

.ich-footer {
	background-color: var(--ich-beige);
	border-top: 1px solid var(--ich-border-strong);
	padding-block: var(--ich-s8) var(--ich-s7);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text);
}

.ich-footer a {
	color: var(--ich-primary-dark);
}

.ich-footer li {
	margin-block-end: var(--ich-s2);
}

.ich-footer a,
.ich-footer .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--ich-target);
}

/* Native Social Icons keep the same 44px minimum touch target as footer links. */
.ich-footer .wp-social-link a {
	justify-content: center;
	min-width: var(--ich-target);
}

.ich-footer__legal {
	border-top: 1px solid var(--ich-border-strong);
	margin-block-start: var(--ich-s6);
	padding-block-start: var(--ich-s5);
	color: var(--ich-text);
}

.ich-footer__copyright {
	gap: var(--ich-s1);
}

.ich-footer__copyright > * {
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. BREADCRUMBS AND POST META
   -------------------------------------------------------------------------- */

/*
 * Breadcrumb data is produced by Rank Math. The theme styles it and nothing
 * more: it computes no trail and emits no BreadcrumbList.
 */
.ich-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
	margin-block-end: var(--ich-s3);
}

/*
 * When Rank Math is inactive the shortcode guard in functions.php returns an
 * empty string, leaving a wrapper with no element children. Collapse it so no
 * stray gap appears above the title.
 */
.ich-breadcrumb:not(:has(*)) {
	display: none;
}

.ich-breadcrumb a {
	color: var(--ich-text-muted);
}

.ich-post-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ich-s2) var(--ich-s3);
	padding-block: var(--ich-s3);
	border-block: 1px solid var(--ich-border);
}

.ich-post-meta a {
	color: var(--ich-text);
}

/* --------------------------------------------------------------------------
   8. ARTICLE AND EDITORIAL
   -------------------------------------------------------------------------- */

.ich-dek {
	font-size: var(--wp--preset--font-size--large);
	color: var(--ich-text-muted);
	line-height: 1.6;
	max-width: 60ch;
}

.ich-quick-answer,
.ich-verdict {
	background-color: var(--ich-beige);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s5);
}

.ich-quick-answer p:last-child,
.ich-verdict p:last-child {
	margin-block-end: 0;
}

.ich-callout {
	background-color: var(--ich-beige);
	border-left: 3px solid var(--ich-primary);
	border-radius: 0 var(--ich-radius-md) var(--ich-radius-md) 0;
	padding: var(--ich-s4) var(--ich-s5);
}

.ich-sources {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
}

.ich-sources a {
	color: var(--ich-primary-dark);
}

.ich-author-box {
	background-color: var(--ich-surface);
	border: 1px solid var(--ich-border);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s5);
}

.ich-author-box .wp-block-avatar img {
	aspect-ratio: var(--ich-ratio-portrait);
	border-radius: var(--ich-radius-md);
	object-fit: cover;
}

/* Featured images reserve their space before load: this is the CLS rule. */
.wp-block-post-featured-image img {
	border-radius: var(--ich-radius-md);
	aspect-ratio: var(--ich-ratio-hero);
	object-fit: cover;
	width: 100%;
}

/* --------------------------------------------------------------------------
   9. CARDS, GRIDS, PAGINATION
   -------------------------------------------------------------------------- */

.ich-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ich-s5);
}

.ich-card {
	background-color: var(--ich-surface);
	border: 1px solid var(--ich-border);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s4);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ich-s3);
}

.ich-card:hover {
	box-shadow: var(--ich-shadow-sm);
}

.ich-card .wp-block-post-featured-image img {
	aspect-ratio: var(--ich-ratio-card);
	border-radius: var(--ich-radius-sm);
}

.ich-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
	margin: 0;
}

.ich-card .wp-block-post-title a {
	color: var(--ich-text);
	text-decoration: none;
}

.ich-card .wp-block-post-title a:hover,
.ich-card .wp-block-post-title a:focus {
	color: var(--ich-primary-dark);
	text-decoration: underline;
}

.ich-card .wp-block-post-excerpt {
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: auto;
}

.ich-card .wp-block-post-terms {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
}

/* Numbered, crawlable pagination. Never infinite scroll as the only route. */
.wp-block-query-pagination {
	margin-block-start: var(--ich-s7);
	gap: var(--ich-s2);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ich-target);
	min-height: var(--ich-target);
	padding-inline: var(--ich-s2);
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-sm);
	text-decoration: none;
	color: var(--ich-primary-dark);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--ich-primary);
	border-color: var(--ich-primary);
	color: var(--ich-surface);
	font-weight: 600;
}

/* Category and constraint chips are ordinary crawlable links. */
.ich-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ich-s2);
}

.ich-chips a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ich-target);
	padding: var(--ich-s1) var(--ich-s3);
	background-color: var(--ich-beige);
	border-radius: var(--ich-radius-pill);
	color: var(--ich-text);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.ich-chips a:hover,
.ich-chips a:focus {
	background-color: var(--ich-border);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. PLUGIN BLOCK: product-box
   Class contract from PLUGIN-API.md section 10. Every inner element is
   conditional on data, so nothing below assumes any of them exists.
   -------------------------------------------------------------------------- */

.wp-block-indoorcathub-product-box {
	background-color: var(--ich-surface);
	/* border-strong: this is a meaningful component boundary, not decoration. */
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-md);
	overflow: hidden;
}

.ich-product-box__media {
	background-color: var(--ich-beige);
}

.ich-product-box__media img,
.ich-product-box__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--ich-ratio-card);
	object-fit: cover;
}

/*
 * The image-less card is the default launch state under the Amazon V1
 * restrictions, not a fallback. The placeholder occupies the identical 4:3
 * geometry so a card without an image is exactly as tall as one with an image
 * and grids never reflow.
 */
.wp-block-indoorcathub-product-box:not(:has(.ich-product-box__media))::before {
	content: "";
	display: block;
	aspect-ratio: var(--ich-ratio-card);
	background-color: var(--ich-beige);
	background-image: url("assets/images/product-placeholder.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 96px auto;
}

.ich-product-box__body {
	padding: var(--ich-s5) var(--ich-s4);
	display: flex;
	flex-direction: column;
	gap: var(--ich-s3);
}

/* The title dominates; everything else is deliberately quieter. */
.ich-product-box__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ich-product-box__brand {
	margin: calc(var(--ich-s2) * -1) 0 0;
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/*
 * Price tier. A relative band, never a price. No currency pairing, no
 * strikethrough, no greyed-out remainder that could read as a rating.
 */
/*
 * Price tier: a quiet chip, distinguishable at a glance but not a sales badge.
 * Beige with dark text (12.93:1), never gold, never a currency pairing.
 */
.ich-product-box__tier {
	margin: 0;
	align-self: flex-start;
	padding: var(--ich-s1) var(--ich-s3);
	background-color: var(--ich-beige);
	border-radius: var(--ich-radius-sm);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--ich-text);
	letter-spacing: 0.08em;
}

/*
 * Specifications read as a compact spec list rather than a wall of paragraphs.
 * Short facts sit two-per-row from 600px; prose facts (renter, noise, cleaning)
 * take a full row so they are not squeezed into a narrow column.
 */
.ich-product-box__facts {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid var(--ich-border);
}

.ich-product-box__fact {
	display: grid;
	grid-template-columns: minmax(90px, 34%) 1fr;
	gap: var(--ich-s3);
	padding-block: var(--ich-s2);
	border-bottom: 1px solid var(--ich-border);
}

.ich-product-box__fact dt {
	color: var(--ich-text-muted);
	margin: 0;
	line-height: 1.5;
}

.ich-product-box__fact dd {
	margin: 0;
	color: var(--ich-text);
	line-height: 1.5;
}

/* Measurement: imperial leads, metric is a quiet second line. */
.ich-measure__primary {
	display: block;
}

.ich-measure__alt {
	display: block;
	color: var(--ich-text-muted);
	font-size: 0.92em;
}

.ich-product-box__actions {
	margin: var(--ich-s1) 0 0;
}

/* Evidence and verification: visible, deliberately secondary. */
.ich-product-box__provenance {
	margin: 0;
	color: var(--ich-text-muted);
	line-height: 1.5;
}

/* Block style variation: compact. */
.wp-block-indoorcathub-product-box.is-style-compact .ich-product-box__media,
.wp-block-indoorcathub-product-box.is-style-compact::before {
	display: none;
}

.wp-block-indoorcathub-product-box.is-style-compact .ich-product-box__body {
	padding: var(--ich-s3) var(--ich-s4);
	gap: var(--ich-s2);
}

/*
 * Block style variation: featured. Gold appears only as a rule, never as text
 * and never behind white text (Rule G1).
 */
.wp-block-indoorcathub-product-box.is-style-featured {
	border-top: 3px solid var(--ich-accent);
}

/* --------------------------------------------------------------------------
   11. PLUGIN BLOCK: comparison-table
   -------------------------------------------------------------------------- */

/*
 * Horizontal scroll, never column stacking. Stacking destroys the comparison
 * the block exists to provide. The block supplies tabindex and an accessible
 * name on this container.
 */
/*
 * Swipe affordance. A short line of real text rather than CSS content, so it is
 * translatable and readable without the stylesheet. Hidden once the table has
 * room, and paired with the edge fade on the scroll container below.
 */
.ich-comparison__hint {
	margin: 0 0 var(--ich-s2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--ich-text-muted);
	letter-spacing: 0.01em;
}

/*
 * The block wrapper must not be sized by the table inside it. Without an
 * explicit max-width and a zeroed min-width, a wide table makes the wrapper
 * wide, and the page scrolls instead of the region (R-03).
 */
.wp-block-indoorcathub-comparison-table,
.ich-comparison {
	max-width: 100%;
	min-width: 0;
}

.ich-comparison__scroll {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	/* Keeps a swipe that reaches the end of the table from panning the page. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-md);
	background:
		linear-gradient(to right, var(--ich-surface) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
		linear-gradient(to left, var(--ich-surface) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(34, 34, 34, 0.12), rgba(0, 0, 0, 0)) left / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(34, 34, 34, 0.12), rgba(0, 0, 0, 0)) right / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/*
 * Runtime finding R-04. The table was technically working but hard to scan:
 * columns compressed to the point that words collided and cells grew very tall
 * and narrow. Giving the table and its columns honest minimum widths costs more
 * horizontal scrolling, which the container now handles properly, and buys
 * legibility. No data is hidden or truncated to achieve it.
 */
.ich-comparison-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background-color: var(--ich-surface);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	/* Long words wrap rather than forcing the column wider. */
	overflow-wrap: break-word;
	hyphens: none;
}

.ich-comparison-table__caption {
	caption-side: top;
	text-align: left;
	padding: var(--ich-s3) var(--ich-s4);
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ich-comparison-table th,
.ich-comparison-table td {
	padding: var(--ich-s3) var(--ich-s4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ich-border);
	line-height: 1.5;
}

/*
 * Deliberate column widths, keyed on the untranslated data-column value the
 * block emits rather than on visible labels, so translation cannot break the
 * layout. Widths are chosen per content type: measurements need two lines of
 * units, renter notes need enough width to read as prose rather than three
 * words per line (runtime finding R-04).
 */
.ich-comparison-table [data-column="product"] { min-width: 230px; max-width: 260px; }
.ich-comparison-table [data-column="price_tier"] { min-width: 96px; }
.ich-comparison-table [data-column="footprint"] { min-width: 160px; }
.ich-comparison-table [data-column="height"] { min-width: 130px; }
.ich-comparison-table [data-column="weight"] { min-width: 130px; }
.ich-comparison-table [data-column="mounting"] { min-width: 150px; }
.ich-comparison-table [data-column="material"] { min-width: 140px; }
.ich-comparison-table [data-column="assembly"] { min-width: 110px; }
.ich-comparison-table [data-column="verified"] { min-width: 130px; }
.ich-comparison-table [data-column="cta"] { min-width: 150px; }
.ich-comparison-table [data-column="renter"],
.ich-comparison-table [data-column="noise"],
.ich-comparison-table [data-column="cleaning"] {
	min-width: 240px;
	max-width: 300px;
}

/* Header labels must never collide or break mid-phrase awkwardly. */
.ich-comparison-table thead th {
	white-space: normal;
	text-wrap: balance;
	vertical-align: bottom;
}

.ich-comparison-table thead th {
	background-color: var(--ich-beige);
	color: var(--ich-text);
	font-weight: 600;
	border-bottom: 1px solid var(--ich-border-strong);
	white-space: nowrap;
}

.ich-comparison-table tbody tr:nth-child(even) {
	background-color: var(--ich-bg);
}

.ich-comparison-table__product {
	font-weight: 400;
}

/*
 * Name and brand are now separate elements (plugin 0.1.8) so they can be laid
 * out as two deliberate lines. Previously the name was a bare text node and the
 * two ran together on screen.
 */
.ich-comparison-table__name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ich-text);
}

.ich-comparison-table__brand {
	display: block;
	margin-block-start: var(--ich-s2);
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--ich-text-muted);
}

/* Secondary weight inside the table avoids a wall of green. */
.ich-comparison-table__cta {
	background-color: transparent;
	border: 1px solid var(--ich-border-strong);
	color: var(--ich-primary-dark);
}

.ich-comparison-table__cta:hover,
.ich-comparison-table__cta:focus {
	background-color: var(--ich-beige);
}

/* --------------------------------------------------------------------------
   12. PLUGIN BLOCK: product-rating
   Bars, never stars. Nothing here may resemble an aggregate customer rating.
   -------------------------------------------------------------------------- */

.wp-block-indoorcathub-product-rating {
	background-color: var(--ich-surface);
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s5) var(--ich-s4);
	/* Keeps the component from stretching uncomfortably on a wide screen. */
	max-width: 42rem;
}

.ich-rating__title {
	margin-block-start: 0;
}

/* Visible attribution, never a tooltip. */
.ich-rating__attribution {
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ich-rating__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ich-s4);
}

/*
 * Each criterion is a two-part row: name and score on one line with the score
 * pushed right, and the bar on its own line beneath. The label and the number
 * are separate grid tracks with a real gap, so they cannot collide however long
 * the criterion name is or however narrow the viewport (runtime R-01 UI).
 */
.ich-rating__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--ich-s2) var(--ich-s4);
}

.ich-rating__item + .ich-rating__item {
	border-top: 1px solid var(--ich-border);
	padding-block-start: var(--ich-s4);
}

.ich-rating__label {
	color: var(--ich-text);
	font-weight: 600;
	line-height: 1.35;
	/* Long criterion names wrap instead of pushing the score off the row. */
	min-width: 0;
	overflow-wrap: break-word;
}

.ich-rating__score {
	color: var(--ich-text);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * The bar (design decision D-12: bars, never stars).
 *
 * The plugin emits --ich-score and --ich-max on each item, so the fill is sized
 * from the real stored score. The attribute selector means the track renders
 * only when that value is actually present: markup without it gets the text
 * score alone rather than an empty track that would read as zero.
 *
 * One pseudo-element, a hard-stop gradient, no extra markup and no JavaScript.
 */
.ich-rating__item[style*="--ich-score"]::after {
	content: "";
	grid-column: 1 / -1;
	height: 8px;
	border-radius: var(--ich-radius-sm);
	background-image: linear-gradient(
		to right,
		var(--ich-primary) 0 calc(var(--ich-score) / var(--ich-max) * 100%),
		var(--ich-border) 0
	);
	/*
	 * M-5, preserved: the track colour measures only 1.31:1 against a white
	 * card, so without an outline the bar's extent is invisible and a 4/5 fill
	 * reads as 5/5. The strong border token gives the extent a 3.59:1 edge; the
	 * fill is 4.66:1 against the track.
	 */
	box-shadow: inset 0 0 0 1px var(--ich-border-strong);
}

/* The heading and attribution are visible but clearly subordinate. */
.ich-rating__title {
	margin-block-end: var(--ich-s1);
}

.ich-rating__attribution {
	margin-block-end: var(--ich-s5);
	max-width: 52ch;
	line-height: 1.5;
}

.ich-rating__meta {
	margin-block-start: var(--ich-s5);
	padding-block-start: var(--ich-s3);
	border-top: 1px solid var(--ich-border);
}

/* Ten criteria must not turn the component into a page of its own. */
@media (min-width: 600px) {
	.ich-rating__list {
		gap: var(--ich-s3);
	}

	.ich-rating__item + .ich-rating__item {
		padding-block-start: var(--ich-s3);
	}
}

.ich-rating__meta {
	color: var(--ich-text-muted);
	margin-block-end: 0;
}

.ich-rating__meta a {
	color: var(--ich-primary-dark);
}

/* --------------------------------------------------------------------------
   13. PLUGIN BLOCK: pros-cons
   Equal visual weight. Cons are amber, not red: a trade-off is not a fault.
   -------------------------------------------------------------------------- */

.wp-block-indoorcathub-pros-cons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ich-s4);
}

.ich-pros-cons__section {
	border-radius: 0 var(--ich-radius-md) var(--ich-radius-md) 0;
	padding: var(--ich-s4) var(--ich-s5);
}

.ich-pros-cons__section--pros {
	background-color: var(--ich-success-bg);
	border-left: 3px solid var(--ich-success);
}

.ich-pros-cons__section--cons {
	background-color: var(--ich-warning-bg);
	border-left: 3px solid var(--ich-warning);
}

.ich-pros-cons__heading {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
}

.ich-pros-cons__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ich-s2);
}

/* Markers are CSS-drawn: no icon font, no sprite. */
.ich-pros-cons__list li {
	position: relative;
	padding-left: var(--ich-s5);
	color: var(--ich-text);
}

.ich-pros-cons__section--pros .ich-pros-cons__list li::before {
	content: "+";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--ich-success);
}

.ich-pros-cons__section--cons .ich-pros-cons__list li::before {
	content: "\2212";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--ich-warning);
}

/* --------------------------------------------------------------------------
   13b. PLUGIN BLOCK: apartment-fit
   Editorial, not commercial: no price, no CTA. Styled as a calm panel rather
   than another bordered card, so a guide does not become a row of boxes.
   -------------------------------------------------------------------------- */

.wp-block-indoorcathub-apartment-fit {
	background-color: var(--ich-beige);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s5) var(--ich-s4);
}

.ich-fit__title {
	margin-block-start: 0;
	margin-block-end: var(--ich-s3);
	font-size: var(--wp--preset--font-size--x-large);
}

.ich-fit__chips {
	list-style: none;
	margin: 0 0 var(--ich-s4);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ich-s2);
}

.ich-fit__chip {
	padding: var(--ich-s1) var(--ich-s3);
	background-color: var(--ich-surface);
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-pill);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text);
	line-height: 1.6;
}

.ich-fit__grid {
	margin: 0 0 var(--ich-s4);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ich-s3);
}

.ich-fit__item dt {
	margin: 0 0 var(--ich-s1);
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.ich-fit__item dd {
	margin: 0;
	color: var(--ich-text);
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Renter verdict. The state is carried by the words first; the left rule is a
 * secondary cue, never the only one.
 */
.ich-fit__renter {
	margin: 0 0 var(--ich-s4);
	padding: var(--ich-s3) var(--ich-s4);
	background-color: var(--ich-surface);
	border-left: 3px solid var(--ich-border-strong);
	border-radius: 0 var(--ich-radius-sm) var(--ich-radius-sm) 0;
	line-height: 1.55;
	max-width: none;
}

.ich-fit__renter[data-renter="yes"] {
	border-left-color: var(--ich-success);
}

.ich-fit__renter[data-renter="caution"] {
	border-left-color: var(--ich-warning);
}

.ich-fit__notes {
	list-style: none;
	margin: 0 0 var(--ich-s3);
	padding: 0;
	display: grid;
	gap: var(--ich-s2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.ich-fit__note-label {
	font-weight: 600;
	color: var(--ich-text);
}

.ich-fit__provenance {
	margin: 0;
	color: var(--ich-text-muted);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13c. EDITOR'S PICK (theme pattern)
   A pick is an editorial judgement, so it reads as a marked passage rather
   than a promotional banner. Gold appears only as a rule (Rule G1).
   -------------------------------------------------------------------------- */

.ich-pick {
	border-top: 3px solid var(--ich-accent);
	padding-block-start: var(--ich-s4);
}

.ich-pick__eyebrow {
	margin: 0 0 var(--ich-s1);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ich-text-muted);
}

.ich-pick__title {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   14. AFFILIATE CTA AND DISCLOSURE
   -------------------------------------------------------------------------- */

.ich-affiliate-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--ich-target);
	padding: var(--ich-s3) var(--ich-s5);
	background-color: var(--ich-primary);
	color: var(--ich-surface);
	border-radius: var(--ich-radius-md);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: background-color 120ms ease;
}

.ich-affiliate-cta:hover,
.ich-affiliate-cta:focus {
	background-color: var(--ich-primary-dark);
	color: var(--ich-surface);
	text-decoration: none;
}

/* Disclosure sits with the recommendation. Never a tooltip, never an asterisk. */
.ich-affiliate-disclosure {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
	max-width: none;
}

/* Editor-only notice emitted by a plugin block that cannot render. */
.ich-block-notice {
	background-color: var(--ich-warning-bg);
	border-left: 3px solid var(--ich-warning);
	padding: var(--ich-s3) var(--ich-s4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text);
}

/* --------------------------------------------------------------------------
   15. FORMS AND TABLES
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
	/* --ich-border measures 1.24:1 and cannot bound a control (Rule G2). */
	border: 1px solid var(--ich-border-strong);
	border-radius: var(--ich-radius-sm);
	padding: var(--ich-s3);
	min-height: var(--ich-target);
	background-color: var(--ich-surface);
	color: var(--ich-text);
	/* 1.0625rem prevents iOS zoom on focus. Never reduce. */
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	width: 100%;
	max-width: 100%;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--ich-primary-dark);
}

label {
	display: block;
	margin-block-end: var(--ich-s2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--ich-text);
}

.ich-form-help {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ich-text-muted);
}

.ich-form-error {
	background-color: var(--ich-error-bg);
	border-left: 3px solid var(--ich-error);
	padding: var(--ich-s3) var(--ich-s4);
	color: var(--ich-text);
}

.wp-block-search__button,
.wp-block-search .wp-block-search__button {
	min-height: var(--ich-target);
	min-width: var(--ich-target);
	background-color: var(--ich-primary);
	color: var(--ich-surface);
	border: 0;
	border-radius: var(--ich-radius-sm);
	padding-inline: var(--ich-s4);
	font-weight: 600;
}

/* Editorial tables keep table semantics and scroll rather than reflow. */
.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content .wp-block-table table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.entry-content .wp-block-table th {
	background-color: var(--ich-beige);
	color: var(--ich-text);
	text-align: left;
	font-weight: 600;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--ich-s3);
	border-bottom: 1px solid var(--ich-border);
}

.entry-content .wp-block-table figcaption {
	color: var(--ich-text-muted);
	font-size: var(--wp--preset--font-size--small);
}


/* Native comments: quiet editorial treatment, using the same form tokens. */
.ich-comments {
	margin-block-start: var(--ich-s7);
}

.ich-comments .ich-comment {
	gap: var(--ich-s3);
	margin-block-end: var(--ich-s5);
	padding-block-end: var(--ich-s5);
	border-bottom: 1px solid var(--ich-border);
}

.ich-comments .wp-block-comment-content p:last-child {
	margin-block-end: 0;
}

.ich-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ich-s2);
}

.ich-comments .comment-form-cookies-consent input[type="checkbox"] {
	margin-block-start: 0.25em;
}

.ich-comments .form-submit .submit {
	min-height: var(--ich-target);
	padding: var(--ich-s3) var(--ich-s5);
	background-color: var(--ich-primary);
	color: var(--ich-surface);
	border: 0;
	border-radius: var(--ich-radius-md);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ich-comments .form-submit .submit:hover,
.ich-comments .form-submit .submit:focus-visible {
	background-color: var(--ich-primary-dark);
}

/* --------------------------------------------------------------------------
   16. EMPTY, ERROR AND AD-ZONE STATES
   -------------------------------------------------------------------------- */

.ich-empty {
	background-color: var(--ich-surface);
	border: 1px solid var(--ich-border);
	border-radius: var(--ich-radius-md);
	padding: var(--ich-s5);
	color: var(--ich-text);
}

.ich-404 {
	padding-block: var(--ich-s8);
}

/*
 * Advertising placement, rendered by the plugin's ad-slot block.
 *
 * These rules apply only to a slot that actually rendered. An ineligible slot
 * emits no markup at all, so there is nothing to style and no empty box: space
 * is reserved for a real ad, never for the absence of one.
 */
.ich-ad {
	margin-block: var(--ich-s7);
	padding: var(--ich-s3);
	/* Plainly not a card and plainly not a CTA: page background, plain rule. */
	background-color: var(--ich-bg);
	border-block: 1px solid var(--ich-border-strong);
	border-radius: 0;
}

/*
 * Reserved height for a rendered unit, so the ad arriving does not shift the
 * article beneath it. Sized per breakpoint to match the common responsive
 * formats.
 */
.ich-ad__unit {
	display: block;
	min-height: 250px;
	width: 100%;
}

.ich-ad__label {
	margin: 0 0 var(--ich-s2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ich-text-muted);
	text-align: center;
}

/*
 * An ad must never borrow the visual language of a recommendation. Accent gold
 * is the affiliate CTA treatment and is prohibited here, as is any button
 * styling that could invite an accidental click.
 */
.ich-ad .ich-affiliate-cta,
.ich-ad .wp-element-button,
.ich-ad a {
	display: none;
}

/* --------------------------------------------------------------------------
   17. MEDIA QUERIES
   Mobile-first. Base styles above are the 320px styles.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
	.ich-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.ich-product-box__facts {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ich-s2) var(--ich-s5);
	}
}

@media (min-width: 600px) {
	.ich-fit__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ich-s4) var(--ich-s5);
	}

	/*
	 * Short specs pair up; prose specs keep a full row so they read as prose.
	 */
	.ich-product-box__facts {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--ich-s5);
	}

	.ich-product-box__fact[data-fact="renter"],
	.ich-product-box__fact[data-fact="noise"],
	.ich-product-box__fact[data-fact="cleaning"] {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.wp-block-indoorcathub-pros-cons {
		grid-template-columns: 1fr 1fr;
		gap: var(--ich-s5);
	}

	/*
	 * Editorial two-column card once there is room: image left at a fixed,
	 * readable proportion, identity and specs right. Not equal columns — the
	 * text side carries far more and deserves the space.
	 */
	.wp-block-indoorcathub-product-box:has(.ich-product-box__media) {
		display: grid;
		grid-template-columns: minmax(220px, 34%) 1fr;
		align-items: stretch;
	}

	.ich-product-box__media {
		height: 100%;
	}

	.ich-product-box__media img,
	.ich-product-box__image {
		height: 100%;
		/* Fills its column without distortion; never stretched. */
		object-fit: cover;
	}

	.ich-product-box__body {
		padding: var(--ich-s5);
	}

	/* The table fits: drop the swipe prompt rather than nag. */
	.ich-comparison__hint {
		display: none;
	}

	.ich-card {
		padding: var(--ich-s5);
	}

	.ich-affiliate-cta {
		width: auto;
	}

	/* Sticky row header keeps the comparison legible while scrolling. */
	.ich-comparison-table__product {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--ich-surface);
		border-right: 1px solid var(--ich-border-strong);
	}

	.ich-comparison-table tbody tr:nth-child(even) .ich-comparison-table__product {
		background-color: var(--ich-bg);
	}
}

@media (max-width: 1099px) {
	/*
	 * Core switches the Navigation block to its hamburger only at a narrower
	 * breakpoint. IndoorCatHub has six top-level destinations, so collapse
	 * earlier to prevent clipped or partially hidden labels on phones/tablets.
	 */
	.ich-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.ich-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.ich-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		overflow-y: auto;
		padding: var(--ich-s6) var(--ich-s5);
		z-index: 100000;
	}

	.ich-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.ich-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		width: 100%;
	}

	.ich-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.ich-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		padding-block: var(--ich-s3);
		font-size: var(--wp--preset--font-size--large);
	}
}

@media (max-width: 720px) {
	/* Keep a compact one-line header on normal phone widths. The previous
	 * rule forced the identity onto its own row; once Site Title was replaced
	 * by Site Logo that created a large empty band above the controls. */
	.ich-header__row {
		flex-wrap: nowrap !important;
		gap: var(--ich-s2);
	}

	.ich-header__row > .wp-block-site-title,
	.ich-header__row > .wp-block-site-logo {
		flex: 0 0 auto;
	}

	/* Let the Site Logo width chosen in the Site Editor remain effective on
	 * phones. 1.0.13 forced a small 110px cap, which made horizontal brand
	 * marks look undersized even when the editor width was increased. */
	.ich-header .wp-block-site-logo img {
		width: 150px !important;
		max-width: 150px;
		max-height: 74px;
	}

	.ich-header__actions {
		display: flex;
		flex: 1 1 auto;
		justify-content: flex-end;
		flex-wrap: nowrap !important;
		width: auto;
		min-width: 0;
		gap: var(--ich-s1);
	}

	.ich-header__social {
		margin-inline-start: 0;
		gap: 0;
	}
}

@media (max-width: 480px) {
	.ich-header .wp-block-site-logo img {
		width: 132px !important;
		max-width: 132px;
		max-height: 68px;
	}

	.ich-header__social .wp-social-link a {
		min-width: 36px;
		min-height: 36px;
	}

	.ich-header__social .wp-social-link svg {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 360px) {
	/* Extremely narrow devices get a deliberate second row rather than
	 * clipping controls off-screen. */
	.ich-header__row {
		flex-wrap: wrap !important;
	}

	.ich-header .wp-block-site-logo img {
		width: 128px !important;
		max-width: 128px;
		max-height: 66px;
	}

	.ich-header__actions {
		flex: 1 1 100%;
		width: 100%;
	}
}

@media (min-width: 900px) {
	.ich-ad__unit {
		min-height: 280px;
	}

	.wp-block-indoorcathub-apartment-fit {
		padding: var(--ich-s6);
	}

	.ich-fit__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ich-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}

	.ich-band {
		padding-block: var(--ich-s9);
	}

	.ich-header {
		min-height: 72px;
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: var(--ich-shadow-sm);
	}

	.ich-footer__columns {
		gap: var(--ich-s6);
	}
}

@media (min-width: 1024px) {
	body {
		--wp--style--root--padding-left: var(--ich-s6);
		--wp--style--root--padding-right: var(--ich-s6);
	}
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ich-header {
		position: static;
	}

	.ich-comparison__scroll {
		scroll-snap-type: none;
	}
}