/* Selling points under a seat cover's description (SCF_Highlights).

   Its own small file rather than a section of configurator.css: a stocked
   Ready Made SKU's page has no finder on it, so the finder's stylesheet is not
   loaded there, and this list is. Colours are mixed from currentColor like the
   finder's, so the list takes the theme's ink and needs no dark-mode pair. */

.scf-highlights {
	list-style: none;
	/* The description panel is a constrained layout and gives every child
	   its own margins; these replace the theme's list indent and bullets. */
	margin: 1.75em 0 0;
	padding: 0.35em 1.1em;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	/* The finder's yellow, as a rule down the left edge: the one accent the
	   site uses everywhere, and enough to mark this as the sales panel. */
	border-left: 4px solid #f2b705;
	border-radius: 10px;
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.scf-highlights .scf-hl {
	display: flex;
	align-items: baseline;
	gap: 0.65em;
	margin: 0;
	padding: 0.6em 0;
	line-height: 1.5;
}

.scf-highlights .scf-hl + .scf-hl {
	border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

/* A fixed column, so every line's text starts at the same place whether its
   emoji is narrow, a two-codepoint flag, or missing (the Neotex line). */
.scf-highlights .scf-hl-icon {
	flex: none;
	width: 1.6em;
	text-align: center;
	font-size: 1.1em;
	/* Emoji fonts first: some themes set a text font with monochrome glyphs
	   for a few of these (the shield, the couch), and those read as clip art. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.scf-highlights .scf-hl-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.scf-highlights strong {
	font-weight: 700;
}

/* Underlined so it reads as something to tap; a phone number in ink would
   look like plain text on a phone, which is where it gets used. */
.scf-highlights .scf-hl-phone {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.scf-highlights {
		padding: 0.2em 0.85em;
		font-size: 0.95em;
	}
}