/**
 * Homepage — front-page.php
 *
 * Mobile-first. The mockup is a desktop-only export with no @media queries, so
 * the small-screen layout is derived per reference/responsive.md: multi-column
 * sections stack in DOM order, product grids never drop below two columns, and
 * horizontal rows stay scrollers. Desktop (>=1024px) is the mockup 1:1.
 *
 * Breakpoints repeat the literal px of --breakpoint-sm/md/lg (480/768/1024);
 * custom properties cannot be used in a media condition. Keep them in sync.
 *
 * @package Printmania
 */

/* =========================================================================
 * Shared page furniture
 * ====================================================================== */

.pm-home {
	display: block;
}

.pm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --gap-section );
	margin-bottom: var( --space-24 );
}

.pm-section-head__title {
	margin: 0;
}

/* The mockup's section h2 inherits the body line-height below 768px. */
.pm-home .pm-section-head__title {
	line-height: var( --lh-body );
}

.pm-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-7 );
	min-height: 44px;
	font-size: var( --text-sm );
	font-weight: var( --fw-black );
	color: var( --color-text );
	white-space: nowrap;
	transition: var( --transition-color );
}

.pm-section-head__link:hover,
.pm-section-head__link:focus-visible {
	color: var( --color-primary );
}

.pm-empty {
	padding: var( --card-padding );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
	font-size: var( --text-base );
	color: var( --color-text-muted );
}

/* --- The conversion CTA ---------------------------------------------------
 * A magenta wipe riding over a dark radial base. The same treatment is applied
 * to the loop add-to-cart button in components/product-card.css; both express
 * it purely through the --gradient-cta-* tokens. Extract to a shared
 * components/button.css once the theme grows a button layer.
 * ---------------------------------------------------------------------- */

.pm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-9 );
	min-height: 44px;
	padding: var( --space-14 ) var( --space-26 );
	border: 0;
	border-radius: var( --radius-control );
	font-family: inherit;
	font-size: var( --text-base );
	font-weight: var( --fw-bold );
	line-height: var( --lh-none );
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.pm-button__icon {
	flex-shrink: 0;
}

.pm-button--cta {
	background-image: var( --gradient-cta );
	background-repeat: var( --gradient-cta-repeat );
	background-size: var( --gradient-cta-size );
	background-position: var( --gradient-cta-position );
	box-shadow: var( --shadow-inset-cta );
	color: var( --color-text-invert );
	transition: background-position var( --duration-wipe ) var( --ease-cta ), transform var( --duration-base ) ease;
}

.pm-button--cta:hover,
.pm-button--cta:focus-visible {
	background-position: var( --gradient-cta-position-hover );
	box-shadow: var( --shadow-2 );
	filter: saturate( 1.25 ) brightness( 1.1 );
	transform: translateY( var( --lift-cta ) );
}

.pm-button--b2b {
	padding: var( --space-14 ) var( --space-26 );
	background-image: var( --gradient-b2b-cta );
	box-shadow: var( --shadow-4 );
	font-weight: var( --fw-black );
	color: var( --color-text-invert );
	transition: transform var( --duration-base ), box-shadow var( --duration-base );
}

.pm-button--b2b:hover,
.pm-button--b2b:focus-visible {
	transform: translateY( var( --lift-cta ) );
}

.pm-button--ghost {
	border: var( --border-width-strong ) solid var( --color-border );
	background-color: var( --surface );
	color: var( --color-text );
	transition: var( --transition-base );
}

.pm-button--ghost:hover,
.pm-button--ghost:focus-visible {
	border-color: var( --color-border-strong );
}

/* Size / shape modifiers shared by cart, checkout and My account. */
.pm-button--sm { min-height: var( --space-40 ); padding: var( --space-10 ) var( --space-16 ); font-size: var( --text-sm ); }
.pm-button--dark { background: var( --surface-dark ); color: var( --color-text-invert ); }
.pm-button--dark:hover, .pm-button--dark:focus-visible { background: var( --color-primary ); color: var( --color-text-invert ); }
.pm-button--full { width: 100%; }
.pm-button--xl { min-height: var( --control-height-xl ); font-size: var( --text-xl ); }
.pm-button--danger { color: var( --color-primary ); }


/* =========================================================================
 * HERO
 * ====================================================================== */

.pm-hero {
	position: relative;
	overflow: hidden;
	background-image: var( --gradient-hero-b );
}

/* An open finder list may hang below the hero; keep clipping the sides. */
.pm-hero:has( .pm-finder__field.is-open ) {
	overflow-x: clip;
	overflow-y: visible;
}

.pm-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var( --space-28 );
	align-items: center;
	padding-block: var( --space-44 );
}

.pm-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	margin-bottom: var( --space-18 );
	padding: var( --space-7 ) var( --space-14 );
	border: var( --border-width ) solid var( --color-primary-border );
	border-radius: var( --radius-pill );
	background-color: var( --color-primary-tint );
	font-size: var( --text-xs );
	font-weight: var( --fw-bold );
	color: var( --color-primary-soft );
}

.pm-hero__title {
	margin-bottom: var( --space-14 );
	line-height: var( --lh-display-sm );
	color: var( --color-text-invert );
}

.pm-hero__lead {
	max-width: var( --width-prose-lg );
	margin-bottom: var( --space-20 );
	font-size: var( --text-md-5 );
	line-height: var( --lh-body );
	color: var( --color-text-on-dark );
}

.pm-hero__mascot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pm-hero__mascot-img {
	width: auto;
	max-width: 100%;
	max-height: var( --height-hero-mascot-sm );
	height: auto;
	filter: var( --drop-shadow-3 );
}

/* --- Finder --------------------------------------------------------- */

/* Fills its column: full width on small screens, up to the mascot from 1024px. */
.pm-finder {
	padding: var( --space-16 );
	border-radius: var( --radius-3xl );
	background-color: var( --surface );
	box-shadow: var( --shadow-9 );
}

.pm-finder__row {
	display: grid;
	gap: var( --space-8 );
	margin-bottom: var( --space-8 );
}

.pm-finder__field {
	position: relative;
}

.pm-finder__select {
	width: 100%;
	height: var( --control-height-sm );
	padding: 0 var( --space-30 ) 0 var( --space-14 );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-control );
	background-color: var( --surface );
	font-size: var( --text-sm );
	color: var( --color-text );
	cursor: pointer;
}

.pm-finder__select:focus-visible {
	border-color: var( --color-secondary );
	outline: none;
}

.pm-finder__select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pm-finder__caret {
	position: absolute;
	top: 17px;
	right: 11px;
	color: var( --color-text-meta );
	pointer-events: none;
}

/* Custom dropdown over the selects (assets/js/finder.js). Without JS the
   native selects above stay as they are. */

.pm-finder__select.is-enhanced {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.pm-finder__field.is-open {
	z-index: 30;
}

.pm-finder__toggle {
	display: flex;
	align-items: center;
	gap: var( --space-10 );
	width: 100%;
	height: var( --control-height-sm );
	padding: 0 var( --space-30 ) 0 var( --space-14 );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-control );
	background-color: var( --surface );
	font: inherit;
	font-size: var( --text-sm );
	color: var( --color-placeholder );
	text-align: left;
	cursor: pointer;
}

.pm-finder__toggle.is-chosen {
	color: var( --color-text );
}

.pm-finder__toggle:focus-visible,
.pm-finder__field.is-open .pm-finder__toggle {
	border-color: var( --color-secondary );
	outline: none;
}

.pm-finder__toggle:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pm-finder__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-finder__logo,
.pm-finder__option-logo {
	flex: none;
	width: 56px;
	height: 18px;
	object-fit: contain;
	object-position: left center;
}

.pm-finder__caret {
	transition: transform var( --duration-fast, .15s );
}

.pm-finder__field.is-open .pm-finder__caret {
	transform: rotate( 180deg );
}

.pm-finder__panel {
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	left: 0;
	padding: 6px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-xl );
	background-color: var( --surface );
	box-shadow: var( --shadow-8 );
	color: var( --color-text );
	text-align: left;
}

.pm-finder__panel.is-up {
	top: auto;
	bottom: calc( 100% + 6px );
}

.pm-finder__panel[hidden],
.pm-finder__search[hidden],
.pm-finder__option[hidden],
.pm-finder__empty[hidden] {
	display: none;
}

.pm-finder__search {
	width: 100%;
	height: 40px;
	margin-bottom: 6px;
	padding: 0 var( --space-12 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-md );
	background-color: var( --surface-sunken );
	font: inherit;
	font-size: var( --text-sm );
	color: var( --color-text );
}

.pm-finder__search:focus {
	border-color: var( --color-secondary );
	background-color: var( --surface );
	outline: none;
}

.pm-finder__list {
	position: relative;
	max-height: 320px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	outline: none;
	scrollbar-width: thin;
	scrollbar-color: var( --c-gray-250, #d4d4cf ) transparent;
	scrollbar-gutter: stable;
}

/* Slim rounded scrollbar (Chrome/Safari; Firefox uses scrollbar-* above). */
.pm-finder__list::-webkit-scrollbar {
	width: 10px;
}

.pm-finder__list::-webkit-scrollbar-track {
	background: transparent;
}

.pm-finder__list::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background-color: var( --c-gray-250, #d4d4cf );
	background-clip: padding-box;
}

.pm-finder__list::-webkit-scrollbar-thumb:hover {
	background-color: var( --color-secondary );
}

.pm-finder__option {
	display: flex;
	align-items: center;
	gap: var( --space-12 );
	min-height: 40px;
	padding: 8px 10px;
	border-radius: var( --radius-xs );
	font-size: var( --text-sm );
	line-height: 1.3;
	cursor: pointer;
}

.pm-finder__option.is-active {
	background-color: var( --color-secondary-tint );
}

.pm-finder__option[aria-selected="true"] {
	font-weight: 700;
}

/* Center the text on the logo optically: the font sits low in its line box,
   so text-box trims it to the capitals (older browsers: 1px nudge). The
   chosen brand in the button looks exactly like its row in the list; brand
   names are short, so it drops the clipping a trimmed box would cut into. */
.pm-finder__option:has( .pm-finder__option-logo ) .pm-finder__option-text,
.pm-finder__toggle:has( .pm-finder__logo ) .pm-finder__value {
	text-box: trim-both cap alphabetic;
}

.pm-finder__toggle:has( .pm-finder__logo ) {
	gap: var( --space-12 );
}

.pm-finder__toggle:has( .pm-finder__logo ) .pm-finder__value {
	overflow: visible;
}

@supports not ( text-box: trim-both cap alphabetic ) {
	.pm-finder__option:has( .pm-finder__option-logo ) .pm-finder__option-text,
	.pm-finder__toggle:has( .pm-finder__logo ) .pm-finder__value {
		transform: translateY( -1px );
	}
}

.pm-finder__empty {
	margin: 0;
	padding: var( --space-12 ) 10px;
	font-size: var( --text-sm );
	color: var( --color-text-muted );
}

.pm-finder__submit {
	width: 100%;
	height: var( --control-height );
	padding-inline: var( --space-16 );
}

/* =========================================================================
 * CATEGORIES
 * ====================================================================== */

.pm-categories {
	padding-block: var( --section-space ) var( --space-8 );
}

.pm-categories .pm-section-head {
	margin-bottom: var( --space-28 );
}

.pm-categories__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-10 );
}

.category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 242px;
	padding: var( --space-14 );
	overflow: hidden;
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
	color: var( --color-text );
	transition: var( --transition-base );
}

.category-card__blob {
	position: absolute;
	right: -42px;
	bottom: -52px;
	width: 150px;
	height: 150px;
	border-radius: var( --radius-circle );
	background-image: var( --gradient-cat-blob );
}

.category-card__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: var( --radius-3xl );
	background-color: var( --surface-sunken );
	color: var( --color-text );
}

.category-card__body {
	position: relative;
	z-index: 1;
	margin-top: auto;
}

.category-card__title {
	display: block;
	margin-bottom: var( --space-8 );
	font-size: var( --text-4xl );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-tighter );
}

.category-card__text {
	display: block;
	margin-bottom: var( --space-16 );
	font-size: var( --text-sm );
	line-height: var( --lh-body );
	color: var( --color-text-muted );
}

.category-card__count {
	display: block;
	font-size: var( --text-xs );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-wider );
	text-transform: uppercase;
	color: var( --color-text-meta );
}

/* =========================================================================
 * TRUST BAR
 * ====================================================================== */

.pm-trust {
	margin-top: var( --space-32 );
}

/* Below 768px the bar is one swipeable row (the mockup's `tcar`). */
.pm-trust__list {
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-3xl );
	background-color: var( --surface );
}

.pm-trust__list::-webkit-scrollbar {
	display: none;
}

.pm-trust__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var( --space-13 );
	padding: var( --space-16 ) var( --space-14 );
	line-height: var( --lh-body );
	white-space: nowrap;
	scroll-snap-align: start;
}

.pm-trust__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: var( --icon-button-size );
	height: var( --icon-button-size );
	border-radius: var( --radius-control );
	background-color: var( --surface-sunken );
}

.pm-trust__icon--cyan {
	color: var( --color-secondary );
}

.pm-trust__icon--magenta {
	color: var( --color-primary );
}

.pm-trust__icon--gold {
	color: var( --color-accent-strong );
}

.pm-trust__icon--ink {
	color: var( --color-text );
}

.pm-trust__icon--green {
	color: var( --color-success );
}

.pm-trust__title {
	display: block;
	font-size: var( --text-xs-5 );
	font-weight: var( --fw-bold );
}

.pm-trust__note {
	display: block;
	font-size: var( --text-xs );
	color: var( --color-text-muted );
}

/* =========================================================================
 * BRANDS
 * ====================================================================== */

.pm-brands {
	padding-block: var( --section-space ) 0;
}

/* Below 768px the "all brands" link leaves the head for a full-width button
   under the grid (.pm-brands__more). */
.pm-brands .pm-section-head__link {
	display: none;
}

.pm-brands .pm-section-head__title {
	font-size: var( --text-6xl-sm );
	white-space: nowrap;
}

.pm-brands__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-10 );
}

.brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --space-11 );
	padding: var( --space-14 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
	transition: var( --transition-base );
}

.brand-card__logo {
	width: auto;
	height: 26px;
	max-width: 100%;
}

.pm-brands__more {
	display: flex;
	margin-top: var( --space-18 );
}

.pm-brands__more-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-7 );
	width: 100%;
	height: var( --control-height );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-control );
	background-color: var( --surface );
	font-size: var( --text-sm );
	font-weight: var( --fw-black );
	color: var( --color-text );
	white-space: nowrap;
	transition: var( --transition-color );
}

.pm-brands__more-link:hover,
.pm-brands__more-link:focus-visible {
	color: var( --color-primary );
}

.brand-card__count {
	font-size: var( --text-xs );
	font-weight: var( --fw-semibold );
	color: var( --color-text-meta );
	text-align: center;
}

/* =========================================================================
 * BESTSELLERS
 * ====================================================================== */

.pm-bestsellers {
	padding-block: var( --section-space ) var( --space-8 );
}

.pm-bestsellers .pm-section-head {
	margin-bottom: var( --space-22 );
}

/* =========================================================================
 * DEAL BANNER
 * ====================================================================== */

.pm-deal {
	position: relative;
	margin-top: var( --space-40 );
	overflow: hidden;
	background-image: var( --gradient-deal-banner );
}

.pm-deal__inner {
	display: grid;
	gap: var( --gap-section );
	align-items: center;
	padding-block: var( --space-44 );
}

.pm-deal__badge {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	margin-bottom: var( --space-18 );
	padding: var( --space-7 ) var( --space-14 );
	border: var( --border-width ) solid var( --color-accent-border );
	border-radius: var( --radius-pill );
	background-color: var( --color-accent-tint );
	font-size: var( --text-xxs );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-caps-4 );
	text-transform: uppercase;
	color: var( --color-accent );
}

.pm-deal__title {
	margin-bottom: var( --space-12 );
	font-size: var( --text-display-banner );
	line-height: var( --lh-banner );
	color: var( --color-text-invert );
}

.pm-deal__highlight {
	color: var( --color-accent );
}

.pm-deal__text {
	max-width: var( --width-prose );
	margin-bottom: var( --gap-section );
	font-size: var( --text-md );
	color: var( --c-white-a78 );
}

.pm-deal__cta {
	padding: var( --space-15 ) var( --space-26 );
}

.pm-deal__mascot {
	display: grid;
	place-items: center;
	min-height: 220px;
}

.pm-deal__mascot-img {
	width: 130%;
	max-width: 560px;
	height: auto;
	filter: var( --drop-shadow-2 );
}

/* =========================================================================
 * REVIEWS
 * ====================================================================== */

.pm-reviews {
	padding-block: var( --space-64 ) var( --space-28 );
}

.pm-reviews .pm-section-head__title {
	font-size: var( --text-6xl-sm );
	white-space: nowrap;
}

.pm-reviews .pm-section-head {
	margin-bottom: var( --space-26 );
	align-items: center;
}

.pm-reviews__body {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --space-16 );
	align-items: stretch;
}

.pm-reviews__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --space-14 );
}

.pm-reviews__badge img {
	width: 100%;
	height: auto;
}

.pm-reviews__all {
	width: 100%;
	min-height: 44px;
	padding: var( --space-15 ) var( --space-18 );
	border-radius: var( --radius-control );
	background-color: var( --surface-dark );
	font-size: var( --text-sm-5 );
	font-weight: var( --fw-bold );
	color: var( --color-text-invert );
	text-align: center;
	transition: background-color var( --duration-base );
}

.pm-reviews__all:hover,
.pm-reviews__all:focus-visible {
	background-color: var( --color-primary );
}

.pm-review {
	display: flex;
	flex-direction: column;
	gap: var( --space-12 );
	padding: var( --gap-section );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
}

.pm-review__stars {
	font-size: var( --text-lg );
	line-height: var( --lh-none );
	letter-spacing: var( --ls-stars );
	color: var( --color-star );
}

.pm-review__who {
	font-size: var( --text-base );
	font-weight: var( --fw-black );
}

.pm-review__text {
	font-size: var( --text-sm );
	line-height: var( --lh-loose );
	color: var( --color-text-soft );
}

/* =========================================================================
 * B2B
 * ====================================================================== */

.pm-b2b {
	position: relative;
	overflow: hidden;
	background-color: var( --color-page );
}

.pm-b2b__glow {
	position: absolute;
	border-radius: var( --radius-circle );
	pointer-events: none;
}

.pm-b2b__glow--cyan {
	top: -140px;
	right: 40px;
	width: 400px;
	height: 400px;
	background-image: var( --gradient-glow-cyan-soft );
}

.pm-b2b__glow--magenta {
	bottom: -160px;
	left: 40px;
	width: 420px;
	height: 420px;
	background-image: var( --gradient-glow-magenta-soft );
}

.pm-b2b__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var( --space-40 );
	align-items: center;
	padding-block: var( --space-40 );
}

.pm-b2b__title {
	margin-bottom: var( --space-16 );
	font-size: var( --text-display-b2b );
	line-height: var( --lh-b2b );
	letter-spacing: var( --ls-display-lg );
	color: var( --color-text );
}

.pm-b2b__lead {
	max-width: var( --width-prose );
	margin-bottom: var( --space-28 );
	font-size: var( --text-lg );
	color: var( --color-text-muted );
}

.pm-b2b__list {
	display: grid;
	gap: var( --space-14 );
	margin: 0 0 var( --space-30 );
	padding: 0;
	list-style: none;
}

.pm-b2b__item {
	display: flex;
	align-items: flex-start;
	gap: var( --space-13 );
	font-size: var( --text-base );
	color: var( --c-ink-650 );
}

.pm-b2b__item strong {
	color: var( --color-text );
}

.pm-b2b__check {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: var( --radius-xs );
	background-color: var( --color-secondary-tint );
	color: var( --color-secondary );
}

.pm-b2b__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
}

.pm-b2b__stats {
	display: grid;
	gap: var( --space-12 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-b2b__stat {
	display: flex;
	align-items: center;
	gap: var( --space-16 );
	padding: var( --space-16 ) var( --space-20 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
	box-shadow: var( --shadow-1 );
}

.pm-b2b__stat-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: var( --icon-tile-size );
	height: var( --icon-tile-size );
	border-radius: var( --radius-xl );
}

.pm-b2b__stat-icon--cyan {
	background-color: var( --c-cyan-a12 );
	color: var( --color-secondary-strong );
}

.pm-b2b__stat-icon--gold {
	background-color: var( --c-yellow-a22 );
	color: var( --color-accent-strong );
}

.pm-b2b__stat-icon--orange {
	background-color: var( --c-orange-a12 );
	color: var( --color-tertiary );
}

.pm-b2b__stat-icon--magenta {
	background-color: var( --c-magenta-a12 );
	color: var( --color-primary );
}

.pm-b2b__stat-figure {
	min-width: 72px;
	font-size: var( --text-6xl );
	font-weight: var( --fw-black );
	line-height: var( --lh-none );
	letter-spacing: var( --ls-display );
	color: var( --color-text );
}

.pm-b2b__stat-figure--gold {
	color: var( --color-accent-strong );
}

.pm-b2b__stat-figure--orange {
	color: var( --color-tertiary );
}

.pm-b2b__stat-figure--magenta {
	color: var( --color-primary );
}

.pm-b2b__stat-label {
	font-size: var( --text-md );
	line-height: var( --lh-stat );
	color: var( --c-ink-550 );
}

/* =========================================================================
 * NEWSLETTER
 * ====================================================================== */

.pm-newsletter {
	padding-block: var( --space-40 ) var( --space-8 );
}

.pm-newsletter__card {
	position: relative;
	display: grid;
	gap: var( --gap-section );
	align-items: center;
	padding: var( --space-30 ) var( --gap-section );
	overflow: hidden;
	border-radius: var( --radius-5xl );
	background-image: var( --gradient-newsletter );
}

.pm-newsletter__title {
	margin-bottom: var( --space-8 );
	color: var( --color-text-invert );
}

.pm-newsletter__text {
	max-width: var( --width-prose );
	margin-bottom: var( --space-22 );
	color: var( --c-white-a90 );
}

.pm-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-8 );
	max-width: var( --width-prose );
	padding: var( --space-6 );
	border-radius: var( --radius-2xl );
	background-color: var( --surface );
	box-shadow: var( --shadow-3 );
}

.pm-newsletter__field {
	flex: 1 1 200px;
	height: var( --control-height-sm );
	padding: 0 var( --space-20 );
	border: 0;
	background-color: transparent;
	font-size: var( --text-base );
	color: var( --color-text );
	outline: none;
}

.pm-newsletter__submit {
	height: var( --control-height-sm );
	padding: 0 var( --gap-section );
	border: 0;
	border-radius: var( --radius-control );
	background-color: var( --surface-dark );
	font-size: var( --text-sm );
	font-weight: var( --fw-bold );
	color: var( --color-text-invert );
	transition: background-color var( --duration-base );
}

.pm-newsletter__submit:hover,
.pm-newsletter__submit:focus-visible {
	background-color: var( --color-primary );
}

.pm-newsletter__mascot {
	display: grid;
	place-items: center;
}

/* --- CF7 wiring: the plugin form wears the same classes as the fallback ---
 * The legacy Scripts Organizer snippet (uploads/scorg/css/165-header-compiled.css)
 * restyles `.wpcf7 .wpcf7-form .wpcf7-submit` site-wide, so the submit is
 * out-specified here; the control wrap becomes the flex child the field was. */

.pm-newsletter__card .wpcf7 {
	max-width: var( --width-prose );
}

.pm-newsletter__card .wpcf7-form-control-wrap {
	display: flex;
	flex: 1 1 200px;
	min-width: 0;
}

.pm-newsletter__card .wpcf7-form-control-wrap .pm-newsletter__field {
	width: 100%;
}

.pm-newsletter__card .wpcf7 .wpcf7-form .pm-newsletter__submit {
	width: auto;
	height: var( --control-height-sm );
	min-height: 0;
	margin: 0;
	padding: 0 var( --gap-section );
	border: 0;
	border-radius: var( --radius-control );
	background: var( --surface-dark );
	font-family: inherit;
	font-size: var( --text-sm );
	font-weight: var( --fw-bold );
	line-height: var( --lh-none );
	color: var( --color-text-invert );
	box-shadow: none;
	cursor: pointer;
	transition: background-color var( --duration-base );
}

.pm-newsletter__card .wpcf7 .wpcf7-form .pm-newsletter__submit:hover,
.pm-newsletter__card .wpcf7 .wpcf7-form .pm-newsletter__submit:focus-visible {
	background: var( --color-primary );
	background-position: 0 0;
}

.pm-newsletter__card .wpcf7-spinner {
	display: none;
}

.pm-newsletter__card .wpcf7-not-valid-tip {
	display: block;
	width: 100%;
	padding: 0 var( --space-20 );
	font-size: var( --text-xs );
	color: var( --color-primary );
}

.pm-newsletter__card .wpcf7-form .wpcf7-response-output {
	max-width: var( --width-prose );
	margin: var( --space-8 ) 0 0;
	padding: var( --space-12 ) var( --space-16 );
	border: var( --border-width ) solid var( --c-white-a90 );
	border-radius: var( --radius-control );
	font-size: var( --text-xs );
	color: var( --color-text-invert );
}

.pm-newsletter__card .wpcf7-form .wpcf7-response-output::before {
	display: none;
}

.pm-newsletter__mascot-img {
	width: auto;
	max-width: 100%;
	height: 255px;
	filter: var( --drop-shadow-1 );
}

/* =========================================================================
 * < 768px — foreign stylesheet overrides
 *
 * These neutralise third-party rules on mobile only, so the desktop keeps
 * whatever those stylesheets compute there:
 * - automatic.css `:where(section:not(section section))` pads every top-level
 *   section; the hero and the trust bar carry no padding in the mockup.
 * - wooptima-reviews (Splide carousel + Heureka badge) — the mockup's mobile
 *   reviews: no arrows, full-width dark "all reviews" button, pill dots.
 * ====================================================================== */

@media ( max-width: 767px ) {

	.pm-hero {
		padding: 0;
	}

	.pm-trust {
		padding-block: 0;
	}

	.pm-reviews .amtc-heureka-badge {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.pm-reviews .amtc-badge-view-all {
		margin-top: 0;
	}

	/* The Heureka widget fills its slot late (or never, when blocked). */
	.pm-reviews .amtc-heureka-badge > div:not( :empty ) ~ .amtc-badge-view-all {
		margin-top: var( --space-14 );
	}

	.pm-reviews .amtc-badge-view-all-button {
		display: flex;
		width: 100%;
		padding: var( --space-15 ) var( --space-18 );
		border-radius: var( --radius-control );
		background: var( --surface-dark );
		font-size: var( --text-sm-5 );
		font-weight: var( --fw-bold );
		line-height: var( --lh-body );
		transition: background-color var( --duration-base );
	}

	.pm-reviews .amtc-badge-view-all-button:hover,
	.pm-reviews .amtc-badge-view-all-button:focus-visible {
		background: var( --color-primary );
	}

	.pm-reviews .splide__arrows {
		display: none;
	}

	.pm-reviews .heurekaShopReviewsCarousel .splide__track {
		padding-bottom: calc( var( --space-14 ) + var( --space-9 ) );
	}

	.pm-reviews .amtc-review-card {
		padding: var( --space-22 );
		border-radius: var( --radius-card );
	}

	.pm-reviews .heurekaShopReviewsCarousel .splide__pagination {
		bottom: 0;
		gap: var( --space-7 );
		padding: 0;
	}

	.pm-reviews .heurekaShopReviewsCarousel .splide__pagination li {
		width: auto;
		height: auto;
		line-height: var( --lh-none );
	}

	.pm-reviews .heurekaShopReviewsCarousel .splide__pagination .splide__pagination__page {
		width: 9px;
		height: 9px;
		border-radius: var( --radius-pill );
		background: var( --color-dot-idle ) !important;
		transform: none !important;
	}

	.pm-reviews .heurekaShopReviewsCarousel .splide__pagination .splide__pagination__page.is-active {
		width: 22px;
		background: var( --color-primary ) !important;
	}
}

/* =========================================================================
 * >= 480px (--breakpoint-sm)
 * ====================================================================== */

@media ( min-width: 480px ) {

	.pm-finder__row {
		grid-template-columns: repeat( 3, 1fr );
	}

	/* The homepage finder stays stacked up to 768px, like the mockup's. */
	.pm-hero .pm-finder__row {
		grid-template-columns: minmax( 0, 1fr );
	}

	.pm-newsletter__form {
		flex-wrap: nowrap;
	}
}

/* =========================================================================
 * >= 768px (--breakpoint-md)
 * ====================================================================== */

@media ( min-width: 768px ) {

	.pm-home .pm-section-head__title {
		line-height: var( --lh-tight );
	}

	.pm-hero__title {
		line-height: var( --lh-hero );
	}

	.pm-hero__lead {
		line-height: var( --lh-snug );
	}

	.pm-hero__mascot-img {
		width: 108%;
		max-width: 600px;
		max-height: none;
	}

	.pm-hero .pm-finder__row {
		grid-template-columns: repeat( 3, 1fr );
	}

	.pm-categories__grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --gap-card );
	}

	.category-card {
		padding: var( --card-padding );
	}

	.pm-trust__list {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.pm-trust__item {
		padding: var( --space-20 ) var( --space-18 );
		line-height: var( --lh-snug );
		white-space: normal;
	}

	.pm-brands .pm-section-head__link {
		display: inline-flex;
	}

	.pm-brands .pm-section-head__title {
		font-size: var( --text-display-section );
		white-space: normal;
	}

	.pm-brands__grid {
		grid-template-columns: repeat( 4, 1fr );
		gap: var( --gap-grid );
	}

	.brand-card {
		padding: var( --space-22 ) var( --space-14 );
	}

	.pm-brands__more {
		display: none;
	}

	.pm-reviews .pm-section-head__title {
		font-size: var( --text-display-section );
		white-space: normal;
	}

	.pm-reviews__body {
		gap: var( --space-20 );
	}

	.pm-deal {
		margin-top: var( --section-space );
	}

	.pm-deal__inner {
		grid-template-columns: 1.25fr 0.75fr;
	}

	.pm-reviews {
		padding-block-end: var( --section-space );
	}

	.pm-b2b__inner {
		padding-block: var( --section-space );
	}

	.pm-newsletter {
		padding-block: var( --section-space ) var( --space-8 );
	}

	.pm-newsletter__card {
		grid-template-columns: 1.3fr 0.7fr;
		padding: var( --space-30 ) var( --space-46 );
	}
}

/* =========================================================================
 * >= 1024px (--breakpoint-lg) — the mockup's own layout
 * ====================================================================== */

@media ( min-width: 1024px ) {

	.pm-hero__inner {
		grid-template-columns: 1.06fr 0.94fr;
	}

	.pm-hero__mascot-img {
		margin-block: -14% -2%;
	}

	.pm-categories__grid {
		grid-template-columns: repeat( 4, 1fr );
	}

	.pm-trust__list {
		grid-template-columns: repeat( 5, 1fr );
	}

	.pm-brands__grid {
		grid-template-columns: repeat( 7, 1fr );
	}

	.pm-reviews__body {
		grid-template-columns: 280px minmax( 0, 1fr );
	}

	.pm-b2b__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var( --space-56 );
	}
}