/* ==========================================================================
   Indian Car Nerds — Frontend Stylesheet
   Loaded after theme.json's generated CSS custom properties, so every
   color/spacing/font value below reads from --wp--preset--* variables
   rather than hardcoded values — change the design system in theme.json
   and this stylesheet follows automatically.
   ========================================================================== */

/* ---------- Utility ---------- */
.icn-empty-note {
	color: var(--wp--preset--color--foreground-muted);
	font-style: italic;
	padding: var(--wp--preset--spacing--30) 0;
}
.icn-table-wrap { overflow-x: auto; margin-bottom: var(--wp--preset--spacing--40); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.icn-header {
	/* v3.3 removed this inner div's own `position: sticky`, correctly
	   reasoning that the REAL positioning belongs on its ancestor,
	   `header.wp-block-template-part` in style.css. That was right, but
	   design-system.css (loaded AFTER this file) still carried its own
	   `.icn-header { position: sticky; top: 0; }` rule, which silently won
	   the cascade and re-broke the exact same thing — found and removed in
	   v3.6 (that ancestor rule was `position: fixed` at the time; v3.7
	   switched it to `position: sticky` per direct instruction — see
	   style.css). This inner div now only needs `position: relative` to
	   give its own absolutely-positioned children (dropdowns, mega menu) a
	   sane containing block; it plays no part in keeping the header itself
	   in place. */
	position: relative;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.85rem var(--wp--preset--spacing--40);
}
.icn-header__logo {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	white-space: nowrap;
}
.icn-header__logo:hover { color: var(--wp--preset--color--accent); }

/* Primary nav */
.icn-nav { display: flex; }
.icn-nav__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.4rem;
}
.icn-nav__list > li { position: relative; }
.icn-nav__link {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	padding: 0.5rem 0;
}
.icn-nav__link:hover, .icn-nav__link:focus { color: var(--wp--preset--color--accent); }
.icn-nav__caret { font-size: 0.65rem; opacity: 0.7; }

/* Dropdown */
.icn-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.6rem;
	box-shadow: 0 12px 24px rgba(0,0,0,0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;
}
.icn-nav__item--has-dropdown:hover .icn-nav__dropdown,
.icn-nav__item--has-dropdown:focus-within .icn-nav__dropdown,
.icn-nav__item--open .icn-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.icn-nav-dropdown__list { list-style: none; margin: 0; padding: 0; }
.icn-nav-dropdown__list li a,
.icn-nav__dropdown a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 5px;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.9rem;
}
.icn-nav-dropdown__list li a:hover, .icn-nav__dropdown a:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}
.icn-nav-dropdown__empty { padding: 0.5rem 0.7rem; color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; }

/* Header right side: search + mobile toggle */
.icn-header__actions { display: flex; align-items: center; gap: 0.9rem; }
.icn-header__search-toggle,
.icn-header__mobile-toggle {
	background: none;
	border: none;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	padding: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icn-header__search-toggle:hover, .icn-header__mobile-toggle:hover { color: var(--wp--preset--color--accent); }
.icn-header__mobile-toggle { display: none; }

/* Search overlay */
.icn-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 18, 0.92);
	z-index: 200;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12vh;
}
.icn-search-overlay.is-open { display: flex; }
.icn-search-overlay__box { width: min(600px, 90vw); }
.icn-search-overlay__close {
	position: absolute;
	top: 24px; right: 24px;
	background: none; border: none; color: var(--wp--preset--color--foreground);
	font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.icn-search-overlay .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	overflow: hidden;
}
.icn-search-overlay .wp-block-search__input {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	border: none;
	padding: 0.9rem 1rem;
	font-size: 1.1rem;
	flex: 1;
}
.icn-search-overlay .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	padding: 0 1.3rem;
	font-weight: 600;
	cursor: pointer;
}

/* Mobile menu panel */
.icn-mobile-menu {
	display: none;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.icn-mobile-menu.is-open { display: block; }
.icn-mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.icn-mobile-menu__list > li { border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-mobile-menu__list > li:last-child { border-bottom: none; }
.icn-mobile-menu__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 0;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
}
.icn-mobile-submenu { list-style: none; margin: 0 0 0.6rem; padding: 0 0 0 1rem; display: none; }
.icn-mobile-submenu.is-open { display: block; }
.icn-mobile-submenu li a { display: block; padding: 0.5rem 0; color: var(--wp--preset--color--foreground-muted); text-decoration: none; font-size: 0.88rem; }

@media (max-width: 900px) {
	.icn-nav { display: none; }
	.icn-header__mobile-toggle { display: flex; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.icn-footer { background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--border); }
.icn-footer__inner { max-width: 1400px; margin: 0 auto; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.icn-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}
.icn-footer__brand { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 0.6rem; }
.icn-footer__tagline { color: var(--wp--preset--color--foreground-muted); font-size: 0.9rem; max-width: 32ch; }
.icn-footer__heading { font-family: var(--wp--preset--font-family--heading); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0.8rem; color: var(--wp--preset--color--foreground-muted); }
.icn-footer__list { list-style: none; margin: 0; padding: 0; }
.icn-footer__list li { margin-bottom: 0.55rem; }
.icn-footer__list a { color: var(--wp--preset--color--foreground); text-decoration: none; font-size: 0.92rem; }
.icn-footer__list a:hover { color: var(--wp--preset--color--accent); }
.icn-footer__social { display: flex; gap: 0.7rem; margin-top: 0.9rem; }
.icn-footer__social a {
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.icn-footer__social a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--30);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem;
}
.icn-footer__copyright { color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; }

@media (max-width: 900px) {
	.icn-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.icn-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.icn-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
}
.icn-newsletter--footer { background: transparent; border: 1px dashed var(--wp--preset--color--border); }
.icn-newsletter__copy h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.icn-newsletter__copy p { margin: 0; color: var(--wp--preset--color--foreground-muted); font-size: 0.9rem; }
.icn-newsletter__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.icn-newsletter__form input[type="email"] {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground);
	border-radius: 6px;
	padding: 0.7rem 1rem;
	min-width: 240px;
}
.icn-newsletter__form button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1.3rem;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 0.85rem;
}
.icn-newsletter__success { color: var(--wp--preset--color--accent); font-weight: 600; }

/* ==========================================================================
   CARDS (shared across archives, related content, homepage collections)
   ========================================================================== */
.icn-car-card, .icn-content-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.icn-car-card:hover, .icn-content-card:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); }
.icn-car-card__media, .icn-content-card__media { aspect-ratio: 16 / 10; background: var(--wp--preset--color--base); overflow: hidden; }
.icn-car-card__image, .icn-content-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-car-card__placeholder, .icn-content-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); }
.icn-car-card__body, .icn-content-card__body { padding: 1rem 1.1rem 1.2rem; }
.icn-car-card__title, .icn-content-card__title { font-size: 1.05rem; margin: 0.3rem 0 0.5rem; line-height: 1.25; }
.icn-car-card__price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--accent); }

/* ==========================================================================
   GRIDS (collections, related content, archives)
   ========================================================================== */
.icn-collection__grid, .icn-related__grid, .icn-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}
.icn-collection__heading, .icn-related__heading, .icn-section-heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--30);
}
@media (max-width: 1100px) { .icn-collection__grid, .icn-related__grid, .icn-archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .icn-collection__grid, .icn-related__grid, .icn-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .icn-collection__grid, .icn-related__grid, .icn-archive-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   POPULAR BRANDS
   ========================================================================== */
.icn-popular-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.icn-popular-brands__item {
	display: flex; flex-direction: column; gap: 0.2rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.9rem 1rem;
	text-decoration: none;
}
.icn-popular-brands__item:hover { border-color: var(--wp--preset--color--accent); }
.icn-popular-brands__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--foreground); }
.icn-popular-brands__count { font-size: 0.8rem; color: var(--wp--preset--color--foreground-muted); }
@media (max-width: 780px) { .icn-popular-brands { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   VIDEO PLACEHOLDER
   ========================================================================== */
.icn-video-placeholder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--40); }
.icn-video-placeholder__card { text-align: center; }
.icn-video-placeholder__thumb {
	aspect-ratio: 16/9; background: var(--wp--preset--color--surface); border: 1px dashed var(--wp--preset--color--border);
	border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.6rem;
}
.icn-video-placeholder__play { font-size: 2rem; color: var(--wp--preset--color--steel); }
@media (max-width: 780px) { .icn-video-placeholder { grid-template-columns: 1fr; } }

/* ==========================================================================
   CAR PAGE
   ========================================================================== */
.icn-car-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--wp--preset--spacing--50); align-items: center; margin-bottom: var(--wp--preset--spacing--50); }
.icn-car-hero__media { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--wp--preset--color--surface); }
.icn-car-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-car-hero__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); }
.icn-car-hero__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0.3rem 0 0.8rem; }
.icn-car-hero__price { font-family: var(--wp--preset--font-family--heading); font-size: 1.8rem; font-weight: 800; color: var(--wp--preset--color--accent); }
.icn-car-hero__price-label { font-size: 0.85rem; color: var(--wp--preset--color--foreground-muted); font-weight: 400; text-transform: none; margin-left: 0.4rem; }

.icn-quick-specs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; margin-bottom: var(--wp--preset--spacing--50); }
.icn-quick-specs__item {
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; text-align: center;
}
.icn-quick-specs__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--foreground-muted); }
.icn-quick-specs__value { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
@media (max-width: 900px) { .icn-quick-specs { grid-template-columns: repeat(2, 1fr); } .icn-car-hero { grid-template-columns: 1fr; } }

.icn-variants-table, .icn-specs-table, .icn-comparison-table { width: 100%; border-collapse: collapse; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; overflow: hidden; }
.icn-variants-table th, .icn-variants-table td,
.icn-specs-table th, .icn-specs-table td,
.icn-comparison-table th, .icn-comparison-table td {
	padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--border); font-size: 0.92rem;
}
.icn-variants-table thead th { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--wp--preset--color--foreground-muted); }
.icn-variants-table__name { font-weight: 600; }
.icn-variants-table__price, .icn-comparison-table__row-label { color: var(--wp--preset--color--accent); font-weight: 700; }
.icn-specs-table th { width: 45%; color: var(--wp--preset--color--foreground-muted); font-weight: 600; }
.icn-comparison-table th { font-family: var(--wp--preset--font-family--heading); }
.icn-comparison-table thead th a { color: var(--wp--preset--color--foreground); text-decoration: none; }
.icn-comparison-table thead th a:hover { color: var(--wp--preset--color--accent); }

.icn-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--20); }
.icn-pros-cons__col { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; padding: var(--wp--preset--spacing--30); }
.icn-pros-cons__col h3 { margin-top: 0; font-size: 1.1rem; }
.icn-pros-cons__col--pros h3 { color: var(--wp--preset--color--accent); }
.icn-pros-cons__col ul { margin: 0; padding-left: 1.2rem; }
.icn-pros-cons__col li { margin-bottom: 0.5rem; font-size: 0.92rem; }
@media (max-width: 780px) { .icn-pros-cons { grid-template-columns: 1fr; } }

/* ==========================================================================
   REVIEW PAGE — v4.0 Layout Redesign
   ========================================================================== */
/* v4.0: "Make review title full-width above the hero image. Add a short
   subtitle below the title. Remove the split layout." This is the new
   full-width header block (title/subtitle/meta) that now renders BEFORE
   the hero image, instead of the image and title sitting side by side. */
.icn-review-header { margin-bottom: var(--wp--preset--spacing--20); }
/* v4.4 "Editorial Polish": "Still too thin... Title 60px." Revised DOWN
   from v4.3's 64px ceiling — still a clamp() for responsiveness (this
   project's established pattern for every explicit type-size ask, e.g.
   the section-heading rule below), tuned so ordinary desktop/laptop
   viewports (~1280px+) render the real 60px the brief asks for. */
.icn-review-header__title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.1; margin: 0.3rem 0 0.6rem; }
.icn-review-header__subtitle {
	font-size: 1.1rem;
	color: var(--wp--preset--color--foreground-muted);
	max-width: 70ch;
	margin: 0 0 0.75rem;
	line-height: 1.6;
}
.icn-review-hero__car-link { color: var(--wp--preset--color--accent); font-weight: 600; text-decoration: none; }
.icn-review-hero__car-link:hover { text-decoration: underline; }

/* v4.2 "Premium Editorial" redesign: "Author • Published • Updated •
   Reading Time" byline row, real data throughout (see
   icn_block_review_hero()). Sits between the subtitle and the "View {car}
   specs" link, using the same brightened muted-grey scoped to this page
   (per the v4.1 contrast fix). v4.4: "Meta 15px" — bumped from the
   v4.1-era 14px. */
.icn-review-header__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	color: #B5B1BC;
	margin: 0 0 0.85rem;
}
.icn-review-header__author {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	text-decoration: none;
}
.icn-review-header__author:hover { text-decoration: underline; }
.icn-review-header__byline-sep { opacity: 0.6; }

/* v4.0: "Replace the square image with a full-width landscape image. 16:9
   ratio, object-fit: cover, rounded corners, responsive, maximum visual
   impact." .icn-review-hero used to be a 2-column grid (image + title
   side by side, aspect-ratio 4/3 — the "split layout" / "square image"
   this round explicitly removes); it's now just a plain full-width block,
   and the media itself is a real 16:9 box instead of 4:3. `width: 100%` +
   `aspect-ratio` together make this genuinely responsive at any viewport —
   no fixed pixel height anywhere. */
.icn-review-hero { margin-bottom: var(--wp--preset--spacing--50); }
.icn-review-hero__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.icn-review-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-review-hero__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); }

/* v4.2 "Premium Editorial" redesign: "Convert the top image into a
   full-width carousel with clickable thumbnails below it." Replaces the
   above static hero + the separate below-the-fold Gallery section (see
   icn_block_review_hero_carousel()). The main photo keeps the same real
   16:9 box the old hero used (reusing .icn-review-hero__placeholder for
   the empty-state fallback); the thumbnail strip below is a fixed 5-across
   row of small clickable stills, with simple prev/next arrows overlaid on
   the main image for keyboard-free cycling through every real photo. */
/* v4.4 "Editorial Polish": "Increase image size." Taller 3:2 box (was
   16:9) — closer to the sideloaded photos' own native ratio, so
   object-fit:cover crops less and the hero photo reads as genuinely
   larger/more dominant at the top of the article, matching "almost the
   full article width" from the brief. */
.icn-review-carousel { margin-bottom: var(--wp--preset--spacing--30); }
.icn-review-carousel__main {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.icn-review-carousel__main-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-review-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: none;
	background: rgba(10, 10, 14, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s var(--icn-ease-out, ease), transform 0.2s var(--icn-ease-out, ease);
}
.icn-review-carousel__nav:hover { background: var(--wp--preset--color--accent); transform: translateY(-50%) scale(1.06); }
.icn-review-carousel__nav--prev { left: 1rem; }
.icn-review-carousel__nav--next { right: 1rem; }
.icn-review-carousel__thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.6rem;
	margin-top: 0.75rem;
}
.icn-review-carousel__thumb {
	position: relative;
	display: block;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: border-color 0.2s var(--icn-ease-out, ease), transform 0.2s var(--icn-ease-out, ease);
}
.icn-review-carousel__thumb:hover { transform: translateY(-2px); }
.icn-review-carousel__thumb.is-active { border-color: var(--wp--preset--color--accent); }
.icn-review-carousel__thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v4.4: "labeled thumbnails: Interior, Rear, Dashboard, Seats, Boot,
   Engine." A small gradient-backed caption overlaid on each thumbnail,
   sourced from the attachment's own real alt text (see
   icn_block_review_hero_carousel()) — only rendered when that alt text
   exists, so thumbnails with no label set yet look exactly as before. */
.icn-review-carousel__thumb-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.3rem 0.4rem 0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(10, 10, 14, 0.75), rgba(10, 10, 14, 0));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 700px) {
	.icn-review-carousel__thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
	.icn-review-carousel__thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* v4.0: "ICN Score... Replace the single numeric score with category
   ratings... Display using horizontal progress bars." The old flex layout
   assumed a badge column beside the bars; now it's bars-only, so this is a
   plain block card instead. .icn-rating__badge/__number/__scale below are
   UNUSED now (icn_block_review_rating() no longer renders them) — left in
   place per this project's "extend, don't delete" convention. */
.icn-rating { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); }
.icn-rating__badge { display: flex; align-items: baseline; gap: 0.3rem; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-radius: 10px; padding: 0.9rem 1.3rem; font-family: var(--wp--preset--font-family--heading); }
.icn-rating__number { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.icn-rating__scale { font-size: 0.95rem; font-weight: 600; }
.icn-rating__bars { display: flex; flex-direction: column; gap: 0.85rem; }
.icn-rating__bar-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 0.9rem; }
.icn-rating__bar-label { font-size: 0.88rem; color: var(--wp--preset--color--foreground-muted); }
.icn-rating__bar-track { height: 8px; background: var(--wp--preset--color--base); border-radius: 4px; overflow: hidden; }
.icn-rating__bar-fill { display: block; height: 100%; background: var(--wp--preset--color--accent); border-radius: 4px; transition: width 0.6s var(--icn-ease-out, ease); }
.icn-rating__bar-value { font-size: 0.88rem; font-weight: 700; text-align: right; }
@media (max-width: 560px) { .icn-rating__bar-row { grid-template-columns: 96px 1fr 40px; gap: 0.5rem; } }
/* "Overall Score" is now just the last bar in the list (moved out of its
   own big-number badge) — visually emphasized so it still reads as THE
   number, without a separate competing display: bolder/brighter label and
   value, a taller track, and a slightly thicker fill. */
.icn-rating__bar-row--overall {
	padding-top: 0.85rem;
	margin-top: 0.15rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.icn-rating__bar-row--overall .icn-rating__bar-label { font-weight: 700; color: var(--wp--preset--color--foreground); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; }
.icn-rating__bar-row--overall .icn-rating__bar-track { height: 10px; }
.icn-rating__bar-row--overall .icn-rating__bar-fill { background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent)); }
.icn-rating__bar-row--overall .icn-rating__bar-value { font-size: 1.05rem; font-weight: 800; color: var(--wp--preset--color--accent); }

.icn-review-video { margin-bottom: var(--wp--preset--spacing--50); }
.icn-review-video__frame { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; }

/* v4.0: "Gallery" — real images attached to the review post's own media
   library (see icn_block_review_gallery()). Plain responsive grid, no new
   lightbox JS (see that function's docblock for why). */
.icn-review-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
	margin-bottom: var(--wp--preset--spacing--50);
}
.icn-review-gallery__item {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	transition: transform 0.25s var(--icn-ease-out, ease), box-shadow 0.25s ease;
}
.icn-review-gallery__item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.icn-review-gallery__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-review-video__frame iframe, .icn-review-video__frame embed { width: 100%; height: 100%; }

/* v4.0 item 9: "Car Marquee — Create a new horizontal marquee component.
   Small car thumbnails should continuously move from right to left. Hover
   pauses animation. Each thumbnail is clickable. Show car name on hover.
   This should become a signature Indian Car Nerds element." Reuses the
   same continuous-scroll mechanism as .icn-marquee/.icn-marquee__track
   (see icn_block_trending_news_ticker()) — a plain CSS keyframe translateX
   loop over a 2x-duplicated track, no JS wiring, deliberately lighter than
   the drag/arrow-enabled [data-icn-marquee] ticker variant since the brief
   only asks for ambient scroll + hover-pause + click + name-on-hover. */
.icn-car-marquee-section { margin-bottom: var(--wp--preset--spacing--50); }
.icn-car-marquee-section__heading { font-size: var(--wp--preset--font-size--large, 1.4rem); margin: 0 0 1rem; }
/* Overrides the shared .icn-marquee's `cursor: grab` (that one assumes the
   drag-to-scroll [data-icn-marquee] JS hook, which this lighter component
   deliberately doesn't use — see icn_block_car_marquee()'s docblock). */
.icn-car-marquee { overflow: hidden; cursor: default; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.icn-car-marquee .icn-marquee__track { display: flex; gap: 1rem; width: max-content; animation: icn-marquee-scroll 34s linear infinite; }
.icn-car-marquee:hover .icn-marquee__track { animation-play-state: paused; }
.icn-car-marquee__item {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 120px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.25s var(--icn-ease-out, ease), box-shadow 0.25s ease;
}
.icn-car-marquee__item:hover, .icn-car-marquee__item:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
.icn-car-marquee__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.icn-car-marquee__name {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.35rem 0.4rem 0.3rem;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icn-car-marquee__item:hover .icn-car-marquee__name,
.icn-car-marquee__item:focus-visible .icn-car-marquee__name { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.icn-car-marquee .icn-marquee__track { animation: none; }
}

/* v4.0 item 6: "Consistent Spacing — All content sections must align to
   one consistent content width... Standardize spacing across the page."
   The Review-page-only diagnosis found three different margin-bottom
   preset values in play across the main column's components (--spacing--50
   on hero/rating, --spacing--20 on the shared .icn-pros-cons, --spacing--40
   on the shared .icn-table-wrap, and effectively 0 on the verdict block now
   that its old inline-styled heading is gone). Standardizing all of them to
   --spacing--50 here, scoped with the .icn-review-layout__main prefix so
   the Car and Comparison pages — which also use .icn-pros-cons and
   .icn-table-wrap — are completely unaffected; their own bare-class rules
   (line ~15 and ~397 above) are left exactly as they were.
   v4.4: "There is still too much empty vertical spacing... reduce margins
   between sections." Trimmed one step, from --spacing--50 (48px) to
   --spacing--40 (32px), across all three. */
.icn-review-layout__main .icn-pros-cons { margin-bottom: var(--wp--preset--spacing--40); }
.icn-review-layout__main .icn-table-wrap { margin-bottom: var(--wp--preset--spacing--40); }
.icn-review-layout__main .icn-comparison-winner__verdict { margin-bottom: var(--wp--preset--spacing--40); }

/* ==========================================================================
   REVIEW PAGE — v4.1 "Premium Polish" pass
   Carwow / Apple / Motor1 / Porsche / TopGear-inspired: dark, minimal,
   editorial. Every rule below is scoped to the Review page's own wrapper
   classes (.icn-review-layout__main / .icn-review-rail / .icn-review-related)
   or to Review-only markup (.icn-specs-accordion, .icn-review-gallery,
   .icn-verdict-quote, .icn-gallery-lightbox) — nothing here touches the
   Homepage, News, Footer, or navigation.
   ========================================================================== */

/* ---- Quick Vehicle Information: card styling + icons ------------------
   icn_theme_quick_specs_html() itself (shared with the Car page) is
   untouched — icons are added purely via nth-child + CSS mask-image so the
   Car page's own rendering of the same markup is completely unaffected. */
.icn-review-layout__main .icn-quick-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.icn-review-layout__main .icn-quick-specs__item {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1rem 1rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	transition: transform 0.2s var(--icn-ease-out), border-color 0.2s var(--icn-ease-out);
}
.icn-review-layout__main .icn-quick-specs__item:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent);
}
.icn-review-layout__main .icn-quick-specs__item::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--accent);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}
.icn-review-layout__main .icn-quick-specs__item:nth-child(1)::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013l2-5a2%202%200%200%201%202-1h10a2%202%200%200%201%202%201l2%205%27/%3E%3Cpath%20d%3D%27M3%2013h18v4a1%201%200%200%201-1%201h-1a1%201%200%200%201-1-1v-1H6v1a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1z%27/%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2717.5%27%20r%3D%271.5%27/%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2717.5%27%20r%3D%271.5%27/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013l2-5a2%202%200%200%201%202-1h10a2%202%200%200%201%202%201l2%205%27/%3E%3Cpath%20d%3D%27M3%2013h18v4a1%201%200%200%201-1%201h-1a1%201%200%200%201-1-1v-1H6v1a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1z%27/%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2717.5%27%20r%3D%271.5%27/%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2717.5%27%20r%3D%271.5%27/%3E%3C/svg%3E");
}
.icn-review-layout__main .icn-quick-specs__item:nth-child(2)::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2022V4a1%201%200%200%201%201-1h7a1%201%200%200%201%201%201v18%27/%3E%3Cpath%20d%3D%27M3%2010h9%27/%3E%3Cpath%20d%3D%27M3%2022h9%27/%3E%3Cpath%20d%3D%27M14%208h2l3%203v6.5a1.5%201.5%200%200%201-3%200V14h-2%27/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2022V4a1%201%200%200%201%201-1h7a1%201%200%200%201%201%201v18%27/%3E%3Cpath%20d%3D%27M3%2010h9%27/%3E%3Cpath%20d%3D%27M3%2022h9%27/%3E%3Cpath%20d%3D%27M14%208h2l3%203v6.5a1.5%201.5%200%200%201-3%200V14h-2%27/%3E%3C/svg%3E");
}
.icn-review-layout__main .icn-quick-specs__item:nth-child(3)::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a9%209%200%201%201%209-9%27/%3E%3Cpath%20d%3D%27M12%2012l4-4%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271%27/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a9%209%200%201%201%209-9%27/%3E%3Cpath%20d%3D%27M12%2012l4-4%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271%27/%3E%3C/svg%3E");
}
.icn-review-layout__main .icn-quick-specs__item:nth-child(4)::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%204h5a2%202%200%200%201%202%202v6%27/%3E%3Cpath%20d%3D%27M7%204v14a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d%3D%27M7%2012h9%27/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%204h5a2%202%200%200%201%202%202v6%27/%3E%3Cpath%20d%3D%27M7%204v14a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d%3D%27M7%2012h9%27/%3E%3C/svg%3E");
}
.icn-review-layout__main .icn-quick-specs__item:nth-child(5)::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2712%202%202%207%2012%2012%2022%207%2012%202%27/%3E%3Cpolyline%20points%3D%272%2017%2012%2022%2022%2017%27/%3E%3Cpolyline%20points%3D%272%2012%2012%2017%2022%2012%27/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2712%202%202%207%2012%2012%2022%207%2012%202%27/%3E%3Cpolyline%20points%3D%272%2017%2012%2022%2022%2017%27/%3E%3Cpolyline%20points%3D%272%2012%2012%2017%2022%2012%27/%3E%3C/svg%3E");
}
.icn-review-layout__main .icn-quick-specs__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #B5B1BC;
}
.icn-review-layout__main .icn-quick-specs__value {
	font-size: 1rem;
	font-weight: 700;
}

/* ---- v4.4 "Editorial Polish": ICN Verdict, plain editorial text ---------
   "Don't make it a quote box... much more editorial." Replaces v4.1's
   premium-quote-box treatment (giant quote mark, italic serif text) with
   plain, confident editorial paragraph text, a real star rating derived
   from the review's own overall_rating field, and a plain attribution
   line — see icn_block_review_verdict() in inc/blocks.php. */
.icn-verdict-quote {
	position: relative;
}
.icn-verdict-quote__text p {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.65;
	font-style: normal;
	color: var(--wp--preset--color--foreground);
	margin: 0 0 0.9rem;
}
.icn-verdict-quote__stars {
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.4rem;
}
.icn-verdict-quote__attribution {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--foreground-muted);
}
.icn-verdict-quote__attribution::before {
	content: "— ";
}

/* ---- Specifications: accordion sections --------------------------------
   "Use accordion sections... Expandable rows." Native disclosure pattern
   (button[aria-expanded] + a sibling panel toggled by nav.js, the same
   [hidden]-attribute convention already used for collapsed comment
   replies) rather than <details> — keeps the chevron-rotate and
   height-transition fully under this theme's own animation system. */
.icn-specs-accordion {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--50);
}
.icn-specs-accordion__section { border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-specs-accordion__section:last-child { border-bottom: none; }
.icn-specs-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	background: var(--wp--preset--color--surface);
	border: none;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s var(--icn-ease-out);
}
.icn-specs-accordion__trigger:hover { background: var(--wp--preset--color--graphite-raised, rgba(255,255,255,0.04)); }
.icn-specs-accordion__chevron { flex: none; transition: transform 0.25s var(--icn-ease-out); color: var(--wp--preset--color--accent); }
.icn-specs-accordion__trigger[aria-expanded="true"] .icn-specs-accordion__chevron { transform: rotate(180deg); }
.icn-specs-accordion__panel {
	padding: 0 1.4rem 1.4rem;
	background: var(--wp--preset--color--base);
}
.icn-specs-accordion__panel .icn-table-wrap { margin-bottom: 0; }
.icn-specs-accordion__panel .icn-specs-table,
.icn-specs-accordion__panel .icn-variants-table { width: 100%; }
.icn-specs-accordion__simple { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--foreground); }

/* ---- Gallery: hero + 5 thumbnails + lightbox ---------------------------
   "One of the most important sections. Completely redesign. Large hero
   image, 5 thumbnails under it." */
.icn-review-gallery {
	display: block;
	margin-bottom: var(--wp--preset--spacing--50);
}
.icn-review-gallery__hero {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: none;
	padding: 0;
	cursor: pointer;
	margin-bottom: 0.75rem;
}
.icn-review-gallery__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--icn-ease-out);
}
.icn-review-gallery__hero:hover .icn-review-gallery__hero-image { transform: scale(1.04); }
.icn-review-gallery__expand {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(13,13,15,0.65);
	backdrop-filter: blur(6px);
	color: #fff;
}
.icn-review-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
}
.icn-review-gallery__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: transform 0.25s var(--icn-ease-out), box-shadow 0.25s ease;
}
.icn-review-gallery__thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.icn-review-gallery__thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--icn-ease-out); }
.icn-review-gallery__thumb:hover .icn-review-gallery__thumb-image { transform: scale(1.08); }
.icn-review-gallery__overflow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	background: rgba(13,13,15,0.6);
}
@media (max-width: 780px) {
	.icn-review-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.icn-review-gallery__thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* Lightbox overlay — Review-page-scoped (data-icn-review-lightbox), a
   genuinely separate instance from the homepage's own single-instance
   photo lightbox in nav.js (see icn_block_review_gallery()'s docblock). */
.icn-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icn-gallery-lightbox[hidden] { display: none; }
.icn-gallery-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 10, 0.92);
	backdrop-filter: blur(4px);
}
.icn-gallery-lightbox__stage {
	position: relative;
	z-index: 1;
	width: min(1100px, 92vw);
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icn-gallery-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.icn-gallery-lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 10px;
	object-fit: contain;
	animation: icn-gallery-fade 0.25s var(--icn-ease-out);
}
@keyframes icn-gallery-fade { from { opacity: 0.2; } to { opacity: 1; } }
.icn-gallery-lightbox__caption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--foreground-muted);
	text-align: center;
}
.icn-gallery-lightbox__control {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
.icn-gallery-lightbox__control:hover { background: var(--wp--preset--color--accent); transform: scale(1.06); }
.icn-gallery-lightbox__control--close { top: -4px; right: -4px; }
.icn-gallery-lightbox__control--fullscreen { top: -4px; right: 48px; }
.icn-gallery-lightbox__control--prev { left: -60px; top: 50%; transform: translateY(-50%); }
.icn-gallery-lightbox__control--next { right: -60px; top: 50%; transform: translateY(-50%); }
.icn-gallery-lightbox__control--prev:hover, .icn-gallery-lightbox__control--next:hover { transform: translateY(-50%) scale(1.06); }
.icn-gallery-lightbox__counter {
	position: absolute;
	bottom: -2.25rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--foreground-muted);
}
@media (max-width: 780px) {
	.icn-gallery-lightbox__control--prev { left: 0.5rem; }
	.icn-gallery-lightbox__control--next { right: 0.5rem; }
	.icn-gallery-lightbox__control--fullscreen { display: none; }
}

/* ---- Related Articles: landscape cards ---------------------------------
   Scoped to .icn-review-related (the Review page's own wrapper class,
   added in icn_block_review_related_articles()) so the shared
   .icn-content-card component's default vertical layout — used elsewhere
   on Car/Comparison pages — is completely unaffected. */
.icn-review-related .icn-related__grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.icn-review-related .icn-content-card {
	flex-direction: row;
	align-items: stretch;
}
.icn-review-related .icn-content-card__link { flex-direction: row; }
.icn-review-related .icn-content-card__media {
	flex: 0 0 220px;
	aspect-ratio: 16 / 10;
}
@media (max-width: 640px) {
	.icn-review-related .icn-content-card,
	.icn-review-related .icn-content-card__link { flex-direction: column; }
	.icn-review-related .icn-content-card__media { flex-basis: auto; }
}
.icn-review-related .icn-content-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.icn-review-related .icn-content-card__title {
	font-size: 1.15rem;
}

/* ---- Comment section: compact modern layout ----------------------------
   Scoped entirely under .icn-review-layout__main — icn_block_comments_section()
   is shared with News/Buying Guide/Comparison pages, so every rule here
   targets the Review page's own wrapper, never the bare .icn-comments /
   .icn-comment classes those other pages also render. */
.icn-review-layout__main .icn-comments__header { margin-bottom: 1rem; }
.icn-review-layout__main .icn-comment__card {
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	transition: transform 0.2s var(--icn-ease-out), box-shadow 0.2s var(--icn-ease-out), background 0.2s var(--icn-ease-out);
}
.icn-review-layout__main .icn-comment__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--icn-shadow-sm);
	background: var(--wp--preset--color--surface);
}
.icn-review-layout__main .icn-comment__header {
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}
.icn-review-layout__main .icn-comment__avatar img {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50%;
}
.icn-review-layout__main .icn-comment__identity {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	line-height: 1.3;
}
.icn-review-layout__main .icn-comment__author { font-size: 0.9rem; font-weight: 700; }
.icn-review-layout__main .icn-comment__date { font-size: 0.78rem; color: #9C99A3; }
.icn-review-layout__main .icn-comment__content {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0.25rem 0 0.5rem;
}
.icn-review-layout__main .icn-comment__actions {
	gap: 0.9rem;
	margin-top: 0.25rem;
}
.icn-review-layout__main .icn-comment__like-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.82rem;
	color: #B5B1BC;
	background: none;
	border: none;
	padding: 0.25rem 0.4rem;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}
.icn-review-layout__main .icn-comment__like-btn:hover { color: var(--wp--preset--color--accent); background: var(--wp--preset--color--surface); }
.icn-review-layout__main .icn-comment__reply-link {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	border-radius: 8px;
	padding: 0.25rem 0.5rem;
	transition: background 0.2s ease;
}
.icn-review-layout__main .icn-comment__reply-link:hover { background: var(--wp--preset--color--surface); }
.icn-review-layout__main .icn-comment__replies-toggle {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	background: none;
	border: none;
	padding: 0.4rem 0.2rem;
	cursor: pointer;
}
.icn-review-layout__main .icn-comment__replies { margin-top: 0.4rem; padding-left: 1.5rem; }
.icn-review-layout__main .icn-comments__list { gap: 0.4rem; }

/* v4.4: "'💬 Join Garage Talk' heading" above the composer card — Review
   page only (see icn_block_comments_section()). */
.icn-review-layout__main .icn-comment-form__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
}

/* Composer: single rounded input, emoji + attach-image icons, Post button
   aligned right. */
.icn-review-layout__main .icn-comment-form__emoji-wrap {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 0.6rem 0.6rem 0.6rem 1rem;
}
.icn-review-layout__main .icn-comment-form__textarea {
	flex: 1;
	border: none;
	background: none;
	resize: none;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
	padding: 0.3rem 0;
}
.icn-review-layout__main .icn-comment-form__textarea:focus { outline: none; }
.icn-review-layout__main .icn-comment-form__emoji-toggle,
.icn-review-layout__main .icn-comment-form__attach-toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: none;
	color: #B5B1BC;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.icn-review-layout__main .icn-comment-form__emoji-toggle:hover,
.icn-review-layout__main .icn-comment-form__attach-toggle:not(:disabled):hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}
.icn-review-layout__main .icn-comment-form__attach-toggle:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}
.icn-review-layout__main .icn-comment-form--composer .form-submit {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.6rem;
}
.icn-review-layout__main .icn-comment-form__submit {
	border-radius: var(--icn-radius-pill, 999px);
	padding: 0.55rem 1.4rem;
	font-weight: 700;
}

/* v4.2 "Premium Editorial" redesign: "Reader Discussion" — moved up to
   directly below ICN Score, now one of the page's primary engagement
   areas. The real comment count sits as a quieter companion badge next to
   the "Reader Discussion" heading rather than being the heading itself
   (the heading text swap + count-as-span is Review-only, see
   icn_block_comments_section()). */
.icn-review-layout__main .icn-comments { margin-top: 0; }
.icn-review-layout__main .icn-comments__count {
	font-size: 0.9rem;
	font-weight: 600;
	color: #B5B1BC;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
}
/* "Sort options (Popular, Newest, Editor Picks)" — three real, slightly
   longer labels than the old Top/Newest/Most Helpful set, so the pill row
   gets a touch more breathing room to avoid crowding/wrapping awkwardly. */
.icn-review-layout__main .icn-comments__sort-btn { padding: 0.45rem 1rem; }
/* "Load more." A plain full-width outlined pill beneath the visible
   comments, matching the composer's rounded-card language. */
.icn-review-layout__main .icn-comments__load-more {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	padding: 0.85rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s var(--icn-ease-out), color 0.2s var(--icn-ease-out);
}
.icn-review-layout__main .icn-comments__load-more:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* v4.3/v4.4 "Garage Talk" — X/Twitter-style compact discussion feed.
   "Don't make it look like WordPress comments... no huge cards, no huge
   profile, no huge margins." v4.4 revises the height budget DOWN again,
   to "around 70-90px," and restructures the card to exactly: avatar+name
   row, comment text, then ONE bottom row reading "❤ 28 · Reply ·
   2 min ago" — so the timestamp moves out of the header (see
   icn_theme_render_comment() in inc/comments.php, which now only prints
   .icn-comment__date in the header for non-Review post types, and prints
   an inline copy in the actions row for Review). The "·" separators are
   real DOM spans (not CSS content on hidden elements), placed only around
   the items that stay visible in this compact variant — the hidden
   Dislike/Report forms sit between them in the DOM but contribute zero
   width/gap since they're display:none, so no stray double-dot ever
   shows. Every other post type keeps the card styling above completely
   unchanged — nothing here touches the bare .icn-comment / .icn-comments
   classes those pages also render. */
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__card {
	padding: 0.4rem 0;
	border-radius: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: none;
	box-shadow: none;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__card:hover {
	transform: none;
	box-shadow: none;
	background: none;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment:last-child > .icn-comment__card {
	border-bottom: none;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__header {
	gap: 0.4rem;
	margin-bottom: 0.15rem;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__avatar img {
	width: 20px !important;
	height: 20px !important;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__identity { gap: 0.35rem; }
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__author { font-size: 0.85rem; }
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__date { font-size: 0.72rem; }
/* v4.4: "Comments 17px." Bumped from v4.3's 14.4px; line-height trimmed
   to 1.35 (was 1.4) to keep the taller text inside the same tight card. */
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__content {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0.1rem 0 0.25rem;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__like-btn,
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__reply-link,
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__replies-toggle {
	padding: 0.1rem 0.2rem;
	font-size: 0.78rem;
}
/* Inline "· Reply · 2 min ago" — the same .icn-comment__date component
   reused inline (see icn_theme_render_comment()), plus the literal "·"
   separator spans printed only in this compact variant. */
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__sep {
	font-size: 0.78rem;
	color: #6E6B76;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__date--inline {
	font-size: 0.78rem;
	color: #9C99A3;
}
/* "❤ count" — a heart glyph replaces the shared thumbs-up SVG for this
   compact variant only. Pure CSS swap (SVG hidden, glyph added via
   ::before) so icn_theme_render_comment() — shared with every other post
   type — needed no markup changes at all. */
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__like-btn svg {
	display: none;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__like-btn::before {
	content: "\2764";
	font-size: 0.85rem;
	line-height: 1;
}
/* "No huge cards... no huge margins." Dislike + Report stay fully real and
   functional (same handlers, same comment meta) for every other post
   type; they're simply not part of this compact card's visible surface,
   the same "composition change, not deletion" convention used elsewhere
   in this theme. */
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__like-btn--dislike,
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__report-form {
	display: none;
}
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__pinned-tag { font-size: 0.7rem; }
.icn-review-layout__main .icn-comments--garage-talk .icn-comments__list { gap: 0; }
.icn-review-layout__main .icn-comments--garage-talk .icn-comment__replies {
	padding-left: 1.2rem;
	margin-top: 0.2rem;
}

/* v4.2: "Remove excessive black empty space... denser, cleaner." The
   Author Card's shared 3rem top margin (design-system.css, also used by
   News/Buying Guide/Comparison) is trimmed slightly on the Review page
   only, now that it sits directly after the written review + Video Review
   rather than as the page's very last element. */
.icn-review-layout__main .icn-author-card { margin-top: var(--wp--preset--spacing--40); }

/* v4.2: "Integrate images naturally within the review article instead of
   separate gallery blocks." Editorial typography for real content an
   editor places directly inside the written review (wp:post-content) —
   inline images/figures, captions, and pull-quote-style blockquotes —
   scoped to this page's own wrapper so no other post type's article body
   is affected. */
.icn-review-layout__main .entry-content img,
.icn-review-layout__main .wp-block-image img {
	border-radius: 12px;
	height: auto;
	max-width: 100%;
}
.icn-review-layout__main .wp-block-image {
	margin: 2rem 0;
}
.icn-review-layout__main .wp-block-image figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--wp--preset--color--foreground-muted);
	text-align: center;
}
.icn-review-layout__main blockquote,
.icn-review-layout__main .wp-block-quote {
	margin: 2.25rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
}
.icn-review-layout__main blockquote p:last-child,
.icn-review-layout__main .wp-block-quote p:last-child { margin-bottom: 0; }
.icn-review-layout__main blockquote cite,
.icn-review-layout__main .wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--data, inherit);
	font-size: 0.85rem;
	font-weight: 600;
	font-style: normal;
	color: var(--wp--preset--color--foreground-muted);
}

/* ==========================================================================
   COMPARISON PAGE
   ========================================================================== */
.icn-comparison-winner { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); }
.icn-comparison-winner__overall { text-align: center; margin-bottom: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-comparison-winner__overall h3 { font-size: 1.6rem; margin: 0.3rem 0 0; }
.icn-comparison-winner__overall h3 a { color: var(--wp--preset--color--accent); text-decoration: none; }
.icn-comparison-winner__categories { display: flex; justify-content: space-around; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--30); text-align: center; }
.icn-comparison-winner__category strong a { color: var(--wp--preset--color--foreground); text-decoration: none; }
.icn-comparison-winner__category strong a:hover { color: var(--wp--preset--color--accent); }
.icn-comparison-winner__verdict { border-top: 1px solid var(--wp--preset--color--border); padding-top: var(--wp--preset--spacing--30); }
.icn-comparison-winner__verdict h3 { margin-top: 0; }

/* ==========================================================================
   ARCHIVES + FILTERS
   ========================================================================== */
.icn-archive-filters { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; }
.icn-archive-filters__select {
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 0.5rem 0.8rem; font-size: 0.88rem;
}
.icn-archive-filters__submit { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border: none; border-radius: 6px; padding: 0.55rem 1.1rem; font-weight: 700; cursor: pointer; font-size: 0.85rem; }
.icn-archive-filters__clear { color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; text-decoration: underline; }

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */
.icn-search-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--40); }
.icn-search-type-badge {
	display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base);
	border-radius: 4px; padding: 0.15rem 0.5rem; margin-bottom: 0.4rem; font-weight: 700;
}
@media (max-width: 900px) { .icn-search-results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .icn-search-results-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   REVIEW PAGE — v4.4 "Editorial Polish": Reaction Chips
   ========================================================================== */
/* "Introduce Reaction Chips below the article... a quick pulse of
   community sentiment." Scoped under .icn-review-layout__main since
   icn_block_review_reactions() only ever renders on car_review — see
   inc/reactions.php. */
.icn-review-layout__main .icn-reactions {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}
.icn-review-layout__main .icn-reactions__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.85rem;
	text-transform: none;
	border-bottom: none;
	padding-bottom: 0;
}
.icn-review-layout__main .icn-reactions__heading::before { content: none; }
.icn-review-layout__main .icn-reactions__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.icn-review-layout__main .icn-reactions__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border-radius: var(--icn-radius-pill, 999px);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--foreground);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s var(--icn-ease-out, ease), transform 0.2s var(--icn-ease-out, ease), background 0.2s var(--icn-ease-out, ease);
}
.icn-review-layout__main .icn-reactions__chip:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}
.icn-review-layout__main .icn-reactions__chip.is-active {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.icn-review-layout__main .icn-reactions__chip--pop { animation: icn-reaction-pop 0.35s var(--icn-ease-out, ease); }
@keyframes icn-reaction-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.icn-review-layout__main .icn-reactions__chip-emoji { font-size: 1rem; line-height: 1; }
.icn-review-layout__main .icn-reactions__chip-count {
	font-family: var(--wp--preset--font-family--data, inherit);
	font-weight: 700;
	opacity: 0.85;
}
.icn-review-layout__main .icn-reactions__prompt {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--foreground-muted);
}
.icn-review-layout__main .icn-reactions__prompt a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.3rem;
}
.icn-review-layout__main .icn-reactions__prompt a:hover { text-decoration: underline; }
@media (max-width: 560px) {
	.icn-review-layout__main .icn-reactions { padding: 1rem 1.1rem; }
	.icn-review-layout__main .icn-reactions__chip { font-size: 0.82rem; padding: 0.45rem 0.75rem; }
}