/* Handheld selector ("Find your handheld"), inc/handheld-selector.php.
   Loaded only on a page with [ec_handheld_selector]. All classes start .ec-hs.

   2026-11-06 restyle (owner: "tie things in", "streamlined", "very subtle
   curves when necessary", "mimic add to cart"). Values are taken from the
   live site, not invented:
   - shop category cards (css/shop-category.css): grey #efefef panels, square,
     DM Mono 11px/0.14em uppercase label "4.2″ 4:3 → PSP", 15px name, 16px
     bold price, the shared stock dot line (global.css .stock-status-label);
   - product page (css/product-single.css, hero-product-pages.css): Add to
     cart pill #ce1d76 / Open Sans 700 / 25px radius / 53px tall, quantity box
     white + 1px #ddd + 22px radius, kicker "OVERVIEW" DM Mono 10px/0.24em
     pink with a hairline after it, gallery thumbs 6px radius with a 2px pink
     border when active, "How it compares" columns with 1px dividers.
   Those stylesheets do not load on this page, so the values are copied into
   the tokens below. global.css (stock dots) does load everywhere. */

.ec-hs, .ec-hs-compare {
	--hs-accent: #ce1d76;
	--hs-accent-dim: #a01560;
	--hs-ink: #333e48;    /* site body text */
	--hs-title: #111111;  /* shop card names and prices */
	--hs-muted: #6e6e73;  /* shop card label grey */
	--hs-line: #e3e3e6;
	--hs-field: #dddddd;  /* quantity box border */
	--hs-panel: #efefef;  /* shop card grey */
	--hs-panel-hover: #e6e6e6;
	--hs-amber: #c16f02;  /* global.css backorder colour */
	--hs-amber-soft: #fbf1e3;
	--hs-radius: 6px;     /* gallery thumbs: the only curve on panels */
	--hs-mono: "DM Mono", ui-monospace, Consolas, monospace;
}

.ec-hs {
	max-width: 1080px;
	margin: 0 auto 48px;
	color: var(--hs-ink);
	font-size: 15px;
	line-height: 1.5;
	scroll-margin-top: 90px;
}
.ec-hs *, .ec-hs *::before, .ec-hs *::after,
.ec-hs-compare *, .ec-hs-compare *::before, .ec-hs-compare *::after { box-sizing: border-box; }
.ec-hs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ec-hs [hidden] { display: none !important; }

.ec-hs-ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }

/* ── Small type shared by steps, results and the compare table ── */
/* Kicker: product page section label ("OVERVIEW ———"). */
.ec-hs-kicker,
.ec-hs .ec-hs-step__num,
.ec-hs .ec-hs-sub {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 6px;
	font-family: var(--hs-mono); font-size: 11px; font-weight: 500; line-height: 1.4;
	letter-spacing: .2em; text-transform: uppercase; color: var(--hs-accent);
}
.ec-hs-kicker::after,
.ec-hs .ec-hs-step__num::after,
.ec-hs .ec-hs-sub::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hs-line); }
.ec-hs .ec-hs-sub { margin: 26px 0 12px; color: var(--hs-muted); }
/* The section labels are h3s, and the Customizer forces Bebas + grey on
   h1-h6 with !important: the label text sits in a span that carries the
   kicker type instead (same fix as the card names, TROUBLESHOOTING #18). */
.ec-hs .ec-hs-sub > span {
	font-family: var(--hs-mono); font-size: 11px; font-weight: 500; line-height: 1.4;
	letter-spacing: .2em; text-transform: uppercase; color: var(--hs-muted);
}
.ec-hs-tile[data-group="layout"] .ec-hs-tile__ico { width: 30px; height: 30px; }
.ec-hs-kicker--plain { display: block; margin: 0 0 4px; }
.ec-hs-kicker--plain::after { content: none; }

/* Shop card label: "4.2″ 4:3 → PSP". */
.ec-hs-label {
	display: block; margin: 0 0 5px;
	font-family: var(--hs-mono); font-size: 11px; font-weight: 500; line-height: 1.3;
	letter-spacing: .14em; text-transform: uppercase; color: var(--hs-muted);
}

/* ── Progress: 4 questions + "Your matches", thin segments with labels.
   2026-11-07 (owner): results are the 5th step and the bar stays on the
   results screen. Reached steps are buttons (JS removes `disabled`). ── */
.ec-hs__progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0 0 22px; padding: 0; list-style: none; }
.ec-hs__progress li { margin: 0; min-width: 0; }
.ec-hs .ec-hs__seg {
	display: block; width: 100%; margin: 0; padding: 0 0 4px;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	color: var(--hs-muted); font: inherit; text-align: left; cursor: pointer;
}
.ec-hs .ec-hs__seg:disabled { cursor: default; opacity: 1; color: #a3a3a8; }
.ec-hs__seg-bar { display: block; height: 2px; margin: 0 0 8px; background: var(--hs-line); transition: background .25s; }
.ec-hs__seg-label {
	display: block; font-family: var(--hs-mono); font-size: 10px; font-weight: 500;
	line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
}
.ec-hs .ec-hs__seg:not(:disabled):hover .ec-hs__seg-label,
.ec-hs .ec-hs__seg:not(:disabled):focus-visible .ec-hs__seg-label { color: var(--hs-ink); text-decoration: underline; text-underline-offset: 3px; }
.ec-hs .ec-hs__seg[aria-current="step"] { color: var(--hs-accent); }
/* Step number in front of each label (owner 2026-11-07: replaces the
   "Step N of 4" kicker that used to sit above each heading). */
.ec-hs__seg-num { font-weight: 500; margin-right: .3em; }
/* Step icon in front of the number (owner chose preview option C,
   2026-11-07). Grey until the step is reached, then pink. */
.ec-hs__seg-label { display: flex; align-items: center; gap: 6px; }
.ec-hs__seg-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.ec-hs .ec-hs__seg:not(:disabled) .ec-hs__seg-ico,
.ec-hs .ec-hs__seg[aria-current="step"] .ec-hs__seg-ico { color: var(--hs-accent); }
.ec-hs[data-step="1"] .ec-hs__progress li:nth-child(-n+1) .ec-hs__seg-bar,
.ec-hs[data-step="2"] .ec-hs__progress li:nth-child(-n+2) .ec-hs__seg-bar,
.ec-hs[data-step="3"] .ec-hs__progress li:nth-child(-n+3) .ec-hs__seg-bar,
.ec-hs[data-step="4"] .ec-hs__progress li:nth-child(-n+4) .ec-hs__seg-bar,
.ec-hs[data-step="5"] .ec-hs__progress li .ec-hs__seg-bar { background: var(--hs-accent); }
@media (max-width: 479px) {
	.ec-hs__progress { gap: 3px; }
	/* Phones: icon on its own line above "1 Games", so a long label can wrap
	   inside its segment (one row clipped "5 Your matches", live 2026-11-07). */
	.ec-hs__seg-label { display: block; font-size: 9px; letter-spacing: .06em; }
	.ec-hs__seg-ico { display: block; width: 13px; height: 13px; margin: 0 0 3px; }
}

/* ── Step header: Bebas title + one line. Icon and "Step N of 4" kicker
   removed 2026-11-07 (owner cleanup): one left edge with bar and tiles. ── */
.ec-hs-step__head { display: block; margin-bottom: 20px; }
/* Step and results titles keep the theme's Bebas Neue and the site heading
   grey (#768b9e, global.css h1-h6 !important, same as the product title). */
.ec-hs .ec-hs-step__title,
.ec-hs .ec-hs-results__title { margin: 0 0 4px; font-size: 32px; line-height: 1.05; letter-spacing: .01em; outline: none; }
.ec-hs-step__line { margin: 0; color: var(--hs-muted); font-size: 14px; }

/* ── Answer tiles: shop-card grey, pink 2px edge when picked ── */
.ec-hs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ec-hs .ec-hs-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	min-height: 64px; padding: 16px; margin: 0;
	background: var(--hs-panel); border: 0; border-radius: var(--hs-radius);
	box-shadow: inset 0 0 0 2px transparent;
	color: var(--hs-title); font: inherit; text-align: left; cursor: pointer;
	transition: background .15s, box-shadow .15s;
}
.ec-hs .ec-hs-tile:hover, .ec-hs .ec-hs-tile:focus { background: var(--hs-panel-hover); color: var(--hs-title); }
.ec-hs .ec-hs-tile:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.ec-hs .ec-hs-tile[aria-pressed="true"],
.ec-hs .ec-hs-tile[aria-pressed="true"]:hover,
.ec-hs .ec-hs-tile[aria-pressed="true"]:focus {
	background: #fff; color: var(--hs-title);
	box-shadow: inset 0 0 0 2px var(--hs-accent);
}
.ec-hs-tile__ico { width: 26px; height: 26px; color: var(--hs-muted); transition: color .15s; }
.ec-hs-tile[aria-pressed="true"] .ec-hs-tile__ico { color: var(--hs-accent); }
.ec-hs-tile__label { font-weight: 600; font-size: 15px; line-height: 1.25; }
.ec-hs-tile__hint { font-size: 13px; color: var(--hs-muted); line-height: 1.3; }
.ec-hs-tiles--style .ec-hs-tile { align-items: center; text-align: center; }
.ec-hs-tiles--style .ec-hs-tile__ico { width: 44px; height: 44px; }
.ec-hs-tiles--3 .ec-hs-tile,
.ec-hs-tiles--budget .ec-hs-tile { align-items: center; text-align: center; }
/* Three short choices stay on one row on phones; their hints show from tablet up. */
.ec-hs-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ec-hs .ec-hs-tiles--3 .ec-hs-tile { padding: 14px 6px; }
.ec-hs-tiles--3 .ec-hs-tile__label { font-size: 14px; }
@media (max-width: 639px) {
	.ec-hs-tiles--3 .ec-hs-tile__hint { display: none; }
}

.ec-hs-tile[data-group="hands"][data-value="small"] .ec-hs-tile__ico { width: 19px; height: 19px; margin: 4px 0 3px; }
.ec-hs-tile[data-group="hands"][data-value="big"] .ec-hs-tile__ico { width: 32px; height: 32px; margin: -3px 0 0; }

.ec-hs-need { margin: 12px 0 0; color: var(--hs-accent-dim); font-weight: 600; font-size: 14px; }

/* Step 1 follow-up "Analogue sticks" (shown when PS1 or a 3D system is
   picked). 2026-11-07 (owner, preview option C): label + rule kept, one
   line, then two compact tiles with the icon beside the label (no hint
   line), half the old height. */
.ec-hs-sticks__line { margin: -4px 0 12px; color: var(--hs-muted); font-size: 14px; }
.ec-hs .ec-hs-tiles--sticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ec-hs .ec-hs-tiles--sticks .ec-hs-tile { flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 16px; }
@media (min-width: 768px) {
	.ec-hs .ec-hs-tiles--sticks { grid-template-columns: repeat(2, minmax(0, 260px)); }
}

.ec-hs-checks { display: grid; gap: 10px; margin-top: 20px; }
.ec-hs-check { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 400; font-size: 14px; cursor: pointer; }
.ec-hs-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--hs-accent); }

/* ── Buttons: primary = Add to cart, ghost = the quantity box beside it ── */
.ec-hs-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hs-line); }
.ec-hs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 45px; padding: 10px 22px; margin: 0;
	border: 1px solid transparent; border-radius: 25.2px;
	font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.ec-hs .ec-hs-btn--primary, .ec-hs-compare .ec-hs-btn--primary { min-height: 53px; padding: 14px 40px; background: var(--hs-accent); color: #fff; }
.ec-hs .ec-hs-btn--primary:hover, .ec-hs .ec-hs-btn--primary:focus,
.ec-hs-compare .ec-hs-btn--primary:hover, .ec-hs-compare .ec-hs-btn--primary:focus { background: var(--hs-accent-dim); color: #fff; text-decoration: none; }
/* "See it" / "See options": one CTA, same size on the cards and in the table. */
.ec-hs .ec-hs-cta, .ec-hs-compare .ec-hs-cta { min-height: 48px; padding: 12px 22px; }
.ec-hs .ec-hs-btn--ghost { background: #fff; border-color: var(--hs-field); border-radius: 22px; color: var(--hs-ink); font-weight: 600; }
.ec-hs .ec-hs-btn--ghost:hover, .ec-hs .ec-hs-btn--ghost:focus { border-color: var(--hs-ink); color: var(--hs-ink); background: #fff; }
.ec-hs-btn:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

/* ── Results ── */
.ec-hs-results__head { margin-bottom: 20px; }
.ec-hs-results__summary {
	margin: 6px 0 0;
	font-family: var(--hs-mono); font-size: 11px; font-weight: 500; line-height: 1.6;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hs-muted);
}
.ec-hs-results__relaxed {
	margin: 12px 0 0; padding: 10px 14px; border-radius: var(--hs-radius);
	background: var(--hs-amber-soft); color: var(--hs-amber); font-size: 14px;
}
.ec-hs-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* Result card = shop card: grey panel, image, label, name, price + stock. */
.ec-hs-card {
	position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 0 16px;
	padding: 14px; background: var(--hs-panel); border-radius: var(--hs-radius);
	box-shadow: inset 0 0 0 2px transparent;
}
.ec-hs-card--top { box-shadow: inset 0 0 0 2px var(--hs-accent); }

/* Rank tag: the shop's square corner tag (black, DM Mono). */
.ec-hs-badge {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	display: inline-block; padding: 4px 8px;
	font-family: var(--hs-mono); font-size: 10px; font-weight: 500; line-height: 1.3;
	letter-spacing: .14em; text-transform: uppercase;
	background: #111; color: #fff;
}
.ec-hs-badge--top { background: var(--hs-accent); }
.ec-hs-badge--over { background: #fff; color: var(--hs-title); }

.ec-hs-card__img {
	display: flex; align-items: center; justify-content: center; align-self: start;
	aspect-ratio: 1 / 1; overflow: hidden;
}
.ec-hs-card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ec-hs-card__img.is-cutout img { padding: 8%; mix-blend-mode: normal; }

.ec-hs-card__body { display: flex; flex-direction: column; min-width: 0; padding-top: 26px; }
/* The theme styles h3 as Bebas; the shop card name is Open Sans. */
.ec-hs .ec-hs-card__name { margin: 0 0 8px; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; }
/* The Customizer prints h1-h6 { font-family: Bebas Neue !important } inline,
   so the shop-card font goes on the link inside the h3, not the h3. */
.ec-hs .ec-hs-card__name a { font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--hs-title); text-decoration: none; }
.ec-hs-card__name a:hover { color: var(--hs-accent); }
.ec-hs-card__buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ec-hs-card__price { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--hs-title); }
.ec-hs-card__buy .stock-status-label { margin-top: 0; }

.ec-hs-benefits { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #dcdcdf; display: grid; gap: 8px; }
.ec-hs-benefits li { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.4; color: var(--hs-ink); }
.ec-hs-benefits .ec-hs-ico { color: var(--hs-accent); }

.ec-hs-card__note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 12px; color: var(--hs-muted); line-height: 1.4; }
.ec-hs-card__note .ec-hs-ico { width: 15px; height: 15px; margin-top: 1px; }

.ec-hs-specs { margin: 14px 0 0; border-top: 1px solid #dcdcdf; padding-top: 10px; }
.ec-hs-specs summary {
	cursor: pointer; list-style-position: inside;
	font-family: var(--hs-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-ink);
}
.ec-hs-specs summary:hover { color: var(--hs-accent); }
.ec-hs-specs dl { margin: 10px 0 0; display: grid; gap: 6px; font-size: 13px; }
.ec-hs-specs dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.ec-hs-specs dt { margin: 0; font-family: var(--hs-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.9; color: var(--hs-muted); }
.ec-hs-specs dd { margin: 0; overflow-wrap: anywhere; }

/* CTA = the card's bottom edge: full width, flush to the sides and bottom,
   square top, the card's 6px curve below (owner: part of the box). */
.ec-hs .ec-hs-card .ec-hs-card__cta {
	grid-column: 1 / -1; align-self: end;
	width: auto; min-height: 50px; margin: 16px -14px -14px;
	border-radius: 0 0 var(--hs-radius) var(--hs-radius);
}

.ec-hs-empty { padding: 20px; border-radius: var(--hs-radius); background: var(--hs-panel); }

/* Toolbar above the cards = the shop's filter/sort bar (shop-control-bar:
   #efefef, 9px radius): quiet text tools on the left, Compare on the right. */
.ec-hs-results__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	margin: 0 0 8px; padding: 6px 6px 6px 8px;
	background: var(--hs-panel); border-radius: 9px;
}
.ec-hs .ec-hs-results__actions .ec-hs-btn--ghost {
	min-height: 40px; padding: 8px 12px; border: 0; background: transparent;
	font-weight: 400; color: var(--hs-ink);
}
.ec-hs .ec-hs-results__actions .ec-hs-btn--ghost:hover,
.ec-hs .ec-hs-results__actions .ec-hs-btn--ghost:focus { background: #fff; color: var(--hs-ink); }
.ec-hs .ec-hs-results__actions .ec-hs-compare-link { order: 2; margin-left: auto; min-height: 40px; padding: 8px 20px; }
.ec-hs-results__foot { margin: 14px 0 0; font-size: 12px; color: var(--hs-muted); }
/* Second copy under the cards (owner 2026-11-07). */
.ec-hs-results__actions--foot { margin: 16px 0 0; }
@media (max-width: 639px) {
	/* Phones: Compare full width on top, the three tools in one row below. */
	.ec-hs-results__actions { padding: 6px; }
	.ec-hs .ec-hs-results__actions .ec-hs-compare-link { order: -1; width: 100%; margin: 0 0 2px; }
	.ec-hs .ec-hs-results__actions .ec-hs-btn--ghost { flex: 1 1 auto; padding: 8px 4px; font-size: 13px; white-space: nowrap; }
	/* No room for icons and "Change answers" on one line at 375px. */
	.ec-hs .ec-hs-results__actions .ec-hs-btn--ghost .ec-hs-ico { display: none; }
}

/* ── Side by side (ec_child_hs_compare_table) ──
   2026-11-06 v2 (owner: structure good, "too boxy", "too many lines";
   achieve it "with alignment"): no outer box, no column or row lines.
   Columns are held apart by equal fixed widths and a 24px gutter; rows by
   rhythm; one hairline per section (the kicker line). A soft hover tint
   keeps the eye on a row while reading across. */
.ec-hs-compare { max-width: 1080px; margin: 0 auto 48px; color: var(--hs-ink); scroll-margin-top: 90px; }
.ec-hs-compare .ec-hs-compare__title { margin: 0 0 22px; font-size: 32px; line-height: 1.05; }
.ec-hs-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ec-hs-compare .ec-hs-cmp {
	width: 100%; margin: 0; table-layout: fixed;
	border: 0; border-collapse: separate; border-spacing: 0;
	font-size: 13px; line-height: 1.5; background: #fff;
}
.ec-hs-cmp[data-cols="2"] { min-width: 500px; }
.ec-hs-cmp[data-cols="3"] { min-width: 680px; }
.ec-hs-cmp[data-cols="4"] { min-width: 860px; }

/* Embedded in a post ([ec_product_compare]): full content width, and the
   post's own table / link / image rules kept off it. */
.ec-hs-compare--embed { max-width: none; margin: 28px 0 36px; }
.single-post .entry-content .ec-hs-compare .ec-hs-cmp { margin: 0 !important; }
.ec-hs-compare .ec-hs-cmp img { margin: 0; border: 0; box-shadow: none; max-width: 100%; }
/* global.css: ".single-post .entry-content a, ... a:hover { color: #919090
   !important }" greys EVERY post link (the :hover sits on the second
   selector only). Doubled class = higher specificity, needed with !important. */
.ec-hs-compare.ec-hs-compare a.ec-hs-btn--primary,
.ec-hs-compare.ec-hs-compare a.ec-hs-btn--primary:hover,
.ec-hs-compare.ec-hs-compare a.ec-hs-btn--primary:focus { color: #fff !important; text-decoration: none; }
.ec-hs-compare.ec-hs-compare a.ec-hs-cmp__name { color: var(--hs-title) !important; text-decoration: none; }
.ec-hs-compare.ec-hs-compare a.ec-hs-cmp__name:hover { color: var(--hs-accent) !important; }
/* Inside a dark hero-style post (.hp wrapper, css/hero-product-pages.css:
   #111 background, white DM Mono text, ".hp h2" cream with !important) the
   table sits on its own light panel with the shop font and title
   (2026-11-07, best Anbernic guide). */
.hp .ec-hs-compare--embed {
	background: #fff; color: var(--hs-ink); font-family: "Open Sans", Arial, sans-serif; font-size: 14px;
	margin: 32px 24px 40px; padding: 28px 24px 24px; border-radius: var(--hs-radius);
}
.hp .ec-hs-compare--embed .ec-hs-compare__title {
	color: #768b9e !important; font-size: 32px !important; line-height: 1.05 !important;
	letter-spacing: 0 !important; margin: 0 0 22px !important; text-transform: uppercase !important;
}
@media (max-width: 767px) {
	.hp .ec-hs-compare--embed { margin: 24px 12px 32px; padding: 20px 14px 16px; }
}
/* Desktop: the .hp column is ~870px, so four handhelds fit without the
   sideways scroll the 860px minimum would force inside the panel. */
@media (min-width: 1024px) {
	.hp .ec-hs-compare--embed { margin: 32px 0 40px; padding: 28px 20px 24px; }
	.hp .ec-hs-compare--embed .ec-hs-cmp[data-cols="4"] { min-width: 0; }
}
/* "See options" stays on one line at every column count (the buttons are
   full column width, so the side padding only matters when narrow). */
.ec-hs-compare .ec-hs-cmp .ec-hs-cta { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
/* Posts wrap content in their own boxes with their own font (RG35XX post:
   .blog-comparison = system font stack). The embed always uses the shop font. */
.ec-hs-compare--embed { font-family: "Open Sans", Arial, sans-serif; }
.ec-hs-compare .ec-hs-cmp th,
.ec-hs-compare .ec-hs-cmp td {
	padding: 7px 12px 7px 0; margin: 0; vertical-align: top; text-align: left;
	border: 0; background: #fff;
	color: var(--hs-ink); font-weight: 400; overflow-wrap: anywhere;
}
/* Gutter between product columns: left padding on every product cell. */
.ec-hs-compare .ec-hs-cmp td,
.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__head { padding-left: 24px; }
.ec-hs-compare .ec-hs-cmp tbody tr:not(.ec-hs-cmp__sec):hover > * { background: #f7f7f8; }

/* Label column: fixed width, stays put while the columns scroll on phones. */
.ec-hs-compare .ec-hs-cmp__corner,
.ec-hs-compare .ec-hs-cmp tbody th[scope="row"] {
	position: sticky; left: 0; z-index: 2; width: 150px;
	font-family: var(--hs-mono); font-size: 10px; font-weight: 500; line-height: 1.95;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hs-muted);
}
.ec-hs-compare .ec-hs-cmp__corner { background: #fff; }

/* Head: one card per handheld, no frame; the grey image panel carries it. */
.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__head { padding-top: 0; padding-bottom: 6px; background: #fff; }
.ec-hs-cmp__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin: 0 0 12px; background: var(--hs-panel); border-radius: var(--hs-radius); overflow: hidden; }
.ec-hs-cmp__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ec-hs-cmp__img.is-cutout img { padding: 8%; mix-blend-mode: normal; }
.ec-hs-cmp__head .ec-hs-kicker--plain { color: var(--hs-accent); font-size: 10px; }
.ec-hs-compare .ec-hs-cmp__name { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--hs-title); text-decoration: none; }
.ec-hs-compare .ec-hs-cmp__name:hover { color: var(--hs-accent); }
.ec-hs-cmp__price { display: inline-block; margin-right: 10px; font-size: 16px; font-weight: 700; color: var(--hs-title); }
.ec-hs-cmp__head .stock-status-label { margin-top: 0; }
.ec-hs-compare .ec-hs-cta { display: flex; width: 100%; margin-top: 14px; }
.ec-hs-compare .ec-hs-cmp tfoot td { padding-top: 28px; padding-bottom: 0; }
.ec-hs-compare .ec-hs-cmp tfoot .ec-hs-cta { margin-top: 0; }

/* Section rows ("Display", "Battery" ...): the kicker with its hairline,
   the only line in the table. */
.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__sec th {
	position: static; padding: 26px 0 8px;
	font-family: var(--hs-mono); font-size: 10px; font-weight: 500; line-height: 1.4;
	letter-spacing: .2em; text-transform: uppercase; color: var(--hs-accent);
}
.ec-hs-compare .ec-hs-cmp tbody tr.ec-hs-cmp__sec:first-child th { padding-top: 22px; }
.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__sec th span {
	position: sticky; left: 0; display: flex; align-items: center; gap: 12px;
}
.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__sec th span::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hs-line); }
.ec-hs-cmp__none { color: #b5b5ba; }

/* Staff-only data check (?hs_check=1). */
.ec-hs-check-table { max-width: 1080px; margin: 0 auto 48px; }
.ec-hs-check-scroll { overflow-x: auto; }
.ec-hs-check-table table { font-size: 12px; border-collapse: collapse; min-width: 900px; }
.ec-hs-check-table th, .ec-hs-check-table td { padding: 4px 8px; border: 1px solid #e6e6ea; vertical-align: top; }
.ec-hs-check-table .is-missing { background: #fff3df; color: #a15c00; }

/* ── Phones ── */
@media (max-width: 639px) {
	.ec-hs .ec-hs-btn--primary { padding: 14px 28px; }
	.ec-hs-compare .ec-hs-cmp__corner,
	.ec-hs-compare .ec-hs-cmp tbody th[scope="row"] { width: 96px; padding-right: 6px; }
	.ec-hs-compare .ec-hs-cmp td,
	.ec-hs-compare .ec-hs-cmp .ec-hs-cmp__head { padding-left: 16px; }
	.ec-hs-cmp[data-cols="2"] { min-width: 440px; }
	.ec-hs-cmp[data-cols="3"] { min-width: 600px; }
}

/* ── Tablet and up ── */
@media (min-width: 640px) {
	.ec-hs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ec-hs-tiles--style, .ec-hs-tiles--budget { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ec-hs .ec-hs-tiles--style .ec-hs-tile { padding: 20px 12px; }
	.ec-hs .ec-hs-step__title, .ec-hs .ec-hs-results__title, .ec-hs-compare .ec-hs-compare__title { font-size: 38px; }
	.ec-hs-card { grid-template-columns: 160px 1fr; gap: 0 20px; padding: 18px; }
	.ec-hs-badge { top: 18px; left: 18px; }
	.ec-hs .ec-hs-card .ec-hs-card__cta { margin: 18px -18px -18px; }
}

/* ── Desktop: cards side by side, image on top ── */
@media (min-width: 960px) {
	.ec-hs-tiles--play { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ec-hs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
	.ec-hs-cards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ec-hs-cards[data-count="1"] { grid-template-columns: minmax(0, 420px); }
	/* Image / body / CTA rows: the body row stretches so the CTA edges of
	   neighbouring cards line up. */
	.ec-hs-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 18px; }
	.ec-hs-card__img { margin: 0 -18px 4px; }
	.ec-hs-card__body { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ec-hs *, .ec-hs *::before, .ec-hs *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ── Finder page content around the shortcode (2026-11-07, owner) ──────
   These blocks sit in the page content, OUTSIDE .ec-hs, so the --hs-*
   tokens do not reach them; values are copied from the token block.
   .ec-hs-intro  the intro paragraph above the finder (className on the
                 core paragraph block). Without a width it ran the full
                 content width, wider than the 1080px finder.
   .ec-hs-quick  "Popular questions" quick links below the finder (core
                 group block with this className). Same-page #hash links
                 jump straight to results (hashchange handler in
                 js/handheld-selector.js). Chips match the step tiles. */
.ec-hs-intro {
	max-width: 720px;
	margin: 0 auto 24px;
}
.ec-hs-quick {
	max-width: 1080px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid #e3e3e6;
}
.ec-hs-quick h2 {
	margin: 0 0 14px;
	font-size: 22px;
}
.ec-hs-quick ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-hs-quick li { margin: 0; }
.ec-hs-quick a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 6px;
	background: #efefef;
	color: #333e48;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.ec-hs-quick a:hover,
.ec-hs-quick a:focus-visible {
	background: #ce1d76;
	color: #fff;
}