/**
 * Turismo Malesia - affiliate and site-specific components.
 *
 * Product box, score, comparison table, top picks, disclosure, home
 * sections (rankings list, categories, method steps), archive, related.
 * Built from the tokens only; same naming as components.css.
 */

/* ==========================================================================
   Outbound (affiliate) button + inline link
   ========================================================================== */

.tm-btn--aff {
	gap: var(--tm-space-2);
}

.tm-btn--aff svg {
	width: 14px;
	height: 14px;
}

.tm-btn--disabled,
.tm-btn--disabled:hover {
	background: var(--tm-gray-200);
	color: var(--tm-text-muted);
	cursor: default;
}

.tm-product__price {
	color: var(--tm-ink);
	font-weight: 600;
}

body:not(.tm-landing) .entry-content a.tm-aff-link,
.tm-prose a.tm-aff-link {
	color: var(--tm-brand-dark);
	font-weight: 600;
}

/* ==========================================================================
   Score: "8,7 /10" + bar
   ========================================================================== */

.tm-score {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	justify-content: start;
	column-gap: 2px;
	row-gap: 6px;
	font-variant-numeric: tabular-nums;
}

.tm-score__value {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1;
}

.tm-score__max {
	color: var(--tm-text-muted);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-score__bar {
	grid-column: 1 / -1;
	display: block;
	width: 96px;
	height: 5px;
	overflow: hidden;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-gray-200);
}

.tm-score__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--tm-brand);
}

/* Price range: active euros dark, the rest faded */
.tm-price-tier {
	margin-right: var(--tm-space-2);
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tm-price-tier__off::before {
	content: attr(data-off);
	color: var(--tm-text-disabled);
}

/* ==========================================================================
   Product box (acf/tm-product)
   ========================================================================== */

.tm-product {
	position: relative;
	margin-block: var(--tm-space-8);
	padding: var(--tm-space-6);
	border: 2px solid var(--tm-ink);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-white);
	scroll-margin-top: calc(var(--tm-header-h) + var(--tm-space-4));
}

.tm-product > * + * {
	margin-top: var(--tm-space-5);
}

.tm-product__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tm-space-2);
}

.tm-product__main {
	display: grid;
	gap: var(--tm-space-5);
}

@media (min-width: 720px) {
	.tm-product__main {
		grid-template-columns: 160px minmax(0, 1fr);
		align-items: start;
	}

	.tm-product__cta {
		grid-column: 2;
	}
}

@media (min-width: 1025px) {
	.tm-product__main {
		grid-template-columns: 180px minmax(0, 1fr) 220px;
	}

	.tm-product__cta {
		grid-column: 3;
	}
}

.tm-product__media,
.tm-pick__media {
	text-decoration: none !important;
}

.tm-product__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-width: 220px;
	padding: var(--tm-space-3);
	overflow: hidden;
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
}

.tm-product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

/* One track as big as the box: without it the auto row grows to the photo's
   height and height:100% on the img cannot shrink tall packshots. */
.tm-product__media,
.tm-pick__media,
.tm-compare__media {
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

/* Packshots sit on white: blend it into the gray media box */
.tm-product__media img,
.tm-pick__media img,
.tm-compare__media img {
	mix-blend-mode: multiply;
}

/* No photo: typographic pack (turismomalesia_product_pack()).
   Sizes follow the pack's own width (container query units), so the same
   markup fits the product box, the top picks and any other square. */
.tm-pack {
	--tm-pack-accent: var(--tm-ink);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tm-space-2);
	width: 100%;
	height: 100%;
	padding: 10% 9% 9%;
	overflow: hidden;
	border: 1px solid var(--tm-border);
	border-top: 6px solid var(--tm-pack-accent);
	border-radius: var(--tm-radius-md);
	background: var(--tm-white);
	color: var(--tm-ink);
	text-align: center;
}

.tm-pack--a1 { --tm-pack-accent: var(--tm-brand-dark); }
.tm-pack--a2 { --tm-pack-accent: var(--tm-success); }
.tm-pack--a3 { --tm-pack-accent: var(--tm-info); }
.tm-pack--a4 { --tm-pack-accent: var(--tm-warning); }
.tm-pack--a5 { --tm-pack-accent: var(--tm-accent-violet); }
.tm-pack--a6 { --tm-pack-accent: var(--tm-accent-teal); }
.tm-pack--a7 { --tm-pack-accent: var(--tm-accent-rose); }

.tm-pack__label {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 6cqi;
	min-height: 0;
	max-width: 100%;
}

.tm-pack__brand {
	color: var(--tm-pack-accent);
	font-family: var(--tm-font-display);
	font-size: clamp(0.75rem, 10cqi, 1.5rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.05;
	text-transform: none;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.tm-pack__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--tm-text-2);
	font-family: var(--tm-font-body);
	font-size: clamp(0.6875rem, 6.5cqi, 0.9375rem);
	font-weight: 500;
	line-height: 1.25;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.tm-pack__type {
	max-width: 100%;
	padding: 2px 8px;
	overflow: hidden;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-gray-150);
	color: var(--tm-text-muted);
	font-size: clamp(0.5625rem, 4.8cqi, 0.71875rem);
	font-weight: 600;
	letter-spacing: 0;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

/* Table thumbnail: brand abbreviation only */
.tm-pack--mini {
	justify-content: center;
	padding: 2px;
	border-top-width: 3px;
	border-radius: var(--tm-radius-sm);
}

.tm-pack--mini .tm-pack__brand {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.tm-product__body > * {
	margin: 0 !important;
}

.tm-product__body > * + * {
	margin-top: var(--tm-space-3) !important;
}

.tm-product__brand {
	color: var(--tm-brand-dark);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tm-ls-kicker);
	text-transform: uppercase;
}

.tm-product__brand + .tm-product__name {
	margin-top: var(--tm-space-1) !important;
}

.tm-product__name {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h4);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.tm-product__summary {
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
	line-height: 1.55;
}

/* Label facts: clean label/value grid, full width under the header.
   1 column on phones, 2 on tablet and up. Labels muted, values left-aligned
   so long values wrap into a tidy block instead of a ragged right edge. */
.tm-facts {
	display: grid;
	margin: 0;
	padding: var(--tm-space-2) var(--tm-space-5);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
	font-size: var(--tm-fs-xs);
	line-height: 1.45;
}

@media (min-width: 720px) {
	.tm-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--tm-space-8);
	}
}

.tm-facts__row {
	display: grid;
	align-items: start;
	gap: 2px var(--tm-space-3);
	padding: 9px 0;
	border-bottom: 1px solid var(--tm-border);
}

/* Phones: label above value. Wider: label column beside the value. */
@media (min-width: 480px) {
	.tm-facts__row {
		grid-template-columns: 128px minmax(0, 1fr);
	}
}

.tm-facts__row:last-child {
	border-bottom: 0;
}

@media (min-width: 720px) {
	/* Two columns: only the last row of each column loses its line */
	.tm-facts__row:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}
}

.tm-facts dt {
	color: var(--tm-text-muted);
	font-weight: 600;
	overflow-wrap: normal;
	hyphens: none;
}

.tm-facts dd {
	margin: 0;
	color: var(--tm-ink);
	font-weight: 600;
	text-align: left;
}

.tm-product__cta > * {
	margin: 0;
}

.tm-product__note {
	margin-top: var(--tm-space-2) !important;
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	line-height: 1.45;
	text-align: center;
}

/* Live price from the Creators API, with the time it was read */
.tm-price {
	display: grid;
	gap: 2px;
}

.tm-price strong {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
}

/* Pros / cons inside the box: two flat cards, green for pros, red for cons */
.tm-product__proscons {
	display: grid;
	gap: var(--tm-space-3);
}

@media (min-width: 720px) {
	.tm-product__proscons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tm-product__pros,
.tm-product__cons {
	--tm-pc-color: var(--tm-success);
	--tm-pc-tint: var(--tm-success-tint);
	padding: var(--tm-space-4) var(--tm-space-5);
	border: 1px solid var(--tm-border);
	border-top: 3px solid var(--tm-pc-color);
	border-radius: var(--tm-radius-md);
	background: var(--tm-white);
}

.tm-product__cons {
	--tm-pc-color: var(--tm-danger);
	--tm-pc-tint: var(--tm-danger-tint);
}

.tm-product__list-title {
	margin: 0 0 var(--tm-space-3) !important;
	color: var(--tm-pc-color);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-list {
	display: grid;
	gap: var(--tm-space-2);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.tm-list li {
	position: relative;
	margin: 0 !important;
	padding-left: 28px !important;
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
	line-height: 1.5;
}

.tm-list li::before {
	content: "✓";
	position: absolute;
	top: 0.12em;
	left: 0;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-pc-tint);
	color: var(--tm-pc-color);
	font-size: var(--tm-fs-3xs);
	font-weight: 600;
	line-height: 1;
}

.tm-list--cons li::before {
	content: "✕";
}

/* Compact variant: one row, no facts, no pros/cons */
.tm-product--compact {
	padding: var(--tm-space-5);
	border-width: 1px;
	border-color: var(--tm-border);
}

@media (min-width: 720px) {
	.tm-product--compact .tm-product__main {
		grid-template-columns: 110px minmax(0, 1fr) 200px;
		align-items: center;
	}

	.tm-product--compact .tm-product__cta {
		grid-column: 3;
	}
}

/* ==========================================================================
   Comparison table (acf/tm-products-table)
   Desktop: real table. Mobile: every row is a card.
   ========================================================================== */

.tm-compare {
	margin-block: var(--tm-space-8);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body:not(.tm-landing) .entry-content .tm-compare table,
.tm-compare table {
	min-width: 0;
	margin: 0;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--tm-fs-sm);
	table-layout: auto;
}

.tm-compare :is(th, td) {
	padding: var(--tm-space-3) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tm-border) !important;
	vertical-align: middle !important;
}

.tm-compare thead th {
	background: var(--tm-ink) !important;
	color: var(--tm-white) !important;
	font-size: var(--tm-fs-2xs);
	line-height: 1.25;
	vertical-align: bottom !important;
}

.tm-compare tbody tr:last-child > * {
	border-bottom: 0 !important;
}

.tm-compare tbody tr:nth-child(even) {
	background: var(--tm-gray-50);
}

.tm-compare__product {
	display: flex;
	align-items: center;
	min-width: 200px;
	gap: var(--tm-space-3);
	color: var(--tm-ink);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.tm-compare__media {
	display: grid;
	place-items: center;
	flex: none;
	width: 84px;
	height: 44px;
	padding: 4px 6px;
	overflow: hidden;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-sm);
	background: var(--tm-white);
}

.tm-compare__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

.tm-compare__name {
	display: grid;
	gap: 2px;
	line-height: 1.3;
}

.tm-compare__badge {
	justify-self: start;
	margin-top: 2px;
	padding: 1px 6px;
	border-radius: var(--tm-radius-xs);
	background: var(--tm-brand-tint);
	color: var(--tm-brand-dark);
	font-size: var(--tm-fs-3xs);
	font-weight: 600;
}

.tm-compare td {
	color: var(--tm-ink);
	font-weight: 600;
}

/* Wide screens: keep prices and short values on one line */
@media (min-width: 1025px) {
	.tm-compare td[data-label] {
		white-space: nowrap;
	}
}

.tm-compare__cta {
	text-align: right !important;
	white-space: nowrap;
}

.tm-compare__cta .tm-btn {
	min-height: 34px;
	padding: 0.5rem 0.75rem;
	font-size: var(--tm-fs-xs);
}

@media (max-width: 767px) {
	.tm-compare table,
	.tm-compare tbody,
	.tm-compare tr,
	.tm-compare th,
	.tm-compare td {
		display: block;
		width: 100%;
	}

	body:not(.tm-landing) .entry-content .tm-compare table,
	.tm-compare table {
		border: 0;
		overflow: visible;
	}

	.tm-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.tm-compare tbody {
		display: grid;
		gap: var(--tm-space-3);
	}

	.tm-compare tbody tr {
		padding: var(--tm-space-4);
		border: 1px solid var(--tm-border);
		border-radius: var(--tm-radius-md);
		background: var(--tm-white) !important;
	}

	.tm-compare :is(th, td) {
		padding: 6px 0 !important;
	}

	.tm-compare tbody th.tm-compare__product {
		display: flex;
	}

	.tm-compare tbody th {
		padding-bottom: var(--tm-space-3) !important;
		border-bottom: 1px solid var(--tm-border) !important;
	}

	.tm-compare td[data-label] {
		display: flex;
		justify-content: space-between;
		gap: var(--tm-space-3);
		border-bottom: 1px solid var(--tm-border) !important;
	}

	.tm-compare td[data-label]::before {
		content: attr(data-label);
		color: var(--tm-text-muted);
		font-weight: 600;
	}

	.tm-compare__cta {
		padding-top: var(--tm-space-3) !important;
		border-bottom: 0 !important;
	}

	.tm-compare__cta .tm-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Top picks (acf/tm-top-picks)
   ========================================================================== */

.tm-picks {
	display: grid;
	gap: var(--tm-space-3);
	margin-block: var(--tm-space-8);
}

@media (min-width: 560px) {
	.tm-picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.tm-picks {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.tm-pick {
	display: flex;
	flex-direction: column;
	gap: var(--tm-space-3);
	padding: var(--tm-space-5);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-white);
}

.tm-pick > * {
	margin: 0 !important;
}

.tm-pick:first-child {
	border: 2px solid var(--tm-brand);
}

.tm-pick__label {
	align-self: flex-start;
	padding: 3px 8px;
	border-radius: var(--tm-radius-xs);
	background: var(--tm-ink);
	color: var(--tm-white);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-3xs);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tm-pick:first-child .tm-pick__label {
	background: var(--tm-brand);
}

.tm-pick__media {
	display: grid;
	place-items: center;
	height: 170px;
	padding: var(--tm-space-2);
	overflow: hidden;
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
}

.tm-pick__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

.tm-pick__name {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h6);
	font-weight: 500;
	line-height: 1.2;
}

.tm-pick__brand {
	display: block;
	margin-bottom: 2px;
	color: var(--tm-brand-dark);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-3xs);
	letter-spacing: var(--tm-ls-kicker);
	text-transform: uppercase;
}

.tm-pick__foot {
	display: grid;
	gap: var(--tm-space-2);
	margin-top: auto !important;
	text-align: center;
}

.tm-pick__more {
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	text-decoration: none;
}

.tm-pick__more:hover {
	color: var(--tm-brand-dark);
}

/* ==========================================================================
   Verdict: core/group.is-style-tm-verdict ("Il verdetto")
   ========================================================================== */

.is-style-tm-verdict {
	padding: var(--tm-space-7) var(--tm-space-6);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-ink);
	background-image: linear-gradient(90deg, rgba(var(--tm-brand-rgb), 0.16) 0%, rgba(var(--tm-brand-rgb), 0) 60%);
	color: var(--tm-on-dark-2);
}

.is-style-tm-verdict > *,
.is-style-tm-verdict > .wp-block-group__inner-container > * {
	margin: 0;
}

.is-style-tm-verdict > * + *,
.is-style-tm-verdict > .wp-block-group__inner-container > * + * {
	margin-top: var(--tm-space-3);
}

.is-style-tm-verdict > :is(h2, h3):first-child,
.is-style-tm-verdict > .wp-block-group__inner-container > :is(h2, h3):first-child {
	color: var(--tm-white) !important;
	font-size: var(--tm-fs-h4);
}

.is-style-tm-verdict :is(p, li) {
	color: var(--tm-on-dark-2);
}

.is-style-tm-verdict strong {
	color: var(--tm-white) !important;
}

.is-style-tm-verdict a:not(.wp-element-button) {
	color: var(--tm-brand-light) !important;
}

/* ==========================================================================
   Hero additions: lead + disclosure (article hero), home hero variants
   ========================================================================== */

.tm-guide-hero__lead {
	max-width: 62ch;
	color: var(--tm-text-3);
	font-size: var(--tm-fs-lead);
	line-height: var(--tm-lh-body);
}

/* One muted line at the top of the article content, before the TOC */
.entry-content .tm-disclosure,
.tm-disclosure {
	max-width: none;
	margin: 0 0 var(--tm-space-4);
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	line-height: 1.5;
}

/* Health notice box (meta health_notice), after the disclosure, before the TOC */
.entry-content .tm-health-note {
	margin: 0 0 var(--tm-space-5);
	line-height: 1.55;
}

.entry-content .tm-health-note p {
	max-width: none;
	margin: 0 0 var(--tm-space-2);
	font-size: var(--tm-fs-sm);
}

.entry-content .tm-health-note .tm-callout__title {
	display: flex;
	align-items: center;
	gap: var(--tm-space-2);
	margin-bottom: var(--tm-space-2);
	color: var(--tm-warning);
	font-size: var(--tm-fs-2xs);
	letter-spacing: var(--tm-ls-label);
}

.tm-health-note__icon {
	flex: none;
	width: 18px;
	height: 18px;
}

.entry-content .tm-health-note > :last-child {
	margin-bottom: 0;
}

.tm-hero__grid--single {
	grid-template-columns: 1fr !important;
}

.tm-hero__grid--single .tm-hero__body {
	max-width: 820px;
}

.tm-hero__body > .tm-badge {
	padding: 5px 10px;
}

.tm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tm-space-3);
	margin-top: 34px;
}

.tm-hero .tm-numlist {
	margin-bottom: 0;
}

/* Rankings box (home hero aside) */
.tm-toplist {
	padding: var(--tm-space-6);
	border: 1px solid var(--tm-on-dark-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-ink-2);
}

.tm-toplist__title {
	margin: var(--tm-space-2) 0 var(--tm-space-5);
	color: var(--tm-white);
	font-size: var(--tm-fs-h4);
}

.tm-toplist__list {
	display: grid;
	gap: var(--tm-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-toplist__list a {
	display: flex;
	align-items: center;
	gap: var(--tm-space-3);
	padding: var(--tm-space-3);
	border: 1px solid var(--tm-on-dark-border);
	border-radius: var(--tm-radius-md);
	background: var(--tm-on-dark-fill);
	color: var(--tm-white);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease);
}

.tm-toplist__list a:hover,
.tm-toplist__list a:focus-visible {
	border-color: var(--tm-brand);
	background: rgba(var(--tm-brand-rgb), 0.12);
	color: var(--tm-white);
}

.tm-toplist__name {
	flex: 1;
}

.tm-toplist__arrow {
	color: var(--tm-brand-light);
}

/* ==========================================================================
   Home: category tiles and method steps
   ========================================================================== */

.tm-cats {
	display: grid;
	gap: var(--tm-space-3);
}

@media (min-width: 720px) {
	.tm-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.tm-cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tm-cat {
	display: flex;
	flex-direction: column;
	gap: var(--tm-space-2);
	padding: var(--tm-space-6);
	border: 2px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-gray-100);
	color: var(--tm-ink);
	text-decoration: none;
	transition: border-color var(--tm-dur) var(--tm-ease);
}

.tm-cat:hover,
.tm-cat:focus-visible {
	border-color: var(--tm-ink);
	color: var(--tm-ink);
}

.tm-cat__name {
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h4);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
}

.tm-cat__desc {
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
}

.tm-cat__count {
	margin-top: auto;
	color: var(--tm-brand-dark);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-steps {
	display: grid;
	gap: var(--tm-space-4);
}

@media (min-width: 720px) {
	.tm-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.tm-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tm-step {
	padding: var(--tm-space-6);
	border: 1px solid var(--tm-on-dark-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-ink-2);
}

.tm-step > * {
	margin: 0;
}

.tm-step > * + * {
	margin-top: var(--tm-space-3);
}

.tm-step__num {
	display: block;
	color: var(--tm-brand);
	font-family: var(--tm-font-display);
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1;
}

.tm-step__title {
	color: var(--tm-white);
	font-size: var(--tm-fs-h5);
}

.tm-step p {
	color: var(--tm-on-dark-2);
	font-size: var(--tm-fs-sm);
}

.tm-home > .tm-section:last-child:not(.tm-section--dark) {
	padding-bottom: var(--tm-section-gap);
}

.tm-home > .tm-section--dark:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Archive, related articles, editor notices
   ========================================================================== */

.tm-archive .tm-guide-hero {
	margin-bottom: var(--tm-space-10);
}

.tm-archive__body {
	padding-bottom: var(--tm-section-gap);
}

.tm-archive__intro {
	max-width: var(--tm-container-narrow);
	margin-bottom: var(--tm-space-10);
}

.tm-archive__empty,
.tm-author-archive__empty {
	color: var(--tm-text-muted);
}

.tm-related {
	margin-top: var(--tm-space-12);
}

body:not(.tm-landing) .entry-content > .tm-related {
	margin-top: var(--tm-space-12);
}

.tm-related__title {
	margin-bottom: var(--tm-space-5) !important;
	font-size: var(--tm-fs-h3) !important;
}

/* Cards inside the article body: drop the prose margins on p/h3 (the card
   gap handles the spacing), otherwise kicker, title and excerpt drift apart. */
.entry-content .tm-related .tm-guide > :is(p, h3),
.entry-content .tm-related .tm-news :is(p, h3) {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content .tm-related .tm-news .tm-news__meta {
	margin-bottom: var(--tm-space-2);
}

.entry-content .tm-related .tm-news .tm-news__excerpt {
	margin-top: var(--tm-space-2);
}

.entry-content .tm-related .tm-news__title {
	font-size: var(--tm-fs-h5);
}

.entry-content .tm-related .tm-news__media,
.entry-content .tm-related .tm-guide__media,
.entry-content .tm-related .tm-news__vendor,
.entry-content .tm-related .tm-news__title a {
	text-decoration: none;
	border-bottom: 0;
}

/* Cards inside the reading column: two per row at most */
@media (min-width: 1025px) {
	.entry-content .tm-guides--even,
	.tm-prose .tm-guides--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tm-block-notice {
	padding: var(--tm-space-4);
	border: 2px dashed var(--tm-border);
	border-radius: var(--tm-radius-md);
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-sm);
}

.tm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Review box (tm/review-box) and section score (tm/section-score)
   Dark header with the overall dial, then criteria bars + key facts,
   pros/cons, fit. One column on phones, two from 720px.
   ========================================================================== */

.tm-review {
	margin-block: var(--tm-space-8);
	overflow: hidden;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-white);
	box-shadow: var(--tm-shadow-md);
	scroll-margin-top: calc(var(--tm-header-h) + var(--tm-space-4));
}

.tm-review p {
	margin: 0;
}

.tm-review__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tm-space-5);
	padding: var(--tm-space-6);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--tm-brand-rgb), 0.45) 0%, transparent 55%),
		var(--tm-ink);
	color: var(--tm-on-dark);
}

.tm-review__id {
	display: flex;
	align-items: center;
	gap: var(--tm-space-4);
	min-width: 0;
}

.tm-review__logo {
	display: grid;
	flex: none;
	place-items: center;
	width: 72px;
	height: 72px;
	padding: var(--tm-space-2);
	overflow: hidden;
	border-radius: var(--tm-radius-md);
	background: var(--tm-white);
}

.tm-review__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

.tm-review__kicker {
	color: var(--tm-brand-light);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tm-ls-kicker);
	text-transform: uppercase;
}

.tm-review__name {
	margin-top: 2px !important;
	color: var(--tm-on-dark);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h3);
	font-weight: 500;
	letter-spacing: var(--tm-ls-display);
	line-height: 1.1;
}

.tm-review__type {
	margin-top: var(--tm-space-1) !important;
	color: var(--tm-on-dark-2);
	font-size: var(--tm-fs-sm);
}

.tm-review__overall {
	display: flex;
	align-items: center;
	gap: var(--tm-space-3);
}

/* Ring: conic fill proportional to the score */
.tm-review__dial {
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: conic-gradient(var(--tm-accent) calc(var(--tm-review-pct) * 1%), var(--tm-on-dark-border) 0);
	font-variant-numeric: tabular-nums;
}

.tm-review__dial::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--tm-ink);
}

.tm-review__dial > span {
	position: relative;
}

.tm-review__dial-value {
	color: var(--tm-on-dark);
	font-family: var(--tm-font-display);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1;
}

.tm-review__dial-max {
	margin-top: 2px;
	color: var(--tm-on-dark-3);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-review__word {
	color: var(--tm-on-dark);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
}

.tm-review__verdict {
	padding: var(--tm-space-5) var(--tm-space-6) 0;
	color: var(--tm-text);
	font-size: var(--tm-fs-lead);
	line-height: 1.55;
}

.tm-review__grid {
	display: grid;
	gap: var(--tm-space-6);
	padding: var(--tm-space-6);
}

@media (min-width: 720px) {
	.tm-review__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}
}

.tm-review__title {
	margin-bottom: var(--tm-space-3) !important;
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-review__scores ul {
	display: grid;
	gap: var(--tm-space-4);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.tm-review__score {
	margin: 0 !important;
	padding: 0 !important;
}

.tm-review__score::before {
	content: none !important;
}

.tm-review__score-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tm-space-3);
	margin-bottom: 6px;
}

.tm-review__score-label {
	color: var(--tm-ink);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
}

.tm-review__score-meta {
	margin-left: var(--tm-space-1);
	color: var(--tm-text-subtle);
	font-size: var(--tm-fs-2xs);
	font-weight: 400;
}

.tm-review__score-value {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-body);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.tm-review__score-bar,
.tm-section-score__bar {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-gray-200);
}

.tm-review__score-bar > span,
.tm-section-score__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--tm-brand);
}

.tm-review__score-note {
	margin-top: 6px !important;
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-xs);
	line-height: 1.45;
}

.tm-review__side {
	display: grid;
	gap: var(--tm-space-4);
}

.tm-review__facts {
	margin: 0;
	padding: var(--tm-space-1) var(--tm-space-4);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
	font-size: var(--tm-fs-xs);
	line-height: 1.45;
}

.tm-review__facts > div {
	display: flex;
	justify-content: space-between;
	gap: var(--tm-space-3);
	padding-block: var(--tm-space-2);
	border-bottom: 1px solid var(--tm-border);
}

.tm-review__facts > div:last-child {
	border-bottom: 0;
}

.tm-review__facts dt {
	flex: none;
	color: var(--tm-text-muted);
	white-space: nowrap;
}

.tm-review__facts dd {
	margin: 0;
	color: var(--tm-ink);
	font-weight: 600;
	text-align: right;
}

.tm-review__checked {
	margin-top: var(--tm-space-2) !important;
	color: var(--tm-text-subtle);
	font-size: var(--tm-fs-2xs);
	text-align: center;
}

.tm-review__proscons {
	padding: 0 var(--tm-space-6);
}

.tm-review__fit {
	display: grid;
	gap: var(--tm-space-3);
	margin: var(--tm-space-5) var(--tm-space-6) 0;
}

@media (min-width: 720px) {
	.tm-review__fit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tm-review__fit > div {
	padding: var(--tm-space-3) var(--tm-space-4);
	border-left: 3px solid var(--tm-success);
	border-radius: var(--tm-radius-xs);
	background: var(--tm-success-tint);
}

.tm-review__fit > .is-no {
	border-left-color: var(--tm-warning);
	background: var(--tm-warning-tint);
}

.tm-review__fit dt {
	margin-bottom: 2px;
	color: var(--tm-ink);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-review__fit dd {
	margin: 0;
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
	line-height: 1.5;
}

.tm-review__basis {
	margin-top: var(--tm-space-5) !important;
	padding: var(--tm-space-4) var(--tm-space-6);
	border-top: 1px solid var(--tm-border);
	background: var(--tm-gray-50);
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-xs);
}

.tm-review__basis a {
	font-weight: 600;
}

@media (max-width: 479px) {
	.tm-review__top,
	.tm-review__grid {
		padding: var(--tm-space-5);
	}

	.tm-review__verdict,
	.tm-review__proscons {
		padding-inline: var(--tm-space-5);
	}

	.tm-review__fit {
		margin-inline: var(--tm-space-5);
	}

	.tm-review__dial {
		width: 88px;
		height: 88px;
	}

	.tm-review__dial-value {
		font-size: 1.75rem;
	}
}

/* Section score: small strip under an H2 */
.tm-section-score {
	display: flex;
	align-items: center;
	gap: var(--tm-space-4);
	margin-block: var(--tm-space-4) var(--tm-space-5);
	padding: var(--tm-space-3) var(--tm-space-4);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
}

.tm-section-score p {
	margin: 0 !important;
}

.tm-section-score__num {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.tm-section-score__value {
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
}

.tm-section-score__max {
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-section-score__body {
	flex: 1;
	min-width: 0;
}

.tm-section-score__label {
	margin-bottom: 6px !important;
	color: var(--tm-ink);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
}

.tm-section-score__label span {
	margin-right: var(--tm-space-1);
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-section-score__note {
	margin-top: 6px !important;
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-xs);
	line-height: 1.45;
}

/* "Leggi la recensione completa" under the product box button */
.tm-product__review {
	margin: var(--tm-space-2) 0 0 !important;
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	text-align: center;
}

.tm-product__review a::after {
	content: " \2192";
}

/* Versus: head-to-head scores of two software */
.tm-vs {
	margin-block: var(--tm-space-8);
	overflow: hidden;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	background: var(--tm-white);
	box-shadow: var(--tm-shadow-md);
	scroll-margin-top: calc(var(--tm-header-h) + var(--tm-space-4));
}

.tm-vs p {
	margin: 0 !important;
}

.tm-vs__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--tm-space-4);
	padding: var(--tm-space-6);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--tm-brand-rgb), 0.45) 0%, transparent 55%),
		var(--tm-ink);
	color: var(--tm-on-dark);
	text-align: center;
}

.tm-vs__side {
	display: grid;
	justify-items: center;
	gap: var(--tm-space-2);
	min-width: 0;
}

.tm-vs__logo {
	width: 64px;
	height: 64px;
}

.tm-vs__name {
	color: var(--tm-on-dark);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
	line-height: 1.2;
}

.tm-vs__overall {
	color: var(--tm-on-dark-3);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tm-vs__overall span {
	color: var(--tm-on-dark);
	font-family: var(--tm-font-display);
	font-size: 2rem;
	line-height: 1;
}

.tm-vs__side.is-win .tm-vs__overall span {
	color: var(--tm-accent);
}

.tm-vs__vs {
	color: var(--tm-on-dark-3);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
	text-transform: uppercase;
}

.tm-vs__title {
	padding: var(--tm-space-5) var(--tm-space-6) 0;
}

.tm-vs__rows {
	display: grid;
	gap: var(--tm-space-5);
	margin: 0 !important;
	padding: var(--tm-space-5) var(--tm-space-6) !important;
	list-style: none;
}

.tm-vs__row {
	margin: 0 !important;
	padding: 0 !important;
}

.tm-vs__row::before {
	content: none !important;
}

.tm-vs__label {
	margin-bottom: var(--tm-space-1) !important;
	color: var(--tm-ink);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
}

.tm-vs__kicker {
	margin-right: var(--tm-space-1);
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-vs__line {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: var(--tm-space-3);
	margin-top: 6px;
	font-size: var(--tm-fs-xs);
}

.tm-vs__who {
	overflow: hidden;
	color: var(--tm-text-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tm-vs__bar {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-gray-200);
}

.tm-vs__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--tm-brand);
}

.tm-vs__line.is-lose .tm-vs__bar > span {
	background: var(--tm-text-subtle);
	opacity: 0.5;
}

.tm-vs__value {
	color: var(--tm-ink);
	font-family: var(--tm-font-body);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.tm-vs__line.is-win .tm-vs__who {
	color: var(--tm-ink);
	font-weight: 600;
}

.tm-vs .tm-review__basis {
	margin-top: 0 !important;
}

/* Strip variant, under an H2 */
.tm-vs--strip {
	margin-block: var(--tm-space-4) var(--tm-space-5);
	border-radius: var(--tm-radius-md);
	background: var(--tm-gray-50);
	box-shadow: none;
}

.tm-vs--strip .tm-vs__rows {
	padding: var(--tm-space-3) var(--tm-space-4) !important;
}

@media (max-width: 479px) {
	.tm-vs__head {
		gap: var(--tm-space-2);
		padding: var(--tm-space-5);
	}

	.tm-vs__rows {
		padding: var(--tm-space-4) var(--tm-space-5) !important;
	}

	.tm-vs__line {
		grid-template-columns: 6.5rem minmax(0, 1fr) 2.25rem;
	}

	.tm-vs__logo {
		width: 52px;
		height: 52px;
	}

	.tm-vs__overall span {
		font-size: 1.625rem;
	}
}

/* Partner box (tm/partner): same card as the software box, wide logos on white. */
.tm-partner .tm-partner__logo {
	background: #fff;
	border: 1px solid var(--tm-gray-100, #eef0f3);
	padding: var(--tm-space-1, 0.25rem);
}

.tm-partner__reviews {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tm-space-2, 0.5rem);
	margin: var(--tm-space-2, 0.5rem) 0;
}

.tm-partner__review {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--tm-gray-200);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none !important;
}

.tm-partner__stars {
	margin-left: 0.15rem;
	color: #f5a623;
}

.tm-partner__count {
	color: var(--tm-text-muted);
}