/* SVT — field position under the product score.
 *
 * Deliberately quiet. The dial already carries the visual weight; this is the
 * sentence that makes it readable, not a second thing to look at. No badge, no
 * pill, no colour-coded band — a score of 6.7 shown as "3rd of 69" needs one
 * line of small type and nothing else.
 *
 * Enqueued on single product pages only, filemtime-versioned, from
 * svt-core/includes/svt-rank.php.
 */

.svt-rank {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--svtvs-muted, #6E6A62);
}

.svt-rank strong {
	font-weight: 700;
	color: var(--a-ink, var(--svt-brass-ink, #8F6226)); /*b53*/ /* --a is undefined off a versus page, so #C8842B painted at 2.67 */
}

/* The link is to the category the rank is measured in, so the underline is a
   hint rather than a call to action. */
.svt-rank a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, .14);
	transition: color .15s ease, border-color .15s ease;
}

.svt-rank a:hover,
.svt-rank a:focus-visible {
	color: #1A1814;
	border-bottom-color: currentColor;
}

@media (max-width: 560px) {
	.svt-rank { font-size: 12.5px; }
}

/* Compact: tiles, the compare-table header and the versus cards. Smaller and
   unlinked -- on a card the line is a label under a number, not a sentence. */
.svt-rank--compact {
	margin: 5px 0 0;
	font-size: 11.5px;
	line-height: 1.35;
	letter-spacing: 0;
}

.svt-compare-header-scores .svt-rank--compact {
	text-align: center;
}

/* Catalog: stack gaps live on the title, scores, and price row.
   Kill Rehub's p margin-bottom so it does not add a fourth space. */
.woocommerce .products .svt-rank.svt-rank--compact {
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
	padding-left: 8px;
	box-sizing: border-box;
	white-space: nowrap;
}

.svt-rank--compact a.svt-rank__cat {
	color: var(--svt-click-ink, #35589C); /*b53*/
	text-decoration: underline !important;
	border-bottom: 0;
	font-weight: 700;
	text-transform: none;
}

.svt-rank--compact a.svt-rank__cat:hover,
.svt-rank--compact a.svt-rank__cat:focus-visible {
	color: var(--svt-click-deep, #3a5d9c);
	text-decoration: underline !important;
	border-bottom: 0;
}

.woocommerce .products.grid_woo .product:has(.svt-rank--named) .cat_for_grid,
.woocommerce .products .woo_grid_compact:has(.svt-rank--named) .cat_for_grid {
	display: none !important;
}

.svt-compare-header-scores .svt-rank--compact {
	font-size: 11px;
	margin-top: 4px;
}

/* Versus cards sit on the panel background and carry their own gutter. */
.pcard .svt-rank--compact {
	margin: 0 0 12px;
	text-align: center;
	color: var(--svt-ink, #26231E); /*b53 was opacity 0.85*/
}

@media (max-width: 560px) {
	.svt-rank--compact { font-size: 11px; }
}


/* ------------------------------------------------------------------------- *
 * svt block 27 -- 2026-09-19 -- one category label per card, in one place.
 *
 * The rule above hides .cat_for_grid on any card carrying a rank line, because
 * the rank line names the category itself. A VARIANT HAS NO RANK LINE (answer
 * 8, 2026-09-17), so nothing hid its category link and it rendered in its own
 * default slot at the top of the card, 13px uppercase, while every other card
 * named its category at the bottom at 11px sentence case.
 *
 * Nothing is reversed here and no markup changes: the card is flex/column with
 * every child at order 0, so the label it already had moves into the rank
 * line's slot and takes the rank line's type. The !important declarations beat
 * the four in rehub-child/style.css, which are what set 13px and uppercase.
 * ------------------------------------------------------------------------- */

.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid {
	order: 1;
	margin: 0;
	font-size: 11px;
	line-height: 1.35;
}

.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .wp-block-group,
.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .woo_code_zone_loop,
.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .border-top,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .wp-block-group,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .woo_code_zone_loop,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .border-top {
	order: 2;
}

.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid a.woocat,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid a.woocat {
	font-size: 11px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.35;
}


/* ------------------------------------------------------------------------- *
 * svt block 28 -- 2026-09-19 -- the moved label takes the rank line's TYPE.
 *
 * Block 27 moved the box and left the text where it was: 11px against the rank
 * line's 11.5px, and no left indent against its 8px, so the first character of
 * every variant card's label sat 8px left of every ranked card's. The boxes
 * lined up and the words did not.
 *
 * These four values are copied from
 * `.woocommerce .products .svt-rank.svt-rank--compact` and `.svt-rank--compact`
 * above -- if those change, change these with them.
 * ------------------------------------------------------------------------- */

.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid {
	margin: 0;
	padding-left: 8px;
	box-sizing: border-box;
	font-size: 11.5px;
	line-height: 1.35;
	white-space: nowrap;
}

.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid a.woocat,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid a.woocat {
	font-size: 11.5px !important;
}

@media (max-width: 560px) {

	.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid,
	.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid {
		font-size: 11px;
	}

	.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid a.woocat,
	.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid a.woocat {
		font-size: 11px !important;
	}
}


/* ------------------------------------------------------------------------- *
 * svt block 29 -- 2026-09-19 -- the category word in one column (Michael).
 *
 * 27 and 28 got both labels starting on the same pixel. The category WORD still
 * did not line up, because the ranked line runs "12th of 12 in " in front of
 * it. Right-aligning both shares a right edge instead.
 *
 * The 560px branch is not cosmetic: at 375px the card is 166px and the ranked
 * line at 11.5px is wider than that, so it clipped and the right-align did
 * nothing on three of eleven cards. 10.5px with no right gutter is what makes
 * the longest line fit; measured at 0 clipped, every right edge on 156.
 * ------------------------------------------------------------------------- */

.woocommerce .products .svt-rank.svt-rank--compact,
.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid,
.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid {
	text-align: right !important;
	padding-left: 0 !important;
	padding-right: 8px !important;
}

@media (max-width: 560px) {

	.woocommerce .products .svt-rank.svt-rank--compact,
	.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid,
	.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid {
		padding-right: 0 !important;
		font-size: 10.5px !important;
	}

	.woocommerce .products .woo_grid_compact:not(:has(.svt-rank--named)) .cat_for_grid a.woocat,
	.woocommerce .products.grid_woo .product:not(:has(.svt-rank--named)) .cat_for_grid a.woocat {
		font-size: 10.5px !important;
	}
}