/*
 * happymonday/buy-box — the .hm-hero product-page buy box.
 *
 * EXACT prototype CSS from design-system/variant-b/style.css (§3 hero buy box),
 * with the SEO heading split: the product name is the (smaller) <h1>
 * (.hm-hero__title) and the large marketing tagline is a non-heading <p>
 * (.hm-hero__headline, carrying the old fs-3xl scale). Gallery side swappable.
 * Tokens only, no hardcoded hex.
 */

.hm-hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--hm-sp-3);
	align-items: center;
	padding-block: var(--hm-sp-3);
	position: relative;
}
/* min-width:0 lets the grid children shrink so swiper's pixel widths
   can't run the hero track away to 100,000s of px (blowout). */
.hm-hero__gallery-wrap { position: relative; min-width: 0; }
.hm-hero__box { min-width: 0; position: relative; }
.hm-hero .swiper { width: 100%; border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-hero__gallery {
	border-radius: var(--hm-radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 40px var(--hm-shadow);
}
.hm-hero__gallery .swiper-slide {
	aspect-ratio: 1 / 1;
	background: var(--hm-bg-1-deep);
}
/* Fixed square frame: show the whole image/video without cropping (letterboxed
   against the slide background) rather than cover-cropping to fill. */
.hm-hero__gallery .swiper-slide img,
.hm-hero__gallery .swiper-slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Compound with .hm-stamp so position:absolute beats the shared .hm-stamp base
   (position:relative, equal specificity) regardless of stylesheet load order.
   The round "100% digital" stamp matches the home feature-hero stamp: pink fill,
   solid black border, black text (overrides the base circle's black/dashed look —
   .hm-stamp.hm-hero__stamp-a (0,2,0) beats .hm-stamp--circle (0,1,0)). */
.hm-stamp.hm-hero__stamp-a {
	position: absolute; top: -1.6rem; right: -1rem; z-index: 5;
	background: var(--hm-cta-1);
	color: var(--hm-ink);
	border: 2px solid var(--hm-ink);
	font-size: var(--hm-fs-sm);
}
.hm-stamp.hm-hero__stamp-b { position: absolute; bottom: -1.4rem; left: -1.2rem; z-index: 5; }

/* Gallery side swap (desktop): gallery on the right. */
.hm-hero--gallery-right .hm-hero__gallery-wrap { order: 2; }
.hm-hero--gallery-right .hm-hero__box { order: 1; }

/* SEO heading split ------------------------------------------------------- */
/* Product name = the single <h1>, kept modest so it never visually competes
   with the marketing tagline below it. */
.hm-hero__title {
	font-size: var(--hm-fs-xl);
	margin-bottom: var(--hm-sp-1);
}
/* No eyebrow: the product name <h1> takes the eyebrow's look (mirrors .hm-eyebrow)
   while staying an <h1> for SEO. Element-qualified so it reliably wins over the
   plain .hm-hero__title above regardless of stylesheet source order. */
h1.hm-hero__title--as-eyebrow {
	font-family: var(--hm-font-script);
	font-style: italic;
	font-size: var(--hm-fs-lg);
	font-weight: var(--hm-label-weight);
	color: var(--hm-ink);
	letter-spacing: 0.005em;
}
/* Marketing tagline = a large NON-heading <p> (carries the old hero scale). */
.hm-hero__headline {
	font-family: var(--hm-font-head);
	font-weight: var(--hm-head-weight);
	font-size: var(--hm-fs-3xl);
	line-height: 1.02;
	margin-bottom: var(--hm-sp-1);
}
.hm-hero__rating {
	font-family: var(--hm-font-script);
	font-size: var(--hm-fs-lg);
	color: var(--hm-accent-1);
	margin-bottom: var(--hm-sp-2);
}
.hm-hero__rating span { color: var(--hm-text-muted); }
.hm-value-stack {
	list-style: none; margin: 0 0 var(--hm-sp-2); padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem;
}
.hm-value-stack li {
	background: var(--hm-bg-2-soft);
	border-radius: var(--hm-radius-pill);
	padding: 0.3em 0.9em;
	font-size: var(--hm-fs-sm);
	font-weight: var(--hm-head-weight);
}
.hm-hero__desc { color: var(--hm-text); margin-bottom: var(--hm-sp-2); }
.hm-price { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: var(--hm-sp-1); }
.hm-price del { color: var(--hm-text-muted); font-size: var(--hm-fs-lg); }
.hm-price ins {
	text-decoration: none;
	font-family: var(--hm-font-head);
	font-weight: var(--hm-head-weight);
	font-size: var(--hm-fs-2xl);
	color: var(--hm-accent-1);
}
.hm-hero__cta { margin-bottom: var(--hm-sp-1); }
.hm-risk {
	font-family: var(--hm-font-script);
	font-size: var(--hm-fs-lg);
	color: var(--hm-ink);
	margin-bottom: var(--hm-sp-2);
}
.hm-pay-caption { font-size: var(--hm-fs-sm); color: var(--hm-text-muted); margin-bottom: 0.4rem; }
.hm-hero__proof { font-size: var(--hm-fs-sm); color: var(--hm-text-muted); margin-top: var(--hm-sp-1); }

/* payments row */
.hm-payments { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hm-payments__icon {
	padding: 0.25rem 0.6rem;
	background: var(--hm-paper);
	border: 1px solid var(--hm-line);
	border-radius: var(--hm-radius-sm);
	font-size: var(--hm-fs-sm);
	font-weight: 700;
	height: auto;
	color: var(--hm-text);
}

/* ---- responsive (prototype breakpoint) ----------------------------------- */
@media (max-width: 900px) {
	.hm-hero { grid-template-columns: 1fr; }
	/* Mobile: gallery above the panel regardless of desktop side. */
	.hm-hero--gallery-right .hm-hero__gallery-wrap { order: 0; }
	.hm-hero--gallery-right .hm-hero__box { order: 1; }
}

/* PAngV tax note — fine print tucked under the price.
 *
 * The note sits between .hm-price and the CTA, and .hm-hero__box is a plain
 * block container, so adjacent margins COLLAPSE. Left alone that put the whole
 * of .hm-price's sp-1 above the note and nothing below it, i.e. the note hugged
 * the button instead of the price.
 *
 * So: zero the price's bottom margin when the note follows it, then split the
 * SAME sp-1 across the note — a hair above, the remainder below. The price-to-
 * button whitespace is therefore unchanged; only the note moved up into it.
 * calc() keeps that true if the spacing token is ever retuned.
 *
 * Without :has() support the rule simply doesn't apply and the layout falls
 * back to the previous spacing — degraded, not broken.
 *
 * Size is 0.6875rem = 11px at the default root size, in rem rather than px so it
 * still scales for anyone who has raised their browser font size — this is a
 * legal disclosure, and § 3 PAngV wants it "deutlich lesbar". */
.hm-price:has( + .hm-price__tax-note ) {
	margin-bottom: 0;
}

.hm-price__tax-note {
	margin: 0.1rem 0 calc( var(--hm-sp-1) - 0.1rem );
	font-size: 0.6875rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	opacity: 0.7;
}