/*
 * shoppify.tech design system.
 *
 * One rule carries meaning rather than decoration: ORANGE IS ONLY EVER AN
 * AFFILIATE LINK. Editorial links are cobalt. A reader learns the difference
 * in two pages, and it is what lets the site say "don't buy this" without the
 * page fighting the sentence.
 */

:root {
	--sho-paper:  #FBF8F3;
	--sho-card:   #FFFFFF;
	--sho-sand:   #F3EEE3;
	--sho-ink:    #14161A;
	--sho-deep:   #101216;
	--sho-body:   #24272C;
	--sho-muted:  #5D6067;
	--sho-line:   #E6DFD2;
	--sho-cobalt: #2B44FF;
	--sho-orange: #FF6B2C;
	--sho-green:  #0F7B5A;
	--sho-amber:  #B45309;
	--sho-red:    #B42318;

	--sho-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sho-sans:    'Instrument Sans', system-ui, -apple-system, sans-serif;
	--sho-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

	--sho-radius: 10px;
}

body {
	background: var(--sho-paper);
	color: var(--sho-ink);
	font-family: var(--sho-sans);
	-webkit-font-smoothing: antialiased;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--sho-display);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.entry-content a { color: var(--sho-cobalt); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--sho-ink); }

/* GeneratePress pads every block group inside .site-main by 50px; our own
   components set their own gutters, so that padding only fights them. */
.site-main .wp-block-group__inner-container { padding: 0; }

/* --- shared bits --------------------------------------------------------- */

.sho-eyebrow {
	display: block;
	font-family: var(--sho-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sho-muted);
}

.sho-num { font-family: var(--sho-mono); font-variant-numeric: tabular-nums; }
.sho-num--empty { color: var(--sho-muted); }

/* --- the affiliate call to action ---------------------------------------- */

.sho-cta-wrap { margin: 1.5rem 0; }

.sho-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.75rem;
	border: 1px solid var(--sho-ink);
	border-radius: 7px;
	background: var(--sho-orange);
	color: var(--sho-ink);
	font-family: var(--sho-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.sho-cta:hover,
.sho-cta:focus-visible {
	background: var(--sho-ink);
	color: var(--sho-paper);
	text-decoration: none;
}

.sho-cta--ghost { background: transparent; font-weight: 600; }
/* A full content-width orange bar reads as a banner ad, which is the one
   thing a recommendation must not look like. */
.sho-cta--block { display: flex; width: 100%; max-width: 420px; }
.sho-cta-wrap { display: flex; flex-direction: column; align-items: center; }
.sho-cta-wrap .sho-cta-note { width: 100%; }

.sho-cta-note {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--sho-mono);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sho-muted);
	text-align: center;
}

/* --- verdict box --------------------------------------------------------- */

.sho-verdict {
	margin: 2rem 0;
	padding: 1.625rem;
	background: var(--sho-card);
	border: 1px solid var(--sho-ink);
	border-radius: var(--sho-radius);
	box-shadow: 6px 6px 0 var(--sho-ink);
}

.sho-verdict__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.sho-verdict__title { margin: 0.25rem 0 0; font-size: 1.5rem; }
.sho-verdict__text  { margin: 1rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--sho-body); }

.sho-score {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 8px;
	background: var(--sho-deep);
	color: var(--sho-paper);
}

.sho-score__n { font-family: var(--sho-mono); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.sho-score__d { font-family: var(--sho-mono); font-size: 0.625rem; color: #9BA0A8; padding-top: 3px; }

.sho-verdict__facts {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sho-line);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sho-verdict__facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.sho-verdict__facts dt  { color: var(--sho-muted); }
.sho-verdict__facts dd  { margin: 0; font-weight: 600; text-align: right; }

/* --- pros & cons --------------------------------------------------------- */

.sho-proscons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem;
	margin: 2rem 0;
}

.sho-proscons__col {
	padding: 1.375rem 1.5rem;
	background: var(--sho-card);
	border: 1px solid var(--sho-line);
	border-radius: 8px;
}

.sho-proscons__col--pro { border-top: 3px solid var(--sho-green); }
.sho-proscons__col--con { border-top: 3px solid var(--sho-red); }

.sho-proscons h3 { margin: 0 0 0.75rem; font-size: 1.1875rem; }
.sho-proscons ul { margin: 0; padding: 0; list-style: none; }

.sho-proscons li {
	position: relative;
	padding-left: 1.375rem;
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sho-body);
}

.sho-proscons li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.sho-proscons__col--pro li::before { content: "+"; color: var(--sho-green); }
.sho-proscons__col--con li::before { content: "\2212"; color: var(--sho-red); }

/* --- comparison table ---------------------------------------------------- */

.sho-table-wrap {
	margin: 2rem 0;
	overflow-x: auto;
	background: var(--sho-card);
	border: 1px solid var(--sho-ink);
	border-radius: var(--sho-radius);
}

.sho-table { width: 100%; border-collapse: collapse; margin: 0; }

.sho-table thead th {
	padding: 0.8125rem 1.375rem;
	background: var(--sho-deep);
	color: #9BA0A8;
	font-family: var(--sho-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}

.sho-table tbody td {
	padding: 0.9375rem 1.375rem;
	border-bottom: 1px solid var(--sho-line);
	vertical-align: middle;
	font-size: 0.9375rem;
}

.sho-table tbody tr:last-child td { border-bottom: 0; }
.sho-table__row--pick td { background: #FFF9F2; }

.sho-table__rank { font-family: var(--sho-mono); font-weight: 700; color: var(--sho-muted); width: 52px; }
.sho-table__row--pick .sho-table__rank { color: var(--sho-orange); }

.sho-table__name { display: block; font-size: 1rem; font-weight: 600; color: var(--sho-ink); text-decoration: none; }
.sho-table__name:hover { text-decoration: underline; }
.sho-table__sub  { display: block; font-size: 0.8125rem; color: var(--sho-muted); }

.sho-table__cta { width: 160px; }
.sho-table__cta .sho-cta-wrap { margin: 0; }
.sho-table__cta .sho-cta { min-height: 40px; width: 100%; padding: 0 0.75rem; font-size: 0.875rem; }
.sho-table__cta .sho-cta-note { display: none; }

/* --- disclosure, related, legal ------------------------------------------ */

.sho-disclosure {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	background: var(--sho-sand);
	border-left: 3px solid var(--sho-orange);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--sho-body);
}

.sho-related {
	margin: 2.5rem 0;
	padding: 1.625rem 1.75rem;
	background: var(--sho-sand);
	border-radius: var(--sho-radius);
}

.sho-related__title { margin: 0 0 0.75rem; font-family: var(--sho-display); font-size: 1.25rem; }

.sho-related ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.75rem;
}

.sho-related li { border-bottom: 1px solid #E2DACB; }
.sho-related li:last-child, .sho-related li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.sho-related a {
	display: block;
	padding: 0.625rem 0;
	font-size: 0.9375rem;
	color: var(--sho-cobalt);
	text-decoration: none;
}

.sho-related a::after { content: " \2192"; }
.sho-related a:hover { color: var(--sho-ink); text-decoration: underline; }

.sho-legal {
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--sho-line);
	margin-top: 1.25rem;
}

.sho-legal p {
	margin: 0;
	font-size: 0.78125rem;
	line-height: 1.6;
	color: var(--sho-muted);
	max-width: 860px;
}

/* --- mobile -------------------------------------------------------------- */

@media (max-width: 768px) {
	.sho-proscons,
	.sho-related ul { grid-template-columns: 1fr; }

	.sho-related li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #E2DACB; }

	.sho-verdict { padding: 1.25rem; box-shadow: 4px 4px 0 var(--sho-ink); }
	.sho-table thead th,
	.sho-table tbody td { padding-left: 0.875rem; padding-right: 0.875rem; }
	.sho-table__cta { width: 120px; }
}

/* --- hub and child listings ---------------------------------------------- */

.sho-children {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}

.sho-child {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.375rem;
	background: var(--sho-card);
	border: 1px solid var(--sho-line);
	border-radius: 8px;
	text-decoration: none;
}

.sho-child:hover { border-color: var(--sho-ink); text-decoration: none; }

.sho-child__title {
	font-family: var(--sho-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--sho-ink);
}

.sho-child__title::after { content: " \2192"; color: var(--sho-cobalt); }
.sho-child__blurb { font-size: 0.875rem; line-height: 1.5; color: var(--sho-muted); }

.sho-children--list { grid-template-columns: 1fr; gap: 0; }

.sho-children--list .sho-child {
	flex-direction: row;
	align-items: baseline;
	gap: 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--sho-line);
	border-radius: 0;
	padding: 0.75rem 0;
	background: transparent;
}

.sho-hubs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 2.5rem 0;
}

.sho-hub {
	padding: 1.5rem;
	background: var(--sho-card);
	border: 1px solid var(--sho-line);
	border-radius: var(--sho-radius);
}

.sho-hub__title { margin: 0 0 0.5rem; font-family: var(--sho-display); font-size: 1.375rem; }
.sho-hub__title a { color: var(--sho-ink); text-decoration: none; }
.sho-hub__title a:hover { text-decoration: underline; }
.sho-hub__blurb { margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.5; color: var(--sho-muted); }

.sho-hub__links { margin: 0; padding: 0.875rem 0 0; list-style: none; border-top: 1px solid var(--sho-line); }
.sho-hub__links li { margin-bottom: 0.5rem; }
.sho-hub__links a { font-size: 0.9375rem; color: var(--sho-cobalt); text-decoration: none; }
.sho-hub__links a::after { content: " \2192"; }
.sho-hub__links a:hover { color: var(--sho-ink); text-decoration: underline; }

.sho-lede {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--sho-body);
}

@media (max-width: 768px) {
	.sho-children, .sho-hubs { grid-template-columns: 1fr; }
}

/* --- GeneratePress overrides ---------------------------------------------
 * The theme ships its own colour and type defaults as dynamic CSS. These
 * selectors are qualified rather than bare because the theme wins on
 * specificity against a single class.
 * ------------------------------------------------------------------------ */

body,
.site-content,
.entry-content { font-family: var(--sho-sans); }

.site-header,
.site-header .inside-header {
	background-color: var(--sho-paper);
	border-bottom: 1px solid var(--sho-line);
}

.site-header .main-title,
.site-header .site-title { font-family: var(--sho-display); letter-spacing: -0.02em; }
.site-header .main-title a { color: var(--sho-ink); text-decoration: none; }
.site-header .main-title a::after { content: ""; }
.site-description { font-family: var(--sho-sans); color: var(--sho-muted); }

.main-navigation,
.main-navigation .inside-navigation { background-color: var(--sho-paper); }
.main-navigation .main-nav ul li a { color: var(--sho-ink); font-weight: 500; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--sho-cobalt); background: transparent; }

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.page .entry-title,
.single .entry-title {
	font-family: var(--sho-display);
	color: var(--sho-ink);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.page .entry-title, .single .entry-title { font-size: clamp(2.25rem, 4.5vw, 3.375rem); line-height: 1.08; }
.entry-content h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); margin-top: 2.5rem; }
.entry-content h3 { font-size: 1.3125rem; margin-top: 1.75rem; }

.entry-content p,
.entry-content li { color: var(--sho-body); line-height: 1.7; }
.entry-content > p, .entry-content > ul, .entry-content > ol { font-size: 1.0625rem; }
.entry-content strong { color: var(--sho-ink); }

.site-footer,
.site-footer .inside-site-info {
	background-color: var(--sho-paper);
	border-top: 1px solid var(--sho-line);
	color: var(--sho-muted);
}

/* GP Premium's navigation-branding stylesheet is enqueued after this one, so
   equal specificity loses. These selectors are deliberately one step heavier
   rather than using !important, which would leave nothing to override later. */

body .main-navigation,
body .main-navigation .inside-navigation,
body .main-navigation.has-branding { background-color: var(--sho-paper); }

body .main-navigation .main-nav ul li a,
body .main-navigation .menu-toggle,
body .main-navigation .search-item a {
	color: var(--sho-ink);
	font-weight: 500;
}

body .main-navigation .main-nav ul li:hover > a,
body .main-navigation .main-nav ul li:focus-within > a,
body .main-navigation .main-nav ul li.current-menu-item > a,
body .main-navigation .search-item a:hover {
	color: var(--sho-cobalt);
	background-color: transparent;
}

body .main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--sho-orange); }

body .navigation-branding .main-title,
body .navigation-branding .main-title a,
body .site-header .main-title a {
	color: var(--sho-ink);
	font-family: var(--sho-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}

body .navigation-branding .main-title a:hover { color: var(--sho-ink); }

/* Dropdowns inherit the dark default too. */
body .main-navigation ul ul { background-color: var(--sho-card); border: 1px solid var(--sho-line); }
body .main-navigation ul ul li a { color: var(--sho-ink); }

/* The bar needs a hairline now that it is no longer a dark block. */
body .main-navigation { border-bottom: 1px solid var(--sho-line); }