/* ==========================================================================
   Indian Car Nerds — Design System (Coral Ignition)
   Loads AFTER frontend.css — everything here is an ADDITIVE upgrade layer:
   new components (mega menu, search overlay, breadcrumbs, back-to-top),
   plus refinements to existing components (deeper shadows, rounder cards,
   hover micro-interactions, scroll-reveal, sticky header transition).
   Nothing in Milestone 3's frontend.css is deleted or renamed — this file
   only extends it, per the "only extend, don't rebuild" instruction.
   ========================================================================== */

:root {
	--icn-shadow-sm: 0 2px 8px rgba(10, 8, 6, 0.28);
	--icn-shadow-md: 0 8px 24px rgba(10, 8, 6, 0.34);
	--icn-shadow-lg: 0 20px 48px rgba(10, 8, 6, 0.42);
	--icn-shadow-glow: 0 0 0 1px rgba(242, 84, 45, 0.25), 0 8px 28px rgba(242, 84, 45, 0.18);
	--icn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--icn-radius-card: 16px;
	--icn-radius-pill: 999px;
}

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

html {
	scroll-behavior: smooth;
}
body.icn-scroll-lock {
	overflow: hidden;
}

/* ==========================================================================
   PAGE REVEAL + SCROLL REVEAL
   ========================================================================== */
body {
	animation: icn-page-reveal 0.4s var(--icn-ease-out) both;
}
@keyframes icn-page-reveal {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.icn-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--icn-ease-out), transform 0.6s var(--icn-ease-out);
}
.icn-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
.icn-reveal--stagger > * {
	transition-delay: calc(var(--icn-stagger-index, 0) * 60ms);
}

/* ==========================================================================
   LOADING SCREEN (shown briefly on first paint via inline script hook —
   pure CSS/markup here; functions.php prints the 2-line trigger)
   ========================================================================== */
.icn-loading-screen {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.4s var(--icn-ease-out), visibility 0.4s;
}
.icn-loading-screen.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.icn-loading-screen__mark {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--accent);
	animation: icn-spin 0.8s linear infinite;
}
@keyframes icn-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   HEADER — sticky transition + logo lockup
   ========================================================================== */
/* v3.6 root-cause fix: this inner `.icn-header` div used to declare its own
   `position: sticky; top: 0; z-index: 100;` here. frontend.css's `.icn-header`
   rule was rewritten back in v3.3 to `position: relative` specifically to
   remove that duplication, on the theory that the REAL fixed positioning
   lives on the ancestor `header.wp-block-template-part` in style.css — but
   design-system.css loads AFTER frontend.css, so this rule was silently
   winning the cascade and re-applying `position: sticky` every time,
   completely undoing that fix. This is the actual reason the navbar has
   kept "scrolling away" across multiple rounds even though it looked fixed
   in the markup/JS. There is now exactly ONE authoritative positioning rule
   for the header — `header.wp-block-template-part { position: sticky; ... }`
   in style.css (background/blur/z-index tightened there too for v3.6;
   v3.7 switched fixed → sticky, see that file) — so this selector only
   carries the non-positioning transition it always needed for the
   scroll-shrink effect. The old admin-bar `top` offset rules that used to
   live here moved to style.css alongside the real positioning rule they
   needed to sit next to, and were removed entirely in v3.7 once switching
   to `position: sticky` made them unnecessary (see style.css)
   (offsetting an unpositioned element does nothing, so leaving them here
   would just be dead weight). */
.icn-header {
	transition: background-color 0.25s var(--icn-ease-out), box-shadow 0.25s var(--icn-ease-out), padding 0.25s var(--icn-ease-out);
}
.icn-header.is-scrolled {
	background-color: rgba(13, 13, 15, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--icn-shadow-md);
}
.icn-header__bar {
	/* v3.9: "Reduce overall navbar height slightly" — paired with the
	   min-height cut in homepage-v2.css's .icn-header__bar rule. */
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	transition: padding 0.25s var(--icn-ease-out);
}
.icn-header.is-scrolled .icn-header__bar {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.icn-header__logo {
	display: flex;
	align-items: center;
	/* v3.9: "reduce the width occupied by the branding block" — gap pulled
	   back in (0.85rem -> 0.55rem; v3.8 had opened it up for a then-larger
	   mark+tagline column). v4.0: nudged back up slightly (0.55rem ->
	   0.65rem) to give the now-larger mark + wordmark a touch of breathing
	   room, well short of v3.8's wider gap. */
	gap: 0.65rem;
}
.icn-header__logo-mark {
	/* v3.9: "Make logo slightly larger than menu items but reduce the width
	   occupied by the branding block." 56px (v3.8's "visual hero of the
	   navbar" treatment) shrunk to 40px — still comfortably bigger than the
	   17px nav text beside it, just no longer dominating the header's width.
	   v4.0 item 7: "Give more visual importance to the ICN branding" nudges
	   this back up slightly to 46px (nav text also grew to 18px alongside
	   it, so the mark stays proportionally the more prominent element).
	   This rule only styles the plain-span fallback used if
	   icn_theme_logo_mark() is somehow unavailable; the real rendered mark's
	   size comes from the $size argument passed in icn_block_site_header()
	   (also 46 now — see inc/blocks.php). */
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--wp--preset--gradient--sunset-glow, linear-gradient(135deg, var(--wp--preset--color--accent), var(--wp--preset--color--brand-coral, var(--wp--preset--color--accent))));
	box-shadow: var(--icn-shadow-glow);
	flex-shrink: 0;
	transition: width 0.25s var(--icn-ease-out), height 0.25s var(--icn-ease-out), transform 0.3s var(--icn-ease-out);
}
/* Interim "animated mascot" touch until the real illustration is uploaded as
   a theme asset (see changelog) — a real, working micro-interaction now
   rather than a placeholder graphic. */
.icn-header__logo:hover .icn-header__logo-mark {
	transform: rotate(-8deg) scale(1.08);
}
.icn-header.is-scrolled .icn-header__logo-mark {
	width: 36px;
	height: 36px;
}
/* v3.8: wordmark (+ the now-removed v3.8 tagline) shared one column so a
   tagline could sit directly under "INDIAN CAR NERDS" without upsetting the
   logo's own horizontal flex layout; the column stays even with just the
   wordmark inside (harmless, and ready if a tagline returns). Actual
   font-size/weight for .icn-header__logo-word is set in homepage-v2.css
   (the last stylesheet loaded, per the theme's own cascade order), which is
   where the v3.9 size-reduction lives — this base rule is left as a sane
   fallback in case homepage-v2.css is ever dequeued on its own. */
.icn-header__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.icn-header__logo-word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: font-size 0.25s var(--icn-ease-out);
}
.icn-header.is-scrolled .icn-header__logo-word {
	font-size: 1.05rem;
}
@media (max-width: 480px) {
	.icn-header__logo-word { font-size: 1.05rem; }
}

.icn-header__login {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	padding: 0.4rem;
	border-radius: 50%;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.icn-header__login:hover {
	color: var(--wp--preset--color--accent);
	background: rgba(242, 84, 45, 0.12);
}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.icn-nav__item--megamenu {
	position: static;
}
.icn-megamenu__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 1px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--icn-shadow-lg);
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem 2.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out), visibility 0.2s;
	z-index: 60;
}
.icn-nav__item--megamenu.icn-nav__item--open .icn-megamenu__panel,
.icn-nav__item--megamenu:hover .icn-megamenu__panel,
.icn-nav__item--megamenu:focus-within .icn-megamenu__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.icn-megamenu__heading {
	display: block;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--foreground-muted);
	margin-bottom: 0.8rem;
}
.icn-megamenu__all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--data);
}
.icn-megamenu__all-link:hover { color: var(--wp--preset--color--amber); }
.icn-megamenu__link-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.icn-megamenu__link-list li { break-inside: avoid; margin-bottom: 0.35rem; }
.icn-megamenu__link-list a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.92rem;
	position: relative;
}
.icn-megamenu__link-list a:hover { color: var(--wp--preset--color--accent); }
.icn-megamenu__featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.icn-megamenu__featured-card .icn-car-card,
.icn-megamenu__featured-card .icn-content-card {
	box-shadow: none;
}

@media (max-width: 1100px) {
	.icn-nav { display: none; }
}

/* ==========================================================================
   SEARCH OVERLAY — advanced
   ========================================================================== */
.icn-search-overlay__box { width: min(720px, 92vw); }
.icn-search-overlay__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0 1rem;
}
.icn-search-overlay__field svg { color: var(--wp--preset--color--foreground-muted); flex-shrink: 0; }
.icn-search-overlay__kbd {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.7rem;
	color: var(--wp--preset--color--foreground-muted);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.15rem 0.4rem;
}
.icn-search-overlay__live { margin-top: 1rem; max-height: 50vh; overflow-y: auto; }
.icn-search-overlay__live-list { list-style: none; margin: 0; padding: 0; }
.icn-search-overlay__live-list li a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.icn-search-overlay__live-list li a:hover { background: var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base)); }
.icn-search-overlay__no-results { color: var(--wp--preset--color--foreground-muted); padding: 1rem 0.5rem; }
.icn-search-overlay__panels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 2rem;
	margin-top: 1.75rem;
}
.icn-search-overlay__chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.icn-search-overlay__chip {
	display: inline-block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground);
	border-radius: var(--icn-radius-pill);
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.icn-search-overlay__chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-search-overlay__hint { margin-top: 1.5rem; text-align: center; font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); }
@media (max-width: 640px) { .icn-search-overlay__panels { grid-template-columns: 1fr; } }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.icn-breadcrumbs { margin: 0 0 var(--wp--preset--spacing--30); }
.icn-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.8rem;
}
.icn-breadcrumbs__item a { color: var(--wp--preset--color--foreground-muted); text-decoration: none; }
.icn-breadcrumbs__item a:hover { color: var(--wp--preset--color--accent); }
.icn-breadcrumbs__item span[aria-current] { color: var(--wp--preset--color--foreground); }
.icn-breadcrumbs__sep { color: var(--wp--preset--color--border); margin-left: 0.35rem; }

/* ==========================================================================
   FLOATING SCROLL NAV — paired up/down control, right edge
   (icn-back-to-top below is the old single-button version — left in place
   as dead CSS since it no longer matches any rendered markup.)
   ========================================================================== */
.icn-back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--icn-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out), visibility 0.2s, background-color 0.15s ease;
	z-index: 90;
}
.icn-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.icn-back-to-top:hover { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--base); }

.icn-scroll-nav {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s;
}
.icn-scroll-nav.is-visible { opacity: 1; visibility: visible; }
.icn-scroll-nav__btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--icn-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition: opacity 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out), visibility 0.2s, background-color 0.15s ease, border-color 0.15s ease;
}
.icn-scroll-nav__btn.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
/* v3.7: "Hovering buttons: Orange glow" — added to the existing solid-fill
   hover state rather than replacing it. */
.icn-scroll-nav__btn:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); box-shadow: var(--icn-shadow-glow); }
@media (max-width: 700px) { .icn-scroll-nav { display: none; } }

/* ==========================================================================
   CARD / BUTTON / LINK MICRO-INTERACTIONS (upgrades to Milestone 3 cards)
   ========================================================================== */
.icn-car-card, .icn-content-card {
	position: relative;
	border-radius: var(--icn-radius-card);
	box-shadow: var(--icn-shadow-sm);
	transition: transform 0.3s var(--icn-ease-out), box-shadow 0.3s var(--icn-ease-out), border-color 0.3s var(--icn-ease-out);
}
.icn-car-card:hover, .icn-content-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--icn-shadow-lg), var(--icn-shadow-glow);
	border-color: var(--wp--preset--color--coral-bright, var(--wp--preset--color--accent));
}
/* Cards are now <article> wrappers around a full-bleed <a class="__link">
   (media + body) plus a sibling quick-actions row of real <button>s — kept
   OUTSIDE the anchor so Save/Share aren't nested interactive elements
   inside a link, which is invalid HTML and breaks screen-reader navigation. */
.icn-car-card__link, .icn-content-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}
.icn-car-card__media, .icn-content-card__media { overflow: hidden; position: relative; }
.icn-car-card__image, .icn-content-card__image {
	transition: transform 0.5s var(--icn-ease-out);
}
.icn-car-card:hover .icn-car-card__image,
.icn-content-card:hover .icn-content-card__image {
	transform: scale(1.08);
}

/* Gradient overlay + badge + rating chip sit on top of the media area. */
.icn-content-card__gradient {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--carbon-veil, linear-gradient(180deg, rgba(13,13,15,0) 0%, rgba(13,13,15,0.85) 100%));
	pointer-events: none;
}
.icn-card-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--white, #fff);
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
	box-shadow: 0 4px 14px rgba(242, 84, 45, 0.35);
}
.icn-card-badge--new { background: var(--wp--preset--color--success, #4CAF7D); box-shadow: 0 4px 14px rgba(76, 175, 125, 0.35); }
.icn-card-badge--comparison { background: var(--wp--preset--color--warm-grey, #726A63); }
.icn-card-badge--guide { background: var(--wp--preset--color--burnt-orange, #B34700); }
.icn-card-badge--news { background: var(--wp--preset--color--steel, #8A8A8A); }
.icn-card-rating-chip {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: baseline;
	gap: 0.15rem;
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--cream, #F3EDE4);
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	box-shadow: var(--icn-shadow-sm);
}
.icn-card-rating-chip small { font-size: 0.65rem; font-weight: 600; opacity: 0.7; }

/* Save / Share quick-actions — fade in on card hover, always visible on touch
   (no hover state) via the reduced-opacity default. */
.icn-content-card__quick-actions {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: flex;
	gap: 0.4rem;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out);
}
.icn-car-card:hover .icn-content-card__quick-actions,
.icn-content-card:hover .icn-content-card__quick-actions,
.icn-content-card__quick-actions:focus-within {
	opacity: 1;
	transform: translateY(0);
}
@media (hover: none) {
	.icn-content-card__quick-actions { opacity: 0.85; transform: none; }
}
.icn-card-action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(13, 13, 15, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--cream, #F3EDE4);
	cursor: pointer;
	transition: background 0.2s var(--icn-ease-out), color 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out);
}
.icn-card-action:hover { background: var(--wp--preset--color--accent); color: #fff; transform: scale(1.08); }
.icn-card-action--save[aria-pressed="true"] {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--amber);
}
.icn-card-action--save[aria-pressed="true"] svg { fill: currentColor; }
.icn-card-action--copied { background: var(--wp--preset--color--success, #4CAF7D); color: #fff; }

/* Content card footer: author / date / reading time row */
.icn-content-card__footer {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	color: var(--wp--preset--color--foreground-muted);
	flex-wrap: wrap;
}
.icn-content-card__dot { opacity: 0.6; }

/* Buttons: consistent premium hover across every CTA-shaped element */
.wp-block-button__link,
.icn-newsletter__form button,
.icn-archive-filters__submit,
.icn-back-to-top {
	transition: transform 0.15s var(--icn-ease-out), box-shadow 0.15s var(--icn-ease-out), background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:hover,
.icn-newsletter__form button:hover,
.icn-archive-filters__submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--icn-shadow-glow);
}
.wp-block-button__link:active,
.icn-newsletter__form button:active {
	transform: translateY(0);
}

/* Hover-underline utility for inline text links (used in article prose) */
.icn-underline-link {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	transition: background-size 0.25s var(--icn-ease-out);
}
.icn-underline-link:hover { background-size: 100% 1.5px; }

/* ==========================================================================
   GLASS EFFECT (used sparingly — hero overlays, sticky sidebar chrome only)
   ========================================================================== */
.icn-glass {
	background: rgba(27, 27, 31, 0.55);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(245, 243, 239, 0.08);
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */
.icn-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
}
.icn-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(245, 243, 239, 0.06), transparent);
	animation: icn-shimmer 1.4s infinite;
}
@keyframes icn-shimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

/* ==========================================================================
   RATING / COUNTER emphasis (used with data-icn-counter targets)
   ========================================================================== */
[data-icn-counter] {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   HERO CAROUSEL (native, CSS-scroll-snap based — no JS carousel library)
   ========================================================================== */
.icn-hero-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 0;
	border-radius: var(--icn-radius-card);
	overflow: hidden;
}
.icn-hero-carousel::-webkit-scrollbar { display: none; }
.icn-hero-carousel__slide {
	scroll-snap-align: start;
	flex: 0 0 100%;
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}
.icn-hero-carousel__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(13, 13, 15, 0.92) 0%, rgba(13, 13, 15, 0.35) 55%, rgba(13, 13, 15, 0.1) 100%);
}
.icn-hero-carousel__content { position: relative; padding: 2.5rem; max-width: 640px; }
.icn-hero-carousel__tag {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.7rem;
	border-radius: 5px;
	margin-bottom: 0.8rem;
}
.icn-hero-carousel__title { font-size: var(--wp--preset--font-size--xxx-large, var(--wp--preset--font-size--xx-large)); margin: 0 0 0.7rem; }
.icn-hero-carousel__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.82rem;
	color: var(--wp--preset--color--foreground-muted);
	margin-bottom: 0.9rem;
}
.icn-hero-carousel__dot { opacity: 0.6; }
.icn-hero-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	padding: 0.7rem 1.3rem;
	border-radius: 8px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: transform 0.15s var(--icn-ease-out), background-color 0.15s ease;
}
.icn-hero-carousel__cta:hover { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--base); transform: translateY(-2px); }
@media (max-width: 780px) {
	.icn-hero-carousel__slide { min-height: 520px; }
	.icn-hero-carousel__content { padding: 1.5rem; }
}
.icn-hero-carousel__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.icn-hero-carousel__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--wp--preset--color--border);
	border: none; cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.icn-hero-carousel__dot.is-active { background: var(--wp--preset--color--accent); transform: scale(1.3); }

/* ==========================================================================
   TRENDING RIBBON
   ========================================================================== */
.icn-trending-ribbon {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	overflow-x: auto;
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	scrollbar-width: none;
}
.icn-trending-ribbon::-webkit-scrollbar { display: none; }
.icn-trending-ribbon__label {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.icn-trending-ribbon__item {
	flex-shrink: 0;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.9rem;
	white-space: nowrap;
}
.icn-trending-ribbon__item:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   BREAKING NEWS STRIP
   ========================================================================== */
.icn-breaking-strip {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 0.55rem var(--wp--preset--spacing--40);
	font-size: 0.85rem;
}
.icn-breaking-strip__tag {
	font-family: var(--wp--preset--font-family--data);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
.icn-breaking-strip a { color: var(--wp--preset--color--white); text-decoration: underline; }

/* ==========================================================================
   INSTAGRAM PLACEHOLDER GRID
   ========================================================================== */
.icn-instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; }
.icn-instagram-grid__item {
	aspect-ratio: 1;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base)));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--foreground-muted);
}
@media (max-width: 900px) { .icn-instagram-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   BOTTOM MOBILE NAVIGATION
   ========================================================================== */
.icn-bottom-nav {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 0.4rem 0.5rem env(safe-area-inset-bottom);
}
.icn-bottom-nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; }
.icn-bottom-nav__link {
	display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
	color: var(--wp--preset--color--foreground-muted);
	text-decoration: none;
	font-size: 0.68rem;
	padding: 0.3rem 0.6rem;
	min-width: 56px;
}
.icn-bottom-nav__link.is-active { color: var(--wp--preset--color--accent); }
@media (max-width: 780px) {
	.icn-bottom-nav { display: block; }
	body { padding-bottom: 58px; }
}

/* ==========================================================================
   EDITORIAL EXPERIENCE — Comments, Author Card, Sidebar Widgets,
   Reading Progress Bar, Sticky Share Buttons
   ========================================================================== */

/* ---- Comments ---- */
.icn-comments {
	max-width: 760px;
	margin: 3rem auto 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.icn-comments__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.icn-comments__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	margin: 0;
}
.icn-comments__sort {
	display: flex;
	gap: 0.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.25rem;
}
.icn-comments__sort-btn {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--foreground-muted);
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	transition: background 0.2s var(--icn-ease-out), color 0.2s var(--icn-ease-out);
}
.icn-comments__sort-btn:hover { color: var(--wp--preset--color--foreground); }
.icn-comments__sort-btn.is-active {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white, #fff);
}

.icn-comments__list,
.icn-comment__replies {
	list-style: none;
	margin: 0;
	padding: 0;
}
.icn-comment__replies {
	margin-top: 1rem;
	padding-left: 2.25rem;
	border-left: 2px solid var(--wp--preset--color--border);
}
.icn-comment {
	margin-bottom: 1rem;
}
.icn-comment__card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	transition: border-color 0.2s var(--icn-ease-out);
}
.icn-comment--pinned .icn-comment__card {
	border-color: var(--wp--preset--color--amber, var(--wp--preset--color--accent));
	background: linear-gradient(180deg, rgba(240, 194, 75, 0.06), transparent 40%), var(--wp--preset--color--surface);
}
.icn-comment__pinned-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber, var(--wp--preset--color--accent));
	margin-bottom: 0.6rem;
}
.icn-comment__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}
.icn-comment__avatar img {
	border-radius: 50%;
	display: block;
}
.icn-comment__identity {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.icn-comment__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--foreground);
}
.icn-comment-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.15rem 0.45rem;
	border-radius: 5px;
}
.icn-comment-badge--editor {
	background: rgba(232, 84, 62, 0.15);
	color: var(--wp--preset--color--accent);
}
.icn-comment-badge--owner {
	background: rgba(76, 175, 125, 0.15);
	color: var(--wp--preset--color--success, #4CAF7D);
}
.icn-comment-badge--top {
	background: rgba(240, 194, 75, 0.18);
	color: var(--wp--preset--color--amber, #F0C24B);
}
.icn-comment__date {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.78rem;
	color: var(--wp--preset--color--foreground-muted);
}
.icn-comment__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--foreground);
}
.icn-comment__content p:last-child { margin-bottom: 0; }
.icn-comment__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.75rem;
}
.icn-comment__like-form, .icn-comment__report-form { margin: 0; display: inline-flex; }
.icn-comment__like-btn--dislike:hover { color: var(--wp--preset--color--danger, #E24C4C); }
.icn-comment__report-btn { opacity: 0.7; }
.icn-comment__report-btn:hover { color: var(--wp--preset--color--danger, #E24C4C); opacity: 1; }
.icn-comment__like-btn,
.icn-comment__reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: transparent;
	border: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s var(--icn-ease-out);
}
.icn-comment__like-btn:hover,
.icn-comment__reply-link:hover { color: var(--wp--preset--color--accent); }

/* Comment form */
.icn-comment-form {
	margin-top: 2rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.5rem;
}
.icn-comment-form__textarea {
	width: 100%;
	min-height: 120px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	color: var(--wp--preset--color--foreground);
	resize: vertical;
	transition: border-color 0.2s var(--icn-ease-out);
}
.icn-comment-form__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}
.icn-comment-form input[type="text"],
.icn-comment-form input[type="email"],
.icn-comment-form input[type="url"] {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	color: var(--wp--preset--color--foreground);
	margin-bottom: 0.75rem;
	width: 100%;
}
.icn-comment-form__submit {
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white, #fff);
	border: none;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	cursor: pointer;
	transition: transform 0.2s var(--icn-ease-out), background 0.2s var(--icn-ease-out);
}
.icn-comment-form__submit:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--amber, var(--wp--preset--color--accent));
}
.icn-comments-closed {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground-muted);
	font-size: 0.9rem;
	margin-top: 1.5rem;
}

/* ---- News single post-meta row ---- */
.icn-post-meta-row {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 0.75rem 0 1.5rem;
}
.icn-post-meta-row .wp-block-post-author__avatar img {
	border-radius: 50%;
}

/* ---- Author Card ---- */
.icn-author-card {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	max-width: 760px;
	margin: 3rem auto 0;
	padding: 1.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}
.icn-author-card__avatar img {
	border-radius: 50%;
	display: block;
	border: 2px solid var(--wp--preset--color--border);
}
.icn-author-card__body { flex: 1; }
.icn-author-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0.1rem 0 0.5rem;
	color: var(--wp--preset--color--foreground);
}
.icn-author-card__name a {
	color: inherit;
	text-decoration: none;
}
.icn-author-card__name a:hover { color: var(--wp--preset--color--accent); }
.icn-author-card__bio {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground-muted);
	margin: 0 0 0.6rem;
}
.icn-author-card__count {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
@media (max-width: 600px) {
	.icn-author-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- Sidebar Widget ---- */
.icn-sidebar-widget {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.icn-sidebar-widget__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--foreground);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-sidebar-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.icn-sidebar-widget__item a {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	text-decoration: none;
}
.icn-sidebar-widget__media { flex: none; }
.icn-sidebar-widget__thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.icn-sidebar-widget__placeholder {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base)), var(--wp--preset--color--base));
}
.icn-sidebar-widget__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.icn-sidebar-widget__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--foreground);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s var(--icn-ease-out);
}
.icn-sidebar-widget__item a:hover .icn-sidebar-widget__title { color: var(--wp--preset--color--accent); }

/* ---- Reading Progress Bar ---- */
.icn-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	background: transparent;
}
body.admin-bar .icn-reading-progress { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .icn-reading-progress { top: 46px; }
}
.icn-reading-progress__fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--amber, var(--wp--preset--color--accent)));
	transition: width 0.1s linear;
}

/* ---- Sticky Share Buttons ---- */
.icn-sticky-share {
	position: fixed;
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--icn-ease-out);
}
.icn-sticky-share.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.icn-sticky-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	transition: transform 0.2s var(--icn-ease-out), color 0.2s var(--icn-ease-out), background 0.2s var(--icn-ease-out);
}
.icn-sticky-share__btn:hover {
	transform: translateX(4px) scale(1.05);
	color: var(--wp--preset--color--white, #fff);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}
.icn-sticky-share__btn.is-copied {
	background: var(--wp--preset--color--success, #4CAF7D);
	color: #fff;
	border-color: var(--wp--preset--color--success, #4CAF7D);
}
@media (max-width: 1200px) {
	.icn-sticky-share { left: 0.6rem; }
	.icn-sticky-share__btn { width: 34px; height: 34px; }
}
@media (max-width: 780px) {
	.icn-sticky-share { display: none; }
}

/* ==========================================================================
   HOMEPAGE REDESIGN — hero/sidebar split, accent + hub sections, brand
   watermark, compare widget. This is the "not one more stacked container"
   pass: different sections now genuinely use different layouts.
   ========================================================================== */

/* Section rhythm: alternate flat / raised / accent-tinted bands instead of
   every section sharing one identical background. */
.icn-section-alt {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-section-accent {
	position: relative;
	background: radial-gradient(120% 140% at 15% 0%, rgba(242, 84, 45, 0.16) 0%, transparent 55%), var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Hero + rail split */
.icn-hero-split__row {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}
.icn-hero-split__main .icn-hero-carousel { height: 100%; }
.icn-hero-split__rail .icn-sidebar-widget {
	height: 100%;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--icn-shadow-sm);
}
@media (max-width: 900px) {
	.icn-hero-split__row { flex-direction: column; }
	.icn-hero-split__main, .icn-hero-split__rail { flex-basis: 100% !important; }
}

/* Category hubs: three sub-grids inside one section for a genuinely
   different rhythm than the single-row card grids elsewhere on the page. */
.icn-hubs__row { gap: var(--wp--preset--spacing--30); align-items: flex-start; }
.icn-hubs .icn-collection__heading { font-size: 1.1rem; }
.icn-hubs .icn-collection__grid { grid-template-columns: 1fr; gap: 0.85rem; }
@media (max-width: 900px) {
	.icn-hubs__row { flex-direction: column; }
}

/* Compare Cars widget */
.icn-compare-widget {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-card);
	padding: 2rem;
	box-shadow: var(--icn-shadow-md);
}
.icn-compare-widget__heading {
	font-family: var(--wp--preset--font-family--display, var(--wp--preset--font-family--heading));
	font-size: 1.4rem;
	margin: 0 0 1.25rem;
	text-align: center;
}
.icn-compare-widget__form {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}
.icn-compare-widget__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
	min-width: 200px;
}
.icn-compare-widget__field select {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
}
.icn-compare-widget__vs {
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	padding-bottom: 0.7rem;
}
.icn-compare-widget__submit {
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	cursor: pointer;
	box-shadow: var(--icn-shadow-glow);
	transition: transform 0.2s var(--icn-ease-out);
}
.icn-compare-widget__submit:hover { transform: translateY(-2px) scale(1.02); }

/* ==========================================================================
   HEADER — notification bell + profile dropdown
   ========================================================================== */
.icn-header__notifications {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	transition: color 0.2s var(--icn-ease-out);
}
.icn-header__notifications:hover { color: var(--wp--preset--color--amber); }
.icn-header__profile { position: relative; }
.icn-header__profile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.2s var(--icn-ease-out);
}
.icn-header__profile-toggle img { border-radius: 50%; display: block; }
.icn-header__profile-toggle:hover,
.icn-header__profile.is-open .icn-header__profile-toggle { border-color: var(--wp--preset--color--accent); }
.icn-header__profile-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 200px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--icn-shadow-lg);
	padding: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--icn-ease-out), transform 0.2s var(--icn-ease-out), visibility 0.2s;
	z-index: 200;
}
.icn-header__profile.is-open .icn-header__profile-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.icn-header__profile-menu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.88rem;
	transition: background 0.15s ease;
}
.icn-header__profile-menu a:hover { background: var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base)); color: var(--wp--preset--color--amber); }

/* ==========================================================================
   MASCOT — brand identity beyond a small header icon: footer watermark +
   empty-state illustration reuse the same logo mark asset already enqueued
   for the header, so no new image asset is required here.
   ========================================================================== */
.icn-footer { position: relative; overflow: hidden; }
.icn-footer-mascot {
	position: absolute;
	right: 2rem;
	bottom: 0.5rem;
	width: 96px;
	height: 96px;
	opacity: 0.06;
	pointer-events: none;
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
	-webkit-mask: var(--icn-mascot-mask, none) center / contain no-repeat;
	mask: var(--icn-mascot-mask, none) center / contain no-repeat;
}
.icn-empty-note {
	position: relative;
	padding-left: 2.5rem;
}
.icn-empty-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base)));
	opacity: 0.8;
}

/* ==========================================================================
   DESIGN SPRINT 1 — Review page: two-column layout, sticky sidebar rail,
   compact/Top-Comments discussion UI, searchable Compare autocomplete,
   premium editorial heading treatment for the article body.
   ========================================================================== */

/* ---- Review page two-column shell ---------------------------------- */
/* v4.0 item 5: "Reduce sidebar width slightly." 360px -> 320px.
   v4.4: "Increase text width." Main column widened 900px -> 960px (and
   the overall shell widened to match) so the longer article reads more
   like a magazine column, not a narrow blog post. */
.icn-review-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 3vw, 3.5rem);
	align-items: start;
	max-width: 1660px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 1100px) {
	.icn-review-layout {
		grid-template-columns: 1fr;
	}
}
.icn-review-layout__main {
	min-width: 0;
	max-width: 960px;
}
@media (max-width: 1100px) {
	.icn-review-layout__main { max-width: none; }
}

/* Sticky rail: sticks under the sticky header, offset also accounts for
   the WP admin bar the same way the header/reading-progress bar already
   do above, so nothing overlaps a logged-in editor's admin bar.

   v4.2 "Premium Editorial" redesign: "Remove the internal sidebar
   scrollbar and make the sidebar sticky." The old `max-height` +
   `overflow-y: auto` combination is what caused the internal scrollbar in
   the first place — once the rail's real content grew taller than the
   viewport (five modules deep in v4.0/v4.1), it scrolled inside its own
   box instead of the page. Now that the rail is down to exactly two slim
   modules (Trending + Quick Comparison Links, see inc/review-sidebar.php),
   there's no real need for an internal scroll area at all: it just sticks
   and, on the rare case its content still runs long, extends past the
   fold like any normal sticky element rather than trapping its own
   scrollbar. */
.icn-review-rail {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: calc(var(--icn-header-h, 96px) + 1.5rem);
	padding-bottom: 1rem;
}
body.admin-bar .icn-review-rail {
	top: calc(var(--icn-header-h, 96px) + 32px + 1.5rem);
}
@media screen and (max-width: 782px) {
	body.admin-bar .icn-review-rail {
		top: calc(var(--icn-header-h, 96px) + 46px + 1.5rem);
	}
}
@media (max-width: 1100px) {
	.icn-review-rail {
		position: static;
	}
}
.icn-rail-module {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--icn-ease-out), transform 0.5s var(--icn-ease-out);
}
.icn-rail-module.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
/* v4.1 Premium Polish: "Trending cards are extremely narrow. Fonts are
   tiny. Cards are unreadable." Root cause of both complaints traced to two
   rules: this 0.9em downscale COMPOUNDING on top of already-small card
   type (a 0.72rem card footer became ~10px), and — below — the Trending
   module's own .icn-collection__grid inheriting frontend.css's desktop
   breakpoints (repeat(4,1fr) above 1100px viewport width), which check the
   VIEWPORT, not the ~320px column it actually renders in, so on any normal
   desktop screen each Trending card was squeezed to ~70-80px wide. Both
   fixes are scoped to this Review-only rail class; nothing else on the
   site uses `.icn-rail-module--compact-grid`. */
.icn-rail-module--compact-grid :is(.icn-content-card, .icn-car-card) {
	font-size: 1em;
}
.icn-rail-module--compact-grid .icn-collection__grid,
.icn-rail-module--compact-grid .icn-related__grid {
	grid-template-columns: 1fr;
}

/* v4.3 "Reader-First Editorial": "Sidebar 16px." Bumped again from v4.1's
   15px. Scoped sidebar-wide type bump + a brighter muted grey specifically
   in this rail (the sitewide --color--foreground-muted token itself
   already passes WCAG AA on its own backgrounds, but paired with the old
   sub-13px sizes it read as "disappearing" — this pairs the larger size
   with a touch more brightness for a comfortable reading margin, without
   touching the global token any other page relies on). */
.icn-review-rail {
	font-size: 16px;
}
.icn-review-rail .icn-meta,
.icn-review-rail .icn-content-card__footer,
.icn-review-rail .icn-sidebar-widget__title + .icn-meta {
	color: #B5B1BC;
}
.icn-review-rail .icn-sidebar-widget__title,
.icn-review-rail .icn-car-card__title,
.icn-review-rail .icn-content-card__title {
	font-size: 0.95rem;
}

/* ---- v4.1: "Top Community Comments" sidebar widget --------------------
   "Slim premium widget... should not look like a comment section... Reddit
   meets Apple." Reuses .icn-sidebar-widget's card chrome (background,
   border, radius, padding) so it sits visually consistent with the two
   widgets above it, but its own list styling is deliberately quieter than
   the full comment thread: no avatars, no reaction icons, just
   name / quote / like-count separated by hairline dividers with generous
   vertical breathing room. */
.icn-top-community {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.5rem;
}
.icn-top-community__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--foreground);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-top-community__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.icn-top-community__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-top-community__item:last-child { border-bottom: none; }
.icn-top-community__link {
	display: block;
	padding: 1rem 0.25rem;
	margin: 0 -0.25rem;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s var(--icn-ease-out), background 0.2s var(--icn-ease-out);
}
.icn-top-community__link:hover,
.icn-top-community__link:focus-visible {
	transform: translateY(-2px);
	background: var(--wp--preset--color--graphite-raised, rgba(255,255,255,0.03));
}
.icn-top-community__author {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	margin-bottom: 0.3rem;
}
.icn-top-community__quote {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--foreground);
	margin: 0 0 0.5rem;
}
.icn-top-community__likes {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* ---- v4.2: "Quick Comparison Links" sidebar widget ---------------------
   A slim, scannable link list — real Comparisons/Buying Guides that
   reference this car (see icn_theme_quick_comparison_links_html() in
   inc/review-sidebar.php), reusing the same card chrome as the other rail
   widgets. Deliberately simpler than a full content card (title + a small
   "kind" tag only, no thumbnail) since it's meant to be a quick, dense
   list rather than another set of browsable cards. */
.icn-quick-links {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.5rem;
}
.icn-quick-links__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--foreground);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-quick-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.icn-quick-links__item { border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-quick-links__item:last-child { border-bottom: none; }
.icn-quick-links__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 0.25rem;
	margin: 0 -0.25rem;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s var(--icn-ease-out), background 0.2s var(--icn-ease-out);
}
.icn-quick-links__link:hover,
.icn-quick-links__link:focus-visible {
	transform: translateY(-2px);
	background: var(--wp--preset--color--graphite-raised, rgba(255,255,255,0.03));
}
.icn-quick-links__label { font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--foreground); }
.icn-quick-links__kind {
	flex: none;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
}

/* ---- v4.3 "Reader-First Editorial": ICN Score / ICN Verdict sidebar
   cards -----------------------------------------------------------------
   "Move to RIGHT SIDEBAR... always visible... much more premium." Both
   cards reuse the exact real icn_block_review_rating() /
   icn_block_review_verdict() markup (.icn-rating, .icn-verdict-quote) and
   CSS the main column used through v4.2 — see
   icn_theme_sidebar_score_card_html() / icn_theme_sidebar_verdict_card_html()
   in inc/review-sidebar.php. This block is only their new wrapper chrome
   (same card treatment as .icn-top-community / .icn-quick-links above) plus
   narrower overrides so the bar rows and quote box actually fit a 320px
   sidebar column instead of the ~900px article width they were originally
   sized for — nothing here changes their real data or main-column
   appearance if those functions are ever called from there again. */
.icn-sidebar-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.5rem;
}
.icn-sidebar-card__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--foreground);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Score card: .icn-rating already carries its own card chrome (background/
   border/padding) for the main column — stripped here to avoid a
   card-inside-a-card look, and the 3-column bar-row grid narrows to fit. */
.icn-sidebar-card--score .icn-rating {
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 0;
}
.icn-sidebar-card--score .icn-rating__bar-row {
	grid-template-columns: 72px 1fr 32px;
	gap: 0.5rem;
}
.icn-sidebar-card--score .icn-rating__bar-label { font-size: 0.76rem; }
.icn-sidebar-card--score .icn-rating__bar-value { font-size: 0.8rem; }
.icn-sidebar-card--score .icn-rating__bar-row--overall .icn-rating__bar-label { font-size: 0.76rem; }
.icn-sidebar-card--score .icn-rating__bar-row--overall .icn-rating__bar-value { font-size: 0.92rem; }
/* Verdict card: .icn-verdict-quote sized down for this narrower, quieter,
   secondary-priority sidebar placement (main column through v4.2 gave it
   full-width prominence; here it's one of four compact rail modules).
   v4.4: updated for the plain-editorial-text redesign (no more quote-mark
   element) — see icn_block_review_verdict() in inc/blocks.php. */
.icn-sidebar-card--verdict .icn-verdict-quote__text p {
	font-size: 0.92rem;
	line-height: 1.6;
	margin-bottom: 0.7rem;
}
.icn-sidebar-card--verdict .icn-verdict-quote__stars {
	font-size: 1rem;
}

/* ---- Premium editorial headings on the article body ------------------
   v4.3 "Reader-First Editorial": "Section headings 34px." A literal size
   this round, not a range — raised from v4.2's 30-36px clamp so ordinary
   desktop/laptop viewports render the real 34px the brief asks for, kept
   as a clamp() only for small-viewport responsiveness (same pattern as
   the review title above). v4.4: "There is still too much empty vertical
   spacing... reduce margins between sections" — size stays the same
   (unchanged per this round's brief), but the top/bottom margins are
   trimmed so consecutive H2s (Overview, Driving Experience, Interior…)
   sit closer to the paragraphs around them. */
.icn-review-layout__main h2,
.icn-review-layout__main .wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 2.65vw, 2.125rem);
	margin-top: 1.75rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wp--preset--color--border);
	position: relative;
}
.icn-review-layout__main h2::before,
.icn-review-layout__main .wp-block-heading::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 2px;
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
}
.icn-review-layout__main h3 {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 2rem;
	margin-bottom: 0.85rem;
}
/* v4.3 "Reader-First Editorial": "Body 19px. Line height: 1.8." Bumped
   again from v4.2's 18px/1.7 — "it'll instantly feel like a magazine." */
.icn-review-layout__main p {
	font-size: 1.1875rem;
	line-height: 1.8;
	color: var(--wp--preset--color--foreground);
}
/* v4.1: "Metadata: 13-14px. Increase contrast — current grey text
   disappears into background." Scoped so the Car/Comparison pages that
   also use the shared `.icn-meta` utility (style.css) keep their existing
   look; only the Review page gets the brighter shade + explicit size.
   v4.4: "Meta 15px" — bumped again from v4.1's 13.6px. */
.icn-review-layout__main .icn-meta {
	font-size: 0.9375rem;
	color: #B5B1BC;
}

/* ---- Compact comments: smaller cards, Top Comments strip ------------- */
.icn-comments--compact .icn-comment__card {
	padding: 0.85rem 1rem;
	border-radius: 10px;
}
.icn-comments--compact .icn-comment__avatar img {
	width: 32px;
	height: 32px;
}
.icn-comments--compact.icn-comments .icn-comment__content {
	font-size: 0.92rem;
	line-height: 1.55;
}
.icn-comments__top {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-comments__top-heading {
	font-family: var(--wp--preset--font-family--data, inherit);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-muted);
	margin-bottom: 0.75rem;
}
.icn-comments__top-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.icn-comment--top-copy .icn-comment__card {
	background: var(--wp--preset--color--graphite-raised, var(--wp--preset--color--surface));
	border-color: var(--wp--preset--color--amber);
	border-width: 1px;
}

/* Collapsible replies */
.icn-comment__replies-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: none;
	padding: 0.4rem 0;
	margin-left: calc(32px + 0.75rem);
	color: var(--wp--preset--color--accent);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}
.icn-comment__replies-toggle::before {
	content: "▸";
	display: inline-block;
	transition: transform 0.2s var(--icn-ease-out);
}
.icn-comment__replies-toggle[aria-expanded="true"]::before {
	transform: rotate(90deg);
}
.icn-comment__replies-toggle:hover { color: var(--wp--preset--color--amber); }
.icn-comment__replies[hidden] { display: none; }

/* ---- Composer: single-line, expands on focus + emoji picker ---------- */
.icn-comments__form--composer {
	margin-bottom: 2rem;
}
.icn-comment-form__emoji-wrap {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.icn-comment-form__emoji-wrap .icn-comment-form__textarea {
	flex: 1;
	resize: none;
	overflow: hidden;
	min-height: 44px;
	max-height: 40vh;
	transition: min-height 0.2s var(--icn-ease-out), border-radius 0.2s var(--icn-ease-out);
	border-radius: 22px;
	padding: 0.7rem 1.1rem;
}
.icn-comments__form--composer.is-expanded .icn-comment-form__textarea,
.icn-comment-form__emoji-wrap .icn-comment-form__textarea:focus {
	min-height: 96px;
	border-radius: 12px;
}
.icn-comment-form__emoji-toggle {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s var(--icn-ease-out), transform 0.15s var(--icn-ease-out);
}
.icn-comment-form__emoji-toggle:hover {
	border-color: var(--wp--preset--color--accent);
	transform: scale(1.05);
}
.icn-emoji-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.15rem;
	width: 232px;
	padding: 0.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--icn-shadow-lg);
}
.icn-emoji-panel[hidden] { display: none; }
.icn-emoji-panel__btn {
	background: none;
	border: none;
	font-size: 1.25rem;
	padding: 0.3rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.icn-emoji-panel__btn:hover {
	background: var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base));
	transform: scale(1.15);
}

/* ---- Compare widget: searchable autocomplete -------------------------- */
.icn-compare-widget--autocomplete .icn-compare-widget__form--stacked {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.icn-compare-widget--autocomplete .icn-compare-widget__vs {
	align-self: center;
	font-family: var(--wp--preset--font-family--data, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground-muted);
	letter-spacing: 0.08em;
}
.icn-compare-autocomplete__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.icn-compare-autocomplete__input {
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--foreground);
	padding: 0.6rem 0.85rem;
	font-size: 0.92rem;
	transition: border-color 0.2s var(--icn-ease-out);
}
.icn-compare-autocomplete__input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}
.icn-compare-autocomplete__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 280px;
	overflow-y: auto;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-shadow: var(--icn-shadow-lg);
	padding: 0.4rem;
}
.icn-compare-autocomplete__panel[hidden] { display: none; }
.icn-compare-autocomplete__group-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-muted);
	padding: 0.4rem 0.5rem 0.2rem;
}
.icn-compare-autocomplete__option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 0.5rem;
	border-radius: 8px;
	cursor: pointer;
	color: var(--wp--preset--color--foreground);
	font-size: 0.88rem;
	transition: background 0.15s ease;
}
.icn-compare-autocomplete__option:hover,
.icn-compare-autocomplete__option.is-active {
	background: var(--wp--preset--color--graphite-raised, var(--wp--preset--color--base));
}
.icn-compare-autocomplete__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--ember-fade, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--white, #fff);
	font-size: 0.68rem;
	font-weight: 700;
}
.icn-compare-autocomplete__title { flex: 1; }
.icn-compare-autocomplete__empty {
	padding: 0.6rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--foreground-muted);
}