/*
 * Big Shoes UK - content components (design v2, theme 1.2.0).
 *
 * Loads after style.css and restyles everything inside .entry-content:
 * type rhythm, tables on new and old pages, the .ls-* guide components and
 * the homepage components (.ls-home-hero, .ls-trust, .ls-tiles, .ls-sizes,
 * .ls-linkchips, .ls-shops, .ls-note). System fonts only; this file loads no
 * fonts, images or scripts. Markup for each component: build/v2/components-NOTES.md.
 * New tokens use the --ls-c- prefix; the --ls- tokens come from style.css.
 */

/* ------------------------------------------------------------ tokens */
:root {
	--ls-c-ink-strong: #121c2a;
	--ls-c-soft: #f4f7fb;
	--ls-c-line-strong: #c3cfdc;
	--ls-c-row-hover: #e8f0fa;
	--ls-c-green: #2e7d4f;
	--ls-c-warm-line: #f1cfb8;
	--ls-c-focus: #1d5fa8;
	--ls-c-focus-on-dark: #ffd166;
	--ls-c-on-dark: #ffffff;
	--ls-c-on-dark-muted: #d8e1ec;
	--ls-c-eyebrow-on-dark: #ffb68e;
	--ls-c-radius-sm: 6px;
	--ls-c-radius: 12px;
	--ls-c-radius-lg: 18px;
	--ls-c-shadow-sm: 0 1px 2px rgba(18, 28, 42, 0.06), 0 1px 3px rgba(18, 28, 42, 0.08);
	--ls-c-shadow-md: 0 6px 16px rgba(18, 28, 42, 0.1), 0 2px 4px rgba(18, 28, 42, 0.06);
	--ls-c-shadow-lg: 0 18px 40px rgba(18, 28, 42, 0.18), 0 4px 10px rgba(18, 28, 42, 0.08);
	--ls-c-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ls-c-section: clamp(2.75rem, 2rem + 2.5vw, 4rem);
}

/* ======================================================= 1. type rhythm */
.entry-content {
	line-height: 1.7;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p {
	margin: 0 0 1.2em;
}

.entry-content h1,
.entry-header .entry-title {
	color: var(--ls-navy-dark);
	font-size: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.12;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

/* Old pages show the theme's title above the content; GeneratePress spaces it. */
.entry-header .entry-title {
	margin: 0;
}

.entry-content h2 {
	color: var(--ls-navy-dark);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 2.4em 0 0.7em;
	padding-top: 0.9rem;
	position: relative;
	text-wrap: balance;
}

/* Short accent bar above every section heading. */
.entry-content h2::before {
	background: var(--ls-accent);
	border-radius: 2px;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	top: 0;
	width: 2.75rem;
}

.entry-content h3 {
	color: var(--ls-navy);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.3;
	margin: 1.8em 0 0.5em;
}

.entry-content h4 {
	color: var(--ls-ink);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 1.5em 0 0.4em;
}

/* Plain lists only; component lists carry a class and style themselves. */
.entry-content :where(ul, ol):not([class]) {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.entry-content :where(ul, ol):not([class]) > li {
	margin-bottom: 0.45em;
	padding-left: 0.2em;
}

.entry-content ul:not([class]) > li::marker {
	color: var(--ls-accent);
	font-size: 1.1em;
}

.entry-content ol:not([class]) > li::marker {
	color: var(--ls-navy);
	font-weight: 700;
}

.entry-content li > :is(ul, ol) {
	margin-bottom: 0;
	margin-top: 0.45em;
}

/* Links */
.entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.entry-content p a,
.entry-content li a {
	text-decoration-color: rgba(29, 95, 168, 0.45);
}

.entry-content p a:hover,
.entry-content li a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.entry-content a:focus-visible,
.entry-content summary:focus-visible {
	border-radius: 2px;
	outline: 3px solid var(--ls-c-focus);
	outline-offset: 2px;
}

/* Media, quotes, rules */
.entry-content img {
	height: auto;
	max-width: 100%;
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 761px) {
	.entry-content .alignleft {
		float: left;
		margin: 0.3rem 1.25rem 1rem 0;
	}

	.entry-content .alignright {
		float: right;
		margin: 0.3rem 0 1rem 1.25rem;
	}
}

.entry-content blockquote {
	background: var(--ls-c-soft);
	border-left: 4px solid var(--ls-accent);
	border-radius: 0 var(--ls-c-radius) var(--ls-c-radius) 0;
	font-size: 1.05rem;
	font-style: normal;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--ls-line);
	margin: 2.5rem 0;
}

/* ============================================== 2. small page furniture */
.entry-content .breadcrumb {
	color: var(--ls-muted);
	font-size: 0.85rem;
	margin: 0 0 0.9rem;
}

.entry-content .breadcrumb a {
	color: var(--ls-muted);
	font-weight: 600;
	text-decoration: none;
}

.entry-content .breadcrumb a:hover {
	color: var(--ls-link);
	text-decoration: underline;
}

.entry-content .disclosure {
	background: var(--ls-c-soft);
	border: 0;
	border-radius: var(--ls-c-radius-sm);
	color: var(--ls-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 1.5rem 0;
	padding: 0.7rem 0.95rem 0.7rem 2.5rem;
	position: relative;
}

.entry-content .disclosure::before {
	background: var(--ls-muted);
	border-radius: 50%;
	color: #ffffff;
	content: "i";
	content: "i" / "";
	font: italic 700 0.75rem/1.15rem Georgia, "Times New Roman", serif;
	height: 1.15rem;
	left: 0.9rem;
	position: absolute;
	text-align: center;
	top: 0.85rem;
	width: 1.15rem;
}

.entry-content .disclosure a {
	color: var(--ls-link);
}

.entry-content .last-checked {
	border-left: 3px solid var(--ls-c-green);
	color: var(--ls-muted);
	font-size: 0.85rem;
	margin: 2rem 0 1rem;
	padding: 0.15rem 0 0.15rem 0.85rem;
}

.entry-content .ls-table-note {
	color: var(--ls-muted);
	font-size: 0.82rem;
	line-height: 1.5;
	margin-top: 0.6rem;
}

.entry-content .ls-small {
	color: var(--ls-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}

/* Quick answer */
.entry-content .quick-answer {
	background: linear-gradient(135deg, var(--ls-tint) 0%, #f7faff 100%);
	border: 1px solid #cfdcec;
	border-left: 6px solid var(--ls-navy);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	font-size: 1.02rem;
	margin: 1.5rem 0;
	padding: 1.1rem 1.35rem;
}

.entry-content .quick-answer strong:first-child {
	color: var(--ls-navy-dark);
}

/* ======================================================= 3. buttons */
.entry-content a.ls-btn {
	box-shadow: var(--ls-c-shadow-sm);
	font-size: 0.95rem;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.2s var(--ls-c-ease);
}

.entry-content a.ls-btn::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	transition: transform 0.2s var(--ls-c-ease);
}

.entry-content a.ls-btn:hover {
	box-shadow: var(--ls-c-shadow-md);
	transform: translateY(-1px);
}

.entry-content a.ls-btn:hover::after {
	transform: translateX(3px);
}

.entry-content a.ls-btn:focus-visible {
	outline: 3px solid var(--ls-c-focus);
	outline-offset: 3px;
}

/* White button for dark backgrounds (homepage hero). */
.entry-content a.ls-btn--light {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ls-navy-dark);
}

.entry-content a.ls-btn--light:hover,
.entry-content a.ls-btn--light:focus {
	background: var(--ls-tint);
	border-color: var(--ls-tint);
	color: var(--ls-navy-dark);
}

/* Transparent button with a white outline for dark backgrounds. */
.entry-content a.ls-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: none;
	color: #ffffff;
}

.entry-content a.ls-btn--ghost:hover,
.entry-content a.ls-btn--ghost:focus {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ls-navy-dark);
}

/* Text shop links in the last table column (hub pages). */
.entry-content td:last-child a[target="_blank"]:not(:has(img)):not(.ls-btn) {
	align-items: center;
	background: var(--ls-accent-dark);
	border-radius: 999px;
	box-shadow: var(--ls-c-shadow-sm);
	color: #ffffff;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 700;
	gap: 0.35rem;
	line-height: 1.2;
	min-height: 40px;
	padding: 0.45rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

.entry-content td:last-child a[target="_blank"]:not(:has(img)):not(.ls-btn)::after {
	content: "\2192";
	content: "\2192" / "";
}

.entry-content td:last-child a[target="_blank"]:not(:has(img)):not(.ls-btn):hover,
.entry-content td:last-child a[target="_blank"]:not(:has(img)):not(.ls-btn):focus {
	background: var(--ls-accent-deeper);
	box-shadow: var(--ls-c-shadow-md);
	color: #ffffff;
}

/*
 * Old pages: the "SHOP NOW" image button becomes a real button. The image is
 * hidden visually but keeps its alt text ("Shop now") as the link name. Every
 * rule needs :has(), so browsers without it keep the original image.
 */
.entry-content a:has(> img[src*="Shop-Now-button"]) {
	align-items: center;
	background: var(--ls-accent-dark);
	border-radius: 999px;
	box-shadow: var(--ls-c-shadow-sm);
	color: #ffffff;
	display: inline-flex;
	font-size: 0.92rem;
	font-weight: 700;
	gap: 0.45rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.55rem 1.2rem;
	position: relative;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s var(--ls-c-ease);
	white-space: nowrap;
}

.entry-content a:has(> img[src*="Shop-Now-button"])::before {
	content: "Shop now";
	content: "Shop now" / "";
}

.entry-content a:has(> img[src*="Shop-Now-button"])::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	transition: transform 0.2s var(--ls-c-ease);
}

.entry-content a:has(> img[src*="Shop-Now-button"]):hover,
.entry-content a:has(> img[src*="Shop-Now-button"]):focus {
	background: var(--ls-accent-deeper);
	box-shadow: var(--ls-c-shadow-md);
	color: #ffffff;
}

.entry-content a:has(> img[src*="Shop-Now-button"]):hover::after {
	transform: translateX(3px);
}

.entry-content a:has(> img[src*="Shop-Now-button"]) > img {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ================================================ 4. pills, chips, marks */
.entry-content .ls-pill {
	background: var(--ls-navy);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	padding: 0.25rem 0.75rem;
}

.entry-content .ls-chips {
	gap: 0.3rem;
}

.entry-content .ls-chips li {
	background: var(--ls-c-soft);
	border: 1px solid var(--ls-line);
	color: var(--ls-ink);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 0.1rem 0.6rem;
}

.entry-content .ls-ribbon {
	border-color: var(--ls-c-warm-line);
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	line-height: 1.4;
	padding: 0.15rem 0.6rem;
}

.entry-content .ls-yes,
.entry-content .ls-no,
.entry-content .ls-unknown {
	font-weight: 600;
	white-space: nowrap;
}

.entry-content .ls-yes::before {
	background: var(--ls-c-green);
}

/* ========================================================== 5. tables */
/* A polished default for every table: plain tables on new pages, size charts
   and the old retailer tables. Rounded card, navy header, zebra rows. */
.entry-content table {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-collapse: separate;
	border-radius: var(--ls-c-radius);
	border-spacing: 0;
	box-shadow: var(--ls-c-shadow-sm);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
	margin: 1.5rem 0 1.75rem;
	width: 100%;
}

/* Clip the header cells to the rounded corners. Below 901px style.css makes
   tables scroll boxes, so clipping is only re-applied there where :has() can
   tell small tables from wide ones (see the 900px block). */
@media (min-width: 901px) {
	.entry-content table {
		overflow: hidden;
	}
}

.entry-content th,
.entry-content td {
	border: 0;
	border-bottom: 1px solid var(--ls-line);
	padding: 0.8rem 1rem;
	text-align: left;
	vertical-align: middle;
}

.entry-content th {
	background: var(--ls-navy);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	padding-bottom: 0.85rem;
	padding-top: 0.85rem;
	text-transform: uppercase;
}

.entry-content th strong {
	color: inherit;
}

.entry-content tbody th {
	background: var(--ls-c-soft);
	color: var(--ls-navy-dark);
	letter-spacing: 0;
	text-transform: none;
}

.entry-content tbody td {
	background: #ffffff;
}

.entry-content tbody tr:nth-child(even) > td {
	background: var(--ls-row);
}

.entry-content tbody tr:hover > td {
	background: var(--ls-c-row-hover);
}

.entry-content tbody tr:last-child > * {
	border-bottom: 0;
}

.entry-content td:first-child {
	color: var(--ls-c-ink-strong);
	font-weight: 600;
}

.entry-content td.center,
.entry-content th.center {
	text-align: center;
}

/* Old size charts whose header row is a first row of bold cells. */
.entry-content table.hometable tr:first-child > td {
	background: var(--ls-navy);
	color: #ffffff;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.entry-content table.hometable tr:first-child > td strong {
	color: inherit;
}

/* Old directory size lists (bullet images and line breaks). */
.entry-content .categoryboxlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 1.5rem;
}

.entry-content .categoryboxlist br {
	display: none;
}

.entry-content .categoryboxlist a {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--ls-c-line-strong);
	border-radius: 999px;
	color: var(--ls-navy-dark);
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 700;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0.3rem 0.9rem;
	text-decoration: none;
}

.entry-content .categoryboxlist a:hover {
	background: var(--ls-tint);
	border-color: var(--ls-navy);
}

/*
 * Old retailer tables (table.tablepress: Retailer | Sizes | Shop Now). The first
 * cell holds a logo image and the retailer name in an h3, plus empty paragraphs
 * left by the old editor; the last cell holds the image button handled above.
 */
.entry-content table.tablepress {
	display: table;
	overflow: hidden;
}

.entry-content table.tablepress td {
	padding: 0.9rem 1rem;
}

.entry-content table.tablepress :is(th, td):nth-child(2) {
	width: 8rem;
}

.entry-content table.tablepress :is(th, td):last-child {
	text-align: right;
	width: 11rem;
}

.entry-content table.tablepress td p:empty,
.entry-content table.tablepress td p:has(> a:empty:only-child) {
	display: none;
}

.entry-content table.tablepress td:first-child > a:first-child {
	align-items: center;
	color: var(--ls-ink);
	display: flex;
	gap: 1rem;
	text-decoration: none;
}

.entry-content table.tablepress td:first-child img {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: 8px;
	flex: 0 0 auto;
	height: 3.5rem;
	object-fit: contain;
	padding: 0.3rem 0.5rem;
	width: 8.5rem;
}

.entry-content table.tablepress td:first-child h3 {
	color: var(--ls-navy-dark);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.entry-content table.tablepress td:first-child > a:first-child:hover h3 {
	text-decoration: underline;
}

.entry-content table.tablepress td:nth-child(2) {
	color: var(--ls-navy-dark);
	font-size: 1.05rem;
	font-weight: 800;
	white-space: nowrap;
}

.entry-content table.tablepress td:last-child {
	color: var(--ls-muted);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* Narrow screens: style.css turns every table into a sideways scroll box.
   Keep that only for wide tables; smaller tables fill the column. */
@media (max-width: 900px) {
	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:not(:has(tr > :nth-child(5)))) {
		display: table;
		overflow: hidden;
	}

	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:has(tr > :nth-child(5))) {
		display: block;
		overflow-x: auto;
	}

	/* Give columns room to read, rather than squeezing every word onto its own line. */
	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:has(tr > :nth-child(5))) :is(th, td) {
		min-width: 9rem;
	}

	/* Keep the first column (the shop name) in view while scrolling. */
	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:has(tr > :nth-child(5))) :is(th, td):first-child {
		box-shadow: inset -1px 0 0 var(--ls-line);
		left: 0;
		min-width: 7rem;
		position: sticky;
		z-index: 1;
	}
}

@media (max-width: 640px) {
	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:has(tr > :nth-child(5)))::before {
		background: var(--ls-c-soft);
		border-bottom: 1px solid var(--ls-line);
		color: var(--ls-muted);
		content: "Swipe sideways to see every column \2192";
		content: "Swipe sideways to see every column \2192" / "";
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		left: 0;
		padding: 0.45rem 0.9rem;
		position: sticky;
	}
}

/* Old retailer tables on phones: each row becomes a card. */
@media (max-width: 760px) {
	.entry-content table.tablepress,
	.entry-content table.tablepress tbody {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: block;
		overflow: visible;
		width: 100%;
	}

	.entry-content table.tablepress thead {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.entry-content table.tablepress tr {
		align-items: center;
		background: #ffffff;
		border: 1px solid var(--ls-line);
		border-radius: var(--ls-c-radius);
		box-shadow: var(--ls-c-shadow-sm);
		display: grid;
		gap: 0.8rem 1rem;
		grid-template-columns: minmax(0, 1fr) auto;
		margin: 0 0 0.9rem;
		padding: 0.95rem 1rem 1rem;
	}

	.entry-content table.tablepress tbody tr:nth-child(n) > td {
		background: transparent;
		border: 0;
		display: block;
		padding: 0;
		text-align: left;
		width: auto;
	}

	.entry-content table.tablepress td:first-child > a:first-child {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.45rem;
	}

	.entry-content table.tablepress td:first-child img {
		height: 2.9rem;
		width: 7.5rem;
	}

	.entry-content table.tablepress tbody tr:nth-child(n) > td:nth-child(2) {
		text-align: right;
	}

	.entry-content table.tablepress td:nth-child(2)::before {
		color: var(--ls-muted);
		content: "Sizes";
		display: block;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.entry-content table.tablepress tbody tr:nth-child(n) > td:nth-child(3) {
		grid-column: 1 / -1;
		text-align: center;
	}

	.entry-content table.tablepress td:nth-child(3) a {
		display: flex;
		width: 100%;
	}
}

/* ------------------------------------------- comparison table (ls-compare) */
.entry-content table.ls-compare {
	background: transparent;
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-md);
	margin: 1.5rem 0 0.75rem;
}

.entry-content table.ls-compare th {
	background: var(--ls-navy-dark);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	padding: 0.85rem 0.9rem;
	vertical-align: bottom;
}

.entry-content table.ls-compare th:first-child {
	border-top-left-radius: var(--ls-c-radius);
}

.entry-content table.ls-compare th:last-child {
	border-top-right-radius: var(--ls-c-radius);
}

.entry-content table.ls-compare tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--ls-c-radius);
}

.entry-content table.ls-compare tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--ls-c-radius);
}

.entry-content table.ls-compare td {
	padding: 1rem 0.9rem;
}

.entry-content table.ls-compare td:first-child {
	box-shadow: inset 4px 0 0 transparent;
	min-width: 9rem;
	transition: box-shadow 0.15s ease;
}

.entry-content table.ls-compare tbody tr:hover td:first-child {
	box-shadow: inset 4px 0 0 var(--ls-accent);
}

.entry-content table.ls-compare .ls-name {
	color: var(--ls-c-ink-strong);
	font-size: 1.02rem;
	line-height: 1.3;
}

.entry-content table.ls-compare td:last-child a.ls-btn {
	font-size: 0.88rem;
	padding: 0.5rem 1rem;
}

/* Wide screens: comparison tables and other wide tables (5+ columns) step out
   of the reading column so their columns have room. */
@media (min-width: 1180px) {
	.entry-content table.ls-compare,
	.entry-content table:where(:not(.ls-compare, .tablepress)):where(:has(tr > :nth-child(5))) {
		margin-left: calc((100% - 64rem) / 2);
		max-width: none;
		width: 64rem;
	}
}

/* Tablets: the six columns get less room, so tighten them. */
@media (min-width: 761px) and (max-width: 1179px) {
	.entry-content table.ls-compare {
		font-size: 0.88rem;
	}

	.entry-content table.ls-compare th,
	.entry-content table.ls-compare td {
		padding-left: 0.6rem;
		padding-right: 0.6rem;
	}

	.entry-content table.ls-compare .ls-pill {
		border-radius: 10px;
		line-height: 1.3;
		white-space: normal;
	}

	.entry-content table.ls-compare td:last-child a.ls-btn {
		white-space: normal;
	}
}

/* Phones: style.css stacks each row as a card; these rules finish the cards. */
@media (max-width: 760px) {
	.entry-content table.ls-compare {
		border-radius: 0;
		box-shadow: none;
	}

	.entry-content table.ls-compare tr {
		border: 1px solid var(--ls-line);
		border-radius: var(--ls-c-radius);
		border-top: 4px solid var(--ls-accent);
		box-shadow: var(--ls-c-shadow-md);
		margin-bottom: 1.1rem;
	}

	.entry-content table.ls-compare tbody tr td {
		border-bottom: 1px solid var(--ls-line);
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0.7rem 1rem;
	}

	.entry-content table.ls-compare tbody tr td:first-child {
		padding: 0.85rem 1rem;
	}

	.entry-content table.ls-compare tbody tr:hover td:first-child {
		box-shadow: none;
	}

	.entry-content table.ls-compare tbody tr td:last-child {
		border-bottom: 0;
		padding: 0.85rem 1rem 1rem;
	}

	.entry-content table.ls-compare .ls-name {
		font-size: 1.15rem;
	}

	.entry-content table.ls-compare td:last-child a.ls-btn {
		font-size: 0.95rem;
		padding: 0.6rem 1.25rem;
	}
}

/* ===================================================== 6. guide components */
/* Hero figure on guide pages */
.entry-content .ls-hero {
	margin: 0 0 1.75rem;
}

.entry-content .ls-hero img {
	background: var(--ls-c-soft);
	border-radius: var(--ls-c-radius-lg);
	box-shadow: var(--ls-c-shadow-md);
}

@media (min-width: 761px) {
	.entry-content .ls-hero img {
		aspect-ratio: 16 / 9;
	}
}

.entry-content .ls-hero figcaption,
.entry-content .ls-figure figcaption {
	color: var(--ls-muted);
	font-size: 0.8rem;
	line-height: 1.45;
	margin-top: 0.55rem;
}

/* Glance strip: four key facts as stat cards. */
.entry-content .ls-glance {
	gap: 0.65rem;
	grid-template-columns: repeat(auto-fit, minmax(min(8.25rem, 100%), 1fr));
	margin: 1.75rem 0;
}

.entry-content .ls-glance li {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	border-top: 4px solid var(--ls-accent);
	box-shadow: var(--ls-c-shadow-sm);
	padding: 0.75rem 0.85rem 0.9rem;
}

.entry-content .ls-glance__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
}

.entry-content .ls-glance__value {
	color: var(--ls-navy-dark);
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.15rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin-top: 0.25rem;
}

/* Shop cards, with an optional image slot at the top (.ls-card__media). */
.entry-content .ls-cards {
	gap: 1.1rem;
	margin: 1.5rem 0;
}

.entry-content .ls-card {
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	overflow: hidden;
	padding: 1.25rem 1.3rem 1.35rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ls-c-ease);
}

.entry-content .ls-card:hover {
	border-color: var(--ls-c-line-strong);
	box-shadow: var(--ls-c-shadow-md);
	transform: translateY(-2px);
}

.entry-content .ls-card__media {
	aspect-ratio: 3 / 2;
	background: var(--ls-c-soft);
	margin: -1.25rem -1.3rem 1.1rem;
	overflow: hidden;
}

.entry-content .ls-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.entry-content .ls-card h3 {
	color: var(--ls-navy-dark);
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
}

.entry-content .ls-card p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 0.9rem;
}

.entry-content .ls-card dl {
	background: var(--ls-c-soft);
	border-radius: 8px;
	font-size: 0.86rem;
	gap: 0.35rem 0.9rem;
	line-height: 1.45;
	margin: 0 0 1.1rem;
	padding: 0.75rem 0.9rem;
}

.entry-content .ls-card dd {
	color: var(--ls-c-ink-strong);
	font-weight: 600;
}

.entry-content .ls-card .ls-btn {
	align-self: stretch;
}

/* Numbered steps, joined by a line. */
.entry-content .ls-steps {
	margin: 1.25rem 0 1.75rem;
}

.entry-content .ls-steps li {
	margin: 0;
	padding: 0 0 1.15rem 3.1rem;
}

.entry-content .ls-steps li::before {
	background: linear-gradient(135deg, var(--ls-navy) 0%, var(--ls-navy-dark) 100%);
	box-shadow: var(--ls-c-shadow-sm);
	font-size: 0.95rem;
	height: 2.1rem;
	line-height: 2.1rem;
	top: 0;
	width: 2.1rem;
	z-index: 1;
}

.entry-content .ls-steps li:not(:last-child)::after {
	background: var(--ls-line);
	bottom: 0;
	content: "";
	left: calc(1.05rem - 1px);
	position: absolute;
	top: 2.1rem;
	width: 2px;
}

/* Steps as a grid of cards (homepage tips). */
.entry-content .ls-steps--grid {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr;
}

.entry-content .ls-steps--grid li {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	font-size: 0.95rem;
	line-height: 1.55;
	padding: 1.1rem 1.15rem 1.15rem 3.9rem;
}

.entry-content .ls-steps--grid li::before {
	background: linear-gradient(135deg, var(--ls-accent-dark) 0%, var(--ls-accent-deeper) 100%);
	left: 1.1rem;
	top: 1.05rem;
}

.entry-content .ls-steps--grid li:not(:last-child)::after {
	content: none;
}

.entry-content .ls-steps--grid li strong:first-child {
	color: var(--ls-navy-dark);
	display: block;
	font-size: 1.02rem;
	margin-bottom: 0.2rem;
}

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

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

	.entry-content .ls-steps--grid li {
		padding: 3.9rem 1.15rem 1.2rem;
	}

	.entry-content .ls-steps--grid li::before {
		top: 1.15rem;
	}
}

/* Figure (diagrams) */
.entry-content .ls-figure {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	margin: 1.5rem 0;
	padding: 0.75rem;
}

.entry-content .ls-figure svg {
	border-radius: 8px;
}

.entry-content .ls-figure figcaption {
	padding: 0 0.25rem;
}

/* FAQ */
.entry-content .ls-faq {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	margin: 0 0 0.7rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .ls-faq[open] {
	border-color: var(--ls-c-line-strong);
	box-shadow: var(--ls-c-shadow-md);
}

.entry-content .ls-faq summary {
	border-radius: var(--ls-c-radius);
	color: var(--ls-navy-dark);
	font-size: 1.02rem;
	line-height: 1.4;
	padding: 1rem 3.6rem 1rem 1.15rem;
	transition: background-color 0.15s ease;
}

.entry-content .ls-faq summary:hover {
	background: var(--ls-c-soft);
}

.entry-content .ls-faq[open] summary {
	border-radius: var(--ls-c-radius) var(--ls-c-radius) 0 0;
}

.entry-content .ls-faq summary::after {
	background: var(--ls-tint);
	border-radius: 50%;
	color: var(--ls-accent-dark);
	content: "+";
	content: "+" / "";
	font-size: 1.25rem;
	font-weight: 700;
	height: 2rem;
	line-height: 2rem;
	right: 1rem;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ls-c-ease);
	width: 2rem;
}

.entry-content .ls-faq[open] summary::after {
	background: var(--ls-accent-dark);
	color: #ffffff;
	content: "\2212";
	content: "\2212" / "";
	transform: translateY(-50%) rotate(180deg);
}

.entry-content .ls-faq > div {
	padding: 0.15rem 1.15rem 1.1rem;
}

/* Our picks: warm cards with a star badge. */
.entry-content .our-pick {
	display: grid;
	gap: 0.8rem;
	list-style: none;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
}

.entry-content .our-pick li {
	background: var(--ls-tint-warm);
	border: 1px solid var(--ls-c-warm-line);
	border-radius: var(--ls-c-radius);
	line-height: 1.55;
	margin: 0;
	padding: 1rem 1.15rem 1.05rem 3.25rem;
	position: relative;
}

.entry-content .our-pick li::before {
	background: var(--ls-accent-dark);
	border-radius: 50%;
	color: #ffffff;
	content: "\2605";
	content: "\2605" / "";
	font-size: 0.8rem;
	height: 1.6rem;
	left: 1rem;
	line-height: 1.6rem;
	position: absolute;
	text-align: center;
	top: 1.05rem;
	width: 1.6rem;
}

.entry-content .our-pick li strong:first-child {
	color: var(--ls-accent-deeper);
	display: block;
	margin-bottom: 0.15rem;
}

@media (min-width: 640px) {
	.entry-content .our-pick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Related links as tiles with an arrow. */
.entry-content .related-links {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	list-style: none;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
}

.entry-content .related-links li {
	margin: 0;
}

.entry-content .related-links li a {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	color: var(--ls-navy-dark);
	display: flex;
	font-size: 0.95rem;
	font-weight: 700;
	gap: 0.75rem;
	height: 100%;
	justify-content: space-between;
	line-height: 1.3;
	min-height: 3.4rem;
	padding: 0.7rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s var(--ls-c-ease);
}

.entry-content .related-links li a::after {
	color: var(--ls-accent-dark);
	content: "\2192";
	content: "\2192" / "";
	flex: 0 0 auto;
	transition: transform 0.2s var(--ls-c-ease);
}

.entry-content .related-links li a:hover,
.entry-content .related-links li a:focus {
	background: var(--ls-tint);
	border-color: var(--ls-navy);
	box-shadow: var(--ls-c-shadow-md);
	color: var(--ls-navy-dark);
	transform: translateY(-2px);
}

.entry-content .related-links li a:hover::after {
	transform: translateX(3px);
}

/* Soft panel for a short section (homepage "How we earn"). */
.entry-content .ls-note {
	background: var(--ls-tint-warm);
	border: 1px solid var(--ls-c-warm-line);
	border-radius: var(--ls-c-radius-lg);
	margin: var(--ls-c-section) 0 0;
	padding: 1.4rem 1.35rem 0.4rem;
}

.entry-content .ls-note > h2 {
	font-size: 1.3rem;
	margin: 0 0 0.5rem;
	padding-top: 0;
}

.entry-content .ls-note > h2::before {
	content: none;
}

.entry-content .ls-note p {
	max-width: 52rem;
}

/* ====================================================== 7. homepage */
/* The homepage content uses the full container width (other pages keep the
   46rem reading column from style.css). */
body.home .entry-content {
	max-width: none;
}

/* Kept separate so browsers without :has() still apply the rule above. */
body .entry-content:has(> .ls-home) {
	max-width: none;
}

.entry-content .ls-home > p:not(.disclosure),
.entry-content .ls-section > p {
	max-width: 48rem;
}

.entry-content .ls-section {
	margin: var(--ls-c-section) 0 0;
}

.entry-content .ls-section > h2 {
	margin-top: 0;
}

.entry-content .ls-section__intro {
	color: var(--ls-muted);
	font-size: 1.02rem;
	margin: -0.15rem 0 1.4rem;
}

/* --- Hero banner: photo with a navy overlay, headline and two buttons.
   Phones: the photo sits above a navy panel. 761px and up: the photo fills
   the banner and a gradient keeps the text side dark enough for AA contrast. */
.entry-content .ls-home-hero {
	background: var(--ls-navy-dark);
	border-radius: var(--ls-c-radius-lg);
	box-shadow: var(--ls-c-shadow-lg);
	color: var(--ls-c-on-dark);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	margin: 0 0 1.25rem;
	overflow: hidden;
	position: relative;
}

.entry-content .ls-home-hero__media {
	aspect-ratio: 3 / 2;
	background: var(--ls-navy);
	margin: 0;
	position: relative;
}

.entry-content .ls-home-hero__media img {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 50%;
	width: 100%;
}

.entry-content .ls-home-hero__media::after {
	background: linear-gradient(180deg, rgba(21, 42, 69, 0) 40%, rgba(21, 42, 69, 0.75) 80%, var(--ls-navy-dark) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.entry-content .ls-home-hero__body {
	margin-top: -1.75rem;
	padding: 0 1.25rem 1.6rem;
	position: relative;
}

.entry-content .ls-home-hero__eyebrow {
	color: var(--ls-c-eyebrow-on-dark);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.entry-content .ls-home-hero h1 {
	color: #ffffff;
	font-size: clamp(2rem, 1.25rem + 3vw, 3.3rem);
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 0 0.85rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.entry-content .ls-home-hero__lead {
	color: var(--ls-c-on-dark-muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
	margin: 0 0 1.4rem;
	max-width: 36rem;
}

.entry-content .ls-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.entry-content .ls-home-hero a:focus-visible {
	outline-color: var(--ls-c-focus-on-dark);
}

@media (min-width: 761px) {
	.entry-content .ls-home-hero {
		justify-content: center;
		min-height: clamp(25rem, 36vw, 31rem);
	}

	.entry-content .ls-home-hero__media {
		aspect-ratio: auto;
		inset: 0;
		position: absolute;
		z-index: -1;
	}

	.entry-content .ls-home-hero__media::after {
		background: linear-gradient(90deg, rgba(21, 42, 69, 0.97) 0%, rgba(21, 42, 69, 0.93) 42%, rgba(21, 42, 69, 0.78) 62%, rgba(21, 42, 69, 0.3) 100%);
	}

	.entry-content .ls-home-hero__body {
		margin: 0;
		max-width: min(40rem, 64%);
		padding: 3rem clamp(2rem, 4.5vw, 3.75rem);
	}
}

/* --- Trust strip: how we check shops. */
.entry-content .ls-trust {
	background: linear-gradient(180deg, var(--ls-tint) 0%, #f7faff 100%);
	border: 1px solid #d3e0ef;
	border-radius: var(--ls-c-radius-lg);
	margin: 1.25rem 0 0;
	padding: 1.4rem 1.25rem 1.5rem;
}

.entry-content .ls-trust__title {
	font-size: 1.15rem;
	margin: 0 0 1.1rem;
	padding-top: 0;
}

.entry-content .ls-trust__title::before {
	content: none;
}

.entry-content .ls-trust__list {
	display: grid;
	gap: 1.1rem 1.75rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .ls-trust__list li {
	align-content: start;
	column-gap: 0.85rem;
	display: grid;
	font-size: 0.92rem;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	line-height: 1.5;
	margin: 0;
}

.entry-content .ls-trust__icon {
	align-items: center;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: var(--ls-c-shadow-sm);
	color: var(--ls-accent-dark);
	display: flex;
	grid-row: span 2;
	height: 2.6rem;
	justify-content: center;
	width: 2.6rem;
}

.entry-content .ls-trust__icon svg {
	display: block;
	height: 1.35rem;
	width: 1.35rem;
}

.entry-content .ls-trust__list strong {
	color: var(--ls-navy-dark);
	display: block;
	font-size: 0.98rem;
	line-height: 1.35;
	margin: 0.1rem 0 0.15rem;
}

@media (min-width: 600px) {
	.entry-content .ls-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.entry-content .ls-trust {
		padding: 1.6rem 1.75rem 1.75rem;
	}

	.entry-content .ls-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Category tiles: image, title (the link) and a short line. The link
   stretches over the whole tile. */
.entry-content .ls-tiles {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.entry-content .ls-tile {
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	position: relative;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ls-c-ease);
}

.entry-content .ls-tile:hover {
	border-color: var(--ls-c-line-strong);
	box-shadow: var(--ls-c-shadow-md);
	transform: translateY(-3px);
}

.entry-content .ls-tile__media {
	aspect-ratio: 3 / 2;
	background: var(--ls-c-soft);
	margin: 0;
	overflow: hidden;
}

.entry-content .ls-tile__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--ls-c-ease);
	width: 100%;
}

.entry-content .ls-tile:hover .ls-tile__media img {
	transform: scale(1.05);
}

.entry-content .ls-tile__title {
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
	padding: 0.95rem 1.05rem 0.3rem;
}

.entry-content .ls-tile__title a {
	color: var(--ls-navy-dark);
	text-decoration: none;
}

.entry-content .ls-tile__title a::before {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* Inline (not inline-block) so the arrow never wraps onto a line of its own. */
.entry-content .ls-tile__title a::after {
	color: var(--ls-accent-dark);
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
	padding-left: 0;
	transition: padding-left 0.2s var(--ls-c-ease);
}

.entry-content .ls-tile:hover .ls-tile__title a::after {
	padding-left: 4px;
}

.entry-content .ls-tile__text {
	color: var(--ls-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
	padding: 0 1.05rem 1.15rem;
}

/* Keyboard focus outlines the whole tile where :has() is supported. */
.entry-content .ls-tile:has(a:focus-visible) {
	outline: 3px solid var(--ls-c-focus);
	outline-offset: 3px;
}

@supports selector(:has(a)) {
	.entry-content .ls-tile__title a:focus-visible {
		outline: none;
	}
}

/* Small phones: full tiles turn sideways (image left, text right) so four
   guides do not take four screens of scrolling. */
@media (max-width: 519px) {
	.entry-content .ls-tiles:not(.ls-tiles--compact) {
		gap: 0.75rem;
	}

	.entry-content .ls-tiles:not(.ls-tiles--compact) .ls-tile {
		display: grid;
		grid-template-columns: 38% minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.entry-content .ls-tiles:not(.ls-tiles--compact) .ls-tile__media {
		aspect-ratio: auto;
		grid-row: 1 / span 2;
		min-height: 7.25rem;
	}

	.entry-content .ls-tiles:not(.ls-tiles--compact) .ls-tile__title {
		align-self: end;
		font-size: 1.02rem;
		padding: 0.8rem 0.9rem 0.2rem;
	}

	.entry-content .ls-tiles:not(.ls-tiles--compact) .ls-tile__text {
		font-size: 0.85rem;
		padding: 0 0.9rem 0.85rem;
	}
}

/* Compact tiles (two per row on phones). */
.entry-content .ls-tiles--compact {
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entry-content .ls-tiles--compact .ls-tile__title {
	font-size: 0.98rem;
	padding: 0.75rem 0.8rem 0.25rem;
}

.entry-content .ls-tiles--compact .ls-tile__text {
	font-size: 0.82rem;
	padding: 0 0.8rem 0.9rem;
}

@media (min-width: 520px) {
	.entry-content .ls-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 760px) {
	.entry-content .ls-tiles--3,
	.entry-content .ls-tiles--6 {
		gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.entry-content .ls-tiles--compact .ls-tile__title {
		font-size: 1.05rem;
		padding: 0.9rem 1rem 0.3rem;
	}

	.entry-content .ls-tiles--compact .ls-tile__text {
		font-size: 0.88rem;
		padding: 0 1rem 1.05rem;
	}
}

@media (min-width: 1000px) {
	.entry-content .ls-tiles--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Six small tiles in one row, so they read as secondary to the four guides. */
	.entry-content .ls-tiles--6 {
		gap: 0.85rem;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.entry-content .ls-tiles--6.ls-tiles--compact .ls-tile__title {
		font-size: 0.98rem;
		padding: 0.75rem 0.8rem 0.25rem;
	}

	.entry-content .ls-tiles--6.ls-tiles--compact .ls-tile__text {
		font-size: 0.82rem;
		padding: 0 0.8rem 0.9rem;
	}
}

/* --- Size quick links: a navy panel of round size buttons. */
.entry-content .ls-sizes {
	background:
		radial-gradient(circle at 100% 0%, rgba(217, 84, 26, 0.28) 0%, rgba(217, 84, 26, 0) 45%),
		linear-gradient(135deg, var(--ls-navy) 0%, var(--ls-navy-dark) 100%);
	border-radius: var(--ls-c-radius-lg);
	box-shadow: var(--ls-c-shadow-md);
	color: var(--ls-c-on-dark);
	display: grid;
	gap: 1.4rem 2.5rem;
	grid-template-columns: 1fr;
	margin: 1.25rem 0 0;
	padding: 1.4rem 1.25rem 1.6rem;
}

.entry-content .ls-sizes__label {
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	margin: 0 0 0.65rem;
	text-transform: uppercase;
}

.entry-content .ls-sizes__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .ls-sizes__list li {
	margin: 0;
}

.entry-content .ls-sizes__list a {
	align-items: center;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
	color: var(--ls-navy-dark);
	display: inline-flex;
	font-size: 1.05rem;
	font-weight: 800;
	height: 2.85rem;
	justify-content: center;
	min-width: 2.85rem;
	padding: 0 0.6rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s var(--ls-c-ease);
}

.entry-content .ls-sizes__list a:hover,
.entry-content .ls-sizes__list a:focus {
	background: var(--ls-accent-dark);
	color: #ffffff;
	transform: translateY(-2px);
}

.entry-content .ls-sizes__list a:focus-visible {
	outline: 3px solid var(--ls-c-focus-on-dark);
	outline-offset: 2px;
}

/* Small phones: a fixed seven-column grid keeps each size row on one line. */
@media (max-width: 519px) {
	.entry-content .ls-sizes {
		padding: 1.25rem 1rem 1.4rem;
	}

	.entry-content .ls-sizes__list {
		display: grid;
		gap: 0.35rem;
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.entry-content .ls-sizes__list a {
		aspect-ratio: 1;
		font-size: 0.98rem;
		height: auto;
		min-width: 0;
		padding: 0;
		width: 100%;
	}
}

@media (min-width: 761px) {
	.entry-content .ls-sizes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.9rem 2.25rem 2.1rem;
	}
}

/* --- Link chips: a row of pill links (more types, other sizes). */
.entry-content .ls-linkchips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.1rem 0 1rem;
	padding: 0;
}

.entry-content .ls-linkchips li {
	margin: 0;
}

.entry-content .ls-linkchips a {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--ls-c-line-strong);
	border-radius: 999px;
	color: var(--ls-navy-dark);
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 2.5rem;
	padding: 0.35rem 0.95rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.entry-content .ls-linkchips a:hover,
.entry-content .ls-linkchips a:focus {
	background: var(--ls-tint);
	border-color: var(--ls-navy);
	color: var(--ls-navy-dark);
}

/* --- Shop cards on the homepage: initial, name, size range, one line, link. */
.entry-content .ls-shops {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.entry-content .ls-shop {
	align-content: start;
	background: #ffffff;
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-c-radius);
	box-shadow: var(--ls-c-shadow-sm);
	column-gap: 0.85rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	margin: 0;
	padding: 1.1rem 1.15rem 1.2rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .ls-shop:hover {
	border-color: var(--ls-c-line-strong);
	box-shadow: var(--ls-c-shadow-md);
}

.entry-content .ls-shop__mark {
	align-items: center;
	background: var(--ls-tint);
	border-radius: 12px;
	color: var(--ls-navy);
	display: flex;
	font-size: 1.2rem;
	font-weight: 800;
	grid-row: 1 / span 2;
	height: 2.85rem;
	justify-content: center;
	width: 2.85rem;
}

.entry-content .ls-shop__name {
	align-self: end;
	color: var(--ls-navy-dark);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}

.entry-content .ls-shop__range {
	align-self: start;
	background: var(--ls-tint-warm);
	border: 1px solid var(--ls-c-warm-line);
	border-radius: 999px;
	color: var(--ls-accent-deeper);
	font-size: 0.75rem;
	font-weight: 700;
	justify-self: start;
	line-height: 1.4;
	margin: 0.3rem 0 0;
	padding: 0.1rem 0.6rem;
}

.entry-content .ls-shop__text {
	font-size: 0.93rem;
	grid-column: 1 / -1;
	line-height: 1.55;
	margin: 0.9rem 0 1rem;
}

.entry-content .ls-shop__link {
	align-self: end;
	grid-column: 1 / -1;
	margin: 0;
}

/* Every shop link here looks the same, whether or not it earns us anything. */
.entry-content .ls-shop__link a {
	align-items: center;
	background: #ffffff;
	border: 2px solid var(--ls-navy);
	border-radius: 999px;
	color: var(--ls-navy);
	display: flex;
	font-size: 0.92rem;
	font-weight: 700;
	gap: 0.4rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.entry-content .ls-shop__link a::after {
	content: "\2192";
	content: "\2192" / "";
}

.entry-content .ls-shop__link a:hover,
.entry-content .ls-shop__link a:focus {
	background: var(--ls-navy);
	color: #ffffff;
}

/* Wide screens: one row per shop, like a directory listing. */
@media (min-width: 900px) {
	.entry-content .ls-shops {
		gap: 0.75rem;
		grid-template-columns: 1fr;
	}

	.entry-content .ls-shop {
		align-items: center;
		column-gap: 1.25rem;
		grid-template-columns: auto minmax(11rem, 15rem) minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		padding: 1rem 1.25rem;
	}

	.entry-content .ls-shop__mark {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.entry-content .ls-shop__name {
		grid-column: 2;
		grid-row: 1;
	}

	.entry-content .ls-shop__range {
		grid-column: 2;
		grid-row: 2;
	}

	.entry-content .ls-shop__text {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin: 0;
	}

	.entry-content .ls-shop__link {
		align-self: center;
		grid-column: 4;
		grid-row: 1 / span 2;
	}

	.entry-content .ls-shop__link a {
		min-width: 12.5rem;
	}
}

/* ============================================ 8. motion and print */
@media (prefers-reduced-motion: reduce) {
	.entry-content *,
	.entry-content *::before,
	.entry-content *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}

	.entry-content a.ls-btn:hover,
	.entry-content .ls-card:hover,
	.entry-content .ls-tile:hover,
	.entry-content .ls-tile:hover .ls-tile__media img,
	.entry-content .related-links li a:hover,
	.entry-content .ls-sizes__list a:hover,
	.entry-content .ls-sizes__list a:focus,
	.entry-content a:has(> img[src*="Shop-Now-button"]):hover {
		transform: none;
	}
}

@media print {
	.entry-content table,
	.entry-content .ls-card,
	.entry-content .ls-tile,
	.entry-content .ls-shop,
	.entry-content .ls-faq,
	.entry-content .ls-home-hero,
	.entry-content .ls-sizes {
		box-shadow: none;
	}
}