/**
 * MOON teaser product page — Hot House red / black / white.
 */

.hh-moon {
	--hh-moon-red: #c8102e;
	--hh-moon-black: #0b0b0b;
	--hh-moon-ink: #1a1a1a;
	--hh-moon-muted: #555;
	--hh-moon-line: rgba(11, 11, 11, 0.1);
	--hh-moon-bg: #f7f5f3;
	background: var(--hh-moon-bg);
	color: var(--hh-moon-ink);
}

.hh-moon-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 1.15rem;
}

.hh-moon-hero {
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(200, 16, 46, 0.08), transparent 55%),
		linear-gradient(180deg, #fff 0%, #f7f5f3 100%);
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--hh-moon-line);
}

.hh-moon-hero__grid {
	display: grid;
	gap: 1.75rem;
	align-items: center;
}

@media (min-width: 900px) {
	.hh-moon-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 2.5rem;
	}
}

.hh-moon-hero__media {
	overflow: hidden;
	background: #111;
	aspect-ratio: 16 / 9;
}

.hh-moon-hero__media img,
.hh-moon-gallery__item img,
.hh-moon-host__media img,
.hh-moon-accessories img,
.hh-moon-close img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hh-moon-kicker {
	margin: 0 0 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hh-moon-red);
}

.hh-moon-hero__title {
	margin: 0 0 0.65rem;
	font-size: clamp(1.55rem, 3.4vw, 2.35rem);
	line-height: 1.18;
	font-weight: 800;
	color: var(--hh-moon-black);
}

.hh-moon-campaign {
	margin: 0 0 0.85rem;
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	font-weight: 700;
	color: var(--hh-moon-black);
}

.hh-moon-lead,
.hh-moon-drive {
	margin: 0 0 0.85rem;
	max-width: 38rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--hh-moon-muted);
}

.hh-moon-inquiry {
	margin: 0 0 1.15rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--hh-moon-black);
}

.hh-moon-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.hh-moon-ctas .hh-v2-btn {
	min-height: 44px;
}

.hh-moon-section {
	padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}

.hh-moon-section__head {
	margin-bottom: 1.5rem;
	max-width: 42rem;
}

.hh-moon-section__head h2 {
	margin: 0 0 0.55rem;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	line-height: 1.25;
}

.hh-moon-section__head p {
	margin: 0;
	color: var(--hh-moon-muted);
	line-height: 1.6;
}

.hh-moon-gallery__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.hh-moon-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hh-moon-gallery__item {
	margin: 0;
	background: #fff;
	border: 1px solid var(--hh-moon-line);
}

.hh-moon-gallery__item img {
	aspect-ratio: 4 / 3;
}

.hh-moon-gallery__item--product img {
	aspect-ratio: 4 / 3;
}

.hh-moon-gallery__item figcaption {
	padding: 0.65rem 0.85rem;
	font-size: 0.82rem;
	color: var(--hh-moon-muted);
}

.hh-moon-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.hh-moon-benefits__list {
		grid-template-columns: 1fr 1fr;
	}
}

.hh-moon-benefits__list li {
	padding: 1.15rem 1.2rem;
	background: #fff;
	border-inline-start: 3px solid var(--hh-moon-red);
}

.hh-moon-benefits__list strong {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 1.02rem;
}

.hh-moon-benefits__list span {
	color: var(--hh-moon-muted);
	line-height: 1.55;
	font-size: 0.95rem;
}

.hh-moon-host__grid,
.hh-moon-accessories__grid,
.hh-moon-close__grid {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 860px) {
	.hh-moon-host__grid,
	.hh-moon-accessories__grid,
	.hh-moon-close__grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.25rem;
	}
}

.hh-moon-host__media,
.hh-moon-accessories figure,
.hh-moon-close figure {
	margin: 0;
	overflow: hidden;
	background: #111;
	aspect-ratio: 4 / 3;
}

.hh-moon-accessories figcaption {
	margin-top: 0.55rem;
	font-size: 0.82rem;
	color: var(--hh-moon-muted);
}

.hh-moon-use__cols {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.hh-moon-use__cols {
		grid-template-columns: 1fr 1fr;
	}
}

.hh-moon-use__cols h3 {
	margin: 0 0 0.65rem;
	font-size: 1.05rem;
}

.hh-moon-use__cols ol {
	margin: 0;
	padding-inline-start: 1.2rem;
	color: var(--hh-moon-muted);
	line-height: 1.6;
}

.hh-moon-note {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid var(--hh-moon-line);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--hh-moon-muted);
}

.hh-moon-faq__item {
	background: #fff;
	border: 1px solid var(--hh-moon-line);
	margin-bottom: 0.55rem;
	padding: 0.85rem 1rem;
}

.hh-moon-faq__item summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.hh-moon-faq__item summary::-webkit-details-marker {
	display: none;
}

.hh-moon-faq__item p {
	margin: 0.65rem 0 0;
	color: var(--hh-moon-muted);
	line-height: 1.6;
}

.hh-moon-form .hh-v2-ops-form-wrap {
	max-width: 36rem;
	margin: 0;
	box-shadow: none;
}

.hh-moon-form .hh-v2-ops-form-wrap__aside {
	display: none !important;
}

.hh-moon-form .hh-v2-ops-form-wrap__head--mobile {
	display: none;
}

.hh-moon-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	border-top: 1px solid var(--hh-moon-line);
	backdrop-filter: blur(8px);
}

.hh-moon-sticky a {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
}

.hh-moon-sticky__primary {
	background: var(--hh-moon-red);
	color: #fff;
}

.hh-moon-sticky__wa {
	background: #fff;
	color: var(--hh-moon-black);
	border: 1px solid var(--hh-moon-line);
}

@media (min-width: 900px) {
	.hh-moon-sticky {
		display: none !important;
	}
}

/* 3.21.7 MOON launch */
.hh-moon-launch-price { margin: .8rem 0; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.hh-moon-launch-price__badge { display: inline-block; padding: .45rem .9rem; border-radius: 999px; background: #d67828; color: #fff; font-size: 1.05rem; }
.hh-moon-launch-price__badge strong { font-size: 1.2em; }
.hh-moon-launch-price__note { font-size: .82rem; opacity: .85; }
.hh-moon-btn--messenger { background: #0866ff !important; border-color: #0866ff !important; color: #fff !important; }
.hh-moon-specs__list { margin: 0; max-width: 760px; }
.hh-moon-specs__list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.hh-moon-specs__list dt { font-weight: 700; }
.hh-moon-specs__list dd { margin: 0; text-align: left; }
.hh-moon-acc__list { margin: .8rem 0 1rem; padding: 0 1.1rem 0 0; display: grid; gap: .35rem; }
.hh-moon-acc__list em { font-style: normal; font-size: .85rem; color: #8a5a2b; }
/* 2026-10-02 WhatsApp primary */
.hh-moon-btn--wa { background: #25d366 !important; border-color: #25d366 !important; color: #0b2e17 !important; }
body .hh-moon a.hh-v2-btn.hh-moon-btn--wa, body .hh-moon a.hh-v2-btn.hh-moon-btn--wa:visited, body .hh-moon a.hh-v2-btn.hh-moon-btn--wa:hover { background: #25d366 !important; background-image: none !important; border-color: #25d366 !important; color: #0b2e17 !important; }