/* ─────────────────────────────────────────────────────────────────────────────
   Service product page  (template-parts/service-page.php)
   Loaded only on WooCommerce products carrying _hhd_service_page meta.
   All selectors scoped under .hhd-sp to prevent any bleed into other pages.
───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hhd-sp-hero {
	position: relative;
	background-color: #0e1a22;
	background-size: cover;
	background-position: center center;
	padding: 80px 20px;
	text-align: center;
	overflow: hidden;
}

/* Dark tint overlay — only when a featured image is present */
.hhd-sp-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(14, 26, 34, 0.62);
	z-index: 1;
}

.hhd-sp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	margin: 0 auto;
}

/* Service icon — centered above the title */
.hhd-sp-hero__icon {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.hhd-sp-hero__icon svg {
	width: 64px;
	height: 64px;
	display: block;
	fill: #ffffff;
}

.hhd-sp-hero__title {
	font-size: clamp(26px, 5vw, 40px);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	margin: 0 0 14px;
}

.hhd-sp-hero__sub {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

/* ── SEO description (Product Description field) ───────────────────────────── */

.hhd-sp-seo {
	padding: 52px 20px;
	background: #edf1f8;
}

.hhd-sp-seo__inner {
	max-width: 760px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.75;
	color: #2c3d50;
}

.hhd-sp-seo__inner h2,
.hhd-sp-seo__inner h3 {
	color: #0e1a22;
	margin: 24px 0 10px;
}

.hhd-sp-seo__inner p {
	margin: 0 0 14px;
}

.hhd-sp-seo__inner p:last-child {
	margin-bottom: 0;
}

.hhd-sp-seo__inner ul,
.hhd-sp-seo__inner ol {
	padding-left: 22px;
	margin: 0 0 14px;
}

.hhd-sp-seo__inner li {
	margin-bottom: 6px;
}

/* ── Store grid ────────────────────────────────────────────────────────────── */

.hhd-sp-stores {
	padding: 52px 20px;
	background: #f5f7f9;
}

.hhd-sp-stores__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.hhd-sp-stores__count {
	font-size: 15px;
	color: #566070;
	margin: 0 0 28px;
	text-align: center;
}

.hhd-sp-stores__count strong {
	color: #0e1a22;
	font-weight: 600;
}

.hhd-sp-stores__count a {
	color: var(--theme-palette-color-1, #2563aa);
}

.hhd-sp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.hhd-sp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.hhd-sp-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Store cards ───────────────────────────────────────────────────────────── */

.hhd-sp-card {
	background: #ffffff;
	border: 1px solid #dde2e8;
	border-radius: 6px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hhd-sp-card:hover {
	border-color: #b5bec9;
	box-shadow: 0 2px 10px rgba(14, 26, 34, 0.07);
}

.hhd-sp-card__name {
	font-size: 15px;
	font-weight: 700;
	color: #0e1a22;
	line-height: 1.35;
	margin-bottom: 4px;
}

.hhd-sp-card__address {
	font-size: 13px;
	color: #566070;
	line-height: 1.55;
	white-space: pre-line;
}

.hhd-sp-card__phone {
	font-size: 13px;
	color: #566070;
	text-decoration: none;
	display: block;
}

.hhd-sp-card__phone:hover {
	color: #0e1a22;
	text-decoration: underline;
}

.hhd-sp-card__link {
	display: inline-block;
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--theme-palette-color-1, #2563aa);
	text-decoration: none;
}

.hhd-sp-card__link:hover {
	text-decoration: underline;
}

/* ── Store locator CTA ─────────────────────────────────────────────────────── */

.hhd-sp-cta {
	padding: 52px 20px;
	background: #00205c;
	text-align: center;
}

.hhd-sp-cta__inner {
	max-width: 560px;
	margin: 0 auto;
}

.hhd-sp-cta__text {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 20px;
}

.hhd-sp-cta__btn {
	display: inline-block;
	padding: 13px 28px;
	font-size: 15px;
	font-weight: 700;
	color: #00205c;
	background: #ffd100;
	border: 2px solid #ffd100;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hhd-sp-cta__btn:hover {
	background: #e6bc00;
	border-color: #e6bc00;
	color: #00205c;
}