/*
Theme Name: Home Sauna
Theme URI: https://www.amazon.com/stores/HomeSauna/page/72C23931-7526-496E-A63F-7750746E261B
Description: Product landing theme for the Home Sauna Removable Sauna Steam Curtain. Child theme of Royal Elementor Kit.
Author: Home Sauna
Template: royal-elementor-kit
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homesauna-child
Tags: one-column, custom-colors, custom-logo, custom-menu, full-width-template
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--hs-ink:        #0C2630;
	--hs-deep:       #10394A;
	--hs-teal:       #1A6C80;
	--hs-teal-soft:  #2E8A9E;
	--hs-steam:      #C9E3E8;
	--hs-mist:       #E9F2F4;
	--hs-cream:      #FBF8F3;
	--hs-white:      #FFFFFF;

	--hs-amazon:     #FF9900;
	--hs-amazon-dk:  #E17F00;
	--hs-amber:      #D98324;

	--hs-body:       #3D5560;
	--hs-muted:      #6B838D;
	--hs-line:       #DCE7EA;

	--hs-star:       #F5A623;

	--hs-font-head:  "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--hs-font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--hs-max:        1180px;
	--hs-gutter:     clamp(20px, 5vw, 48px);

	--hs-r-sm:       10px;
	--hs-r-md:       18px;
	--hs-r-lg:       28px;
	--hs-r-pill:     999px;

	--hs-shadow-sm:  0 2px 8px rgba(12, 38, 48, .06);
	--hs-shadow-md:  0 12px 32px -12px rgba(12, 38, 48, .18);
	--hs-shadow-lg:  0 30px 70px -30px rgba(12, 38, 48, .35);

	--hs-ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x lives on html, not body: setting it on body turns body into a
   scroll container, which breaks IntersectionObserver and sticky positioning. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body.hs-page {
	margin: 0;
	background: var(--hs-white);
	color: var(--hs-body);
	font-family: var(--hs-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.hs-nav-open { overflow: hidden; }

.hs-page img { max-width: 100%; height: auto; display: block; }

.hs-page h1, .hs-page h2, .hs-page h3, .hs-page h4 {
	font-family: var(--hs-font-head);
	color: var(--hs-ink);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	font-weight: 600;
}

.hs-page h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
.hs-page h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.hs-page h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

.hs-page p { margin: 0 0 1.1em; }
.hs-page p:last-child { margin-bottom: 0; }

.hs-page a { color: var(--hs-teal); text-decoration: none; transition: color .2s var(--hs-ease); }
.hs-page a:hover { color: var(--hs-deep); }

.hs-page :focus-visible {
	outline: 3px solid var(--hs-teal-soft);
	outline-offset: 3px;
	border-radius: 4px;
}

.hs-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.hs-wrap {
	width: 100%;
	max-width: var(--hs-max);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-section { padding-block: clamp(64px, 9vw, 118px); position: relative; }
.hs-section--tight { padding-block: clamp(48px, 6vw, 80px); }
.hs-section--mist  { background: var(--hs-mist); }
.hs-section--cream { background: var(--hs-cream); }
.hs-section--ink   { background: var(--hs-ink); color: var(--hs-steam); }
.hs-section--ink h2, .hs-section--ink h3 { color: var(--hs-white); }

.hs-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.hs-head--left { margin-inline: 0; text-align: left; }

.hs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hs-teal);
	margin-bottom: 1em;
}
.hs-eyebrow::before {
	content: "";
	width: 26px; height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.hs-section--ink .hs-eyebrow { color: var(--hs-amazon); }

.hs-lede { font-size: clamp(1.03rem, 1.4vw, 1.16rem); color: var(--hs-muted); }
.hs-section--ink .hs-lede { color: var(--hs-steam); opacity: .82; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.hs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: var(--hs-r-pill);
	font-family: var(--hs-font-body);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform .2s var(--hs-ease), box-shadow .2s var(--hs-ease),
	            background-color .2s var(--hs-ease), color .2s var(--hs-ease);
}
.hs-btn:hover { transform: translateY(-2px); }
.hs-btn:active { transform: translateY(0); }

.hs-btn--amazon {
	background: var(--hs-amazon);
	color: var(--hs-ink);
	box-shadow: 0 10px 26px -10px rgba(255, 153, 0, .8);
}
.hs-btn--amazon:hover { background: var(--hs-amazon-dk); color: var(--hs-ink); box-shadow: 0 16px 34px -12px rgba(255, 153, 0, .95); }

.hs-btn--ghost {
	background: transparent;
	border-color: var(--hs-line);
	color: var(--hs-ink);
}
.hs-btn--ghost:hover { border-color: var(--hs-teal); color: var(--hs-teal); background: var(--hs-white); }

.hs-section--ink .hs-btn--ghost { border-color: rgba(255,255,255,.28); color: var(--hs-white); }
.hs-section--ink .hs-btn--ghost:hover { border-color: var(--hs-white); background: rgba(255,255,255,.08); color: var(--hs-white); }

.hs-btn--sm { padding: 11px 22px; font-size: .92rem; }
.hs-btn--block { width: 100%; }

.hs-btn__cart { flex: none; }

.hs-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.hs-btnnote {
	display: block;
	margin-top: 14px;
	font-size: .82rem;
	color: var(--hs-muted);
}
.hs-section--ink .hs-btnnote { color: rgba(201, 227, 232, .7); }

/* ==========================================================================
   5. Header
   ========================================================================== */

.hs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s var(--hs-ease), box-shadow .25s var(--hs-ease);
}
.hs-header.is-stuck { border-bottom-color: var(--hs-line); box-shadow: var(--hs-shadow-sm); }

.hs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}

.hs-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--hs-font-head);
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--hs-ink);
	line-height: 1.1;
}
.hs-brand:hover { color: var(--hs-teal); }
.hs-brand img { max-height: 44px; width: auto; }
.hs-brand__mark { flex: none; color: var(--hs-teal); }

.hs-nav { display: flex; align-items: center; gap: 4px; }
.hs-nav a,
.hs-nav .menu-item > a {
	display: block;
	padding: 9px 13px;
	border-radius: var(--hs-r-pill);
	font-size: .93rem;
	font-weight: 550;
	color: var(--hs-ink);
	white-space: nowrap;
}
.hs-nav a:hover { background: var(--hs-mist); color: var(--hs-teal); }

.hs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }

/* The in-nav buy button exists for the mobile drawer only. */
.hs-nav > .hs-btn { display: none; }

.hs-header__cta { display: flex; align-items: center; gap: 10px; }

.hs-burger {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--hs-line);
	border-radius: 12px;
	background: var(--hs-white);
	cursor: pointer;
	position: relative;
}
.hs-burger span {
	position: absolute;
	left: 12px;
	width: 18px; height: 2px;
	background: var(--hs-ink);
	border-radius: 2px;
	transition: transform .25s var(--hs-ease), opacity .2s var(--hs-ease);
}
.hs-burger span:nth-child(1) { top: 15px; }
.hs-burger span:nth-child(2) { top: 21px; }
.hs-burger span:nth-child(3) { top: 27px; }
.hs-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hs-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hs-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hs-ticker {
	background: var(--hs-ink);
	color: var(--hs-steam);
	font-size: .82rem;
	letter-spacing: .02em;
}
.hs-ticker__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 28px;
	padding-block: 10px;
}
.hs-ticker__item { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.hs-ticker__item svg { flex: none; color: var(--hs-amazon); }

.hs-hero {
	position: relative;
	padding-block: clamp(52px, 7vw, 96px) clamp(60px, 8vw, 104px);
	background:
		radial-gradient(900px 520px at 78% 8%, rgba(201, 227, 232, .55), transparent 62%),
		radial-gradient(700px 420px at 4% 92%, rgba(251, 248, 243, .95), transparent 60%),
		var(--hs-white);
	overflow: hidden;
}

.hs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(36px, 5vw, 68px);
	align-items: center;
}

.hs-hero h1 { margin-bottom: .55em; }
.hs-hero h1 em {
	font-style: normal;
	color: var(--hs-teal);
	background: linear-gradient(transparent 62%, rgba(201, 227, 232, .85) 62%);
}

.hs-hero__sub {
	font-size: clamp(1.04rem, 1.5vw, 1.2rem);
	color: var(--hs-muted);
	max-width: 52ch;
	margin-bottom: 1.8em;
}

.hs-rating {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 8px 16px 8px 12px;
	margin-bottom: 22px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-pill);
	box-shadow: var(--hs-shadow-sm);
	font-size: .88rem;
	color: var(--hs-ink);
}
.hs-stars { display: inline-flex; gap: 2px; color: var(--hs-star); }
.hs-stars svg { flex: none; }
.hs-rating strong { font-weight: 700; }
.hs-rating span { color: var(--hs-muted); }

.hs-hero__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
	gap: 14px;
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--hs-line);
}
.hs-hero__spec { display: flex; flex-direction: column; gap: 2px; }
.hs-hero__spec dt {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hs-muted);
}
.hs-hero__spec dd {
	margin: 0;
	font-family: var(--hs-font-head);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-hero__media { position: relative; }

/* The listing photo is a near-white bathroom, so the frame carries a tint and
   an inner edge — without them the hero reads as an empty box. The source is
   800x640 landscape, so a square frame crops it without upscaling. */
.hs-hero__frame {
	position: relative;
	border-radius: var(--hs-r-lg);
	overflow: hidden;
	background: linear-gradient(160deg, var(--hs-steam), var(--hs-mist) 55%, var(--hs-cream));
	box-shadow: var(--hs-shadow-lg);
	aspect-ratio: 1 / 1;
}
.hs-hero__frame img {
	width: 100%; height: 100%;
	object-fit: cover;
	/* Pull the crop left: the right third of the photo is bare wall. */
	object-position: 24% center;
}
.hs-hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(12, 38, 48, .07),
	            inset 0 -70px 90px -60px rgba(12, 38, 48, .22);
}

.hs-hero__badge {
	position: absolute;
	left: -14px;
	bottom: 26px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px;
	background: var(--hs-white);
	border-radius: var(--hs-r-md);
	box-shadow: var(--hs-shadow-md);
	max-width: 258px;
}
.hs-hero__badge svg { flex: none; color: var(--hs-teal); }
.hs-hero__badge b { display: block; color: var(--hs-ink); font-size: .95rem; }
.hs-hero__badge small { color: var(--hs-muted); font-size: .8rem; line-height: 1.4; }

/* ==========================================================================
   7. Cost strip
   ========================================================================== */

.hs-costs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}
.hs-cost {
	position: relative;
	padding: 28px 26px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	transition: transform .25s var(--hs-ease), box-shadow .25s var(--hs-ease);
}
.hs-cost:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-md); }
.hs-cost--win { border-color: var(--hs-teal); box-shadow: 0 0 0 4px rgba(26, 108, 128, .1); }
.hs-cost__tag {
	position: absolute;
	top: -12px; left: 26px;
	padding: 4px 13px;
	background: var(--hs-teal);
	color: var(--hs-white);
	border-radius: var(--hs-r-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hs-cost__price {
	font-family: var(--hs-font-head);
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--hs-teal);
	letter-spacing: .02em;
	line-height: 1;
	margin-bottom: 10px;
}
.hs-cost--mid .hs-cost__price, .hs-cost--max .hs-cost__price { color: var(--hs-muted); }
.hs-cost h3 { font-size: 1.1rem; margin-bottom: .35em; }
.hs-cost p { font-size: .92rem; color: var(--hs-muted); margin: 0; }

/* ==========================================================================
   8. Benefit cards
   ========================================================================== */

.hs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	gap: 20px;
}

.hs-card {
	padding: 32px 30px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	transition: transform .25s var(--hs-ease), box-shadow .25s var(--hs-ease), border-color .25s var(--hs-ease);
}
.hs-card:hover { transform: translateY(-5px); box-shadow: var(--hs-shadow-md); border-color: var(--hs-steam); }
.hs-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 20px;
	background: var(--hs-mist);
	color: var(--hs-teal);
	border-radius: 15px;
}
.hs-card h3 { margin-bottom: .5em; }
.hs-card p { font-size: .95rem; margin: 0; }

/* ==========================================================================
   9. Steps
   ========================================================================== */

.hs-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
	counter-reset: hsstep;
}
.hs-step {
	position: relative;
	padding: 34px 28px 30px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--hs-r-md);
}
.hs-step__num {
	counter-increment: hsstep;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	margin-bottom: 18px;
	background: var(--hs-amazon);
	color: var(--hs-ink);
	border-radius: 50%;
	font-family: var(--hs-font-head);
	font-size: 1.1rem;
	font-weight: 700;
}
.hs-step__num::before { content: counter(hsstep); }
.hs-step h3 { margin-bottom: .45em; }
.hs-step p { font-size: .95rem; color: var(--hs-steam); opacity: .8; margin: 0; }

/* ==========================================================================
   10. Comparison table
   ========================================================================== */

.hs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--hs-r-md); }

.hs-table {
	width: 100%;
	min-width: 660px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--hs-white);
	font-size: .95rem;
}
.hs-table th, .hs-table td {
	padding: 17px 20px;
	text-align: left;
	border-bottom: 1px solid var(--hs-line);
	vertical-align: top;
}
.hs-table thead th {
	background: var(--hs-ink);
	color: var(--hs-white);
	font-family: var(--hs-font-head);
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
}
.hs-table thead th:first-child { border-top-left-radius: var(--hs-r-md); }
.hs-table thead th:last-child  { border-top-right-radius: var(--hs-r-md); }
.hs-table tbody th {
	font-family: var(--hs-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hs-muted);
	white-space: nowrap;
	width: 130px;
}
.hs-table td:first-of-type { background: rgba(233, 242, 244, .55); color: var(--hs-ink); font-weight: 550; }
.hs-table tbody tr:last-child th, .hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-table__win {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--hs-teal);
	font-weight: 650;
}

/* ==========================================================================
   11. Gallery
   ========================================================================== */

/* Six images, three across — the listing shots are infographics, so they get
   contained rather than cropped or the baked-in text loses its edges. */
.hs-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.hs-gallery__item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	overflow: hidden;
	background: var(--hs-cream);
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
	transition: transform .25s var(--hs-ease), box-shadow .25s var(--hs-ease), border-color .25s var(--hs-ease);
}
.hs-gallery__item:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-md); border-color: var(--hs-steam); }
.hs-gallery__item img { width: 100%; height: 100%; object-fit: contain; }

.hs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 38, 48, .92);
	backdrop-filter: blur(6px);
}
.hs-lightbox.is-open { display: flex; }
.hs-lightbox img {
	max-width: min(920px, 100%);
	max-height: 86vh;
	width: auto;
	border-radius: var(--hs-r-sm);
	box-shadow: var(--hs-shadow-lg);
}
.hs-lightbox__close {
	position: absolute;
	top: 20px; right: 22px;
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--hs-white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s var(--hs-ease);
}
.hs-lightbox__close:hover { background: rgba(255, 255, 255, .28); }

/* ==========================================================================
   12. Specs
   ========================================================================== */

.hs-spec-split {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.hs-specs {
	margin: 0;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	overflow: hidden;
}
.hs-specs__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	align-items: baseline;
	padding: 15px 24px;
	border-bottom: 1px solid var(--hs-line);
}
.hs-specs__row:last-child { border-bottom: 0; }
.hs-specs__row:nth-child(odd) { background: rgba(233, 242, 244, .4); }
.hs-specs dt {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hs-muted);
}
.hs-specs dd { margin: 0; color: var(--hs-ink); font-weight: 550; text-align: right; }

.hs-spec-img {
	border-radius: var(--hs-r-lg);
	overflow: hidden;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	box-shadow: var(--hs-shadow-md);
}
.hs-spec-img img { width: 100%; height: auto; }

/* ==========================================================================
   13. Reviews
   ========================================================================== */

.hs-reviews {
	display: grid;
	grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 56px);
	align-items: start;
}

.hs-score {
	padding: 30px 28px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	position: sticky;
	top: 100px;
}
.hs-score__num {
	font-family: var(--hs-font-head);
	font-size: 3.3rem;
	font-weight: 600;
	line-height: 1;
	color: var(--hs-ink);
}
.hs-score__meta { font-size: .87rem; color: var(--hs-muted); margin: 8px 0 20px; }
.hs-bars { display: grid; gap: 7px; }
.hs-bar { display: grid; grid-template-columns: 46px 1fr 38px; align-items: center; gap: 10px; font-size: .8rem; color: var(--hs-muted); }
.hs-bar__track { display: block; height: 8px; background: var(--hs-mist); border-radius: var(--hs-r-pill); overflow: hidden; }
.hs-bar__fill {
	display: block;
	height: 100%;
	background: var(--hs-star);
	border-radius: var(--hs-r-pill);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .9s var(--hs-ease);
}
.hs-score.is-in .hs-bar__fill { transform: scaleX(1); }
/* Without JS the reveal class never lands, so show the bars outright. */
html:not(.hs-js) .hs-bar__fill { transform: scaleX(1); }
.hs-bar__pct { text-align: right; font-variant-numeric: tabular-nums; }

.hs-quotes { display: grid; gap: 18px; }
.hs-quote {
	padding: 28px 30px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
}
.hs-quote__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 14px;
}
.hs-quote__who { font-weight: 650; color: var(--hs-ink); }
.hs-quote__verified {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: .76rem;
	font-weight: 650;
	color: var(--hs-teal);
	background: var(--hs-mist);
	padding: 3px 10px;
	border-radius: var(--hs-r-pill);
}
.hs-quote h3 { font-size: 1.08rem; margin-bottom: .4em; }
.hs-quote p { font-size: .95rem; margin: 0 0 .8em; }
.hs-quote__date { font-size: .8rem; color: var(--hs-muted); margin: 0; }

.hs-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hs-tag {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 7px 14px;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-pill);
	font-size: .84rem;
	color: var(--hs-ink);
}
.hs-tag b { color: var(--hs-muted); font-weight: 600; }

.hs-notice {
	display: flex;
	gap: 14px;
	padding: 20px 24px;
	margin-top: 26px;
	background: var(--hs-cream);
	border: 1px solid var(--hs-line);
	border-left: 4px solid var(--hs-amber);
	border-radius: var(--hs-r-sm);
	font-size: .9rem;
}
.hs-notice svg { flex: none; color: var(--hs-amber); margin-top: 2px; }
.hs-notice p { margin: 0; }
.hs-notice strong { color: var(--hs-ink); }

/* ==========================================================================
   14. Brand story
   ========================================================================== */

.hs-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
}
.hs-values { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.hs-values li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.hs-values svg { flex: none; color: var(--hs-teal); margin-top: 4px; }
.hs-values b { color: var(--hs-ink); }
.hs-section--ink .hs-values svg { color: var(--hs-amazon); }
.hs-section--ink .hs-values b { color: var(--hs-white); }

/* ==========================================================================
   15. FAQ
   ========================================================================== */

.hs-faq { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }
.hs-faq__item {
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-sm);
	overflow: hidden;
	transition: border-color .2s var(--hs-ease), box-shadow .2s var(--hs-ease);
}
.hs-faq__item.is-open { border-color: var(--hs-steam); box-shadow: var(--hs-shadow-sm); }
.hs-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	background: none;
	font-family: var(--hs-font-head);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--hs-ink);
	text-align: left;
	cursor: pointer;
}
.hs-faq__q:hover { color: var(--hs-teal); }
.hs-faq__sign {
	flex: none;
	position: relative;
	width: 20px; height: 20px;
}
.hs-faq__sign::before, .hs-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--hs-teal);
	border-radius: 2px;
	transition: transform .25s var(--hs-ease), opacity .2s var(--hs-ease);
}
.hs-faq__sign::before { top: 9px; left: 0; width: 20px; height: 2px; }
.hs-faq__sign::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.hs-faq__item.is-open .hs-faq__sign::after { transform: rotate(90deg); opacity: 0; }
.hs-faq__a { display: none; padding: 0 24px 22px; font-size: .96rem; }
.hs-faq__item.is-open .hs-faq__a { display: block; }

/* ==========================================================================
   16. Final CTA
   ========================================================================== */

.hs-cta {
	position: relative;
	padding: clamp(46px, 6vw, 78px) clamp(28px, 5vw, 68px);
	background:
		radial-gradient(700px 420px at 88% 12%, rgba(46, 138, 158, .5), transparent 62%),
		linear-gradient(140deg, var(--hs-deep), var(--hs-ink) 68%);
	border-radius: var(--hs-r-lg);
	color: var(--hs-steam);
	text-align: center;
	overflow: hidden;
}
.hs-cta h2 { color: var(--hs-white); max-width: 20ch; margin-inline: auto; }
.hs-cta p { max-width: 56ch; margin-inline: auto; opacity: .84; }
.hs-cta .hs-btnrow { justify-content: center; margin-top: 30px; }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.hs-footer { background: var(--hs-ink); color: rgba(201, 227, 232, .78); font-size: .93rem; }
.hs-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: 36px;
	padding-block: clamp(46px, 6vw, 72px) 40px;
}
.hs-footer .hs-brand { color: var(--hs-white); margin-bottom: 14px; }
.hs-footer .hs-brand:hover { color: var(--hs-amazon); }
.hs-footer .hs-brand__mark { color: var(--hs-amazon); }
.hs-footer h4 {
	font-family: var(--hs-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--hs-white);
	margin: 0 0 16px;
}
.hs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hs-footer a { color: rgba(201, 227, 232, .78); }
.hs-footer a:hover { color: var(--hs-amazon); }
.hs-footer__blurb { max-width: 40ch; margin-bottom: 20px; }

.hs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	justify-content: space-between;
	align-items: center;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .84rem;
	color: rgba(201, 227, 232, .6);
}
.hs-footer__legal { max-width: 74ch; line-height: 1.6; }

/* ==========================================================================
   18. Sticky mobile buy bar
   ========================================================================== */

.hs-buybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 16px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--hs-line);
	box-shadow: 0 -8px 26px -18px rgba(12, 38, 48, .5);
	transform: translateY(110%);
	transition: transform .3s var(--hs-ease);
}
.hs-buybar.is-visible { transform: translateY(0); }
.hs-buybar__txt { min-width: 0; }
.hs-buybar__txt b { display: block; color: var(--hs-ink); font-size: .92rem; line-height: 1.3; }
.hs-buybar__txt small { color: var(--hs-muted); font-size: .78rem; }

/* ==========================================================================
   19. Reveal animation
   ========================================================================== */

/* Scoped to .hs-js so content is never hidden when JavaScript is unavailable. */
.hs-js .hs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--hs-ease), transform .7s var(--hs-ease); }
.hs-js .hs-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hs-js .hs-reveal { opacity: 1; transform: none; transition: none; }
	.hs-bar__fill { transform: scaleX(1); transition: none; }
	.hs-page *, .hs-page *::before, .hs-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   20. Inner pages (blog/page fallback)
   ========================================================================== */

.hs-inner { padding-block: clamp(48px, 6vw, 86px); }
.hs-inner__content { max-width: 760px; margin-inline: auto; }
.hs-inner__content h1 { margin-bottom: 1em; }
.hs-inner__content img { border-radius: var(--hs-r-sm); }
.hs-inner__content ul, .hs-inner__content ol { padding-left: 1.3em; }
.hs-inner__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--hs-steam);
	font-family: var(--hs-font-head);
	font-size: 1.15rem;
	color: var(--hs-ink);
}

/* ==========================================================================
   21. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.hs-hero__grid,
	.hs-spec-split,
	.hs-story { grid-template-columns: 1fr; }
	.hs-hero__media { order: -1; max-width: 560px; margin-inline: auto; }
	.hs-hero__frame { aspect-ratio: 5 / 4; }
	.hs-reviews { grid-template-columns: 1fr; }
	.hs-score { position: static; }
	.hs-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.hs-burger { display: block; }
	.hs-header__cta .hs-btn--amazon { display: none; }

	.hs-nav {
		position: fixed;
		inset: 74px 0 0;
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		padding: 26px var(--hs-gutter) 40px;
		background: var(--hs-white);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .3s var(--hs-ease);
		z-index: 89;
	}
	.hs-nav.is-open { transform: translateX(0); }
	.hs-nav ul { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
	.hs-nav a { padding: 14px 16px; font-size: 1.05rem; border-radius: var(--hs-r-sm); }
	.hs-nav > .hs-btn { display: inline-flex; margin-top: 14px; }

	.hs-buybar { display: flex; }
	.hs-footer { padding-bottom: 74px; }

	.hs-hero__badge { position: static; margin: 18px auto 0; max-width: none; }
}

@media (max-width: 520px) {
	body.hs-page { font-size: 16px; }
	.hs-btnrow { flex-direction: column; align-items: stretch; }
	.hs-btnrow .hs-btn { width: 100%; }
	.hs-card, .hs-quote, .hs-cost { padding: 24px 22px; }
	.hs-footer__top { grid-template-columns: 1fr; gap: 28px; }
	.hs-hero__specs { grid-template-columns: repeat(2, 1fr); }
	.hs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media print {
	.hs-header, .hs-buybar, .hs-lightbox, .hs-ticker { display: none !important; }
	body.hs-page { color: #000; }
}