/* ===== Homepage ============================== */

/* HERO */
.prd-hero {
	position: relative;
	min-height: clamp(520px, 75vh, 760px);
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	font-family: var(--prd-ff-sans);
}
.prd-hero-bg { position: absolute; inset: 0; z-index: 0; }
.prd-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.prd-hero-tint {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(17,20,24,.55) 0%, rgba(17,20,24,.35) 50%, rgba(17,20,24,.65) 100%);
}
.prd-hero-inner {
	position: relative; z-index: 1;
	padding-block: var(--prd-s-9);
	text-align: left;
}
.prd-hero-inner .prd-hero-eyebrow,
.prd-hero-inner .prd-hero-title,
.prd-hero-inner .prd-hero-lead,
.prd-hero-inner .prd-hero-ctas,
.prd-hero-inner .prd-hero-trust { max-width: 720px; }
.prd-hero-eyebrow {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.22em;
	font-size: 0.875rem;
	display: inline-block;
	padding: 0.4rem 0.85rem;
	background: rgba(25, 55, 101, 0.95);
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.prd-hero-title { color: #fff; text-align: left; }
.prd-hero-lead { color: rgba(255,255,255,.92); max-width: 560px; text-align: left; font-size: 1.125rem; }
.prd-hero-ctas { display: flex; gap: var(--prd-s-3); flex-wrap: wrap; margin-top: var(--prd-s-6); }
.prd-btn-lg { padding: 1.15rem 2.15rem; font-size: 1.125rem; }
.prd-btn-on-dark { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.prd-btn-on-dark:hover { background: #fff; color: var(--prd-c-ink); border-color: #fff; }
.prd-hero-trust {
	display: flex;
	gap: var(--prd-s-6);
	margin-top: var(--prd-s-8);
	flex-wrap: wrap;
	border-top: 1px solid rgba(255,255,255,.2);
	padding-top: var(--prd-s-5);
}
.prd-trust-item { display: flex; flex-direction: column; color: rgba(255,255,255,.85); font-size: var(--prd-fs-xs); }
.prd-trust-item strong { font-family: var(--prd-ff-display); font-size: var(--prd-fs-xl); color: #fff; font-weight: 600; }
.prd-trust-rating { flex-direction: row; align-items: center; gap: 0.5rem; }
.prd-stars { color: var(--prd-c-gold); letter-spacing: 2px; }

/* SECTION HEAD */
.prd-section--alt { background: var(--prd-c-bg-alt); }
.prd-section-head { margin-bottom: var(--prd-s-7); max-width: 720px; }
.prd-section-head--center { margin-inline: auto; text-align: center; }

/* CATEGORIES */
.prd-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--prd-s-4);
}
@media (max-width: 1024px) { .prd-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .prd-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .prd-cat-grid { grid-template-columns: 1fr; } }

.prd-cat-card {
	display: block;
	text-decoration: none;
	color: var(--prd-c-ink);
	background: #fff;
	border-radius: var(--prd-r-lg);
	overflow: hidden;
	box-shadow: var(--prd-shadow-sm);
	transition: transform var(--prd-dur) var(--prd-ease), box-shadow var(--prd-dur) var(--prd-ease);
	position: relative;
}
.prd-cat-card:hover { transform: translateY(-4px); box-shadow: var(--prd-shadow-lg); }
.prd-cat-card--wide { grid-column: span 2; }
@media (max-width: 700px) { .prd-cat-card--wide { grid-column: span 2; } }
@media (max-width: 460px) { .prd-cat-card--wide { grid-column: span 1; } }
.prd-cat-card-img {
	aspect-ratio: 4 / 3;
	background: var(--prd-c-bg-alt);
	overflow: hidden;
}
.prd-cat-card--wide .prd-cat-card-img { aspect-ratio: 16 / 9; }
.prd-cat-card-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--prd-dur-slow) var(--prd-ease);
}
.prd-cat-card:hover .prd-cat-card-img img { transform: scale(1.05); }

/* Per-category overrides — for product shots on white backgrounds we
   contain instead of crop so the whole product is visible. */
.prd-cat-card--climate-control .prd-cat-card-img { background: #fff; }
.prd-cat-card--climate-control .prd-cat-card-img img { object-fit: contain; padding: var(--prd-s-3); box-sizing: border-box; }
.prd-cat-card--climate-control:hover .prd-cat-card-img img { transform: scale(1.03); }

/* "And more" tile — image area is a dark gradient with the hero faded behind;
   bottom body stays white like the other category cards. */
.prd-cat-card--more { background: #fff; }
.prd-cat-card--more .prd-cat-card-img--more {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--prd-c-ink) 0%, #1d2a44 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	aspect-ratio: 1 / 1;
}
.prd-cat-card--more .prd-cat-card-img--more::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--prd-more-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0.28;
	mix-blend-mode: luminosity;
	transition: opacity var(--prd-dur-slow) var(--prd-ease), transform var(--prd-dur-slow) var(--prd-ease);
	pointer-events: none;
}
.prd-cat-card--more .prd-cat-card-img--more::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 30, 55, 0.55) 0%, rgba(20, 30, 55, 0.85) 100%);
	pointer-events: none;
}
.prd-cat-card--more:hover .prd-cat-card-img--more::before { opacity: 0.4; transform: scale(1.05); }
.prd-cat-card--more .prd-cat-card-img--more svg {
	position: relative;
	z-index: 1;
	opacity: 0.95;
	transition: transform var(--prd-dur-slow) var(--prd-ease);
}
.prd-cat-card--more:hover .prd-cat-card-img--more svg { transform: rotate(90deg); }

.prd-cat-card-body {
	padding: var(--prd-s-4) var(--prd-s-5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--prd-s-2);
}
.prd-cat-card-title {
	font-family: var(--prd-ff-display);
	font-size: var(--prd-fs-lg);
	font-weight: 600;
	margin: 0;
	color: var(--prd-c-ink);
}
.prd-cat-card-count { color: var(--prd-c-muted); font-size: var(--prd-fs-xs); font-weight: 500; white-space: nowrap; }

/* Mobile: clean 2-up grid, equal image heights, title stacked above count */
@media (max-width: 700px) {
	/* Force every card to a single column span so the "wide" hero card doesn't
	   sit alone on its own row */
	.prd-cat-card,
	.prd-cat-card--wide,
	.prd-cat-card--std { grid-column: span 1 !important; }
	/* Same aspect ratio everywhere -> matching image heights */
	.prd-cat-card-img,
	.prd-cat-card--wide .prd-cat-card-img { aspect-ratio: 4 / 3; }
	/* Stack title and count so long names ("Climate Control", "Flatware") never
	   get squeezed into ugly mid-word breaks */
	.prd-cat-card-body {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--prd-s-1);
		padding: var(--prd-s-3) var(--prd-s-4);
	}
	.prd-cat-card-title {
		font-size: var(--prd-fs-base);
		line-height: 1.2;
		hyphens: none;
		word-break: normal;
		overflow-wrap: normal;
	}
}
@media (max-width: 460px) {
	/* Keep a 2-column grid even on very narrow phones for a tidier masonry feel */
	.prd-cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--prd-s-3); }
	.prd-cat-card-title { font-size: var(--prd-fs-sm); }
	.prd-cat-card-count { font-size: 0.7rem; }
}

/* PRODUCT GRID (featured + archive) */
.prd-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--prd-s-5);
}
.prd-product-card {
	display: block;
	background: #fff;
	border-radius: var(--prd-r-md);
	overflow: hidden;
	text-decoration: none;
	color: var(--prd-c-ink);
	box-shadow: var(--prd-shadow-sm);
	transition: transform var(--prd-dur) var(--prd-ease), box-shadow var(--prd-dur) var(--prd-ease);
}
.prd-product-card:hover { transform: translateY(-3px); box-shadow: var(--prd-shadow-md); }
.prd-product-card-img { aspect-ratio: 1; overflow: hidden; background: #fff; }
.prd-product-card-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--prd-s-3); box-sizing: border-box; }
.prd-product-card-body { padding: var(--prd-s-4); }
html body .prd-featured .prd-product-card-title,
html body .prd-product-card .prd-product-card-title,
html body h3.prd-product-card-title {
	font-family: var(--prd-ff-sans) !important;
	font-size: var(--prd-fs-base) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--prd-c-ink) !important;
	margin: 0 0 var(--prd-s-2) !important;
}
html body .prd-product-card .prd-product-card-action {
	font-family: var(--prd-ff-sans) !important;
	color: var(--prd-c-accent-ink) !important;
	font-size: var(--prd-fs-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* HOW IT WORKS */
.prd-how .prd-section-lede{
	max-width: 540px;
	margin: var(--prd-s-2) auto 0;
	color: var(--prd-c-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.55;
}
.prd-how-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--prd-s-6);
	max-width: 1040px;
	margin: var(--prd-s-7) auto 0;
}
/* Connecting dashed line that runs behind the three icon discs */
.prd-how-steps::before{
	content: "";
	position: absolute;
	top: 36px;
	left: 16%;
	right: 16%;
	height: 0;
	border-top: 1.5px dashed var(--prd-c-line);
	z-index: 0;
}
@media (max-width: 800px) {
	.prd-how-steps { grid-template-columns: 1fr; gap: var(--prd-s-5); }
	.prd-how-steps::before{ display: none; }
}
.prd-how-step {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: var(--prd-s-5) var(--prd-s-4) var(--prd-s-5);
	background: #fff;
	border: 1px solid var(--prd-c-line);
	border-radius: 18px;
	box-shadow: 0 1px 0 rgba(17,20,24,0.02), 0 18px 32px -24px rgba(17,20,24,0.10);
	transition: transform var(--prd-dur) var(--prd-ease), box-shadow var(--prd-dur) var(--prd-ease), border-color var(--prd-dur) var(--prd-ease);
}
.prd-how-step:hover{
	transform: translateY(-4px);
	border-color: var(--prd-c-accent);
	box-shadow: 0 1px 0 rgba(17,20,24,0.02), 0 24px 40px -22px rgba(17,20,24,0.18);
}
.prd-how-icon{
	width: 72px;
	height: 72px;
	margin: 0 auto var(--prd-s-3);
	border-radius: 50%;
	background: var(--prd-c-bg-alt);
	color: var(--prd-c-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--prd-c-line);
	transition: background var(--prd-dur) var(--prd-ease), color var(--prd-dur) var(--prd-ease), border-color var(--prd-dur) var(--prd-ease);
}
.prd-how-step:hover .prd-how-icon{
	background: var(--prd-c-accent);
	color: #fff;
	border-color: var(--prd-c-accent);
}
.prd-how-num {
	font-family: var(--prd-ff-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--prd-c-accent);
	margin-bottom: var(--prd-s-2);
}
.prd-how-step .prd-h3{
	font-family: var(--prd-ff-display);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 .5rem;
	color: var(--prd-c-ink);
}
.prd-how-step p {
	color: var(--prd-c-ink-soft);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
}
.prd-how-cta{
	text-align: center;
	margin-top: var(--prd-s-7);
}

/* EVENT TYPES */
.prd-event-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--prd-s-3);
}
@media (max-width: 900px) { .prd-event-grid { grid-template-columns: repeat(2, 1fr); } }
.prd-event-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--prd-r-lg);
	overflow: hidden;
	background-color: var(--prd-c-ink);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: #fff;
	transition: transform var(--prd-dur) var(--prd-ease);
}
.prd-event-tile::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(17,20,24,.85) 100%);
}
.prd-event-tile:hover { transform: scale(1.02); }
.prd-event-tile-label {
	position: absolute;
	bottom: var(--prd-s-5);
	left: var(--prd-s-5);
	z-index: 1;
	font-family: var(--prd-ff-display);
	font-size: var(--prd-fs-xl);
	font-weight: 400;
}

/* REVIEWS */
.prd-stars-row {
	color: var(--prd-c-gold);
	font-size: var(--prd-fs-xl);
	letter-spacing: 4px;
	margin-top: var(--prd-s-3);
}
.prd-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--prd-s-5);
	margin-top: var(--prd-s-6);
}
@media (max-width: 900px) { .prd-reviews-grid { grid-template-columns: 1fr; } }
.prd-review-card {
	background: var(--prd-c-bg-alt);
	border-radius: var(--prd-r-lg);
	padding: var(--prd-s-6);
	margin: 0;
	border-left: 3px solid var(--prd-c-accent);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	min-height: 100%;
}
.prd-review-card p { font-family: var(--prd-ff-display); font-size: 1.0625rem; font-style: italic; line-height: 1.55; color: var(--prd-c-ink); margin: 0 0 var(--prd-s-4); overflow-wrap: break-word; }
.prd-review-card cite { display: block; margin-top: auto; font-style: normal; font-size: var(--prd-fs-sm); color: var(--prd-c-muted); font-weight: 600; }
.prd-reviews-cta { text-align: center; margin-top: var(--prd-s-7); }

/* CTA BAND */
.prd-cta-band {
	background: var(--prd-c-ink);
	color: #fff;
}
.prd-cta-band .prd-eyebrow { color: var(--prd-c-accent); }
.prd-cta-band .prd-h2 { color: #fff; }
.prd-cta-band .prd-lead { color: rgba(255,255,255,.8); }
.prd-cta-band-inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--prd-s-7);
	align-items: center;
}
@media (max-width: 900px) { .prd-cta-band-inner { grid-template-columns: 1fr; } }
.prd-cta-band-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--prd-s-3);
	justify-content: flex-end;
	align-items: center;
}
.prd-cta-band-actions .prd-btn { padding: 1.25rem 2.25rem; font-size: 1.125rem; }
@media (max-width: 700px) {
	.prd-cta-band-actions { flex-direction: column; align-items: stretch; justify-content: stretch; }
	.prd-cta-band-actions .prd-btn { width: 100%; justify-content: center; }
}
.prd-cta-band .prd-btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.prd-cta-band .prd-btn-outline:hover { background: #fff; color: var(--prd-c-ink); border-color: #fff; }

/* ===== Masonry rebuild — wide cards span 2x2 of small cards ===== */
html body .prd-cat-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows: 1fr !important;
grid-auto-flow: dense !important;
gap: var(--prd-s-4) !important;
}
html body .prd-cat-card {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
margin: 0 !important;
background: #fff !important;
}
html body .prd-cat-card--std .prd-cat-card-img,
html body .prd-cat-card--wide .prd-cat-card-img {
aspect-ratio: auto !important;
flex: 1 1 auto !important;
height: 100%;
min-height: 0;
}
/* Standard card = 1 col x 1 row, square-ish */
html body .prd-cat-card--std {
grid-column: span 1 !important;
grid-row: span 1 !important;
aspect-ratio: 1 / 1 !important;
}
html body .prd-cat-card--std .prd-cat-card-img { aspect-ratio: 1 / 1 !important; flex: 1 1 auto !important; }
/* Wide card = 2 cols x 1 row, landscape banner that matches the small-card row height */
html body .prd-cat-card--wide {
grid-column: span 2 !important;
grid-row: span 1 !important;
}
html body .prd-cat-card--wide .prd-cat-card-img { aspect-ratio: auto !important; height: 100%; flex: 1 1 auto !important; }
@media (max-width: 1024px) {
html body .prd-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body .prd-cat-card--wide { grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 700px) {
html body .prd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .prd-cat-card--wide { grid-column: span 2 !important; grid-row: span 1 !important; aspect-ratio: 16/9 !important; }
}

/* Lock card link colors — beat parent theme's blue a:hover */
html body .prd-cat-card,
html body .prd-cat-card:hover,
html body .prd-cat-card:focus,
html body .prd-cat-card:active,
html body .prd-cat-card:visited { color: var(--prd-c-ink) !important; text-decoration: none !important; }
html body .prd-cat-card .prd-cat-card-title,
html body .prd-cat-card:hover .prd-cat-card-title { color: var(--prd-c-ink) !important; }
html body .prd-cat-card .prd-cat-card-count { color: var(--prd-c-muted) !important; }
html body .prd-cat-card:hover .prd-cat-card-count { color: var(--prd-c-accent-ink) !important; }
html body .prd-cat-card-title { font-size: 1.25rem !important; }
html body .prd-cat-card-count { font-size: 0.875rem !important; }
html body .prd-cat-card-body { padding: 1rem 1.25rem !important; }

/* ===== Kill the giant decorative ❝ from blockquotes (Royal/Woo legacy) ===== */
html body .prd-review-card::before,
html body .prd-review-card::after,
html body blockquote.prd-review-card::before,
html body blockquote.prd-review-card::after { content: none !important; display: none !important; }
html body .prd-review-card p::before,
html body .prd-review-card p::after { content: none !important; display: none !important; }

/* Bump testimonial type slightly for readability */
html body .prd-review-card p { font-size: 1.125rem !important; line-height: 1.6 !important; }
html body .prd-review-card cite { font-size: 0.95rem !important; }

/* ===== Refinements (post-bump): hero left-align, eyebrow contrast, event tile hover ===== */

/* Sitewide eyebrow — darker, bolder, more readable */
html body .prd-eyebrow{
color: var(--prd-c-accent-ink) !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
font-size: 0.8125rem !important;
}
/* Hero eyebrow gets the pill treatment instead of plain text on busy image bg */
html body .prd-hero .prd-hero-eyebrow{
color: #ffffff !important;
background: rgba(25, 55, 101, 0.95) !important;
padding: 0.4rem 0.95rem !important;
border-radius: 999px !important;
letter-spacing: 0.16em !important;
font-weight: 700 !important;
font-size: 0.8125rem !important;
display: inline-block !important;
margin-bottom: 1.25rem !important;
}

/* Lock event tile label color across all link states (parent Royal flips to blue) */
html body .prd-event-tile,
html body .prd-event-tile:hover,
html body .prd-event-tile:focus,
html body .prd-event-tile:active,
html body .prd-event-tile:visited{
color: #ffffff !important;
text-decoration: none !important;
}
html body .prd-event-tile .prd-event-tile-label,
html body .prd-event-tile:hover .prd-event-tile-label,
html body .prd-event-tile:focus .prd-event-tile-label,
html body .prd-event-tile:active .prd-event-tile-label,
html body .prd-event-tile:visited .prd-event-tile-label{
color: #ffffff !important;
}

/* Hero — left-aligned text, but inner content stays inside .prd-container */
html body .prd-hero,
html body .prd-hero-inner,
html body .prd-hero-title,
html body .prd-hero-lead,
html body .prd-hero-ctas,
html body .prd-hero-trust{
text-align: left !important;
}

/* Body font tightening for the new sharper Geist */
html body{
font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
}