/* =========================================================================
   DealMindHQ Article Template V2 — shopping components
   v2.0.0

   ADDS ONLY. dmh-product-card.css is untouched and every V1 class
   (.dmh-pcard, .dmh-pgrid, .dmh-toc) keeps its current styling. Every rule
   below is namespaced .dmh-v2*, so the two stylesheets cannot collide.

   Colours come from the existing tokens in dmh-design-tokens.css, each with a
   literal fallback so a token rename cannot silently blank the component.
   ========================================================================= */

:root {
	--dmh-v2-gap:      20px;
	--dmh-v2-radius:   14px;
	--dmh-v2-rail:     260px;
	--dmh-v2-line:     rgba(20, 17, 15, .10);
	--dmh-v2-surface:  #FFFFFF;
	--dmh-v2-raise:    0 1px 2px rgba(20,17,15,.05), 0 8px 24px rgba(20,17,15,.06);
}

/* =========================================================================
   1. PAGE SHELL + RIGHT RAIL

   The rail is a grid column, not a float and not position:fixed. A float
   would let long cards escape it; a fixed rail would overlap the footer.
   Below 1024px the grid becomes one column and the rail moves back into
   normal flow as a collapsible <details> — visible, but not eating a phone
   screen before the products.
   ========================================================================= */

/* Scoped border-box. Not optional and not the theme's job to provide: a
   full-width CTA with 26px of horizontal padding computes to 414px inside a
   358px column under content-box, which is a 40px page-level horizontal
   overflow on a 390px phone — exactly what the spec forbids. Measured, not
   assumed. Scoped to .dmh-v2 so nothing else on the site is affected. */
.dmh-v2,
.dmh-v2 *,
.dmh-v2 *::before,
.dmh-v2 *::after { box-sizing: border-box; }

.dmh-v2 { display: block; }

@media (min-width: 1024px) {
	.dmh-v2--rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--dmh-v2-rail);
		gap: 40px;
		align-items: start;
	}
	.dmh-v2--rail .dmh-v2__main { min-width: 0; }   /* lets children shrink */
	.dmh-v2--rail .dmh-v2__rail {
		position: sticky;
		top: 90px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

/* Below 1024px the rail renders first in source order only if the theme
   reverses it; here it stays after the main column, which is correct — the
   products should be the first thing a phone reader meets. */
@media (max-width: 1023px) {
	.dmh-v2__rail { margin: 28px 0; }
	.dmh-v2__rail .dmh-v2toc__wrap { }
}

/* =========================================================================
   2. TABLE OF CONTENTS
   ========================================================================= */

.dmh-v2toc {
	background: var(--paper, #FAF7F2);
	border: 1px solid var(--dmh-v2-line);
	border-radius: var(--dmh-v2-radius);
	padding: 16px 18px;
}

.dmh-v2toc__wrap { margin: 0; }

.dmh-v2toc__title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted, #6B635C);
	cursor: pointer;
	list-style: none;
	margin: 0 0 10px;
}
.dmh-v2toc__title::-webkit-details-marker { display: none; }

@media (min-width: 1024px) {
	/* On desktop the rail is always open; the disclosure arrow is noise. */
	.dmh-v2toc__title { cursor: default; pointer-events: none; }
}

.dmh-v2toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: dmhv2toc;
}

.dmh-v2toc__list li {
	counter-increment: dmhv2toc;
	display: flex;
	gap: 10px;
	padding: 7px 0;
	font-size: .9rem;
	line-height: 1.4;
}

.dmh-v2toc__list li::before {
	content: counter(dmhv2toc);
	flex: none;
	min-width: 18px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: .78rem;
	color: var(--accent, #B2452F);
}

.dmh-v2toc__list a {
	color: var(--muted, #6B635C);
	text-decoration: none;
}
.dmh-v2toc__list a:hover,
.dmh-v2toc__list a:focus-visible {
	color: var(--ink, #14110F);
	text-decoration: underline;
}

/* =========================================================================
   3. SNAPSHOT STRIP

   Wraps rather than scrolls. Each fact is an independent chip, so a brand
   with two facts and a brand with five both look deliberate.
   ========================================================================= */

.dmh-v2snap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 18px 0 22px;
	padding: 14px 16px;
	background: var(--paper, #FAF7F2);
	border: 1px solid var(--dmh-v2-line);
	border-radius: var(--dmh-v2-radius);
}

.dmh-v2snap__f {
	font-size: .88rem;
	line-height: 1.3;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--dmh-v2-surface, #fff);
	border: 1px solid var(--dmh-v2-line);
	color: var(--ink, #14110F);
	font-variant-numeric: tabular-nums;
}
.dmh-v2snap__f--strong { font-weight: 700; }
.dmh-v2snap__f--price  { font-weight: 700; }
.dmh-v2snap__f--deal {
	background: var(--accent, #B2452F);
	border-color: var(--accent, #B2452F);
	color: #fff;
	font-weight: 700;
}
.dmh-v2snap__f--muted {
	background: transparent;
	border-color: transparent;
	color: var(--muted, #6B635C);
	font-size: .8rem;
	padding-left: 2px;
}

/* =========================================================================
   4. PRODUCT GRID + CARD

   ALIGNMENT FIX — this is the defect in V1.

   V1 cards are content-height, so a two-line product name pushes its CTA one
   line below the neighbouring card's. Three things fix it together:
     · the card is a column flexbox with height:100% inside a grid cell
     · .dmh-v2card__foot takes margin-top:auto, pinning it to the bottom
     · .dmh-v2card__name reserves 2 lines and clamps at 2, so a long name
       cannot push the rest of the card down at all
   The result is one CTA baseline across every row, at every breakpoint.
   ========================================================================= */

.dmh-v2grid {
	display: grid;
	gap: var(--dmh-v2-gap);
	margin: 24px 0 28px;
	align-items: stretch;
}
.dmh-v2grid--1 { grid-template-columns: 1fr; }
.dmh-v2grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dmh-v2grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dmh-v2grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
	.dmh-v2grid--3,
	.dmh-v2grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two columns all the way down to 360px. Measured: nine full-width cards is
   an ~8,000px scroll on a 390px phone before the reader reaches anything else,
   which buries the comparison, the coupon and the FAQ. Two columns halves it
   and matches what every mobile storefront does. One column only below 360px,
   where two would be unreadable. */
@media (max-width: 560px) {
	.dmh-v2grid--2,
	.dmh-v2grid--3,
	.dmh-v2grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

	.dmh-v2card__body { padding: 11px 11px 12px; gap: 6px; }
	.dmh-v2card__name { font-size: .87rem; }
	.dmh-v2card__price .now { font-size: 1.05rem; }
	.dmh-v2card__cta { padding: 10px 8px; font-size: .78rem; }
	.dmh-v2card__attrs li { font-size: .66rem; padding: 2px 6px; }
}

@media (max-width: 359px) {
	.dmh-v2grid--2,
	.dmh-v2grid--3,
	.dmh-v2grid--4 { grid-template-columns: 1fr; }
}

.dmh-v2card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--dmh-v2-surface, #fff);
	border: 1px solid var(--dmh-v2-line);
	border-radius: var(--dmh-v2-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.dmh-v2card:hover {
	transform: translateY(-2px);
	box-shadow: var(--dmh-v2-raise);
}
@media (prefers-reduced-motion: reduce) {
	.dmh-v2card { transition: none; }
	.dmh-v2card:hover { transform: none; }
}

/* Media box reserves its aspect ratio before the image loads, so the grid
   does not reflow as photos arrive. 3:4 matches the merchant feed. */
.dmh-v2card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--paper, #FAF7F2);
	overflow: hidden;
}
.dmh-v2card__media img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

.dmh-v2card__rank,
.dmh-v2card__badge {
	position: absolute;
	top: 10px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 4px 9px;
	border-radius: 999px;
	line-height: 1.2;
}
.dmh-v2card__rank {
	left: 10px;
	background: var(--ink, #14110F);
	color: #fff;
	min-width: 22px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.dmh-v2card__badge {
	right: 10px;
	background: var(--accent, #B2452F);
	color: #fff;
	text-transform: uppercase;
}

.dmh-v2card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 14px 15px 15px;
	min-width: 0;
}

.dmh-v2card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

/* The badge normally overlays the photo. On an image-less card it drops into
   the meta row instead, so a real discount is never silently lost. */
.dmh-v2card__badge--inline {
	position: static;
	top: auto;
	right: auto;
	flex: none;
}

.dmh-v2card__brand {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, #6B635C);
}

.dmh-v2card__name {
	margin: 0;
	font-size: .97rem;
	line-height: 1.35;
	font-weight: 600;
	/* Reserve two lines and clamp: the single biggest cause of ragged rows. */
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dmh-v2card__name a {
	color: var(--ink, #14110F);
	text-decoration: none;
}
.dmh-v2card__name a:hover { text-decoration: underline; }

.dmh-v2card__bestfor {
	margin: 0;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--ink, #14110F);
}
.dmh-v2card__bestfor span {
	display: inline-block;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--accent, #B2452F);
	margin-right: 5px;
}

.dmh-v2card__attrs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.dmh-v2card__attrs li {
	font-size: .72rem;
	line-height: 1.3;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--paper, #FAF7F2);
	color: var(--muted, #6B635C);
	border: 1px solid var(--dmh-v2-line);
}

.dmh-v2card__price {
	margin: 2px 0 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}
.dmh-v2card__price .now {
	font-size: 1.22rem;
	font-weight: 800;
	color: var(--ink, #14110F);
	letter-spacing: -.01em;
}
.dmh-v2card__price .was {
	font-size: .88rem;
	color: var(--muted, #6B635C);
	text-decoration: line-through;
}

/* margin-top:auto is what pins every CTA to one baseline across the row. */
.dmh-v2card__foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dmh-v2card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--accent, #B2452F);
	color: #fff;
	font-size: .86rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	min-height: 44px;              /* touch target */
}
.dmh-v2card__cta:hover,
.dmh-v2card__cta:focus { filter: brightness(.92); color: #fff; }
.dmh-v2card__cta:focus-visible {
	outline: 2px solid var(--ink, #14110F);
	outline-offset: 2px;
}
.dmh-v2card__cta svg { flex: none; }

.dmh-v2card__more {
	align-self: center;
	font-size: .78rem;
	color: var(--muted, #6B635C);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dmh-v2card__more:hover { color: var(--ink, #14110F); }

.dmh-v2card__asof {
	margin: 0;
	font-size: .7rem;
	color: var(--muted, #6B635C);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   5. CTA BLOCKS
   ========================================================================= */

.dmh-v2cta {
	margin: 22px 0;
	text-align: center;
}

.dmh-v2cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	min-height: 48px;
	border-radius: 12px;
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-decoration: none;
	line-height: 1.2;
	background: var(--accent, #B2452F);
	color: #fff;
	border: 2px solid var(--accent, #B2452F);
}
.dmh-v2cta__btn:hover,
.dmh-v2cta__btn:focus { filter: brightness(.92); color: #fff; }
.dmh-v2cta__btn:focus-visible {
	outline: 2px solid var(--ink, #14110F);
	outline-offset: 3px;
}

/* Typed variants: the grid and product CTAs sit inside dense areas and would
   shout if they matched the top-of-page button, so they step down. */
.dmh-v2cta--grid .dmh-v2cta__btn,
.dmh-v2cta--product .dmh-v2cta__btn {
	background: transparent;
	color: var(--accent, #B2452F);
}
.dmh-v2cta--grid .dmh-v2cta__btn:hover,
.dmh-v2cta--product .dmh-v2cta__btn:hover {
	background: var(--accent, #B2452F);
	color: #fff;
	filter: none;
}
.dmh-v2cta--coupon .dmh-v2cta__btn {
	background: var(--ink, #14110F);
	border-color: var(--ink, #14110F);
}

.dmh-v2cta__note {
	margin: 8px 0 0;
	font-size: .76rem;
	color: var(--muted, #6B635C);
}

@media (max-width: 560px) {
	.dmh-v2cta__btn { width: 100%; }
}

/* =========================================================================
   6. COMPARISON TABLE

   Desktop: a normal table that scrolls INSIDE .dmh-v2table if it ever exceeds
   its container. overflow-x lives on the wrapper, never on the page, so the
   document itself can never scroll sideways.

   Mobile (<768px): the table becomes stacked cards. Headers are hidden from
   sight but kept for screen readers; each cell prints its own label from
   data-label. No JS, no duplicated markup, no horizontal scroll.
   ========================================================================= */

.dmh-v2table {
	margin: 24px 0 28px;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--dmh-v2-line);
	border-radius: var(--dmh-v2-radius);
}
.dmh-v2table:focus-visible {
	outline: 2px solid var(--accent, #B2452F);
	outline-offset: 2px;
}

.dmh-v2table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.dmh-v2table caption {
	caption-side: top;
	text-align: left;
	padding: 14px 16px 0;
	font-size: .8rem;
	color: var(--muted, #6B635C);
}

.dmh-v2table th {
	text-align: left;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted, #6B635C);
	background: var(--paper, #FAF7F2);
	padding: 11px 12px;
	white-space: nowrap;
	border-bottom: 1px solid var(--dmh-v2-line);
}

.dmh-v2table td {
	padding: 12px;
	vertical-align: middle;
	border-bottom: 1px solid var(--dmh-v2-line);
	line-height: 1.4;
}
.dmh-v2table tbody tr:last-child td { border-bottom: 0; }

.dmh-v2td__pick {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 190px;
}
.dmh-v2td__thumb {
	flex: none;
	width: 46px;
	height: 60px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--paper, #FAF7F2);
}
.dmh-v2td__thumb img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}
.dmh-v2td__label {
	font-weight: 600;
	line-height: 1.3;
}
.dmh-v2td__label a {
	color: var(--ink, #14110F);
	text-decoration: none;
}
.dmh-v2td__label a:hover { text-decoration: underline; }

.dmh-v2td--price,
.dmh-v2td--pct { font-variant-numeric: tabular-nums; white-space: nowrap; }

.dmh-v2td__pct {
	font-weight: 800;
	color: var(--accent, #B2452F);
}

.dmh-v2td__na { color: var(--muted, #6B635C); }

.dmh-v2td__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	min-height: 40px;
	border-radius: 9px;
	background: var(--accent, #B2452F);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.dmh-v2td__cta:hover,
.dmh-v2td__cta:focus { filter: brightness(.92); color: #fff; }

/* The whole comparison SECTION hides as one unit — heading, intro and table.
   Hiding only the table left "Compared side by side" and a paragraph about it
   sitting on a phone with nothing underneath: a heading for a section that is
   not there. */
@media (max-width: 767px) {
	.dmh-v2cmp--mobilehide { display: none; }
}

/* When the card grid already carries the same attributes, a stacked table on
   a phone shows the reader the same nine products a second time. The generator
   sets mobile="hide" in that case; the table stays in the DOM for desktop and
   for search engines, and is simply not painted below 768px. */
@media (max-width: 767px) {
	.dmh-v2table--mobilehide { display: none; }
}

/* ---- stacked cards under 768px ---------------------------------------- */
@media (max-width: 767px) {
	.dmh-v2table {
		border: 0;
		border-radius: 0;
		overflow-x: visible;      /* nothing to scroll once stacked */
	}
	.dmh-v2table table,
	.dmh-v2table tbody,
	.dmh-v2table tr,
	.dmh-v2table td { display: block; width: 100%; }

	/* Headers stay in the accessibility tree, leave the visual one. */
	.dmh-v2table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dmh-v2table caption { padding: 0 0 10px; }

	.dmh-v2table tr {
		border: 1px solid var(--dmh-v2-line);
		border-radius: var(--dmh-v2-radius);
		padding: 12px 14px;
		margin-bottom: 14px;
		background: var(--dmh-v2-surface, #fff);
	}

	.dmh-v2table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 0;
		border-bottom: 0;
		text-align: right;
	}

	.dmh-v2table td::before {
		content: attr(data-label);
		flex: none;
		text-align: left;
		font-size: .66rem;
		font-weight: 800;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--muted, #6B635C);
	}

	/* The pick cell is the card header: full width, no label, no right align. */
	.dmh-v2table td.dmh-v2td--pick {
		display: block;
		text-align: left;
		padding-bottom: 10px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--dmh-v2-line);
	}
	.dmh-v2table td.dmh-v2td--pick::before { content: none; }
	.dmh-v2td__pick { min-width: 0; }

	/* CTA becomes the card footer button. */
	.dmh-v2table td.dmh-v2td--cta {
		display: block;
		padding-top: 12px;
	}
	.dmh-v2table td.dmh-v2td--cta::before { content: none; }
	.dmh-v2td__cta { width: 100%; min-height: 44px; }
}

/* =========================================================================
   7. SAFETY NETS

   Nothing inside a V2 article may widen the document. Images and media boxes
   are capped, and the table is the only element allowed its own scroller.
   ========================================================================= */

.dmh-v2 img,
.dmh-v2 table { max-width: 100%; }

/* break-word, not anywhere. `anywhere` split "spring/fall" into "spring/fa"
   + "ll" in a narrow table column — observed, not theorised. break-word only
   breaks a word that cannot fit on a line of its own, which is the actual
   requirement (a long unbroken affiliate slug must not widen the page). */
.dmh-v2 { overflow-wrap: break-word; }
.dmh-v2table td,
.dmh-v2table th { overflow-wrap: normal; hyphens: none; }

.dmh-v2 h2[id],
.dmh-v2 h3[id] { scroll-margin-top: 90px; }

/* Screen-reader-only text used by the table CTA. Defined defensively in case
   the parent theme does not already ship the class. */
.dmh-v2table .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   8. PRINT — readers do print buying guides
   ========================================================================= */
@media print {
	.dmh-v2__rail,
	.dmh-v2cta { display: none; }
	.dmh-v2--rail { display: block; }
	.dmh-v2card { break-inside: avoid; }
}

/* =========================================================================
   9. NEWSLETTER SIGNUP

   Sits after the final CTA. Visually quieter than the affiliate buttons on
   purpose: the reader has already been asked to click through once, and a
   second block shouting in the same voice reads as pressure.
   ========================================================================= */

.dmh-v2sub {
	margin: 40px 0 8px;
	padding: 26px 22px;
	background: var(--paper, #FAF7F2);
	border: 1px solid var(--dmh-v2-line);
	border-radius: var(--dmh-v2-radius);
	text-align: center;
}

.dmh-v2sub__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
	line-height: 1.3;
}

.dmh-v2sub__note {
	margin: 0 auto 16px;
	max-width: 46ch;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--muted, #6B635C);
}

/* beehiiv injects an iframe. Left to itself it can sit at its own intrinsic
   width and overflow a phone, so the container caps it. */
.dmh-v2sub__embed { max-width: 100%; }
.dmh-v2sub__embed iframe {
	max-width: 100% !important;
	width: 100% !important;
	border: 0;
	display: block;
	margin: 0 auto;
}

@media print { .dmh-v2sub { display: none; } }