/* ============================================================
   Henry's Bathrooms — theme stylesheet
   1.  Fonts
   2.  Tokens & reset
   3.  Typography
   4.  Layout primitives
   5.  Buttons & utilities
   6.  Site header / nav / mobile drawer
   7.  Search overlay
   8.  Hero
   9.  About block + ornament
  10.  Finance banner
  11.  Popular products
  12.  Installations carousel
  13.  Reviews carousel
  14.  Contact CTA
  15.  Footer
  16.  Page hero & generic page body
  17.  Product archive / single
  18.  Installation archive / single
  19.  Finance page / contact page
  20.  Search results / 404 / not-found
  21.  Editor content overrides
  22.  Swiper overrides
  23.  Responsive
============================================================ */

/* ----------------------------- 1. Fonts ----------------------------- */
@font-face {
	font-family: 'GFS Didot';
	src: url('../fonts/GFSDidot-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* ----------------------------- 2. Tokens & reset ----------------------------- */
:root {
	--c-pink:        #E5135B;
	--c-pink-dark:   #C20D4B;
	--c-navy:        #0F1F4A;
	--c-navy-dark:   #0A1638;
	--c-black:       #0A0A0A;
	--c-charcoal:    #1A1A1A;
	--c-grey-700:    #3D3D3D;
	--c-grey-500:    #6B7280;
	--c-grey-300:    #C7C9CF;
	--c-grey-100:    #F4F5F7;
	--c-white:       #FFFFFF;
	--c-cream:       #FAF8F4;

	--c-yellow:      #F5C518;
	--c-blue:        #1E9CD8;
	--c-green:       #76A14C;
	--c-star:        #E5135B;

	--c-text:        var(--c-charcoal);
	--c-muted:       var(--c-grey-500);
	--c-border:      #E6E6E6;

	--font-sans:     'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-display:  'GFS Didot', 'Playfair Display', Georgia, serif;

	--container:     1240px;
	--container-narrow: 880px;
	--gutter:        24px;

	--radius-sm: 6px;
	--radius:    12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
	--shadow:    0 8px 24px rgba(0,0,0,0.08);
	--shadow-lg: 0 20px 60px rgba(0,0,0,0.18);

	--header-h:  120px;

	--easing:    cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-pink); text-decoration: none; transition: color .15s var(--easing); }
a:hover, a:focus-visible { color: var(--c-pink-dark); }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--c-cream);
	clip: auto !important; clip-path: none; color: var(--c-charcoal);
	display: block; font-size: 0.875rem; font-weight: 700;
	height: auto; left: 5px; padding: 15px 23px 14px; text-decoration: none;
	top: 5px; width: auto; z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 5px; top: 5px; z-index: 100; background: var(--c-pink); color: #fff; padding: 10px 16px; border-radius: 8px; }

/* ----------------------------- 3. Typography ----------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 800;
	line-height: 1.15;
	color: var(--c-charcoal);
	margin: 0 0 .6em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
small { font-size: 0.875em; color: var(--c-muted); }

.eyebrow,
.section-heading__eyebrow {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-pink);
	margin: 0 0 .3em;
}

/* ----------------------------- 4. Layout primitives ----------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section-heading--center { text-align: center; max-width: 760px; margin-inline: auto; margin-block-end: 2rem; }
.section-heading__title { font-size: clamp(1.65rem, 3vw, 2.25rem); margin-bottom: 0.4em; }
.section-heading__intro { color: var(--c-grey-700); }

/* ----------------------------- 5. Buttons ----------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 14px 28px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all .2s var(--easing);
	line-height: 1;
}
.btn:focus-visible { outline: 3px solid var(--c-pink); outline-offset: 2px; }

.btn--pill        { border-radius: var(--radius-pill); padding-inline: 36px; }
.btn--white       { background: #fff; color: var(--c-charcoal); border-color: #fff; }
.btn--white:hover { background: #f4f4f4; color: var(--c-charcoal); }
.btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.9); }
.btn--ghost-white:hover { background: #fff; color: var(--c-charcoal); }
.btn--outline     { background: transparent; color: var(--c-charcoal); border-color: var(--c-charcoal); }
.btn--outline:hover { background: var(--c-charcoal); color: #fff; }
.btn--solid       { background: var(--c-charcoal); color: #fff; border-color: var(--c-charcoal); }
.btn--solid:hover { background: var(--c-pink); border-color: var(--c-pink); color: #fff; }
.btn--pink        { background: var(--c-pink); color: #fff; border-color: var(--c-pink); }
.btn--pink:hover  { background: var(--c-pink-dark); border-color: var(--c-pink-dark); color: #fff; }

/* Dot ornament (three colour dots used as section punctuation in the design) */
.dot-ornament {
	display: inline-flex;
	gap: 5px;
	margin: 6px 0 14px;
	justify-content: center;
}
.dot-ornament .dot {
	width: 14px; height: 14px;
	border-radius: 3px;
}
.section-heading--center .dot-ornament { display: flex; justify-content: center; }
.dot--pink   { background: var(--c-pink); }
.dot--yellow { background: var(--c-yellow); }
.dot--blue   { background: var(--c-blue); }

/* ----------------------------- 6. Header / nav ----------------------------- */
.site-header { position: relative; z-index: 50; }

.site-header__topbar {
	background: #0A0A0A;
	color: #fff;
	padding: 28px 0;
	display: flex;
	align-items: center;
}
.site-header__topbar-inner {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.site-header__brand {
	grid-column: 2;
	display: inline-flex;
	justify-content: center;
}
.site-header__brand img,
.site-header__brand .custom-logo-link img,
.site-header__logo-fallback {
	max-height: 150px;
	width: auto;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.site-header__utility {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}
.site-header__socials {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0; padding: 0;
}
.site-header__social a {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 32px; height: 32px;
	color: #fff;
	transition: color .15s var(--easing), transform .15s var(--easing);
}
.site-header__social a:hover { color: var(--c-pink); transform: translateY(-1px); }

.site-header__search-toggle,
.site-header__menu-toggle {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.site-header__search-toggle:hover { color: var(--c-pink); }
.site-header__menu-toggle { display: none; gap: 4px; flex-direction: column; }
.site-header__menu-toggle-bar {
	width: 24px; height: 2px;
	background: currentColor;
	display: block;
	transition: all .2s var(--easing);
}

.main-navigation {
	background: var(--c-pink);
}
.main-navigation__inner {
	display: flex;
	justify-content: center;
	align-items: center;
}
.main-navigation__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}
.main-navigation__list li { margin: 0; }
.main-navigation__list a {
	display: inline-block;
	padding: 14px 24px;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: background .15s var(--easing);
}
.main-navigation__list a:hover,
.main-navigation__list .current-menu-item > a,
.main-navigation__list .current_page_item > a {
	background: var(--c-pink-dark);
	color: #fff;
}
/* Dropdown submenus (depth: 2) */
.main-navigation__list .sub-menu {
	display: none;
	position: absolute;
	background: #fff;
	min-width: 200px;
	box-shadow: var(--shadow);
	padding: 4px 0;
	list-style: none;
	margin: 0;
	z-index: 60;
}
.main-navigation__list li { position: relative; }
.main-navigation__list li:hover > .sub-menu,
.main-navigation__list li:focus-within > .sub-menu { display: block; }
.main-navigation__list .sub-menu a { color: var(--c-charcoal); padding: 10px 16px; font-size: 0.8rem; letter-spacing: 0.06em; }
.main-navigation__list .sub-menu a:hover { background: var(--c-grey-100); }

.main-navigation__empty { color: #fff; padding: 14px 24px; margin: 0; font-style: italic; }

/* Mobile drawer */
.mobile-drawer {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 100;
	display: none;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer__inner {
	position: absolute;
	right: 0; top: 0;
	height: 100%;
	width: min(85vw, 360px);
	background: #fff;
	padding: 64px 28px 32px;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	animation: drawerIn .25s var(--easing);
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mobile-drawer__close {
	position: absolute;
	right: 16px; top: 12px;
	background: transparent; border: 0;
	font-size: 2rem; line-height: 1;
	color: var(--c-charcoal);
	width: 36px; height: 36px;
}
.mobile-drawer__list,
.mobile-drawer .menu {
	list-style: none; margin: 0; padding: 0;
}
.mobile-drawer__list a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-border);
	color: var(--c-charcoal);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.mobile-drawer__list a:hover { color: var(--c-pink); }
.mobile-drawer__list .sub-menu { list-style: none; padding-left: 12px; }
.mobile-drawer__list .sub-menu a { text-transform: none; letter-spacing: 0; font-weight: 500; padding: 10px 0; }
.mobile-drawer__contact {
	margin-top: 24px;
	display: flex; flex-direction: column;
	gap: 6px;
}
.mobile-drawer__contact a { color: var(--c-charcoal); font-weight: 600; }
.mobile-drawer__contact a:hover { color: var(--c-pink); }

/* ----------------------------- 7. Search overlay ----------------------------- */
.site-search {
	background: #fff;
	border-bottom: 1px solid var(--c-border);
	padding: 22px 0;
	position: relative;
}
.site-search[hidden] { display: none; }
.site-search .container { display: flex; align-items: center; gap: 12px; position: relative; }
.site-search .search-form { flex: 1; display: flex; align-items: center; gap: 8px; border: 2px solid var(--c-charcoal); border-radius: var(--radius-pill); padding: 4px 6px 4px 18px; }
.site-search .search-form__input {
	flex: 1; border: 0; outline: none;
	padding: 10px 0; font: inherit; background: transparent;
}
.site-search .search-form__submit {
	border: 0; background: var(--c-charcoal); color: #fff;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.site-search__close {
	background: transparent; border: 0;
	font-size: 2rem; line-height: 1;
	color: var(--c-charcoal);
	width: 40px; height: 40px;
}

/* ----------------------------- 8. Hero ----------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(420px, 60vh, 640px);
	background-color: var(--c-charcoal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Rotating + parallax background layer */
.hero__bg {
	position: absolute;
	inset: -80px 0; /* extra height so parallax translate doesn't reveal edges */
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}
.hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
}
.hero__bg-image.is-active { opacity: 1; }
.hero__bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.50) 100%);
	pointer-events: none;
}
/* Legacy single-image overlay (kept so old pages still render) */
.hero__overlay {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 100%);
	pointer-events: none;
}
.hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-block: 4rem;
}
.hero__eyebrow {
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	margin: 0 0 0.4em;
	opacity: 0.95;
}
.hero__heading {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(2rem, 5.5vw, 4rem);
	color: #fff;
	margin: 0 0 1.6rem;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ----------------------------- 9. About block ----------------------------- */
.about-block {
	background: var(--c-cream);
	padding: 64px 0;
	position: relative;
}
.about-block__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 0;
	align-items: stretch;
	background: transparent;
}
.about-block__media {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.about-block__image {
	width: 100%; height: 100%;
	object-fit: cover;
	min-height: 360px;
}
.about-block__card {
	background: #fff;
	padding: 56px 56px 48px;
	margin-left: -64px;
	margin-top: 40px;
	margin-bottom: 40px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.about-block__eyebrow {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--c-charcoal);
	margin: 0 0 .1em;
}
.about-block__heading { margin: 0 0 .4em; }
.about-block__body { color: var(--c-grey-700); margin-bottom: 1.4em; }

/* ----------------------------- 10. Finance banner ----------------------------- */
.finance-banner {
	background: #0d153d;
	color: #fff;
	padding: 28px 0 22px;
}
.finance-banner__link {
	display: block;
	width: 100%;
	line-height: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: opacity .2s var(--easing), transform .25s var(--easing);
}
.finance-banner__link:hover { opacity: .94; transform: translateY(-1px); }
.finance-banner__image {
	display: block;
	width: 100%;
	height: auto;
}
.finance-banner__disclaimer {
	margin: 16px auto 0;
	max-width: 980px;
	font-size: 0.78rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
	padding-inline: var(--gutter);
}
@media (max-width: 600px) {
	.finance-banner { padding: 22px 0 18px; }
	.finance-banner__disclaimer { font-size: 0.74rem; line-height: 1.45; }
}

/* Finance page */
.finance-page__body {
	color: var(--c-grey-700);
	font-size: 1rem;
	line-height: 1.7;
}
.finance-page__body :where(h2, h3) { color: var(--c-charcoal); margin-top: 1.5em; }
.finance-page__body ul, .finance-page__body ol { padding-left: 1.4em; }
.finance-page__cta {
	display: flex;
	justify-content: center;
	margin: 28px 0 36px;
}
.finance-page__extra {
	margin-top: 24px;
	color: var(--c-grey-700);
}
.finance-disclaimer {
	font-size: 0.85rem;
	color: var(--c-grey-500);
	margin-top: 40px;
	padding: 18px 22px;
	background: var(--c-grey-100);
	border-radius: var(--radius-sm);
	line-height: 1.55;
}

/* ----------------------------- 11. Popular Products ----------------------------- */
.popular-products { padding: 72px 0; background: #fff; }
.product-cards {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.product-card { position: relative; }
.product-card__link {
	display: block;
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	color: #fff;
	aspect-ratio: 4 / 3;
	transition: transform .25s var(--easing);
}
.product-card__link:hover { transform: translateY(-3px); color: #fff; }
.product-card__media { position: absolute; inset: 0; }
.product-card__image { width: 100%; height: 100%; object-fit: cover; }
.product-card__tint {
	position: absolute; inset: 0;
	mix-blend-mode: multiply;
	opacity: 0.55;
	pointer-events: none;
}
.product-card__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 6px rgba(0,0,0,0.3);
	padding: 0 1rem;
	text-align: center;
}
.popular-products__action { text-align: center; margin-top: 36px; }

/* ----------------------------- 12. Installations carousel ----------------------------- */
.installations { padding: 72px 0; background: var(--c-grey-100); }
.installations-swiper {
	position: relative;
	padding: 0 56px 36px;
}
.installation-card {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
	aspect-ratio: 1 / 1;
}
.installation-card__image { width: 100%; height: 100%; object-fit: cover; }

.carousel-prev, .carousel-next {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	background: #fff;
	border: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow);
	color: var(--c-charcoal);
	z-index: 10;
}
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-prev:hover, .carousel-next:hover { background: var(--c-pink); color: #fff; }

.swiper-pagination-bullet {
	background: var(--c-grey-300);
	opacity: 1;
	width: 10px; height: 10px;
	border-radius: 2px;
	transition: background .15s var(--easing);
}
.swiper-pagination-bullet-active { background: var(--c-pink); }

/* ----------------------------- 13. Reviews ----------------------------- */
.reviews { padding: 72px 0; background: #fff; }
.reviews-swiper { position: relative; padding: 0 56px 48px; }
/* Ensure all review cards stretch to the same height across the carousel */
.reviews-swiper .swiper-wrapper { align-items: stretch; }
.review-card {
	background: #fff;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	padding: 28px 28px 32px;
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	height: auto !important;
	align-self: stretch;
}
.stars { display: inline-flex; gap: 2px; color: var(--c-grey-300); }
.stars__star { color: var(--c-grey-300); display: inline-flex; }
.stars__star.is-filled { color: var(--c-star); }
.review-card__body { color: var(--c-grey-700); font-size: 0.95rem; flex: 1; }
.review-card__body p:last-child { margin-bottom: 0; }
.review-card__author { font-weight: 700; margin: 0; color: var(--c-charcoal); }

/* ----------------------------- 14. Contact CTA ----------------------------- */
.contact-cta {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--c-charcoal);
	padding: 96px 0;
}
.contact-cta::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.35);
}
.contact-cta .container { position: relative; }
.contact-cta__card {
	background: #fff;
	border-radius: var(--radius);
	padding: 48px 56px;
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	box-shadow: var(--shadow);
}
.contact-cta__heading {
	display: flex; flex-direction: column;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0 0 12px;
}
.contact-cta__sub { color: var(--c-grey-500); margin: 0 0 24px; }

/* ----------------------------- 15. Footer ----------------------------- */
.site-footer {
	background: #0A0A0A;
	color: #d6d6d6;
	font-size: 0.92rem;
}
.site-footer a { color: #f0f0f0; }
.site-footer a:hover { color: var(--c-pink); }
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1.1fr 1.3fr;
	gap: 36px;
	padding: 64px var(--gutter) 48px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand img { max-width: 200px; height: auto; }
.site-footer__heading {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 4px;
}
.site-footer__heading--hours { margin-top: 24px; }
.site-footer__menu, .site-footer__hours, .site-footer__socials {
	list-style: none;
	margin: 0; padding: 0;
}
.site-footer__menu li { padding: 3px 0; }
.site-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	color: #d6d6d6;
}
.site-footer__hours-note { color: #b3b3b3; font-size: 0.85rem; }
.site-footer__socials {
	display: flex; gap: 12px;
}
.site-footer__socials a {
	width: 34px; height: 34px;
	background: var(--c-pink);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px;
	transition: background .15s var(--easing), transform .15s var(--easing);
}
.site-footer__socials a:hover { background: var(--c-pink-dark); color: #fff; transform: translateY(-1px); }

.site-footer__address svg,
.site-footer__phone svg,
.site-footer__email svg {
	display: inline-block; vertical-align: middle;
	margin-right: 10px; color: var(--c-pink);
}
.site-footer__address p { margin: 0; display: inline; color: #d6d6d6; }
.site-footer__address span { display: inline-flex; gap: 10px; align-items: flex-start; }
.site-footer__address span > * { margin: 0; }
.site-footer__payments {
	list-style: none; padding: 0; margin: 8px 0 0;
	display: flex; gap: 8px; flex-wrap: wrap;
}
.site-footer__payments img { width: 38px; height: auto; background: #fff; border-radius: 4px; padding: 2px; }

.site-footer__extra { padding: 16px var(--gutter); border-top: 1px solid #1f1f1f; }

.site-footer__bottom {
	background: #050505;
	border-top: 1px solid #1f1f1f;
	padding: 18px 0;
	font-size: 0.82rem;
	color: #888;
}
.site-footer__bottom-inner {
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; gap: 14px;
}
.site-footer__legal {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 18px; flex-wrap: wrap;
}
.site-footer__legal a { color: #b8b8b8; }
.site-footer__copyright, .site-footer__credit { margin: 0; }
.site-footer__credit a { color: #b8b8b8; }

/* ----------------------------- 16. Page hero / body ----------------------------- */
.page-hero {
	background: var(--c-cream);
	padding: 64px 0 32px;
	text-align: center;
}
.page-hero__title { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 .4em; }
.page-hero__intro { color: var(--c-grey-700); max-width: 720px; margin: 1em auto; }
.page-hero__meta { color: var(--c-muted); }
.page-hero .dot-ornament { display: inline-flex; }

.page-body { padding: 56px 0 96px; }
.page-article__thumb { margin: 0 0 2em; border-radius: var(--radius); overflow: hidden; }
.page-article__content { color: var(--c-grey-700); }
.page-article__content :where(h2, h3, h4) { color: var(--c-charcoal); margin-top: 1.5em; }
.page-article__content a { color: var(--c-pink); text-decoration: underline; }
.page-article__content img { border-radius: var(--radius); }
.page-article__content blockquote {
	border-left: 4px solid var(--c-pink);
	padding: 4px 0 4px 20px;
	margin: 1.5em 0;
	font-style: italic;
	color: var(--c-charcoal);
}

/* ----------------------------- 17. Products hub + Product showcase ----------------------------- */

/* /products/ — the products hub */
.products-hub {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.products-hub__item { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--easing), box-shadow .2s var(--easing); }
.products-hub__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.products-hub__link { display: block; color: inherit; }
.products-hub__link:hover { color: inherit; }
.products-hub__media { aspect-ratio: 4/3; overflow: hidden; background: var(--c-grey-100); }
.products-hub__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--easing); }
.products-hub__item:hover .products-hub__media img { transform: scale(1.04); }
.products-hub__body { padding: 22px 22px 24px; }
.products-hub__name { font-size: 1.2rem; margin: 0 0 .4em; color: var(--c-charcoal); }
.products-hub__desc { color: var(--c-grey-500); font-size: 0.92rem; margin: 0 0 .8em; }
.products-hub__cta { color: var(--c-pink); font-weight: 700; font-size: 0.9rem; }

/* Single Product page: gallery */
.product-gallery-section { padding-block: 24px 48px; }
.product-gallery-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.product-gallery-grid__item {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--c-grey-100);
}
.product-gallery-grid__link { display: block; }
.product-gallery-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s var(--easing);
}
.product-gallery-grid__link:hover .product-gallery-grid__image { transform: scale(1.04); }
.product-gallery-grid__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	object-fit: cover;
}
.product-gallery-grid__item--video { background: #000; aspect-ratio: auto; }
.product-gallery-grid__caption {
	font-size: 0.85rem;
	color: var(--c-muted);
	padding: 8px 12px;
	margin: 0;
	background: #fff;
}

/* Single Product page: YouTube/Vimeo videos */
.product-videos { padding-block: 32px 48px; }
.product-videos__list {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 24px;
}
.product-videos__item { margin: 0; }
.product-videos__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius);
	overflow: hidden;
}
.product-videos__embed iframe,
.product-videos__embed video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}
.product-videos__caption {
	margin: 8px 0 0;
	color: var(--c-grey-500);
	font-size: 0.9rem;
}

/* Single Product page: contact form section */
.product-form { padding: 64px 0 96px; background: var(--c-cream); }
.product-form .section-heading--center { margin-bottom: 28px; }
.product-form__form { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }

/* Legacy product styles (now unused but harmless) — keep selectors so any
   stray references in the site don't visually break. */
.product-filter { margin-bottom: 32px; }
.product-filter__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.product-filter__item a {
	display: inline-block;
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	background: var(--c-grey-100);
	color: var(--c-charcoal);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.product-filter__item a:hover,
.product-filter__item.is-active a { background: var(--c-pink); color: #fff; }

.product-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.product-tile { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--easing), box-shadow .2s var(--easing); }
.product-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-tile__link { display: block; color: inherit; }
.product-tile__media { aspect-ratio: 4/3; overflow: hidden; background: var(--c-grey-100); }
.product-tile__image { width: 100%; height: 100%; object-fit: cover; }
.product-tile__body { padding: 18px 18px 22px; }
.product-tile__title { font-size: 1.05rem; margin: 0 0 4px; color: var(--c-charcoal); }
.product-tile__excerpt { color: var(--c-grey-500); font-size: 0.88rem; margin: 0 0 8px; }
.product-tile__price { font-weight: 700; color: var(--c-pink); margin: 0; }

.single-product__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: flex-start;
}
.single-product__gallery img { border-radius: var(--radius); }
.product-gallery { border-radius: var(--radius); overflow: hidden; }
.product-gallery .swiper-slide img { width: 100%; height: auto; }
.single-product__crumbs { font-size: 0.85rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 .5em; }
.single-product__crumbs a { color: var(--c-pink); }
.single-product__title { font-size: clamp(1.75rem, 3vw, 2.3rem); margin: 0 0 .4em; }
.single-product__price { font-size: 1.3rem; font-weight: 700; color: var(--c-pink); margin: 0 0 1em; }
.single-product__short { color: var(--c-grey-700); }
.single-product__meta { margin: 4px 0; font-size: 0.92rem; color: var(--c-grey-700); }
.single-product__datasheet { display: inline-block; margin-top: 14px; font-size: 0.9rem; }
.single-product__content { margin-top: 48px; max-width: 720px; }
.single-product__specs { margin-top: 48px; }
.spec-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.spec-table th, .spec-table td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.spec-table th { background: var(--c-grey-100); width: 200px; }

/* ----------------------------- 18. Installation archive / single ----------------------------- */

/* /recent-installations/ unified gallery */
.installations-gallery-section { padding-block: 24px 64px; }
.installations-gallery {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.installations-gallery__item {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--c-grey-100);
	aspect-ratio: 1 / 1;
}
.installations-gallery__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.installations-gallery__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--easing);
}
.installations-gallery__link:hover .installations-gallery__media { transform: scale(1.04); }
.installations-gallery__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.installations-gallery__play svg {
	width: 56px; height: 56px;
	color: #fff;
	background: rgba(0,0,0,0.55);
	border-radius: 50%;
	padding: 12px;
	transition: transform .25s var(--easing), background .25s var(--easing);
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.installations-gallery__link:hover .installations-gallery__play svg {
	background: var(--c-pink);
	transform: scale(1.06);
}
.installations-gallery__item--mp4 .installations-gallery__media,
.installations-gallery__item--video .installations-gallery__media { background: #000; }


.installation-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.installation-tile { display: block; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit; }
.installation-tile:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow); }
.installation-tile__media { aspect-ratio: 4/3; overflow: hidden; background: var(--c-grey-100); }
.installation-tile__image { width: 100%; height: 100%; object-fit: cover; }
.installation-tile__body { padding: 18px 18px 22px; }
.installation-tile__title { font-size: 1.05rem; margin: 0 0 4px; color: var(--c-charcoal); }
.installation-tile__meta { color: var(--c-muted); font-size: 0.85rem; margin: 0; }

.single-installation__hero { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.single-installation__hero img { width: 100%; height: auto; }
.single-installation__content { color: var(--c-grey-700); margin-bottom: 32px; }
.single-installation__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 32px 0;
}
.single-installation__gallery figure { margin: 0; }
.single-installation__gallery img { border-radius: var(--radius-sm); aspect-ratio: 1/1; object-fit: cover; }
.single-installation__quote {
	background: var(--c-cream);
	padding: 28px 32px;
	border-left: 4px solid var(--c-pink);
	border-radius: var(--radius-sm);
	margin: 32px 0;
}
.single-installation__quote p { font-size: 1.1rem; color: var(--c-charcoal); margin: 0 0 .5em; }
.single-installation__quote cite { font-style: normal; font-weight: 700; color: var(--c-pink); }

/* ----------------------------- 19. Contact page ----------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.contact-grid__form { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }
.contact-grid__intro { margin-bottom: 1em; color: var(--c-grey-700); }
.contact-grid__details { background: var(--c-cream); border-radius: var(--radius); padding: 32px; }
.contact-grid__heading { font-size: 1.05rem; margin: 0 0 .6em; }
.contact-grid__heading:not(:first-child) { margin-top: 1.4em; }
.contact-grid__details p { display: flex; align-items: flex-start; gap: 10px; }
.contact-grid__details svg { color: var(--c-pink); flex-shrink: 0; margin-top: 4px; }
.contact-grid__details p > p { margin: 0; }
.contact-grid__hours { list-style: none; padding: 0; margin: 0; }
.contact-grid__hours li {
	display: flex; justify-content: space-between;
	border-bottom: 1px solid var(--c-border);
	padding: 8px 0;
}
.contact-grid__hours li:last-child { border-bottom: 0; }
.contact-map { margin-top: 48px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }

/* Formidable Forms baseline tweaks */
.with_frm_style .frm_form_field input[type="text"],
.with_frm_style .frm_form_field input[type="email"],
.with_frm_style .frm_form_field input[type="tel"],
.with_frm_style .frm_form_field textarea,
.with_frm_style .frm_form_field select {
	border: 1px solid var(--c-border) !important;
	border-radius: var(--radius-sm) !important;
	padding: 12px 14px !important;
	font-family: var(--font-sans) !important;
}
.with_frm_style .frm_button_submit,
.with_frm_style input[type="submit"] {
	background: var(--c-charcoal) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	padding: 14px 36px !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.02em !important;
	cursor: pointer;
	transition: background .2s var(--easing);
}
.with_frm_style .frm_button_submit:hover,
.with_frm_style input[type="submit"]:hover { background: var(--c-pink) !important; }

/* ----------------------------- 20. Search results / 404 ----------------------------- */
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results__item { padding: 18px 0; border-bottom: 1px solid var(--c-border); }
.search-results__item h2 { font-size: 1.2rem; margin: 0 0 .2em; }
.search-results__type { color: var(--c-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 .4em; }
.not-found { text-align: center; }
.not-found__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.empty-message { text-align: center; padding: 32px; color: var(--c-muted); }

/* Post list (default archive) */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list__item { padding: 24px 0; border-bottom: 1px solid var(--c-border); }
.post-list__item h2 { font-size: 1.4rem; margin: 0 0 .2em; }
.post-list__item h2 a { color: var(--c-charcoal); }
.post-list__item h2 a:hover { color: var(--c-pink); }
.post-list__meta { color: var(--c-muted); font-size: 0.85rem; margin: 0 0 .4em; }

/* ----------------------------- 21. Editor content overrides ----------------------------- */
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { color: var(--c-muted); font-size: 0.85rem; margin: .4em 0 0; text-align: center; }

/* ----------------------------- 22. Swiper overrides ----------------------------- */
.swiper { width: 100%; }
.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; }
.swiper-pagination { position: relative; margin-top: 16px; bottom: auto !important; }

/* ----------------------------- 23. Sticky nav, motion, page loader ----------------------------- */

/* Sticky pink nav once it scrolls to the top of the viewport (desktop) */
.main-navigation.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	animation: navSlideDown 0.28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes navSlideDown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Scroll-triggered reveal: fade up small */
.anim-fade-up-small {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity .6s cubic-bezier(.4, 0, .2, 1) var(--anim-delay, 0s),
		transform .6s cubic-bezier(.4, 0, .2, 1) var(--anim-delay, 0s);
	will-change: opacity, transform;
}
.anim-fade-up-small.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
	.anim-fade-up-small {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.site-header__topbar-bg { transform: none !important; }
	.site-header__topbar-bg-image { transition: none; }
	.page-loader__bar { animation: none; }
}

/* Page loader */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #0A0A0A;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity .55s ease, visibility 0s linear .55s;
}
.page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.page-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 24px;
}
.page-loader__logo {
	max-width: 220px;
	width: 70vw;
	height: auto;
	display: block;
	animation: loaderPulse 1.6s ease-in-out infinite;
}
.page-loader__bar {
	position: relative;
	width: 120px;
	height: 3px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	overflow: hidden;
}
.page-loader__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--c-pink), transparent);
	transform: translateX(-100%);
	animation: loaderBar 1.2s linear infinite;
}
@keyframes loaderBar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}
@keyframes loaderPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(0.96); opacity: 0.88; }
}

/* ----------------------------- 24. Responsive ----------------------------- */
@media (max-width: 1024px) {
	.about-block__grid { grid-template-columns: 1fr; }
	.about-block__card { margin-left: 0; margin-top: -40px; }
	.single-product__grid { grid-template-columns: 1fr; gap: 32px; }
	.contact-grid { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
	/* Mobile header: the whole header is sticky, kept compact. */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 60;
	}
	.site-header__topbar {
		padding: 14px 0;
		min-height: 0;
	}
	.site-header__topbar-inner { grid-template-columns: 1fr auto; }
	.site-header__brand { grid-column: 1; justify-content: flex-start; }
	.site-header__brand img,
	.site-header__brand .custom-logo-link img,
	.site-header__logo-fallback { max-height: 64px; }
	.site-header__utility { grid-column: 2; gap: 10px; }
	.site-header__socials { display: none; }
	.site-header__menu-toggle { display: inline-flex; }
	.main-navigation { display: none; }
	/* Disable the desktop-only sticky pink-nav state */
	.main-navigation.is-stuck { position: static; box-shadow: none; animation: none; }

	.product-cards { grid-template-columns: 1fr; }
	.product-card__link { aspect-ratio: 16/9; }

	.installations-swiper { padding: 0 0 36px; }
	.reviews-swiper       { padding: 0 0 48px; }
	.carousel-prev, .carousel-next { display: none; }

	.contact-cta { padding: 64px 0; }
	.contact-cta__card { padding: 32px 24px; }
}

@media (max-width: 600px) {
	:root { --gutter: 18px; --header-h: 96px; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter); }
	.site-footer__bottom-inner { justify-content: center; text-align: center; }
	.hero { min-height: 380px; }
	.hero__inner { padding-block: 3rem; }
	.about-block { padding: 40px 0; }
	.about-block__card { padding: 32px 24px; }
	.popular-products, .installations, .reviews { padding: 48px 0; }
	.product-filter__list { justify-content: flex-start; }
}

@media print {
	.site-header, .site-footer, .mobile-drawer, .site-search, .contact-cta { display: none !important; }
	body { color: #000; background: #fff; }
}